1

src/renderer/components/MusicRelax.vue

@@ -19,7 +19,7 @@
 
     <el-row class="pagin_class">
       <el-col :span="1">&nbsp;</el-col>
-      <el-col :span="22" style="border: 1px solid #e1e1e1; margin-bottom: 60px">
+      <el-col :span="22" style="margin-bottom: 60px">
         <el-table
           :header-cell-style="{
             background: '#66B497',
@@ -86,7 +86,7 @@
                     class="tag"
                     v-for="(item, index) in scope.row.keywords"
                     :key="item.index"
-                    v-show="index < 4"
+                    v-show="index < 3"
                   >
                     <!-- {{ index }} -->
                     {{ item }}
@@ -109,16 +109,16 @@
                 class="change-icon"
                 @click="musicPlay(scope.$index, scope.row)"
               >
-                <img src="../assets/play2.png" alt="" />
+                <span class="play_switch2"></span>
               </div>
               <div
                 v-show="!scope.row.musicFlag"
                 class="change-icon"
                 @click="musicPlay(scope.$index, scope.row)"
               >
-                <img src="../assets/play1.png" alt="" />
+                <span class="play_switch1"></span>
               </div>
-              <p v-show="scope.row.musicFlag">
+              <p v-show="scope.row.musicFlag" style="width: 50%;margin: 0 auto;">
                 {{ timeCo }}
                 <el-progress
                   :text-inside="true"
@@ -650,6 +650,34 @@ export default {
   font-weight: 400;
   color: #0fb577;
   padding: 2px 8px;
-  margin: 0 5px;
+  margin: 8px 5px;
+}
+
+.play_switch1,
+.play_switch2 {
+  display: inline-block;
+  width: 44px;
+  height: 44px;
+  cursor: pointer;
+}
+
+.play_switch1 {
+  background: url(../assets/play1.png) no-repeat center;
+  background-size: cover;
+}
+
+.play_switch2 {
+  background: url(../assets/pause1.png) no-repeat center;
+  background-size: cover;
+}
+
+.play_switch1:hover {
+  background: url(../assets/play2.png) no-repeat center;
+  background-size: cover;
+}
+
+.play_switch2:hover {
+  background: url(../assets/pause2.png) no-repeat center;
+  background-size: cover;
 }
 </style>

src/renderer/components/ScaleListResult.vue

@@ -39,33 +39,34 @@
             <div>&nbsp;</div>
           </el-col>
         </el-row>
-        <el-row>
-          <el-col :span="1">&nbsp;</el-col>
-          <el-col :span="22">
-            <el-col
-              :span="6"
-              v-for="(item, index) in dataList"
-              :key="index"
-              @click="detailP(item.id)"
-            >
-              <div class="card">
-                <img src="../assets/newImage/xl1.png" alt="" class="img_card" />
-                <div style="display: block">
-                  <h3 class="h3_card">{{ item.name }}</h3>
-                  <div class="time_card">
-                    {{ item.testDate }}
-                  </div>
-                  <div class="goDetail">
-                    <a href="javascript:;" @click="queryDetail(item.id)">
-                      查看详情></a
-                    >
-                  </div>
-                  <div>&nbsp;</div>
+        <el-row :gutter="20">
+          <el-col
+            v-for="(item, index) in dataList"
+            :key="index"
+            @click="detailP(item.id)"
+            :span="6"
+            :offset="1"
+            style="margin-right: 20px;"
+          >
+            <div class="card">
+              <img src="../assets/newImage/xl1.png" alt="" class="img_card" />
+              <div style="display: block">
+                <h3 class="h3_card">{{ item.name }}</h3>
+                <div class="time_card">
+                  {{ item.testDate }}
+                </div>
+                <div class="time_card">
+                  {{ item.desc }}
                 </div>
+                <div class="goDetail">
+                  <a href="javascript:;" @click="queryDetail(item.id)">
+                    查看详情></a
+                  >
+                </div>
+                <div>&nbsp;</div>
               </div>
-            </el-col>
+            </div>
           </el-col>
-          <el-col :span="1">&nbsp;</el-col>
         </el-row>
         <el-row> </el-row>
         <!-- <ul>
@@ -173,7 +174,7 @@ export default {
       });
     },
     queryLikeWord() {
-      this.pageNum=1;
+      this.pageNum = 1;
       this.init();
     },
     handleCurrentChange(val) {
@@ -201,7 +202,7 @@ export default {
           }
         }
       );
-    },
+    }
   },
 };
 </script>
@@ -279,7 +280,7 @@ export default {
   color: #57acbb;
 }
 .pageNationBox {
-  margin-bottom:30px;
+  margin-bottom: 30px;
   padding: 20px 10px;
   text-align: center;
 }
@@ -311,30 +312,7 @@ export default {
   display: block !important;
   overflow-y: auto !important;
 }
-.card {
-  background: #fff;
-  box-shadow: 0 3px 6px #57acbb;
-  border-radius: 4px;
-  display: block;
-  margin-left: 20px;
-  margin-right: 20px;
-  margin-bottom: 80px;
-}
-.img_card {
-  width: 100%;
-  height: 100%;
-}
-.h3_card {
-  font-size: 18px;
-  font-family: PingFang SC;
-  font-weight: 500;
-  line-height: 20px;
-  color: #333;
-  margin-left: 9px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+
 .time_card {
   font-size: 12px;
   font-family: PingFang SC;
@@ -347,15 +325,46 @@ export default {
   white-space: nowrap;
 }
 .xl_input >>> .el-input__inner {
-  border: 0;
-  border-radius: 20px;
-  background-color: #f4f4f4;
+  width: 35.4vw;
+  line-height: 64px;
+  background: #eaeaea;
+  border-radius: 30px 30px 30px 30px;
+  opacity: 1;
+  box-sizing: border-box;
+  font-weight: 400;
+  color: #929292;
 }
 .search_card {
-  margin-left: 20px;
   margin-bottom: 20px;
 }
-.navigation_card {
-  margin-left: 20px;
+
+.card {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 24.6vw;
+  height: 20.37vh;
+  padding: 15px 14px;
+  background: #eaeaea;
+  opacity: 1;
+  border-radius: 30px 30px 30px 30px;
+}
+
+.card .img_card {
+  width: 9.9vw;
+  height: 9.9vw;
+  background: #ffffff;
+  border-radius: 20px 20px 20px 20px;
+  opacity: 1;
+  border: 1px solid #f5f5f5;
+}
+
+.h3_card {
+  font-size: 1.1vw;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #0f0f0f;
+  line-height: 40px;
+  letter-spacing: 0.2vw;
 }
 </style>

src/renderer/components/Video.vue

@@ -18,19 +18,19 @@
     </el-row>
 
     <el-row class="mainTable-top-two">
-      <el-col :span="8" v-for="item in list" :key="item.index">
+      <div v-for="item in list" :key="item.index" class="item_warp">
         <div
           class="mainTable-tab"
-          v-bind:style="{ backgroundImage: 'url(' + item.imageUrl + ')' }"
         >
+          <img class="item_cover" :src="item.imageUrl" alt="">
           <img
+            class="play_icon"
             @click="goVideo(item.url, item.id)"
-            style="margin-top: 210px; margin-left: -110px; cursor: pointer"
             src="../assets/newImage/play_bt_xlfs.png"
           />
         </div>
         <span class="mainTable-tab-p">{{ item.name }}</span>
-      </el-col>
+      </div>
     </el-row>
   </div>
 </template>
@@ -89,28 +89,28 @@ export default {
   margin-top: 5%;
 }
 .mainTable-top-two {
-  margin-top: 5%;
-  margin-bottom:30px;
+  display: flex;
+  margin-bottom: 30px;
 }
+
+.item_warp {
+  flex: 1;
+  margin: 0 1.6vw;
+}
+
 .mainTable-tab {
-  margin-left: 50px;
-  margin-right: 50px;
-  border-radius: 5px;
+  position: relative;
   text-align: center;
-  height: 280px;
-  /* margin-bottom: 100px; */
-  /* background: url(../assets/newImage/sp_mb.png) no-repeat; */
-
   background-size: cover;
 }
 .mainTable-tab-p {
-  /* padding-top: 40px; */
   display: block;
-  padding-left: 50px;
+  padding-left: 8px;
   margin-top: 10px;
   margin-bottom: 25px;
-  font-size: 16px;
+  font-size: 1.25vw;
   font-weight: 400;
+  text-align: left;
 }
 .musicTitle {
   display: block;
@@ -123,4 +123,17 @@ export default {
   display: block !important;
   overflow-y: auto !important;
 }
+
+.item_cover {
+  width: 100%;
+  height: auto;
+}
+
+.play_icon {
+  width: 4.1vw;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>

src/renderer/components/VideoDetail.vue

@@ -24,6 +24,7 @@
           x-webkit-airplay="true"
           webkit-playsinline="true"
           :controls="controls"
+          style="border-radius: 16px;"
         >
           <source :src="vodeoUrl" type="video/mp4" />
         </video>

src/renderer/components/psychologicalClinic.vue

@@ -129,7 +129,6 @@
       </div>
       <div class="pageNationBox">
         <el-pagination
-          background
           layout="total,prev, pager, next"
           :total="total"
           :page-size="pageSize"
@@ -470,9 +469,7 @@ export default {
   padding: 2px 8px;
   margin: 0 5px;
 }
-</style>
 
-<style>
 .el-table .warning-row {
   background: #f5f5f5;
 }
@@ -488,4 +485,14 @@ export default {
   > td.el-table__cell {
   background: rgba(223, 246, 237, 1) !important;
 }
+
+::v-deep .el-pager li.active,
+::v-deep .el-pager li:hover {
+  background: #f0f0f0;
+  color: #262626;
+}
+
+::v-deep .el-pager li {
+  color: #8c8c8c;
+}
 </style>