修改量表测试

src/renderer/components/Evaluation.vue

@@ -27,27 +27,23 @@
         <div>&nbsp;</div>
       </el-col>
       <el-col :span="22">
-        <div>
-          <el-tabs
-            v-model="activeName"
-            @tab-click="handleClick"
-            class="xl_tabs"
+        <div class="my_tabs">
+          <div
+            class="tab_item"
+            :class="{ is_active: 'first' == activeName }"
+            @click="handleClick('first')"
           >
-            <el-tab-pane label="全部量表" name="first"> </el-tab-pane>
-            <el-tab-pane
-              v-for="item in scaleTypeList"
-              :key="item.id"
-              :label="item.name"
-              :name="item.ename"
-            >
-            </el-tab-pane>
-
-            <!-- <el-tab-pane label="疲劳" name="second"></el-tab-pane>
-            <el-tab-pane label="情绪" name="third"></el-tab-pane>
-            <el-tab-pane label="人格特质" name="fourth"></el-tab-pane>
-            <el-tab-pane label="心理综合" name="fifth"></el-tab-pane>
-            <el-tab-pane label="职业发展" name="sixth"></el-tab-pane> -->
-          </el-tabs>
+            全部量表
+          </div>
+          <div
+            class="tab_item"
+            v-for="item in scaleTypeList"
+            :key="item.id"
+            :class="{ is_active: item.ename == activeName }"
+            @click="handleClick(item.ename)"
+          >
+            {{ item.name }}
+          </div>
         </div>
       </el-col>
       <el-col :span="1">
@@ -60,9 +56,9 @@
         <div style="height: 70vh; overflow-y: auto !important">
           <div
             class="scale_item"
-            style="display: flex; margin-bottom: 20px"
             v-for="(item, index) in scaleList"
             :key="index"
+            @click="scaleDetail(item.flag)"
           >
             <img class="xl_img" :src="item.src" />
             <!-- <span>简明精神病量表</span> -->
@@ -71,18 +67,9 @@
               <span class="xl_content">
                 {{ item.description }}
               </span>
-
-              <el-row>
-                <el-col :span="12">
-                  <span class="xl_test">{{ item.testNum }}人测过</span>
-                </el-col>
-                <el-col :span="8">&nbsp;</el-col>
-                <el-col :span="4" style="text-align: right"
-                  ><span class="xl_detail" @click="scaleDetail(item.flag)"
-                    >查看详情</span
-                  ></el-col
-                >
-              </el-row>
+              <div>
+                <span class="xl_test">{{ item.testNum }}人测过</span>
+              </div>
             </div>
           </div>
         </div>
@@ -176,7 +163,8 @@ export default {
     goBack() {
       this.$router.go(-1);
     },
-    handleClick(tab, event) {
+    handleClick(tab) {
+      this.activeName = tab
       this.pageNum = 1;
       this.queryList();
       // console.log(this.activeName)
@@ -238,6 +226,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   width: 65vw;
+  height: 6.7vh;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -250,8 +239,9 @@ export default {
 }
 .xl_img {
   width: 7.6vw;
-  height: auto;
+  height: 7.6vw;
   margin-right: 2.1vw;
+  border-radius: 12px;
 }
 .xl_title {
   font-size: 1.2vw;
@@ -259,7 +249,7 @@ export default {
   font-weight: bold;
   color: #0f0f0f;
   display: block;
-  margin-bottom: 5px;
+  margin-bottom: 1.4vh;
 }
 .xl_free {
   font-weight: 500;
@@ -285,7 +275,44 @@ export default {
 }
 
 .scale_item {
+  display: flex;
   border-bottom: 1px solid #bbc5d4;
-  padding: 2.2vh 0;
+  padding: 2.2vh 0 2.2vh 2.2vh;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.3s linear;
+}
+
+.scale_item:hover {
+  background: #f5f5f5;
+}
+
+.pagin_class {
+  margin-top: 3vh;
+}
+
+.my_tabs {
+  display: flex;
+  padding: 1.67vh 0;
+  border-bottom: 1px solid #BBC5D4;
+}
+
+.tab_item {
+  line-height: 4.8vh;
+  border-radius: 30px 30px 30px 30px;
+  opacity: 1;
+  text-align: center;
+  padding: 0 1.04vw;
+  font-size: 1.45vw;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #0F0F0F;
+  cursor: pointer;
+  transition: all 0.1s linear;
+}
+
+.is_active {
+  background: #1fd18e;
+  color: #ffffff;
 }
 </style>

src/renderer/components/MusicRelax.vue

@@ -18,11 +18,10 @@
           <el-table-column
             prop="musicName"
             label="音乐名称"
-            align="center"
             width="180px"
           >
           </el-table-column>
-          <el-table-column prop="mood" label="情绪" align="center" width="160">
+          <el-table-column prop="mood" label="情绪" width="180">
             <template slot-scope="scope">
               <span
                 class="tag"
@@ -36,7 +35,6 @@
           <el-table-column
             prop="musicStyle"
             label="曲风"
-            align="center"
             width="160"
           >
             <template slot-scope="scope">
@@ -49,7 +47,7 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column prop="keywords" label="关键词" align="center">
+          <el-table-column prop="keywords" label="关键词">
             <template slot-scope="scope">
               <el-popover
                 trigger="hover"
@@ -82,11 +80,10 @@
           <el-table-column
             prop="musicLength"
             label="时长"
-            align="center"
             width="80"
           >
           </el-table-column>
-          <el-table-column label="操作" align="center">
+          <el-table-column label="操作" width="100" align="center">
             <template slot-scope="scope">
               <div
                 v-show="scope.row.musicFlag"

src/renderer/components/ScaleDetail.vue

@@ -1,40 +1,28 @@
 <template>
   <div class="main_right_height">
-    <el-row>
-      <el-col :span="1">&nbsp;</el-col>
-      <el-col :span="22">
-        <div style="display: flex">
-          <i
-            class="el-icon-arrow-left"
-            style="cursor: pointer; line-height: 1.5"
-            @click="goBack()"
-          ></i>
-          <span class="musicTitle">量表详情</span>
-        </div>
-
-        <el-divider></el-divider>
-      </el-col>
-      <el-col :span="1">&nbsp;</el-col>
-    </el-row>
+    <TopDes :flag="true" topDesFont="量表详情"></TopDes>
     <el-row>
       <el-col :span="24" style="text-align: center">
-        <span class="xl_d_title">{{ scaleObj.name }}</span>
+        <p class="xl_d_title">{{ scaleObj.name }}</p>
       </el-col>
       <el-col :span="24" style="text-align: center">
-        <span class="xl_d_number">{{ scaleObj.testNum }}测过</span>
+        <p class="xl_d_number">{{ scaleObj.testNum }}人测评过</p>
       </el-col>
       <el-col :span="24" style="text-align: center; margin-top: 10px">
-        <img width="600px" src="../assets/newImage/xl4.png" />
+        <img class="detail_img" src="../assets/newImage/xl4.png" />
       </el-col>
-      <el-col :span="24" style="text-align: center; margin-top: 10px">
+      <el-col :span="24">
         <div class="mydiv">
-          <p align="left" class="xl_d_des">
+          <p class="xl_d_des">
             {{ scaleObj.description }}
           </p>
         </div>
       </el-col>
-      <el-col :span="24" style="text-align: center; margin-top: 10px;margin-bottom:8px">
-        <el-button class="xl_d_button" @click="startTask"> 开始测试 </el-button>
+      <el-col
+        :span="24"
+        style="text-align: center; margin-top: 10px; margin-bottom: 8px"
+      >
+        <button class="xl_d_button" @click="startTask"></button>
       </el-col>
     </el-row>
   </div>
@@ -44,13 +32,12 @@ export default {
   data() {
     return {
       scaleFlag: "",
-      scaleObj: {
-      },
+      scaleObj: {},
     };
   },
   mounted() {
     this.scaleFlag = sessionStorage.getItem("scaleFlag");
-    this. selectScaleSingle();
+    this.selectScaleSingle();
   },
   methods: {
     selectScaleSingle() {
@@ -62,8 +49,7 @@ export default {
         },
         (res) => {
           if (res.data.code == 200) {
-            
-            that.scaleObj=res.data.data.content[0];
+            that.scaleObj = res.data.data.content[0];
           } else {
             this.$message.error("访问服务器失败！");
           }
@@ -102,54 +88,69 @@ export default {
   margin-bottom: 5px;
 }
 .xl_d_title {
-  font-size: 20px;
-  font-weight: 600px;
+  font-size: 3.7vh;
+  font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+  font-weight: bold;
+  color: #0f0f0f;
+  margin: 2.56vh 0 0;
 }
 .xl_d_number {
+  text-align: right;
   font-size: 12px;
   color: darkgrey;
+  padding-right: 4vw;
 }
 .mydiv {
-  width: 600px;
+  width: 80%;
   text-align: center;
-  display: inline-flex;
+  margin: 7.3vh auto 0;
 }
 .xl_d_des {
-  color: darkgray;
+  font-size: 2.03vh;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #929292;
 }
 .xl_d_button {
-  background: rgb(87, 172, 187);
+  background: url(../assets/newImage//start_btn.png) no-repeat center;
   opacity: 1;
-  border-radius: 18px;
   font-size: 14px;
   font-family: PingFang SC;
   font-weight: 400;
   color: #ffffff;
   margin-bottom: 20px;
+  background-size: contain;
+  width: 13.17vw;
+  height: 5.74vh;
+  opacity: 1;
+  cursor: pointer;
+  border: none;
+  outline: none;
 }
 .xl_d_button:hover {
-  background: rgb(87, 172, 187);
-  opacity: 1;
-  border-radius: 18px;
-  font-size: 14px;
-  font-family: PingFang SC;
-  font-weight: 400;
-  color: #ffffff;
-  margin-bottom: 20px;
+  opacity: 0.8;
+  background: url(../assets/newImage//start_btn.png) no-repeat center;
+  background-size: contain;
+  border: none;
 }
 .xl_d_button:focus {
-  background: rgb(87, 172, 187);
-  opacity: 1;
-  border-radius: 18px;
-  font-size: 14px;
-  font-family: PingFang SC;
-  font-weight: 400;
-  color: #ffffff;
-  margin-bottom: 20px;
+  opacity: 0.7;
+  background: url(../assets/newImage//start_btn.png) no-repeat center;
+  background-size: contain;
+  border: none;
 }
 .main_right_height {
-  height: 95vh !important;
+  height: 100vh !important;
   display: block !important;
   overflow-y: auto !important;
+  background: #ffffff;
+}
+
+.detail_img {
+  display: flex;
+  width: 35.2vw;
+  height: 40.74vh;
+  margin: 0 auto;
+  border-radius: 20px;
 }
 </style>

src/renderer/components/ScaleResultSCl.vue

@@ -31,8 +31,9 @@ export default {
 </script>
 <style scoped>
 .main_right_height {
-  height: 95vh !important;
+  height: 100vh !important;
   display: block !important;
   overflow-y: auto !important;
+  background: #ffffff;
 }
 </style>

src/renderer/components/ScaleTestPage.vue

@@ -1,60 +1,31 @@
 <template>
   <div class="main_right_height">
-    <el-row>
-      <el-col :span="1">&nbsp;</el-col>
-      <el-col :span="22">
-        <div style="display: flex">
-          <i
-            class="el-icon-arrow-left"
-            style="cursor: pointer; line-height: 1.5"
-            @click="goBack()"
-          ></i>
-          <span class="musicTitle">量表详情</span>
-        </div>
-
-        <el-divider></el-divider>
-      </el-col>
-      <el-col :span="1">&nbsp;</el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="1">&nbsp;</el-col>
-      <el-col :span="22" class="scala_pro">
-        <el-progress
-          class="main_progress"
-          :text-inside="true"
-          :stroke-width="16"
-          :color="color_p"
-          :percentage="setItemProgress(scale_index, scale_all)"
-          v-if="!isNaN(parseInt((scale_index / scale_all) * 100))"
-          :format="setItemText(scale_index, scale_all)"
-        ></el-progress
-      ></el-col>
-      <el-col :span="1">&nbsp;</el-col>
-    </el-row>
+    <TopDes :flag="true" topDesFont="量表详情"></TopDes>
     <el-row>
       <el-col :span="1">&nbsp;</el-col>
       <el-col :span="22" style="margin-top: 10px">
-        <span
-          style="
-            width: 338px;
-            height: 28px;
-            font-size: 20px;
-            font-family: PingFang SC;
-            font-weight: 600;
-            line-height: 28px;
-            color: #101010;
-            opacity: 1;
-          "
-          >{{ scale_index + 1 }}.{{ scale_infos[scale_index].answer }}</span
-        >
-
+        <p class="question_index">
+          {{ scale_index + 1 }}/{{ scale_infos.length }}
+        </p>
+        <p class="question_desc">
+          {{ scale_index + 1 }}.{{ scale_infos[scale_index].answer }}
+        </p>
         <!-- 单选题答案区域 -->
         <div
           class="answer"
           v-if="this.scale_infos[scale_index].questionType == '0'"
         >
-          <div>
-            <el-radio
+          <div class="answer_list">
+            <div
+              class="answer_item"
+              v-for="(item, index) in scale_checkItems"
+              :key="index"
+              @click="choiceTriger(item, index)"
+              :class="{'active': item.index === activeIndex}"
+            >
+              {{ item }}
+            </div>
+            <!-- <el-radio
               class="scala_detail_radio"
               style="
                 height: 50px;
@@ -72,19 +43,12 @@
               @change="choiceTriger(item)"
               border
               ><p class="radioSpan">{{ item }}</p></el-radio
-            >
+            > -->
           </div>
         </div>
         <!--3数字答案类型区域-->
         <div class="answer" v-if="scale_infos[scale_index].questionType == '3'">
           <el-slider v-model="radio" style="width:'300px"></el-slider>
-          <!-- <el-input
-            v-model="radio"
-            min=0
-            max="100"
-            type="number"
-            placeholder="请输入数字"
-          ></el-input> -->
         </div>
       </el-col>
       <el-col :span="1">&nbsp;</el-col>
@@ -150,6 +114,7 @@ export default {
       next_and_last_button: true,
       pointColor: "", // 仪表盘指针颜色
       suggestion: "",
+      activeIndex: undefined
     };
   },
   mounted() {
@@ -188,7 +153,8 @@ export default {
         return currentIndex + 1 + "/" + totalIndex;
       };
     },
-    choiceTriger(item) {
+    choiceTriger(item, index) {
+      this.activeIndex = index;
       let that = this;
       that.radioChange(item);
     },
@@ -225,7 +191,7 @@ export default {
         scaleInfoTemp.fillBlank = this.fillBlank;
         scaleInfoTemp.checkbox = this.checkbox;
         this.radio = "";
-        console.log(scaleInfoTemp.questionType)
+        console.log(scaleInfoTemp.questionType);
         if (scaleInfoTemp.questionType === "3") {
           this.radio = 0;
         }
@@ -382,44 +348,43 @@ export default {
 };
 </script>
 <style scoped>
-
-.answer>>> .el-slider__bar {
-    height: 20px;
-    background-color: #409EFF;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-    position: absolute;
+.answer >>> .el-slider__bar {
+  height: 20px;
+  background-color: #409eff;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  position: absolute;
 }
-.answer>>>.el-slider__button-wrapper {
-    height: 36px;
-    width: 36px;
-    z-index: 1001;
-    top: -8px;
-    transform: translateX(-50%);
-    background-color: transparent;
-    text-align: center;
-    user-select: none;
-    line-height: normal;
+.answer >>> .el-slider__button-wrapper {
+  height: 36px;
+  width: 36px;
+  z-index: 1001;
+  top: -8px;
+  transform: translateX(-50%);
+  background-color: transparent;
+  text-align: center;
+  user-select: none;
+  line-height: normal;
 }
- .answer>>>.el-slider__button {
-    width: 25px;
-    height: 25px;
-    border: 2px solid #409EFF;
-    background-color: #FFF;
-    border-radius: 50%;
-    -webkit-transition: .2s;
-    transition: .2s;
-    user-select: none;
+.answer >>> .el-slider__button {
+  width: 25px;
+  height: 25px;
+  border: 2px solid #409eff;
+  background-color: #fff;
+  border-radius: 50%;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+  user-select: none;
 }
-.answer>>>.el-slider__runway {
-    width: 100%;
-    height: 20px;
-    margin: 16px 0;
-    background-color: #E4E7ED;
-    border-radius: 3px;
-    position: relative;
-    cursor: pointer;
-    vertical-align: middle;
+.answer >>> .el-slider__runway {
+  width: 100%;
+  height: 20px;
+  margin: 16px 0;
+  background-color: #e4e7ed;
+  border-radius: 3px;
+  position: relative;
+  cursor: pointer;
+  vertical-align: middle;
 }
 .scala_detail_radio {
   width: 100%;
@@ -475,10 +440,38 @@ p.radioSpan {
   height: 40px;
 }
 .main_right_height {
-  height: 95vh !important;
+  height: 100vh !important;
   display: block !important;
   overflow-y: auto !important;
+  background: #ffffff;
 }
 
+.answer_list {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.answer_item {
+  width: 20.34vw;
+  line-height: 5.92vh;
+  background: #e0f8ef;
+  border-radius: 60px 60px 60px 60px;
+  opacity: 1;
+  padding-left: 2vw;
+  margin: 0 auto 3.05vh;
+  cursor: pointer;
+}
 
+.answer_item.active {
+  background: #0fb577;
+  color: #ffffff;
+}
+
+.question_desc {
+  font-size: 28px;
+  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+  font-weight: 400;
+  color: #0f0f0f;
+  text-align: center;
+}
 </style>

src/renderer/components/TestResults.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <TopDes :flag='true' topDesFont='量表报告'></TopDes>
     <div class="bgClass">
       <div>
         <div class="test-mid">
@@ -34,7 +35,7 @@
                   class="first-floor-scale-title"
                   v-if="testResultData && testResultData.userRecordEntity"
                 >
-                  量表名称：{{ testResultData.userRecordEntity.name }}
+                  量表名称：{{ testResultData.subject.name }}
                 </div>
                 <div class="first-floor-desc">
                   <div class="first-floor-desc-title">报告阅读说明</div>
@@ -784,7 +785,7 @@ export default {
 }
 
 .bgClass {
-  width: 100%;
+  width: 78.75vw;
   /*background: #c7eaf0;*/
   background: url("../assets/scale_report_bg.png") no-repeat center top,
     linear-gradient(180deg, #3ecee6 0%, rgba(166, 232, 245, 0.63) 100%);
@@ -792,6 +793,7 @@ export default {
   display: flex;
   flex-direction: row;
   justify-content: center;
+  margin: 0 auto 60px;
 }
 .test-mid {
   width: 780px;

src/utils/public.css

@@ -135,6 +135,7 @@
     font-family: PingFang SC;
     font-weight: 400;
 }
+
 .xl_animation_button,
 .xl_animation_button:focus {
     background: #1FD18E;
@@ -192,4 +193,25 @@
     background-color: #F5F5F5 !important;
     border: 0px solid #DCDFE6 !important;
     font-size: 12px !important;
+}
+
+::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 6px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #cccccc;
+}
+
+::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #ededed;
 }