build: 评测数据看板

src/views/charts-components/RadarChart.vue

@@ -43,15 +43,6 @@ const props = defineProps({
 // 是否有对比数据
 const isCompare = props.dataSets?.length > 1;
 
-// let defaultData;
-// let beforeData;
-// if (isCompare) {
-//   defaultData = props.dataSets?.[1];
-//   beforeData = props.dataSets?.[0];
-// } else {
-//   defaultData = props.dataSets?.[0];
-// }
-
 const globalColor = {
   default: "#ffb72d",
   before: "#937dff",

src/views/evaluation/index.vue

@@ -77,14 +77,13 @@ const indicatorsData = ref([
           <el-button size="large" type="primary">查找</el-button>
         </div>
         <div class="result">
-          <ul>
-            <li>
+          <el-scrollbar height="700px">
+            <div v-for="item in 20" :key="item" class="scroll-item">
               <img src="" alt="" />
-              <p>风间彻</p>
+              <p>风间彻{{ item }}</p>
               <p>13726267788</p>
-            </li>
-            <li></li>
-          </ul>
+            </div>
+          </el-scrollbar>
         </div>
       </div>
       <!-- 图表展示-->
@@ -102,7 +101,7 @@ const indicatorsData = ref([
                 height="300px"
                 class="chart"
               />
-              <div class="info center">5D脑电数据模型</div>
+              <div class="info">5D脑电数据模型</div>
             </div>
           </el-col>
           <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
@@ -115,7 +114,13 @@ const indicatorsData = ref([
                 height="300px"
                 class="chart"
               />
-              <div class="info">专注力四维分析</div>
+              <div class="info legend">
+                专注力四维分析
+                <div class="tag">
+                  <span class="t1">首次检测</span>
+                  <span class="t2">最近检测</span>
+                </div>
+              </div>
             </div>
           </el-col>
           <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8"></el-col>
@@ -133,7 +138,7 @@ const indicatorsData = ref([
                 height="300px"
                 class="chart"
               />
-              <div class="info center">5D脑电数据模型</div>
+              <div class="info">5D脑电数据模型</div>
             </div>
           </el-col>
           <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
@@ -145,7 +150,13 @@ const indicatorsData = ref([
                 height="300px"
                 class="chart"
               />
-              <div class="info">3维放松度分析</div>
+              <div class="info legend">
+                3维放松度分析
+                <div class="tag">
+                  <span class="t1">首次检测</span>
+                  <span class="t2">最近检测</span>
+                </div>
+              </div>
             </div>
           </el-col>
           <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
@@ -157,7 +168,13 @@ const indicatorsData = ref([
                 height="300px"
                 class="chart"
               />
-              <div class="info">脑电评估检测指数分析看板</div>
+              <div class="info legend">
+                脑电评估检测指数分析看板
+                <div class="tag">
+                  <span class="t1">首次检测</span>
+                  <span class="t2">最近检测</span>
+                </div>
+              </div>
             </div>
           </el-col>
         </el-row>
@@ -189,7 +206,7 @@ const indicatorsData = ref([
 .student-search {
   box-sizing: border-box;
   width: 342px;
-  min-height: 100%;
+  height: 100%;
   border: 1px solid #e6e8eb;
   border-radius: 30px;
   padding-top: 34px;
@@ -213,7 +230,8 @@ const indicatorsData = ref([
   }
   .result {
     margin-top: 15px;
-    li {
+    height: 700px;
+    .scroll-item {
       position: relative;
       box-sizing: border-box;
       width: 100%;
@@ -264,8 +282,31 @@ const indicatorsData = ref([
       font-size: 14px;
       background: #4284f2;
       color: #ffffff;
-      &.center {
-        text-align: center;
+      text-align: center;
+      &.legend {
+        position: relative;
+        box-sizing: border-box;
+        padding-right: 180px;
+        .tag {
+          position: absolute;
+          top: 0;
+          right: 20px;
+          white-space: nowrap;
+          .t1:before,
+          .t2:before {
+            content: "";
+            display: inline-block;
+            width: 20px;
+            height: 10px;
+            margin: 0 4px 0 10px;
+          }
+          .t1:before {
+            background: #f8b865;
+          }
+          .t2:before {
+            background: #91cc75;
+          }
+        }
       }
     }
   }