Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
psychological_camera
/
cpdm_pc
8
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

修改初始版本及优化样式

plg 7 ay önce
ebeveyn
e25e53b6a9
işleme
78842386a4
15 değiştirilmiş dosya ile 266 ekleme ve 200 silme
Görünümü Böl Farklılık Durumunu Göster
  1. BIN
      favicon.png
  2. 1 1
      index.html
  3. BIN
      src/assets/home/trademarkNew.png
  4. BIN
      src/assets/scale/complete1.png
  5. 7 7
      src/components/CpmdFooter.vue
  6. 18 1
      src/components/CpmdHeader.vue
  7. 33 22
      src/views/Cognize.vue
  8. 65 39
      src/views/CognizeFaceDot.vue
  9. 6 8
      src/views/CognizeGoNoGo.vue
  10. 22 18
      src/views/Login.vue
  11. 31 31
      src/views/Register.vue
  12. 28 26
      src/views/Report.vue
  13. 25 22
      src/views/Scale.vue
  14. 11 9
      src/views/ScaleMid.vue
  15. 19 16
      src/views/UpdatePas.vue

BIN
favicon.png
Dosyayı Görüntüle


+ 1 - 1
index.html
Dosyayı Görüntüle 

@@ -2,7 +2,7 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="UTF-8">
 
-    <link rel="icon" href="/favicon.ico">
 
+    <link rel="icon" href="/favicon.png">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Vite App</title>
 
   </head>

BIN
src/assets/home/trademarkNew.png
Dosyayı Görüntüle


BIN
src/assets/scale/complete1.png
Dosyayı Görüntüle


+ 7 - 7
src/components/CpmdFooter.vue
Dosyayı Görüntüle 

@@ -3,7 +3,7 @@
 
 <template>
 
     <!-- 此处最大宽度是1200px -->
 
     <div class="home_footer_inner">
 
-        <div class="home_footer_icon">
 
+        <!-- <div class="home_footer_icon">
 
             <div class="home_footer_company">
 
                 <img width="200px" src="../assets/home/ding_xiang.png" />
 
             </div>
 
@@ -12,9 +12,9 @@
 
                 <img width="30px" style="margin-right:40px" src="../assets/home/dou_yin.png" />
 
                 <img width="40px" src="../assets/home/we_b.png" />
 
             </div>
 
-        </div>
 
+        </div> -->
 
 
-        <div class="home_footer_mi">
 
+        <!-- <div class="home_footer_mi">
 
             <div class="home_footer_fo_des">关于我们</div>
 
             <div class="home_footer_fo_des">我们的服务</div>
 
             <div class="home_footer_fo_des">免费检测</div>
 
@@ -34,13 +34,13 @@
 
             <div class="home_footer_fo_des">免费检测</div>
 
             <div class="home_footer_fo_des">游戏内容</div>
 
             <div class="home_footer_fo_des">联系我们</div>
 
-        </div>
 
-        <div style="width:1200px;height:10px;background-color: #ffffff;">
 
-        </div>
 
+        </div> -->
 
+        <!-- <div style="width:1200px;height:10px;background-color: #ffffff;">
 
+        </div> -->
 
         <div class="home_footer_fo">
 
             <div class="home_footer_fo_des">隐私</div>
 
             <div class="home_footer_fo_des">使用条款</div>
 
-            <div class="home_footer_fo_des">版本所有媒体</div>
 
+            <div class="home_footer_fo_des">Copyright© 北京丁香科技有限公司</div>
 
         </div>
 
     </div>
 
 </template>

+ 18 - 1
src/components/CpmdHeader.vue
Dosyayı Görüntüle 

@@ -68,7 +68,9 @@ const comT = () => {
 
 <template>
 
     <div class="header_p">
 
         <div class="header_image">
 
-            <img style="width: 239px; height: 55px" src="../assets/home/trademark.png"></img>
 
+            <!-- <img style="width: 239px; height: 55px" src="../assets/home/trademarkNew.png"></img> -->
 
+            <!-- <img style="width: 239px; height: 55px" src="../assets/home/trademarkNew.png"></img> -->
 
+            <div>郑州大学大学生心理健康测试</div>
 
         </div>
 
         <el-menu :default-active="activeIndex" class="el-menu-demo" style="display: flex;" mode="horizontal"
 
             :ellipsis="false" @select="handleSelect">
 
@@ -245,6 +247,21 @@ const comT = () => {
 
     .header_image {
 
         // flex: 1
 
         margin-right: 100px;
 
+
 
+        div {
 
+            color: #48D68E;
 
+            font-weight: 700;
 
+            font-size: 24px;
 
+            -webkit-transform: skew(-10deg);
 
+            letter-spacing: 2px;
 
+            /* for Chrome||Safari */
 
+            -ms-transform: skew(-10deg);
 
+            /* for IE */
 
+            -moz-transform: skew(-10deg);
 
+            /* for Firefox */
 
+            -o-transform: skew(-10deg);
 
+            /* for Opera */
 
+        }
 
     }
 
 
     .login_button_bg {

+ 33 - 22
src/views/Cognize.vue
Dosyayı Görüntüle 

@@ -3,6 +3,9 @@ import CpmdHeader from '@/components/CpmdHeader.vue';
 
 
 import { onMounted, onUnmounted, ref } from 'vue'
 
 
+import pdf3 from '../assets/cognize/goNogo.pdf'
 
+import pdf4 from '../assets/cognize/dtc.pdf'
 
+
 
 import { useRoute, useRouter } from 'vue-router';
 
 const router = useRouter()
 
 const route = useRoute()
 
@@ -37,8 +40,10 @@ const viewPDF = () => {
 
     centerDialogVisible.value = true
 
 }
 
 // vue3+vite   实现动态加载图片
 
-const requireImg = (path: string) => {
 
-    return new URL(`${path}`, import.meta.url).href
 
+const requireImg = (name: string) => {
 
+    // return new URL(`${path}`, import.meta.url).href
 
+    // ../assets/cognize/goNogo.pdf
 
+    return new URL(`../assets/cognize/${name}.pdf`, import.meta.url).href
 
 }
 
 
 const startCog = (val: number) => {
 
@@ -72,7 +77,7 @@ onUnmounted(() => {
 
         <div class=" home_header_inner">
 
             <CpmdHeader />
 
             <div style="text-align: center;">
 
-                <img class="xlts_img" style="margin-top:100px" src="../assets/home/other_text.png" />
 
+                <img class="xlts_img" style="margin-top:20px" src="../assets/home/other_text.png" />
 
             </div>
 
         </div>
 
         <div class="kply">
 
@@ -83,9 +88,9 @@ onUnmounted(() => {
 
                     </div>
 
                     <div class="cognize_img_out">
 
                         <img src="../assets/cognize/c1.png" v-show="num == '3'" width=" 100px"
 
-                            style="margin-right: 40px;" />
 
+                            style="margin-right: 20px;" />
 
                         <img src="../assets/cognize/c2.png" v-show="num == '4'" width="100px"
 
-                            style="margin-right: 40px;" />
 
+                            style="margin-right: 20px;" />
 
                         <div class="cognize_des">
 
                             测评介绍：对于患有抑郁症的人群并不在少数，
 
                             每一个人或多或少都会有纠结的时候，
 
@@ -98,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: 40px;">
 
+                        <video width="100%" height="100%" controls style="border-radius: 20px;">
 
                             <source src="../assets/cognize/goNogo.mp4" type="video/mp4">
 
                             <!-- <source src="movie.ogg" type="video/ogg"> -->
 
                             您的浏览器不支持 video 标签。
 
@@ -151,12 +156,18 @@ onUnmounted(() => {
 
         </div>
 
         <el-dialog v-model="centerDialogVisible" title="预览" width="70%" center>
 
             <span>
 
-                <embed width="100%" height=500px v-show="num == '3'" :src="requireImg('../assets/cognize/goNogo.pdf')">
 
+                <!-- :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>
 
-                <embed width="100%" height=500px v-show="num == '4'" :src="requireImg('../assets/cognize/dtc.pdf')">
 
-
 
+                <!-- <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>
 
+                <!-- <embed width="100%" height=500px v-show="num == '4'" :src="pdf4">
 
+                </embed> -->
 
             </span>
 
 
         </el-dialog>
 
@@ -196,37 +207,37 @@ onUnmounted(() => {
 
         width: 1200px;
 
 
         .xlts_img {
 
-            height: 80px;
 
+            height: 40px;
 
         }
 
     }
 
 
     .kply {
 
         width: 100%;
 
-        margin-top: 100px;
 
+        margin-top: 20px;
 
 
         .kply_inner {
 
             min-height: 500px;
 
             left: 0;
 
             right: 0;
 
             margin: auto;
 
-            width: 1200px;
 
+            width: 860px;
 
             // padding: 20px 20px;
 
             background-color: #ffffff;
 
             border-radius: 40px;
 
 
             .cognize_title {
 
 
-                font-size: 30px;
 
+                font-size: 20px;
 
                 letter-spacing: 3px;
 
                 font-weight: 700;
 
-                margin-bottom: 30px;
 
+                margin-bottom: 10px;
 
             }
 
 
             .cognize_title2 {
 
-                font-size: 24px;
 
+                font-size: 20px;
 
                 letter-spacing: 3px;
 
                 // font-weight: 700;
 
-                margin-top: 30px;
 
+                margin-top: 10px;
 
                 margin-bottom: 20px;
 
             }
 
 
@@ -235,9 +246,9 @@ onUnmounted(() => {
 
                 justify-content: center;
 
 
                 .cognize_des {
 
-                    letter-spacing: 3px;
 
-                    line-height: 24px;
 
-                    font-size: 20px;
 
+                    letter-spacing: 2px;
 
+                    line-height: 20px;
 
+                    font-size: 16px;
 
                 }
 
             }
 
 
@@ -263,7 +274,7 @@ onUnmounted(() => {
 
             }
 
 
             .scale_button {
 
-                margin-top: 60px;
 
+                margin-top: 30px;
 
                 margin-bottom: 20px;
 
 
                 .scale_button_inner {
 
@@ -278,11 +289,11 @@ onUnmounted(() => {
 
                         color: #ffffff;
 
                         background-color: #000000;
 
                         margin-right: 20px;
 
-                        padding: 10px 50px;
 
+                        padding: 10px 40px;
 
                         cursor: pointer;
 
                         display: flex;
 
                         align-items: center;
 
-                        font-size: 24px;
 
+                        font-size: 16px;
 
                     }
 
                 }
 
             }

+ 65 - 39
src/views/CognizeFaceDot.vue
Dosyayı Görüntüle 

@@ -59,8 +59,17 @@ const turnsNumber = ref<number>(0)
 
 
 //引入静态资源的方法
 
 // vue3+vite   实现动态加载图片
 
-const requireImg = (path: string) => {
 
-    return new URL(`${path}`, import.meta.url).href
 
+const requireImg = (name: string) => {
 
+    return new URL(`../assets/cognize/ETBnew/${name}.jpg`, import.meta.url).href
 
+}
 
+
 
+//加载Mp3
 
+const requireMp3 = (name: string) => {
 
+    return new URL(`../assets/cognize/${name}.mp3`, import.meta.url).href
 
+}
 
+//加载Wav
 
+const requireWav = (name: string) => {
 
+    return new URL(`../assets/cognize/${name}.wav`, import.meta.url).href
 
 }
 
 
 onMounted(() => {
 
@@ -101,8 +110,8 @@ onMounted(() => {
 
     //判断是否是练习测试
 
     //判断是否是正式测试
 
 
-    clickVoice.value = new Audio(requireImg("../assets/cognize/notify.wav"));
 
-    banClickVoice.value = new Audio(requireImg("../assets/cognize/ban.mp3"));
 
+    clickVoice.value = new Audio(requireWav("notify"));
 
+    banClickVoice.value = new Audio(requireMp3("ban"));
 
 
 
 })
 
@@ -724,16 +733,16 @@ const initImgList = async (rank: any) => {
 
             dotPos: index >= 6 ? "0" : "1", //0-上，1-下
 
             topImg:
 
                 index % 2 == 0
 
-                    ? requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-happy-0${rank + 1}.jpg`)
 
-                    : requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-neutral.jpg`), //图片地址
 
+                    ? requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-happy-0${rank + 1}`)
 
+                    : requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-neutral`), //图片地址
 
             bottomImg:
 
                 index % 2 == 0
 
-                    ? requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-neutral.jpg`)
 
-                    : requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-happy-0${rank + 1}.jpg`), //图片地址
 
+                    ? requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-neutral`)
 
+                    : requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-happy-0${rank + 1}`), //图片地址
 
         });
 
         //害怕-1
 
         blockList1.value.push({
 
@@ -747,16 +756,16 @@ const initImgList = async (rank: any) => {
 
             dotPos: index >= 6 ? "0" : "1", //0-上，1-下
 
             topImg:
 
                 index % 2 == 0
 
-                    ? requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-fear-0${rank + 1}.jpg`)
 
-                    : requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-neutral.jpg`), //图片地址
 
+                    ? requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-fear-0${rank + 1}`)
 
+                    : requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-neutral`), //图片地址
 
             bottomImg:
 
                 index % 2 == 0
 
-                    ? requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-neutral.jpg`)
 
-                    : requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-fear-0${rank + 1}.jpg`), //图片地址
 
+                    ? requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-neutral`)
 
+                    : requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-fear-0${rank + 1}`), //图片地址
 
         });
 
         //开心-2
 
         blockList2.value.push({
 
@@ -770,16 +779,16 @@ const initImgList = async (rank: any) => {
 
             dotPos: index >= 6 ? "0" : "1", //0-上，1-下
 
             topImg:
 
                 index % 2 == 0
 
-                    ? requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-happy-0${rank + 1}-jumble.jpg`)
 
-                    : requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-neutral.jpg`), //图片地址
 
+                    ? requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-happy-0${rank + 1}-jumble`)
 
+                    : requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-neutral`), //图片地址
 
             bottomImg:
 
                 index % 2 == 0
 
-                    ? requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-neutral.jpg`)
 
-                    : requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-happy-0${rank + 1}-jumble.jpg`), //图片地址
 
+                    ? requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-neutral`)
 
+                    : requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-happy-0${rank + 1}-jumble`), //图片地址
 
         });
 
         //害怕-2
 
         blockList2.value.push({
 
@@ -793,16 +802,16 @@ const initImgList = async (rank: any) => {
 
             dotPos: index >= 6 ? "0" : "1", //点位置0-上，1-下
 
             topImg:
 
                 index % 2 == 0
 
-                    ? requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-fear-0${rank + 1}-jumble.jpg`)
 
-                    : requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-neutral.jpg`), //图片地址
 
+                    ? requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-fear-0${rank + 1}-jumble`)
 
+                    : requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-neutral`), //图片地址
 
             bottomImg:
 
                 index % 2 == 0
 
-                    ? requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-neutral.jpg`)
 
-                    : requireImg(`../assets/cognize/ETBnew/${item >= "06" ? "m" + item : "f" + item
 
-                        }-fear-0${rank + 1}-jumble.jpg`), //图片地址
 
+                    ? requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-neutral`)
 
+                    : requireImg(`${item >= "06" ? "m" + item : "f" + item
 
+                        }-fear-0${rank + 1}-jumble`), //图片地址
 
         });
 
     });
 
 }
 
@@ -897,9 +906,9 @@ const userClick = (param: any) => {
 
             :stroke-width="48" :percentage="(cumulation / turnsNumber) * 100" style="width: 50%">
 
             <span style="color: #000;font-size: 20px;"> {{ cumulation }}/{{ turnsNumber }}</span>
 
         </el-progress>
 
-        <Transition name="fade">
 
-            <p :key="countDownStr" v-show="countDownShow" class="imgBox1">{{ countDownStr }}</p>
 
-        </Transition>
 
+        <!-- <Transition name="fade"> -->
 
+        <p :key="countDownStr" v-if="countDownShow" class="countdownStr">{{ countDownStr }}</p>
 
+        <!-- </Transition> -->
 
 
         <div style="text-align: center">
 
             <img v-show="crossShow" src="../assets/cognize/whiteFlag-new.png" alt=""
 
@@ -1010,4 +1019,21 @@ const userClick = (param: any) => {
 
         transform: scale(0.2);
 
     }
 
 }
 
+
 
+.countdownStr {
 
+    font-size: 50px;
 
+    font-weight: 700;
 
+    position: absolute;
 
+    // background-color: antiquewhite;
 
+    ;
 
+    width: 500px;
 
+    height: 40px;
 
+    // background-color: aliceblue;
 
+    text-align: center;
 
+    left: 0;
 
+    right: 0;
 
+    top: 0;
 
+    bottom: 0;
 
+    margin: auto;
 
+}
 
 </style>

+ 6 - 8
src/views/CognizeGoNoGo.vue
Dosyayı Görüntüle 

@@ -378,14 +378,11 @@ onUnmounted(() => {
 
                 </div>
 
                 <div class="colorBlock" :class="{ bgGreen: testList[currentIndex]?.color == 1 }" v-show="showRound">
 
                 </div>
 
-                <Transition name="fade">
 
-                    <p :key="countDownStr" class="countdownStr" v-show="showCountDown">
 
-
 
-                    <div>&nbsp; {{ countDownStr }}</div>
 
-
 
-
 
-                    </p>
 
-                </Transition>
 
+                <!-- <Transition name="fade"> -->
 
+                <p :key="countDownStr" class="countdownStr" v-show="showCountDown">
 
+                <div>&nbsp; {{ countDownStr }}</div>
 
+                </p>
 
+                <!-- </Transition> -->
 
             </div>
 
         </div>
 
     </div>
 
@@ -470,6 +467,7 @@ onUnmounted(() => {
 
     position: absolute;
 
     // background-color: antiquewhite;
 
     ;
 
+    // width: 200px;
 
     height: 40px;
 
     // background-color: aliceblue;
 
     text-align: center;

+ 22 - 18
src/views/Login.vue
Dosyayı Görüntüle 

@@ -104,14 +104,14 @@ const loginFun = async () => {
 
         </div>
 
         <div class="kply">
 
             <div class="kply_inner">
 
-                <div style="padding: 40px 100px;">
 
+                <div style="padding: 20px 200px;">
 
 
-                    <div style="margin-top:40px">
 
+                    <div style="margin-top:10px">
 
                         <div class="user_account">账号:</div>
 
                         <div class="input_cus"> <el-input v-model="account" style="width: 100%" placeholder="请输入账号" />
 
                         </div>
 
                     </div>
 
-                    <div style="margin-top:40px">
 
+                    <div style="margin-top:10px">
 
                         <div class="user_account">密码:</div>
 
                         <div><el-input v-model="password" type="password" style="width: 100%" placeholder="请输入密码"
 
                                 show-password />
 
@@ -142,7 +142,7 @@ const loginFun = async () => {
 
     align-items: center;
 
     border-radius: 60px !important;
 
     border: 8px solid #B2F2D2 !important;
 
-    padding-left: 40px;
 
+    padding-left: 20px;
 
 
 }
 
 
@@ -151,8 +151,8 @@ const loginFun = async () => {
 
 }
 
 
 :deep(.el-input__inner) {
 
-    height: 100px;
 
-    font-size: 40px;
 
+    height: 40px;
 
+    font-size: 20px;
 
 }
 
 
 
@@ -177,11 +177,13 @@ const loginFun = async () => {
 
 
 
         .report_top {
 
-            margin-top: 60px;
 
+            width: 860px;
 
+            margin-top: 20px;
 
             display: flex;
 
             flex-direction: row;
 
             justify-content: space-between;
 
             align-items: center;
 
+            margin-left: 170px;
 
 
             .xlts_img {
 
                 width: 200px;
 
@@ -190,7 +192,7 @@ const loginFun = async () => {
 
             .report_jt {
 
                 display: flex;
 
                 flex-direction: column;
 
-                font-size: 70px;
 
+                font-size: 40px;
 
                 font-weight: 700;
 
                 letter-spacing: 3px;
 
             }
 
@@ -199,30 +201,32 @@ const loginFun = async () => {
 
 
     .kply {
 
         width: 100%;
 
-        margin-top: 100px;
 
+        margin-top: 20px;
 
         // background-color: #FAFAFA;
 
+        margin-bottom: 112px;
 
 
         .kply_inner {
 
+
 
             // padding: 20px 20px;
 
             left: 0;
 
             right: 0;
 
             margin: auto;
 
-            width: 1200px;
 
+            width: 860px;
 
             min-height: 500px;
 
 
             background-color: #ffffff;
 
             border-radius: 40px;
 
 
             .user_account {
 
-                font-size: 40px;
 
-                line-height: 70px;
 
-                margin-bottom: 30px;
 
+                font-size: 24px;
 
+                // line-height: 70px;
 
+                margin-bottom: 10px;
 
                 letter-spacing: 5px;
 
             }
 
 
 
             .start_button_out {
 
-                margin-top: 100px;
 
+                margin-top: 60px;
 
                 margin-bottom: 40px;
 
                 display: flex;
 
                 flex-direction: row;
 
@@ -236,11 +240,11 @@ const loginFun = async () => {
 
                     color: #ffffff;
 
                     background-color: #000000;
 
                     margin-right: 20px;
 
-                    padding: 10px 90px;
 
+                    padding: 5px 80px;
 
                     cursor: pointer;
 
                     display: flex;
 
                     align-items: center;
 
-                    font-size: 40px;
 
+                    font-size: 18px;
 
 
                 }
 
             }
 
@@ -249,12 +253,12 @@ const loginFun = async () => {
 
 
         .go_register {
 
             text-align: right;
 
-            margin-top: 40px;
 
+            margin-top: 20px;
 
 
             span {
 
                 color: #48D68E;
 
                 cursor: pointer;
 
-                font-size: 40px;
 
+                font-size: 20px;
 
             }
 
         }
 
     }

+ 31 - 31
src/views/Register.vue
Dosyayı Görüntüle 

@@ -125,7 +125,6 @@ const registerFun = async () => {
 
 
     }
 
     console.log(prams)
 
-
 
     //如果都通过开始调用方法注册的方法
 
     const res: any = await userRegisterApi(prams)
 
     isLock.value = false
 
@@ -250,20 +249,20 @@ onUnmounted(() => {
 
         </div>
 
         <div class="kply">
 
             <div class="kply_inner">
 
-                <div style="padding: 40px 100px;">
 
-                    <div style="margin-top:40px">
 
+                <div style="padding: 10px 200px;">
 
+                    <div style="margin-top:20px">
 
                         <div class="user_account">所属组织架构:</div>
 
                         <div class="input_cus">
 
                             <el-tree-select v-model="group" placeholder="请选择组织架构" :data="groupData" filterable
 
                                 style="width:100%" />
 
                         </div>
 
                     </div>
 
-                    <div style="margin-top:40px">
 
+                    <div style="margin-top:20px">
 
                         <div class="user_account">账号(学号):</div>
 
                         <div class="input_cus"> <el-input v-model="account" style="width: 100%" placeholder="请输入账号" />
 
                         </div>
 
                     </div>
 
-                    <div style="margin-top:40px;display: flex;">
 
+                    <div style="margin-top:20px;display: flex;">
 
                         <div>
 
                             <div class="user_account">姓名:</div>
 
                             <div class="input_cus"> <el-input v-model="name" style="width: 90%" placeholder="请输入姓名" />
 
@@ -279,13 +278,13 @@ onUnmounted(() => {
 
                         </div>
 
 
                     </div>
 
-                    <div style="margin-top:40px">
 
+                    <div style="margin-top:20px">
 
                         <div class="user_account">密码:</div>
 
                         <div><el-input v-model="password" type="password" style="width: 100%" placeholder="请输入密码"
 
                                 show-password />
 
                         </div>
 
                     </div>
 
-                    <div style="margin-top:40px">
 
+                    <div style="margin-top:20px">
 
                         <div class="user_account">确认密码:</div>
 
                         <div><el-input v-model="comPassword" type="password" style="width: 100%" placeholder="请输入密码"
 
                                 show-password />
 
@@ -326,8 +325,8 @@ onUnmounted(() => {
 
 }
 
 
 :deep(.el-input__inner) {
 
-    height: 100px;
 
-    font-size: 40px;
 
+    height: 40px;
 
+    font-size: 20px;
 
 }
 
 
 :deep(.el-select__placeholder) {
 
@@ -336,8 +335,8 @@ onUnmounted(() => {
 
     top: 50%;
 
     transform: translateY(-50%);
 
     width: 100%;
 
-    line-height: 100px;
 
-    font-size: 40px;
 
+    line-height: 40px;
 
+    font-size: 20px;
 
 }
 
 
 :deep(.el-select__selection) {
 
@@ -348,14 +347,14 @@ onUnmounted(() => {
 
     gap: 6px;
 
     min-width: 0;
 
     position: relative;
 
-    height: 100px;
 
+    height: 40px;
 
 
 }
 
 
 :deep(.el-select__wrapper) {
 
     border-radius: 60px;
 
     border: 8px solid #B2F2D2;
 
-    padding-left: 40px;
 
+    padding-left: 20px;
 
 }
 
 
 :deep(.el-select__input) {
 
@@ -366,8 +365,8 @@ onUnmounted(() => {
 
     border: none;
 
     color: var(--el-select-multiple-input-color);
 
     font-family: inherit;
 
-    font-size: 40px;
 
-    height: 100px;
 
+    font-size: 20px;
 
+    height: 40px;
 
     max-width: 100%;
 
     width: 100% !important;
 
     outline: none;
 
@@ -387,16 +386,16 @@ onUnmounted(() => {
 
 }
 
 
 :deep(.el-radio.el-radio--large .el-radio__inner) {
 
-    height: 44px;
 
-    width: 44px;
 
+    height: 20px;
 
+    width: 20px;
 
 }
 
 
 :deep(.el-radio.el-radio--large .el-radio__label) {
 
-    font-size: 44px;
 
+    font-size: 24px;
 
 }
 
 
 :deep(.el-radio.el-radio--large) {
 
-    height: 100px;
 
+    height: 50px;
 
 }
 
 
 :deep(.el-radio__input.is-checked .el-radio__inner) {
 
@@ -432,7 +431,9 @@ onUnmounted(() => {
 
 
 
         .report_top {
 
-            margin-top: 60px;
 
+            width: 860px;
 
+            margin-left: 170px;
 
+            margin-top: 20px;
 
             display: flex;
 
             flex-direction: row;
 
             justify-content: space-between;
 
@@ -445,7 +446,7 @@ onUnmounted(() => {
 
             .report_jt {
 
                 display: flex;
 
                 flex-direction: column;
 
-                font-size: 70px;
 
+                font-size: 40px;
 
                 font-weight: 700;
 
                 letter-spacing: 3px;
 
             }
 
@@ -454,7 +455,7 @@ onUnmounted(() => {
 
 
     .kply {
 
         width: 100%;
 
-        margin-top: 100px;
 
+        margin-top: 20px;
 
         // background-color: #FAFAFA;
 
 
         .kply_inner {
 
@@ -462,22 +463,21 @@ onUnmounted(() => {
 
             left: 0;
 
             right: 0;
 
             margin: auto;
 
-            width: 1200px;
 
+            width: 860px;
 
             min-height: 500px;
 
-
 
             background-color: #ffffff;
 
             border-radius: 40px;
 
 
             .user_account {
 
-                font-size: 40px;
 
-                line-height: 70px;
 
-                margin-bottom: 30px;
 
+                font-size: 24px;
 
+                // line-height: 70px;
 
+                margin-bottom: 10px;
 
                 letter-spacing: 5px;
 
             }
 
 
 
             .start_button_out {
 
-                margin-top: 100px;
 
+                margin-top: 40px;
 
                 margin-bottom: 40px;
 
                 display: flex;
 
                 flex-direction: row;
 
@@ -495,7 +495,7 @@ onUnmounted(() => {
 
                     cursor: pointer;
 
                     display: flex;
 
                     align-items: center;
 
-                    font-size: 40px;
 
+                    font-size: 20px;
 
 
                 }
 
             }
 
@@ -504,12 +504,12 @@ onUnmounted(() => {
 
 
         .go_register {
 
             text-align: right;
 
-            margin-top: 40px;
 
+            margin-top: 20px;
 
 
             span {
 
                 color: #48D68E;
 
                 cursor: pointer;
 
-                font-size: 40px;
 
+                font-size: 20px;
 
             }
 
         }
 
     }

+ 28 - 26
src/views/Report.vue
Dosyayı Görüntüle 

@@ -242,7 +242,7 @@ onUnmounted(() => {
 
                     <div>
 
                         <div class="report_totol_score">
 
                             <div class="report_bei">
 
-                                <img height="200xp" src="../assets/report/bei.png" />
 
+                                <img height="120xp" src="../assets/report/bei.png" />
 
                                 <div class="score" v-if="reportData.length > 0">{{ reportData[0].dimensionScore }}</div>
 
                             </div>
 
                             <div class="totol_result_des" v-if="reportData.length > 0">
 
@@ -250,11 +250,11 @@ onUnmounted(() => {
 
                             </div>
 
                         </div>
 
                         <div class="report_echarts_out">
 
-                            <div ref="echarts_ld" style="width:500px;height:600px">
 
+                            <div ref="echarts_ld" style="width:400px;height:300px">
 
 
                             </div>
 
                             <div
 
-                                style="display: flex;flex-direction: column;align-items: center;width: 50%; justify-content: space-around;padding-top: 40px;padding-bottom: 40px;">
 
+                                style="display: flex;flex-direction: column;align-items: center;width: 50%; justify-content: space-around;padding-top: 40px;padding-bottom: 20px;">
 
                                 <div class="progress_out" v-for="item, index in echarts_name_list">
 
                                     <span class="progress_out_name" style="width:150px">
 
                                         {{ item.name }}
 
@@ -271,10 +271,11 @@ onUnmounted(() => {
 
                             </div>
 
                         </div>
 
 
-                        <div v-for="item, index in echarts_name_list" style="padding-top:60px">
 
+                        <div v-for="item, index in echarts_name_list" style="padding-top:20px">
 
                             <div class="des_zhishu">{{ item.name }}</div>
 
                             <div class="report_des_out">
 
-                                <div class="score">分数：{{ echarts_data_list[index] }}</div>
 
+                                <div class="score">分数：{{ echarts_data_list[index] }}<span
 
+                                        style="color:#999999;letter-spacing: 0px;">（满分100.00）</span></div>
 
                                 <div class="score">分析报告：</div>
 
                                 <div class="des">{{ echarts_des_list[index] }}</div>
 
                             </div>
 
@@ -317,20 +318,22 @@ onUnmounted(() => {
 
 
 
         .report_top {
 
-            margin-top: 50px;
 
+            margin-left: 170px;
 
+            width: 860px;
 
+            margin-top: 20px;
 
             display: flex;
 
             flex-direction: row;
 
             justify-content: space-between;
 
             align-items: center;
 
 
             .xlts_img {
 
-                width: 200px;
 
+                width: 140px;
 
             }
 
 
             .report_jt {
 
                 display: flex;
 
                 flex-direction: column;
 
-                font-size: 50px;
 
+                font-size: 40px;
 
                 font-weight: 700;
 
                 letter-spacing: 3px;
 
             }
 
@@ -339,7 +342,7 @@ onUnmounted(() => {
 
 
     .kply {
 
         width: 100%;
 
-        margin-top: 100px;
 
+        margin-top: 40px;
 
         // background-color: #FAFAFA;
 
 
         .kply_inner {
 
@@ -347,14 +350,14 @@ onUnmounted(() => {
 
             left: 0;
 
             right: 0;
 
             margin: auto;
 
-            width: 1200px;
 
+            width: 860px;
 
             min-height: 500px;
 
 
             background-color: #ffffff;
 
             border-radius: 40px;
 
 
             .report_totol_score {
 
-                margin-top: 60px;
 
+                margin-top: 20px;
 
                 display: flex;
 
                 flex-direction: row;
 
                 justify-content: space-between;
 
@@ -364,8 +367,6 @@ onUnmounted(() => {
 
                     position: relative;
 
 
                     // background-color: #111111;
 
-
 
-
 
                     .score {
 
                         width: 100%;
 
                         height: 40px;
 
@@ -376,24 +377,24 @@ onUnmounted(() => {
 
                         position: absolute;
 
                         left: 0;
 
                         right: 0;
 
-                        top: -40px;
 
+                        top: -15px;
 
                         bottom: 0;
 
                         margin: auto;
 
                         color: #ffffff;
 
-                        font-size: 40px;
 
+                        font-size: 30px;
 
                     }
 
                 }
 
 
                 .totol_result_des {
 
-                    font-size: 30px;
 
+                    font-size: 20px;
 
                     margin-left: 50px;
 
                     letter-spacing: 3px;
 
-                    line-height: 50px;
 
+                    line-height: 30px;
 
                 }
 
             }
 
 
             .report_echarts_out {
 
-                margin-top: 100px;
 
+                margin-top: 20px;
 
                 background-color: #F7F7F7;
 
                 border-radius: 40px;
 
                 display: flex;
 
@@ -412,7 +413,8 @@ onUnmounted(() => {
 
 
                     .progress_out_name {
 
                         color: #000000;
 
-                        font-weight: 600;
 
+                        font-size: 14px;
 
+
 
                     }
 
 
                     .progress_out_score {
 
@@ -428,35 +430,35 @@ onUnmounted(() => {
 
 
             .des_zhishu {
 
                 color: #222222;
 
-                font-size: 49px;
 
+                font-size: 20px;
 
                 letter-spacing: 3px;
 
             }
 
 
             .report_des_out {
 
-                margin-top: 40px;
 
+                margin-top: 5px;
 
                 background-color: #F7F7F7;
 
                 padding: 20px 40px;
 
                 border-radius: 40px;
 
 
                 .score {
 
                     color: #48D68E;
 
-                    font-size: 30px;
 
-                    line-height: 60px;
 
+                    font-size: 16px;
 
+                    line-height: 24px;
 
                     letter-spacing: 3px;
 
 
                 }
 
 
                 .des {
 
                     color: #000000;
 
-                    font-size: 24px;
 
-                    line-height: 40px;
 
+                    font-size: 16px;
 
+                    line-height: 24px;
 
                     letter-spacing: 3px;
 
                 }
 
 
             }
 
 
             .start_button_out {
 
-                margin-top: 100px;
 
+                margin-top: 40px;
 
                 margin-bottom: 40px;
 
                 display: flex;
 
                 flex-direction: row;

+ 25 - 22
src/views/Scale.vue
Dosyayı Görüntüle 

@@ -225,21 +225,19 @@ onUnmounted(() => {
 
             <div class="report_top">
 
                 <div class="report_jt">
 
                     <span v-show="!isCompleted">{{ flagName }}</span>
 
-                    <span v-show="isCompleted">心灵万花筒测试完成</span>
 
                     <span v-show="!isCompleted" class="des">请根据您的表现回答下列问题，每道题请选择最符合您的情况的选项。</span>
 
-                    <span v-show="isCompleted" class="des">以上测试已完成，请选择进行下一个测试或返回任务。</span>
 
                 </div>
 
                 <img v-show="!isCompleted" class="xlts_img" src="../assets/scale/scale.png" />
 
             </div>
 
-            <el-progress v-show="!isCompleted" :text-inside="true" :stroke-width="20"
 
-                :percentage="(topicIndex / scaleList.length) * 100" color="#48D68E">
 
+            <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 :20px 40px">
 
+                <div style="padding :10px 100px">
 
                     <div v-if="scaleList.length > 0">
 
                         <div class="scale_title">{{ topicIndex }}：{{ scaleList[topicIndex - 1].content }}</div>
 
 
@@ -303,11 +301,11 @@ onUnmounted(() => {
 
 :deep(.el-radio-button__inner) {
 
     width: 100%;
 
     border-radius: 40px !important;
 
-    margin-top: 30px;
 
+    margin-top: 20px;
 
     border: 10px solid #B2F2D2;
 
     border-left: 10px solid #B2F2D2 !important;
 
-    padding: 20px 20px;
 
-    font-size: 20px;
 
+    padding: 10px 10px;
 
+    font-size: 14px;
 
     font-weight: 700;
 
     text-align: left;
 
 
@@ -316,11 +314,11 @@ onUnmounted(() => {
 
 :deep(.el-radio-button__inner:hover) {
 
     width: 100%;
 
     border-radius: 40px !important;
 
-    margin-top: 30px;
 
+    margin-top: 20px;
 
     border: 10px solid #B2F2D2;
 
     border-left: 10px solid #B2F2D2 !important;
 
-    padding: 20px 20px;
 
-    font-size: 20px;
 
+    padding: 10px 10px;
 
+    font-size: 14px;
 
     font-weight: 700;
 
     text-align: left;
 
     color: #000000;
 
@@ -358,29 +356,31 @@ onUnmounted(() => {
 
 
 
         .report_top {
 
-            margin-top: 50px;
 
+            width: 860px;
 
+            margin-left: 170px;
 
+            margin-top: 20px;
 
             display: flex;
 
             flex-direction: row;
 
             justify-content: space-between;
 
             align-items: center;
 
-            margin-bottom: 40px;
 
+            margin-bottom: 20px;
 
 
             .xlts_img {
 
                 margin-right: 100px;
 
-                width: 200px;
 
+                width: 100px;
 
             }
 
 
             .report_jt {
 
                 display: flex;
 
                 flex-direction: column;
 
-                font-size: 50px;
 
+                font-size: 30px;
 
                 font-weight: 700;
 
                 letter-spacing: 3px;
 
 
                 .des {
 
                     color: #888888;
 
                     // opacity: 0.4;
 
-                    font-size: 20px;
 
+                    font-size: 15px;
 
                     letter-spacing: 0px;
 
                     margin-top: 10px;
 
                 }
 
@@ -391,24 +391,27 @@ onUnmounted(() => {
 
     .kply {
 
         width: 100%;
 
         margin-top: 40px;
 
+        margin-bottom: 9px;
 
+        // width: 860px;
 
         // background-color: #FAFAFA;
 
 
         .kply_inner {
 
             // border: 8px solid #B2F2D2;
 
+
 
             min-height: 500px;
 
             left: 0;
 
             right: 0;
 
             margin: auto;
 
-            width: 1200px;
 
+            width: 860px;
 
             // padding: 20px 20px;
 
             background-color: #ffffff;
 
             border-radius: 40px;
 
 
             .scale_title {
 
                 margin-top: 20px;
 
-                font-size: 35px;
 
-                letter-spacing: 4px;
 
-                line-height: 60px;
 
+                font-size: 18px;
 
+                letter-spacing: 2px;
 
+                line-height: 20px;
 
 
                 .scale_radio_group {
 
                     display: flex;
 
@@ -432,11 +435,11 @@ onUnmounted(() => {
 
                         color: #ffffff;
 
                         background-color: #000000;
 
                         margin-right: 20px;
 
-                        padding: 10px 90px;
 
+                        padding: 10px 40px;
 
                         cursor: pointer;
 
                         display: flex;
 
                         align-items: center;
 
-                        font-size: 24px;
 
+                        font-size: 14px;
 
                     }
 
                 }
 
             }

+ 11 - 9
src/views/ScaleMid.vue
Dosyayı Görüntüle 

@@ -199,7 +199,7 @@ onUnmounted(() => {
 
 
                     <div v-show="isCompleted" class="finish_calss">
 
                         <div class="finish_img">
 
-                            <img width="30%" src="../assets/scale/complete.png" />
 
+                            <img width="30%" src="../assets/scale/complete1.png" />
 
                             <div class="finish_font">测试已完成</div>
 
                         </div>
 
                         <div class="scale_button">
 
@@ -317,7 +317,9 @@ onUnmounted(() => {
 
 
 
         .report_top {
 
-            margin-top: 50px;
 
+            width: 860px;
 
+            margin-left: 170px;
 
+            margin-top: 20px;
 
             display: flex;
 
             flex-direction: row;
 
             justify-content: space-between;
 
@@ -326,20 +328,20 @@ onUnmounted(() => {
 
 
             .xlts_img {
 
                 margin-right: 100px;
 
-                width: 200px;
 
+                width: 100px;
 
             }
 
 
             .report_jt {
 
                 display: flex;
 
                 flex-direction: column;
 
-                font-size: 50px;
 
+                font-size: 30px;
 
                 font-weight: 700;
 
                 letter-spacing: 3px;
 
 
                 .des {
 
                     color: #888888;
 
                     // opacity: 0.4;
 
-                    font-size: 20px;
 
+                    font-size: 14px;
 
                     letter-spacing: 0px;
 
                     margin-top: 10px;
 
                 }
 
@@ -349,7 +351,7 @@ onUnmounted(() => {
 
 
     .kply {
 
         width: 100%;
 
-        margin-top: 40px;
 
+        margin-top: 20px;
 
         // background-color: #FAFAFA;
 
 
         .kply_inner {
 
@@ -358,7 +360,7 @@ onUnmounted(() => {
 
             left: 0;
 
             right: 0;
 
             margin: auto;
 
-            width: 1200px;
 
+            width: 860px;
 
             // padding: 20px 20px;
 
             background-color: #ffffff;
 
             border-radius: 40px;
 
@@ -391,11 +393,11 @@ onUnmounted(() => {
 
                         color: #ffffff;
 
                         background-color: #000000;
 
                         margin-right: 20px;
 
-                        padding: 10px 90px;
 
+                        padding: 10px 40px;
 
                         cursor: pointer;
 
                         display: flex;
 
                         align-items: center;
 
-                        font-size: 24px;
 
+                        font-size: 18px;
 
                     }
 
                 }
 
             }

+ 19 - 16
src/views/UpdatePas.vue
Dosyayı Görüntüle 

@@ -136,21 +136,21 @@ const loginFun = async () => {
 
         </div>
 
         <div class="kply">
 
             <div class="kply_inner">
 
-                <div style="padding: 40px 100px;">
 
+                <div style="padding: 20px 200px;">
 
 
-                    <div style="margin-top:40px">
 
+                    <div style="margin-top:20px">
 
                         <div class="user_account">当前密码:</div>
 
                         <div class="input_cus"> <el-input v-model="currentPass" type="password" show-password
 
                                 style="width: 100%" placeholder="请输入密码" />
 
                         </div>
 
                     </div>
 
-                    <div style="margin-top:40px">
 
+                    <div style="margin-top:20px">
 
                         <div class="user_account">新密码:</div>
 
                         <div><el-input v-model="password" type="password" style="width: 100%" placeholder="请输入密码"
 
                                 show-password />
 
                         </div>
 
                     </div>
 
-                    <div style="margin-top:40px">
 
+                    <div style="margin-top:20px">
 
                         <div class="user_account">确认密码:</div>
 
                         <div><el-input v-model="comPassword" type="password" style="width: 100%" placeholder="请输入密码"
 
                                 show-password />
 
@@ -177,7 +177,7 @@ const loginFun = async () => {
 
     align-items: center;
 
     border-radius: 60px !important;
 
     border: 8px solid #B2F2D2 !important;
 
-    padding-left: 40px;
 
+    padding-left: 20px;
 
 
 }
 
 
@@ -186,8 +186,8 @@ const loginFun = async () => {
 
 }
 
 
 :deep(.el-input__inner) {
 
-    height: 100px;
 
-    font-size: 40px;
 
+    height: 40px;
 
+    font-size: 20px;
 
 }
 
 
 
@@ -212,7 +212,9 @@ const loginFun = async () => {
 
 
 
         .report_top {
 
-            margin-top: 60px;
 
+            width: 860px;
 
+            margin-left: 170px;
 
+            margin-top: 20px;
 
             display: flex;
 
             flex-direction: row;
 
             justify-content: space-between;
 
@@ -225,7 +227,7 @@ const loginFun = async () => {
 
             .report_jt {
 
                 display: flex;
 
                 flex-direction: column;
 
-                font-size: 70px;
 
+                font-size: 40px;
 
                 font-weight: 700;
 
                 letter-spacing: 3px;
 
             }
 
@@ -234,7 +236,8 @@ const loginFun = async () => {
 
 
     .kply {
 
         width: 100%;
 
-        margin-top: 100px;
 
+        margin-top: 40px;
 
+        margin-bottom: 78px;
 
         // background-color: #FAFAFA;
 
 
         .kply_inner {
 
@@ -242,22 +245,22 @@ const loginFun = async () => {
 
             left: 0;
 
             right: 0;
 
             margin: auto;
 
-            width: 1200px;
 
+            width: 860px;
 
             min-height: 500px;
 
 
             background-color: #ffffff;
 
             border-radius: 40px;
 
 
             .user_account {
 
-                font-size: 40px;
 
-                line-height: 70px;
 
-                margin-bottom: 30px;
 
+                font-size: 20px;
 
+                // line-height: 70px;
 
+                margin-bottom: 10px;
 
                 letter-spacing: 5px;
 
             }
 
 
 
             .start_button_out {
 
-                margin-top: 100px;
 
+                margin-top: 40px;
 
                 margin-bottom: 40px;
 
                 display: flex;
 
                 flex-direction: row;
 
@@ -275,7 +278,7 @@ const loginFun = async () => {
 
                     cursor: pointer;
 
                     display: flex;
 
                     align-items: center;
 
-                    font-size: 40px;
 
+                    font-size: 20px;
 
 
                 }
 
             }