心理放松修改

src/renderer/components/HealthKnowledge.vue

@@ -79,12 +79,17 @@
               <el-table
                 :data="dataList"
                 border
-                :header-cell-style="{ background: head_style }"
-                style="width: 100%;margin-bottom:50px"
+                :header-cell-style="{
+                  background: '#66B497',
+                  color: '#FFFFFF',
+                  'letter-spacing': '4px',
+                }"
+                :row-class-name="tableRowClassName"
+                style="width: 100%; margin-bottom: 50px"
               >
                 <el-table-column prop="name" align="center" label="标题">
                 </el-table-column>
-                <el-table-column  label="操作" width="100">
+                <el-table-column label="操作" width="100">
                   <template slot-scope="scope">
                     <el-button
                       @click="handleClick(scope.row)"
@@ -158,9 +163,10 @@ export default {
   //页面初始化函数
   created() {},
   mounted() {
-    this.baseUrlTT = sessionStorage.getItem("urlNews") + "\\resources\\exe\\healthKnowledge\\";
+    this.baseUrlTT =
+      sessionStorage.getItem("urlNews") + "\\resources\\exe\\healthKnowledge\\";
     // this.baseUrlTT =sessionStorage.getItem("urlNews") + "\\exe\\healthKnowledge\\";
-   
+
     //读取文件列表的方法
     this.readFileList();
 
@@ -175,7 +181,7 @@ export default {
     //跳转到详情页
     handleClick(row) {
       this.$router.push({
-        path: '/menu/healthDetail',
+        path: "/menu/healthDetail",
         query: { name: row.name, currentUrl: this.baseUrlTT },
       });
     },
@@ -298,6 +304,14 @@ export default {
         }
       );
     },
+    tableRowClassName({ rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return "warning-row";
+      } else if (rowIndex % 2 === 1) {
+        return "success-row";
+      }
+      return "success-row";
+    },
   },
 };
 </script>
@@ -458,4 +472,45 @@ export default {
 .navigation_card {
   margin-left: 20px;
 }
+
+.el-table {
+  border-radius: 16px 16px 0px 0px;
+  border: none;
+}
+
+.el-table .el-table__cell {
+  padding: 6px;
+}
+
+.tag {
+  display: inline-block;
+  background: #ffffff;
+  border-radius: 40px 40px 40px 40px;
+  opacity: 1;
+  border: 1px solid #0fb577;
+  font-size: 14px;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #0fb577;
+  padding: 2px 8px;
+  margin: 0 5px;
+}
+</style>
+
+<style>
+.el-table .warning-row {
+  background: #f5f5f5;
+}
+
+.el-table .success-row {
+  background: #ffffff;
+}
+
+.el-table--enable-row-hover
+  /deep/
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
+  background: rgba(223, 246, 237, 1) !important;
+}
 </style>

src/renderer/components/MusicRelax.vue

@@ -19,9 +19,13 @@
 
     <el-row class="pagin_class">
       <el-col :span="1">&nbsp;</el-col>
-      <el-col :span="22" style="border: 1px solid #e1e1e1; margin-bottom: 10px">
+      <el-col :span="22" style="border: 1px solid #e1e1e1; margin-bottom: 60px">
         <el-table
-          :header-cell-style="{ background: '#E8F1F3', color: '#606266' }"
+          :header-cell-style="{
+            background: '#66B497',
+            color: '#FFFFFF',
+            'letter-spacing': '4px',
+          }"
           ref="filterTable"
           :data="tableData"
           style="width: 100%"
@@ -34,35 +38,31 @@
             width="180px"
           >
           </el-table-column>
-          <el-table-column
-            prop="musicLength"
-            label="时长"
-            align="center"
-            width="80px"
-          >
-          </el-table-column>
-          <el-table-column prop="mood" label="情绪" align="center">
+          <el-table-column prop="mood" label="情绪" align="center" width="160">
             <template slot-scope="scope">
-              <el-tag
-                size="mini"
-                class="moodStyle"
+              <span
+                class="tag"
                 v-for="item in scope.row.mood"
                 :key="item.index"
               >
                 {{ item }}
-              </el-tag>
+              </span>
             </template>
           </el-table-column>
-          <el-table-column prop="musicStyle" label="曲风" align="center">
+          <el-table-column
+            prop="musicStyle"
+            label="曲风"
+            align="center"
+            width="160"
+          >
             <template slot-scope="scope">
-              <el-tag
-                size="mini"
-                class="moodStyle"
+              <span
+                class="tag"
                 v-for="item in scope.row.musicStyle"
                 :key="item.index"
               >
                 {{ item }}
-              </el-tag>
+              </span>
             </template>
           </el-table-column>
           <el-table-column prop="keywords" label="关键词" align="center">
@@ -73,46 +73,53 @@
                 width="200"
                 transition="fade-in-linear"
               >
-                <el-tag
-                  size="mini"
-                  class="moodStyle"
+                <span
+                  class="tag"
                   v-for="item in scope.row.keywords"
                   :key="item.index"
                 >
                   <!-- {{ index }} -->
                   {{ item }}
-                </el-tag>
+                </span>
                 <div slot="reference" class="name-wrapper">
-                  <el-tag
-                    size="mini"
-                    class="moodStyle"
+                  <span
+                    class="tag"
                     v-for="(item, index) in scope.row.keywords"
                     :key="item.index"
                     v-show="index < 4"
                   >
                     <!-- {{ index }} -->
                     {{ item }}
-                  </el-tag>
+                  </span>
                 </div>
               </el-popover>
             </template>
           </el-table-column>
+          <el-table-column
+            prop="musicLength"
+            label="时长"
+            align="center"
+            width="80"
+          >
+          </el-table-column>
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <div v-show="scope.row.musicFlag" class="change-icon">
-                <i
-                  @click="musicPlay(scope.$index, scope.row)"
-                  class="el-icon-video-pause icon-pointer-music"
-                ></i>
+              <div
+                v-show="scope.row.musicFlag"
+                class="change-icon"
+                @click="musicPlay(scope.$index, scope.row)"
+              >
+                <img src="../assets/play2.png" alt="" />
               </div>
-              <div v-show="!scope.row.musicFlag" class="change-icon">
-                <i
-                  @click="musicPlay(scope.$index, scope.row)"
-                  class="el-icon-video-play icon-pointer-music"
-                ></i>
+              <div
+                v-show="!scope.row.musicFlag"
+                class="change-icon"
+                @click="musicPlay(scope.$index, scope.row)"
+              >
+                <img src="../assets/play1.png" alt="" />
               </div>
               <p v-show="scope.row.musicFlag">
-                {{timeCo}}
+                {{ timeCo }}
                 <el-progress
                   :text-inside="true"
                   :percentage="progressValue"
@@ -132,8 +139,8 @@
 export default {
   data() {
     return {
-      timeCo:'00:00',
-      indexFlag:0,
+      timeCo: "00:00",
+      indexFlag: 0,
       progressValue: 0,
       progressValueFlag: null,
       tableData: [
@@ -454,9 +461,9 @@ export default {
       ],
     };
   },
-  destroyed(){
-      this.tableData[this.indexFlag].audio.pause();
-   clearInterval(this.progressValueFlag) 
+  destroyed() {
+    this.tableData[this.indexFlag].audio.pause();
+    clearInterval(this.progressValueFlag);
   },
   methods: {
     goBack() {
@@ -471,7 +478,7 @@ export default {
       this.$router.go(-1);
     },
     musicPlay(index, row) {
-      this.indexFlag=index;
+      this.indexFlag = index;
       this.tableData[index].musicFlag = !row.musicFlag;
       let mp3 = __static + row.path;
 
@@ -524,19 +531,19 @@ export default {
       }
     },
     computerProcess(i) {
-      this.timeCo='00:00'
-      this.progressValue=0;
+      this.timeCo = "00:00";
+      this.progressValue = 0;
       clearInterval(this.progressValueFlag);
       this.progressValueFlag = setInterval(() => {
         let a = this.tableData[i].audio.currentTime;
         let b = this.tableData[i].audio.duration;
-        
-        this.timeCo= this.formatterTimeFun(Math.ceil(a))
+
+        this.timeCo = this.formatterTimeFun(Math.ceil(a));
         this.progressValue = (a / b) * 100;
         console.log(this.progressValue);
-        if( this.progressValue==100){
+        if (this.progressValue == 100) {
           this.tableData[i].musicFlag = false;
-         clearInterval(this.progressValueFlag);
+          clearInterval(this.progressValueFlag);
         }
       }, 1000);
     },
@@ -566,11 +573,20 @@ export default {
 };
 </script>
 <style>
-.warning-row {
-  background: #142e51;
+.el-table .warning-row {
+  background: #f5f5f5;
+}
+
+.el-table .success-row {
+  background: #ffffff;
 }
-.success-row {
-  background: #f7fafb !important;
+
+.el-table--enable-row-hover
+  /deep/
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
+  background: rgba(223, 246, 237, 1) !important;
 }
 </style>
 
@@ -592,6 +608,12 @@ export default {
   text-align: center;
   font-size: 40px;
 }
+
+.change-icon img {
+  width: 44px;
+  height: auto;
+}
+
 .moodStyle {
   margin-bottom: 10px;
   margin-right: 10px;
@@ -607,4 +629,27 @@ export default {
   display: block !important;
   overflow-y: auto !important;
 }
+
+.el-table {
+  border-radius: 16px 16px 0px 0px;
+  border: none;
+}
+
+.el-table .el-table__cell {
+  padding: 6px;
+}
+
+.tag {
+  display: inline-block;
+  background: #ffffff;
+  border-radius: 40px 40px 40px 40px;
+  opacity: 1;
+  border: 1px solid #0fb577;
+  font-size: 14px;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #0fb577;
+  padding: 2px 8px;
+  margin: 0 5px;
+}
 </style>

src/renderer/components/psychologicalClinic.vue

@@ -36,9 +36,8 @@
             </div>
           </el-col>
           <el-col :span="11">
-           
             <div class="provinceClass">
-                 &nbsp;&nbsp;&nbsp;&nbsp;
+              &nbsp;&nbsp;&nbsp;&nbsp;
               <el-select
                 v-model="provinceCodeNew"
                 filterable
@@ -79,7 +78,12 @@
               <el-table
                 :data="dataList"
                 border
-                :header-cell-style="{ background: head_style }"
+                :header-cell-style="{
+                  background: '#66B497',
+                  color: '#FFFFFF',
+                  'letter-spacing': '4px',
+                }"
+                :row-class-name="tableRowClassName"
                 style="width: 100%"
               >
                 <el-table-column
@@ -274,6 +278,14 @@ export default {
         }
       );
     },
+    tableRowClassName({ rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return "warning-row";
+      } else if (rowIndex % 2 === 1) {
+        return "success-row";
+      }
+      return "success-row";
+    },
   },
 };
 </script>
@@ -281,7 +293,7 @@ export default {
 <style scoped>
 .provinceClass >>> .el-input__inner {
   border-radius: 20px;
-  border:0px;
+  border: 0px;
   background-color: #f4f4f4;
 }
 .wrap {
@@ -356,7 +368,7 @@ export default {
   color: #57acbb;
 }
 .pageNationBox {
-  margin-bottom:30px;
+  margin-bottom: 30px;
   padding: 20px 10px;
   text-align: center;
 }
@@ -435,4 +447,45 @@ export default {
 .navigation_card {
   margin-left: 20px;
 }
+
+.el-table {
+  border-radius: 16px 16px 0px 0px;
+  border: none;
+}
+
+.el-table .el-table__cell {
+  padding: 6px;
+}
+
+.tag {
+  display: inline-block;
+  background: #ffffff;
+  border-radius: 40px 40px 40px 40px;
+  opacity: 1;
+  border: 1px solid #0fb577;
+  font-size: 14px;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #0fb577;
+  padding: 2px 8px;
+  margin: 0 5px;
+}
+</style>
+
+<style>
+.el-table .warning-row {
+  background: #f5f5f5;
+}
+
+.el-table .success-row {
+  background: #ffffff;
+}
+
+.el-table--enable-row-hover
+  /deep/
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
+  background: rgba(223, 246, 237, 1) !important;
+}
 </style>