修改心理放松主页

src/renderer/components/Relax.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="relax-bg">
     <el-row class="mainTable-top-two">
-      <el-col :span="2"> &nbsp; </el-col>
-      <el-col :span="20">
+      <!-- <el-col :span="20">
         <el-row>
-          <el-col :span="12"><div class="table-view" @click='pageUrl("/menu/scaleListResult")'>量表报告查看</div></el-col>
+          <el-col :span="12"><div class="table-view" >量表报告查看</div></el-col>
           <el-col :span="12"><div class="music-relax" @click='pageUrl("/menu/musicRelax")'>音乐放松</div></el-col>
         </el-row>
         <el-row>
@@ -14,14 +13,26 @@
           >
           <el-col :span="8"><div class="health" @click='pageUrl("/menu/healthKnowledge")'>健康常识</div></el-col>
         </el-row>
-      </el-col>
+      </el-col> -->
       <div class="menu_list">
-        <div class="menu_item1"></div>
-        <div class="menu_item1"></div>
-        <div class="menu_item1"></div>
-        <div class="menu_item1"></div>
+        <div class="menu_item1" @click="pageUrl('/menu/scaleListResult')">
+          <img src="../assets/newImage/relax1.png" alt="" />
+        </div>
+        <div class="section_tow">
+          <div class="menu_item" @click="pageUrl('/menu/video')" style="margin:0 0 6.66vh 2.8vw">
+            <img src="../assets/newImage/relax2.png" alt="" />
+          </div>
+          <div class="menu_item" @click="pageUrl('/menu/psychologicalClinic')" style="margin:0 0 6.66vh 1vw">
+            <img src="../assets/newImage/relax3.png" alt="" />
+          </div>
+          <div class="menu_item" @click="pageUrl('/menu/psychologicalClinic')">
+            <img src="../assets/newImage/relax4.png" alt="" />
+          </div>
+          <div class="menu_item" @click="pageUrl('/menu/healthKnowledge')">
+            <img src="../assets/newImage/relax5.png" alt="" />
+          </div>
+        </div>
       </div>
-      <el-col :span="2"> &nbsp; </el-col>
       <!-- <el-col :span="12" v-for="item in list" :key="item.index">
         <div class="mainTable-tab" @click="goMusic(item.url)">
           <p class="mainTable-tab-p">{{ item.name }}</p>
@@ -39,13 +50,13 @@ export default {
         { name: "音乐放松", url: "/musicRelax" },
         { name: "呼吸放松", url: "/video" },
         { name: "心理门诊", url: "/psychologicalClinic" },
-         { name: "健康常识", url: "/healthKnowledge" },
+        { name: "健康常识", url: "/healthKnowledge" },
       ],
     };
   },
   methods: {
-    pageUrl(url){
-      this.$router.push({path:url});
+    pageUrl(url) {
+      this.$router.push({ path: url });
     },
     goBack() {
       this.$router.go(-1);
@@ -58,7 +69,7 @@ export default {
   /* margin-top: 5%; */
 }
 .mainTable-top-two {
-  padding-top: 10%;
+  padding-top: 10vh;
 }
 .mainTable-tab {
   cursor: pointer;
@@ -74,7 +85,8 @@ export default {
   padding-top: 40px;
 }
 .relax-bg {
-  background: url(../assets/newImage/relax_bg.png);
+  /* background: url(../assets/newImage/relax_bg.png); */
+  background: #ffffff;
   background-size: cover;
   height: 95vh;
 }
@@ -149,4 +161,38 @@ export default {
   padding-top: 40px;
   cursor: pointer;
 }
+
+.menu_item1 {
+  width: 21.66vw;
+}
+
+.menu_item1 img {
+  width: 100%;
+  height: auto;
+}
+
+.menu_item {
+  width: 19.01vw;
+}
+
+.menu_item img {
+  width: 100%;
+}
+
+.menu_list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 77.9vw;
+  height: 84.8vh;
+  background: url(../assets/newImage/relax_bg.png) no-repeat center;
+  background-size: cover;
+  margin-left: 3.2vw;
+}
+
+.section_tow {
+  width: 46.87vw;
+  display: flex;
+  flex-wrap: wrap;
+}
 </style>