修改样式

src/views/Cognize.vue

@@ -103,7 +103,7 @@ onUnmounted(() => {
                     <div class="cognize_title2"> {{ flagName }}演示视频：</div>
                     <div class="cognize_video" v-show="num == '3'">
                         <!-- poster="../assets/cognize/bg_ty.png" -->
-                        <video width="100%" height="100%" controls style="border-radius: 20px;">
+                        <video width="60%" height="100%" controls style="border-radius: 20px;">
                             <source src="../assets/cognize/goNogo.mp4" type="video/mp4">
                             <!-- <source src="movie.ogg" type="video/ogg"> -->
                             您的浏览器不支持 video 标签。
@@ -111,7 +111,7 @@ onUnmounted(() => {
                     </div>
                     <div class="cognize_video" v-show="num == '4'">
                         <!-- poster="../assets/cognize/bg_ty.png" -->
-                        <video width="100%" height="100%" controls style="border-radius: 40px;">
+                        <video width="60%" height="100%" controls style="border-radius: 40px;">
                             <source src="../assets/cognize/dtc.mp4" type="video/mp4">
                             <!-- <source src="movie.ogg" type="video/ogg"> -->
                             您的浏览器不支持 video 标签。
@@ -143,33 +143,25 @@ onUnmounted(() => {
                                 <div class="scale_button_self" @click="startCog(1)">开始测试</div>
                             </el-col>
                         </el-row>
-
-                        <!-- <iframe width="100%" height=100% src="https://www.runoob.com/tags/tag-video.html">
-
-                        </iframe> -->
-
                     </div>
                 </div>
-
             </div>
-
         </div>
-        <el-dialog v-model="centerDialogVisible" title="预览" width="70%" center>
+        <el-dialog v-model="centerDialogVisible" title="预览" width="70%" top="5vh" center>
             <span>
                 <!-- :src="requireImg('../assets/cognize/goNogo.pdf')" -->
                 <!-- <embed width="100%" height=500px v-show="num == '3'" src='../assets/cognize/goNogo.pdf'>
 
                 </embed> -->
-                <embed width="100%" height=500px v-show="num == '3'" :src="requireImg('goNogo')">
+                <embed width="100%" height=600px v-show="num == '3'" :src="requireImg('goNogo')">
                 </embed>
                 <!-- <embed width="100%" height=500px v-show="num == '3'" :src="pdf3">
                 </embed> -->
-                <embed width="100%" height=500px v-show="num == '4'" :src="requireImg('dtc')">
+                <embed width="100%" height=600px v-show="num == '4'" :src="requireImg('dtc')">
                 </embed>
                 <!-- <embed width="100%" height=500px v-show="num == '4'" :src="pdf4">
                 </embed> -->
             </span>
-
         </el-dialog>
 
     </div>
@@ -252,7 +244,10 @@ onUnmounted(() => {
                 }
             }
 
-            .cognize_video {}
+            .cognize_video {
+                display: flex;
+                justify-content: center;
+            }
 
             .pdf_op {
                 margin-top: 20px;

src/views/HomeView.vue

@@ -469,7 +469,7 @@ const planNumGet = async () => {
   left: 0;
   right: 0;
   margin: auto;
-  margin-top: 40px;
+  margin-top: 20px;
   // position: relative;
 
   .home_mid_plan {
@@ -489,9 +489,9 @@ const planNumGet = async () => {
   .kepu_title {
     text-align: center;
 
-    font-size: 50px;
+    font-size: 30px;
     color: #111111;
-    line-height: 95px;
+    line-height: 40px;
 
     // width: 100%;
     // left: 0;
@@ -500,11 +500,11 @@ const planNumGet = async () => {
   }
 
   .kepu_title_sub {
-    margin-top: 30px;
+    margin-top: 20px;
     text-align: center;
-    font-size: 28px;
+    font-size: 20px;
     color: #48D68E;
-    line-height: 26px;
+    // line-height: 26px;
   }
 
   .man1_group {
@@ -540,14 +540,14 @@ const planNumGet = async () => {
         border: 1px dashed #48D68E;
         border-radius: 40px;
         padding-bottom: 40px;
-        padding-top: 30px;
+        padding-top: 20px;
         padding-left: 100px;
         padding-right: 20px;
         letter-spacing: 6px;
         font-weight: normal;
-        font-size: 24px;
+        font-size: 18px;
         color: #333333;
-        line-height: 40px;
+        line-height: 30px;
       }
     }
   }
@@ -585,14 +585,14 @@ const planNumGet = async () => {
         border: 1px dashed #48D68E;
         border-radius: 40px;
         padding-bottom: 40px;
-        padding-top: 30px;
+        padding-top: 20px;
         padding-left: 20px;
         padding-right: 100px;
         letter-spacing: 6px;
         font-weight: normal;
-        font-size: 24px;
+        font-size: 19px;
         color: #333333;
-        line-height: 40px;
+        line-height: 30px;
       }
     }
   }

src/views/Plan.vue

@@ -378,7 +378,7 @@ onUnmounted(() => {
 
                 span {
                     margin-left: 20px;
-                    font-size: 30px;
+                    font-size: 28px;
                     font-weight: 700;
                     letter-spacing: 3px;
                 }

src/views/PopularizationScience.vue

@@ -146,7 +146,7 @@ onUnmounted(() => {
                     width: 406px;
                     font-family: Alibaba PuHuiTi 2.0;
                     font-weight: 600;
-                    font-size: 44px;
+                    font-size: 30px;
                     color: #48D68E;
                 }
 
@@ -156,13 +156,12 @@ onUnmounted(() => {
             }
 
             .kply_inner_duan1 {
-
-                margin-top: 40px;
+                margin-top: 0px;
                 font-family: Alibaba PuHuiTi 2.0;
                 font-weight: normal;
-                font-size: 24px;
+                font-size: 20px;
                 color: #333333;
-                line-height: 40px;
+                line-height: 30px;
                 letter-spacing: 4px;
 
             }

src/views/Scale.vue

@@ -229,15 +229,15 @@ onUnmounted(() => {
                 </div>
                 <img v-show="!isCompleted" class="xlts_img" src="../assets/scale/scale.png" />
             </div>
-            <el-progress style="width: 860px;margin-left:170px" v-show="!isCompleted" :text-inside="true"
-                :stroke-width="20" :percentage="(topicIndex / scaleList.length) * 100" color="#48D68E">
-                <!-- <el-button type="success" :icon="Check" circle style='z-index: 10;' /> -->
-                <span style="color:#000000">{{ topicIndex }}/{{ scaleList.length }}</span>
-            </el-progress>
+
         </div>
         <div class="kply">
             <div class="kply_inner" :style="{ border: isCompleted ? '8px solid #ffffff' : '8px solid #B2F2D2' }">
                 <div style="padding :10px 100px">
+                    <el-progress v-show="!isCompleted" :text-inside="true" :stroke-width="20"
+                        :percentage="(topicIndex / scaleList.length) * 100" color="#48D68E">
+                        <span style="color:#000000">{{ topicIndex }}/{{ scaleList.length }}</span>
+                    </el-progress>
                     <div v-if="scaleList.length > 0">
                         <div class="scale_title">{{ topicIndex }}：{{ scaleList[topicIndex - 1].content }}</div>
 
@@ -275,7 +275,7 @@ onUnmounted(() => {
 </template>
 <style lang="scss" scoped>
 :deep(.el-progress-bar__outer) {
-    background-color: #ffffff;
+    background-color: #f3f3f3;
     border-radius: 100px;
     height: 6px;
     overflow: hidden;
@@ -301,9 +301,9 @@ onUnmounted(() => {
 :deep(.el-radio-button__inner) {
     width: 100%;
     border-radius: 40px !important;
-    margin-top: 20px;
-    border: 10px solid #B2F2D2;
-    border-left: 10px solid #B2F2D2 !important;
+    margin-top: 10px;
+    border: 4px solid #B2F2D2;
+    border-left: 4px solid #B2F2D2 !important;
     padding: 10px 10px;
     font-size: 14px;
     font-weight: 700;
@@ -314,13 +314,14 @@ onUnmounted(() => {
 :deep(.el-radio-button__inner:hover) {
     width: 100%;
     border-radius: 40px !important;
-    margin-top: 20px;
-    border: 10px solid #B2F2D2;
-    border-left: 10px solid #B2F2D2 !important;
+    margin-top: 10px;
+    border: 4px solid #B2F2D2;
+    border-left: 4px solid #B2F2D2 !important;
     padding: 10px 10px;
     font-size: 14px;
     font-weight: 700;
     text-align: left;
+
     color: #000000;
     background-color: #48D68E;
     color: #ffffff;
@@ -353,8 +354,6 @@ onUnmounted(() => {
         // height: 100px;
         width: 1200px;
 
-
-
         .report_top {
             width: 860px;
             margin-left: 170px;
@@ -363,7 +362,7 @@ onUnmounted(() => {
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 20px;
+            margin-bottom: 0px;
 
             .xlts_img {
                 margin-right: 100px;
@@ -390,7 +389,7 @@ onUnmounted(() => {
 
     .kply {
         width: 100%;
-        margin-top: 40px;
+        margin-top: 10px;
         margin-bottom: 9px;
         // width: 860px;
         // background-color: #FAFAFA;

src/views/TestRecord.vue

@@ -267,7 +267,7 @@ onUnmounted(() => {
 
                     span {
                         margin-left: 20px;
-                        font-size: 30px;
+                        font-size: 28px;
                         font-weight: 700;
                         letter-spacing: 3px;
                     }
@@ -309,16 +309,16 @@ onUnmounted(() => {
 
                     .record_score {
                         color: #48D68E;
-                        margin-bottom: 15px;
-                        font-size: 26px;
+                        margin-bottom: 5px;
+                        font-size: 20px;
                         letter-spacing: 3px;
                     }
 
                     .record_result {
-                        line-height: 50px;
+                        line-height: 30px;
                         color: #48D68E;
-                        margin-bottom: 20px;
-                        font-size: 26px;
+                        margin-bottom: 10px;
+                        font-size: 20px;
                         letter-spacing: 3px;
 
                     }