日常开发

src/assets/styles/index.scss

@@ -32,6 +32,10 @@ ul li {
   list-style: none;
 }
 
+i,em{
+  font-style: normal;
+}
+
 .sports {
   .el-loading-spinner {
     &::before {

src/views/analysis/detail.vue

@@ -30,12 +30,12 @@
               src="@/assets/images/analysis/run1000.png" />
             <img v-if="query.exam_name == 'basketball' ||
               query.exam_name == 'basketballv1'
-            " src="@/assets/images/analysis/basketball.png" />
+              " src="@/assets/images/analysis/basketball.png" />
             <img v-if="query.exam_name == 'football' || query.exam_name == 'footballv1'
-            " src="@/assets/images/analysis/football.png" />
+              " src="@/assets/images/analysis/football.png" />
             <img v-if="query.exam_name == 'badminton' ||
               query.exam_name == 'badmintonv1'
-            " src="@/assets/images/analysis/badminton.png" />
+              " src="@/assets/images/analysis/badminton.png" />
             <img v-if="query.exam_name == 'pingpong'" src="@/assets/images/analysis/pingpong.png" />
             <img v-if="query.exam_name == 'volleyball'" src="@/assets/images/analysis/volleyball.png" />
             <img v-if="query.exam_name == 'solidball'" src="@/assets/images/analysis/solidBall.png" />
@@ -83,12 +83,12 @@
             width:
               (details.std.scores[1] - details.std.scores[0]) * 100 + '%',
           }">及格</span><span class="c" :style="{
-            width:
-              (details.std.scores[2] - details.std.scores[1]) * 100 + '%',
-          }">良好</span><span class="d" :style="{
-            width:
-              (details.std.scores[3] - details.std.scores[2]) * 100 + '%',
-          }">优秀</span>
+  width:
+    (details.std.scores[2] - details.std.scores[1]) * 100 + '%',
+}">良好</span><span class="d" :style="{
+  width:
+    (details.std.scores[3] - details.std.scores[2]) * 100 + '%',
+}">优秀</span>
         </div>
         <div class="drawingItem" v-else>
           <span class="a">不及格</span><span class="b">及格</span><span class="c">良好</span><span class="d">优秀</span>
@@ -150,30 +150,30 @@
     <div class="main-c" v-if="JSON.stringify(details) != '{}' && ['jump'].includes(query.exam_name)">
       <!--立定跳远-->
       <Jump :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['jump'].includes(query.exam_name)
-      " />
+        " />
       <!--实心球-->
       <SolidBall :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['solidball'].includes(query.exam_name)
-      " />
+        " />
       <!--脚环跑步-->
       <Runa :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['runa800', 'runa1000'].includes(query.exam_name)
-      " />
+        " />
       <!--跑步-->
       <Run :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['run50', 'run60', 'run100', 'run200', 'run400', 'run800', 'run1000', 'run15x4', 'run50x8'].includes(query.exam_name)
-      " />
+        " />
       <!--仰卧起坐-->
       <SitUp :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['situp'].includes(query.exam_name)
-      " />
+        " />
       <!--引体向上-->
       <PullUp :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['pullup'].includes(query.exam_name)
-      " />
+        " />
       <!--跳绳类-->
       <RopeSkipping :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['jumprope', 'skiprope'].includes(query.exam_name)
-      " />
+        " />
       <!--球类-->
       <Balls :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         [
@@ -186,21 +186,21 @@
           'badminton',
           'pingpong',
         ].includes(query.exam_name)
-      " />
+        " />
       <!--斜身引体-->
       <SidePullUp :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['sidepullup'].includes(query.exam_name)
-      " />
+        " />
       <!--三级蛙跳-->
       <TriJump :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['trijump'].includes(query.exam_name)
-      " />
+        " />
       <!--铅球-->
       <ShotPut :detailsData="details" v-if="JSON.stringify(details) != '{}' &&
         ['shotput'].includes(query.exam_name)
-      " />
+        " />
       <!--急行跳远-->
       <LongJump :detailsData="details" v-if="JSON.stringify(details) != '{}' && ['longjump'].includes(query.exam_name)
-      " />
+        " />
       <div class="tip">
         <!-- 温馨提示：<br />
         因为光线或人员遮挡等环境问题，导致测试数据偶尔有偏差，最终解释权归卓浦士科技所有。<br />客服热线：<a
@@ -278,7 +278,8 @@ const getDetails = () => {
   let obj = gradeType.value.find((item: any) => {
     return item.value == details.value.grade;
   });
-  details.value.grade_name = obj.label;
+
+  details.value.grade_name = obj?.label || "";
   details.value.unit = dic.unit[query.value.exam_name];
   details.value.examsName = dic.project[query.value.exam_name];
   details.value.image_url_list = details.value.image_url ?
@@ -342,29 +343,14 @@ onMounted(() => {
     font-size: calc(1280px / 106);
   }
 }
-
-ul,
-ol {
-  margin: 0;
-  padding: 0;
-}
-
-ul li {
-  list-style: none;
-}
-
-i{
-  font-style: normal;
-}
-
 .main {
   background: #efefef;
-  padding-bottom: 0.65rem;
-  min-height: calc(100vh - 0.65rem);
+  padding-bottom: 2.6rem;
+  min-height: calc(100vh - 2.6rem);
 
   .main-a {
-    padding: 0.5rem 0.5rem 0 0.5rem;
-    margin-bottom: 0.6rem;
+    padding: 1.5rem 1.5rem 0 1.5rem;
+    margin-bottom: 2.4rem;
 
     .main-a-title {
       display: flex;
@@ -372,16 +358,16 @@ i{
       .project {
         font-weight: bold;
         color: #464646;
-        font-size: 0.55rem;
-        line-height: 0.55rem;
-        padding-right: 0.4rem;
-        margin-right: 0.4rem;
-        border-right: 0.02rem solid #464646;
+        font-size: 2.2rem;
+        line-height: 2.2rem;
+        padding-right: 1.6rem;
+        margin-right: 1.6rem;
+        border-right: 1px solid #464646;
       }
 
       .date {
-        font-size: 0.4rem;
-        line-height: 0.55rem;
+        font-size: 1.6rem;
+        line-height: 2.2rem;
         color: #999999;
         font-weight: normal;
       }
@@ -395,81 +381,81 @@ i{
 
       .main-a-con-left {
         width: 50%;
-        margin-top: 0.5rem;
+        margin-top: 2rem;
 
         .userInfo {
-          margin-bottom: 0.3rem;
+          margin-bottom: 1.2rem;
           display: flex;
           line-height: 1.3;
 
           strong {
-            font-size: 0.45rem;
+            font-size: 1.5rem;
             font-weight: bold;
-            margin-right: 0.5rem;
+            margin-right: 1rem;
             flex-shrink: 0;
           }
 
           span {
-            font-size: 0.4rem;
+            font-size: 1.5rem;
           }
         }
 
         .fraction {
-          margin-bottom: 0.5rem;
+          margin-bottom: 2rem;
 
           strong {
-            font-size: 1.6rem;
+            font-size: 6.4rem;
             color: #39bbbb;
             font-weight: bold;
           }
 
           span {
-            font-size: 0.4rem;
+            font-size: 1.6rem;
             color: #999999;
-            margin-left: 0.1rem;
+            margin-left: 0.4rem;
           }
         }
 
         .score {
-          margin-bottom: 0.3rem;
+          margin-bottom: 1.2rem;
 
           i {
-            padding-left: 0.55rem;
+            padding-left: 2.22rem;
             background: url("@/assets/images/analysis/resultIcon.png") left center no-repeat;
-            background-size: 0.4rem;
-            font-size: 0.35rem;
-            margin-right: 0.3rem;
+            background-size: 1.6rem;
+            font-size: 1.4rem;
+            margin-right: 1.2rem;
           }
 
           strong {
-            font-size: 0.6rem;
+            font-size: 2.4rem;
             color: #464646;
             font-weight: bold;
           }
 
           span {
-            font-size: 0.4rem;
+            font-size: 1.6rem;
             color: #999999;
           }
         }
 
         .ranking {
           i {
-            padding-left: 0.55rem;
+            padding-left: 2.2rem;
             background: url("@/assets/images/analysis/rankingIcon.png") left center no-repeat;
-            background-size: 0.4rem;
-            font-size: 0.35rem;
-            margin-right: 0.3rem;
+            background-size: 1.6rem;
+            font-size: 1.4rem;
+            margin-right: 1.2rem;
           }
 
           strong {
-            font-size: 0.6rem;
+            font-size: 2.4rem;
             color: #464646;
             font-weight: bold;
           }
 
           span {
-            font-size: 0.4rem;
+            font-size: 1.6rem;
             color: #999999;
           }
         }
@@ -490,7 +476,7 @@ i{
 
         img {
           max-width: 88%;
-          max-height: 5rem;
+          max-height: 16rem;
           position: relative;
           z-index: 1;
           margin-bottom: 11vw;
@@ -514,12 +500,12 @@ i{
       }
 
       .grade {
-        width: 1.8rem;
+        width: 7.2rem;
         position: absolute;
         left: 50%;
         top: 40%;
-        margin-left: -0.9rem;
-        margin-top: -0.9rem;
+        margin-left: -3.6rem;
+        margin-top: -3.6rem;
 
         img {
           width: 100%;
@@ -529,32 +515,32 @@ i{
   }
 
   .main-b {
-    padding: 0rem 0.5rem;
-    margin-bottom: 1.1rem;
+    padding: 0rem 1.5rem;
+    margin-bottom: 4.4rem;
 
     .main-b-title {
-      font-size: 0.4rem;
+      font-size: 1.6rem;
       color: #464646;
-      margin-bottom: 0.8rem;
+      margin-bottom: 3.2rem;
     }
 
     .main-b-con {
       display: flex;
-      border-radius: 3rem;
+      border-radius: 12rem;
       text-align: center;
-      font-size: 0.3rem;
+      font-size: 1.2rem;
       color: #ffffff;
       position: relative;
 
       span {
-        height: 0.65rem;
-        line-height: 0.65rem;
+        height: 2.6rem;
+        line-height: 2.6rem;
       }
 
       .a {
         width: 60%;
         background: #dcdcdc;
-        border-radius: 3rem 0 0 3rem;
+        border-radius: 12rem 0 0 12rem;
       }
 
       .b {
@@ -570,13 +556,13 @@ i{
       .d {
         width: 10%;
         background: #39bbbb;
-        border-radius: 0 3rem 3rem 0;
+        border-radius: 0 12rem 12rem 0;
       }
 
       i {
         position: absolute;
         color: #999999;
-        top: 0.7rem;
+        top: 2.8rem;
       }
 
       .scoreType {
@@ -589,17 +575,17 @@ i{
 
       .branchB {
         left: 60%;
-        margin-left: -0.2rem;
+        margin-left: -0.8rem;
       }
 
       .branchC {
         left: 80%;
-        margin-left: -0.2rem;
+        margin-left: -0.8rem;
       }
 
       .branchD {
         left: 90%;
-        margin-left: -0.2rem;
+        margin-left: -0.8rem;
       }
 
       .branchE {
@@ -609,14 +595,14 @@ i{
 
       .currentVal {
         position: absolute;
-        height: 0.7rem;
+        height: 2.8rem;
         left: 0%;
-        top: -0.8rem;
-        border-radius: 0.2rem;
+        top: -3.2rem;
+        border-radius: 0.8rem;
         color: #464646;
-        width: 1rem;
-        margin-left: -0.5rem;
-        font-size: 0.35rem;
+        width: 4rem;
+        margin-left: -2rem;
+        font-size: 1.4rem;
         font-weight: bold;
         background: #c9c9c990;
         display: flex;
@@ -628,7 +614,7 @@ i{
         }
 
         em {
-          font-size: 0.3rem;
+          font-size: 1.2rem;
           color: #999999;
           font-weight: normal;
         }
@@ -637,24 +623,24 @@ i{
           content: "";
           width: 0;
           height: 0;
-          border-left: 0.2rem solid transparent;
-          border-right: 0.2rem solid transparent;
-          border-top: 0.4rem solid #c9c9c990;
+          border-left: 1px solid transparent;
+          border-right: 1px solid transparent;
+          border-top: 2px solid #c9c9c990;
           position: absolute;
-          top: 0.68rem;
+          top: 2.72rem;
           left: 50%;
-          margin-left: -0.204rem;
+          margin-left: -0.816rem;
         }
       }
 
       .currentDian {
-        width: 0.1rem;
-        height: 1.2rem;
+        width: 0.26rem;
+        height: 4.8rem;
         position: absolute;
         top: 50%;
         left: 0%;
-        margin-top: -0.6rem;
-        margin-left: -0.05rem;
+        margin-top: -2.4rem;
+        margin-left: -0.2rem;
         background: #464646;
         color: #464646;
 
@@ -664,17 +650,17 @@ i{
 
           span {
             position: absolute;
-            top: -0.6rem;
-            margin-left: -0.3rem;
-            font-size: 0.4rem;
+            top: -2.4rem;
+            margin-left: -1.2rem;
+            font-size: 1.6rem;
           }
 
           &::before {
             content: "";
             display: block;
-            width: 0.2rem;
-            height: 0.2rem;
-            margin-left: -0.06rem;
+            width: 0.8rem;
+            height: 0.8rem;
+            margin-left: -0.24rem;
             border-radius: 50%;
             background: #464646;
           }
@@ -686,17 +672,17 @@ i{
 
           span {
             position: absolute;
-            bottom: -0.6rem;
-            margin-left: -0.3rem;
-            font-size: 0.4rem;
+            bottom: -2.4rem;
+            margin-left: -1.2rem;
+            font-size: 1.6rem;
           }
 
           &::before {
             content: "";
             display: block;
-            width: 0.2rem;
-            height: 0.2rem;
-            margin-left: -0.06rem;
+            width: 0.8rem;
+            height: 0.8rem;
+            margin-left: -0.24rem;
             border-radius: 50%;
             background: #464646;
           }
@@ -711,48 +697,48 @@ i{
   }
 
   .main-b-margintop {
-    margin-top: 0.8rem;
+    margin-top: 3.2rem;
   }
 
   .main-c {
-    padding: 0rem 0.5rem 0.5rem 0.5rem;
+    padding: 0rem 1.5rem 1.5rem 1.5rem;
 
     .column {
-      margin-bottom: 0.5rem;
+      margin-bottom: 2rem;
 
       .column-title {
-        margin-bottom: 0.4rem;
-        font-size: 0.5rem;
+        margin-bottom: 1.6rem;
+        font-size: 2rem;
         color: #555555;
         font-weight: bold;
       }
 
       .column-con {
-        padding: 0.5rem;
+        padding: 2rem;
         background: #ffffff;
-        border-radius: 0.3rem;
-        font-size: 0.4rem;
+        border-radius: 1.2rem;
+        font-size: 1.6rem;
         line-height: 1.6;
 
         .item {
-          border-bottom: 0.02rem solid #d2d2d2;
-          margin-bottom: 0.4rem;
-          padding-bottom: 0.3rem;
+          border-bottom: 1px solid #d2d2d2;
+          margin-bottom: 1.6rem;
+          padding-bottom: 1.2rem;
 
           .item-title {
-            margin-bottom: 0.4rem;
+            margin-bottom: 1.6rem;
             font-weight: bold;
-            font-size: 0.47rem;
+            font-size: 1.88rem;
             color: #555555;
             display: flex;
             line-height: 1;
 
             i {
-              padding: 0.05rem 0.1rem;
-              font-size: 0.3rem;
-              margin-left: 0.3rem;
-              border-radius: 0.1rem;
-              line-height: 0.35rem;
+              padding: 0.2rem 0.4rem;
+              font-size: 1.2rem;
+              margin-left: 1.2rem;
+              border-radius: 0.4rem;
+              line-height: 1.4rem;
               color: #ffffff;
             }
 
@@ -775,21 +761,21 @@ i{
           }
 
           .item-con {
-            font-size: 0.4rem;
+            font-size: 1.6rem;
             color: #999999;
 
             .item-con-li {
-              margin-bottom: 0.4rem;
+              margin-bottom: 1.6rem;
               position: relative;
 
               .item-con-li-label {
                 position: absolute;
-                left: 0.3rem;
-                top: 0.3rem;
-                border-radius: 0.1rem;
+                left: 1.2rem;
+                top: 1.2rem;
+                border-radius: 0.4rem;
                 color: #ffffff;
-                font-size: 0.3rem;
-                padding: 0.04rem 0.2rem;
+                font-size: 1.2rem;
+                padding: 0.12rem 0.8rem;
               }
 
               .item-con-li-label-bg1 {
@@ -801,14 +787,14 @@ i{
               }
 
               .item-con-li-title {
-                font-size: 0.46rem;
-                margin-bottom: 0.3rem;
+                font-size: 1.84rem;
+                margin-bottom: 1.2rem;
                 color: #464646;
               }
 
               .item-con-li-con {
-                font-size: 0.4rem;
-                margin-bottom: 0.4rem;
+                font-size: 1.6rem;
+                margin-bottom: 1.6rem;
                 color: #999999;
 
                 .item-con-li-con-val {
@@ -816,70 +802,70 @@ i{
                   justify-content: space-around;
 
                   .item-con-li-con-val-li-name1 {
-                    font-size: 0.4rem;
-                    padding-bottom: 0.2rem;
+                    font-size: 1.6rem;
+                    padding-bottom: 0.9rem;
                     display: inline;
-                    border-bottom: 0.08rem solid #ff8165;
+                    border-bottom: 1px solid #ff8165;
                     position: relative;
 
                     &::after {
                       content: "";
-                      width: 0.2rem;
-                      height: 0.2rem;
+                      width: 0.8rem;
+                      height: 0.8rem;
                       border-radius: 100%;
                       background: #ff8165;
                       left: 0;
-                      bottom: -0.13rem;
+                      bottom: -0.52rem;
                       position: absolute;
                     }
 
                     &::before {
                       content: "";
-                      width: 0.2rem;
-                      height: 0.2rem;
+                      width: 0.8rem;
+                      height: 0.8rem;
                       border-radius: 100%;
                       background: #ff8165;
                       right: 0;
-                      bottom: -0.13rem;
+                      bottom: -0.52rem;
                       position: absolute;
                     }
                   }
 
                   .item-con-li-con-val-li-name2 {
-                    font-size: 0.4rem;
-                    padding-bottom: 0.2rem;
+                    font-size: 1.6rem;
+                    padding-bottom: 0.8rem;
                     display: inline;
-                    border-bottom: 0.08rem solid #39bbbb;
+                    border-bottom: 1px solid #39bbbb;
                     position: relative;
 
                     &::after {
                       content: "";
-                      width: 0.2rem;
-                      height: 0.2rem;
+                      width: 0.8rem;
+                      height: 0.8rem;
                       border-radius: 100%;
                       background: #39bbbb;
                       left: 0;
-                      bottom: -0.13rem;
+                      bottom: -0.52rem;
                       position: absolute;
                     }
 
                     &::before {
                       content: "";
-                      width: 0.2rem;
-                      height: 0.2rem;
+                      width: 0.8rem;
+                      height: 0.8rem;
                       border-radius: 100%;
                       background: #39bbbb;
                       right: 0;
-                      bottom: -0.13rem;
+                      bottom: -0.52rem;
                       position: absolute;
                     }
                   }
 
                   .item-con-li-con-val-li-con {
                     font-weight: bold;
-                    font-size: 0.5rem;
+                    font-size: 2rem;
                     display: block;
-                    padding-top: 0.3rem;
+                    padding-top: 1.2rem;
                     color: #555555;
                     text-align: center;
                   }
@@ -887,7 +873,7 @@ i{
 
                 .item-con-li-con-strong {
                   font-weight: 350;
-                  margin-bottom: 0.1rem;
+                  margin-bottom: 0.4rem;
                   color: #666666;
                 }
               }
@@ -917,7 +903,7 @@ i{
     }
 
     .tip {
-      font-size: 0.35rem;
+      font-size: 1.4rem;
       color: #999999;
       line-height: 1.6;
 

src/views/analysis/index.vue

@@ -160,16 +160,6 @@ onMounted(() => {
     font-size: calc(1280px / 106);
   }
 }
-
-ul,
-ol {
-  margin: 0;
-  padding: 0;
-}
-
-ul li {
-  list-style: none;
-}
 .reportList {
   display: flex;
   flex-direction: column;

src/views/ranking/index.vue

@@ -795,20 +795,6 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-html {
-  font-size: calc(100vw / 106);
-}
-
-ul,
-ol {
-  margin: 0;
-  padding: 0;
-}
-
-ul li {
-  list-style: none;
-}
-
 $waiPadding: 6.51rem;
 
 .ranking {