Browse Source

修改整体底部

plg 6 months ago
parent
commit
5946dafd1f
7 changed files with 142 additions and 53 deletions
  1. 19 11
      src/views/Community.vue
  2. 3 1
      src/views/Home.vue
  3. 76 1
      src/views/HomeView.vue
  4. 17 15
      src/views/Login.vue
  5. 1 1
      src/views/Plan.vue
  6. 22 21
      src/views/Register.vue
  7. 4 3
      src/views/TestRecord.vue

+ 19 - 11
src/views/Community.vue

@@ -407,9 +407,10 @@ onUnmounted(() => {
                                 {{ item.commentContent }}
                             </div>
                             <div class="com_yan">
-                                <img height="40px" src="../assets/kepu/yan.png" @click="subFun(item)" />
+                                <img height="20px" src="../assets/kepu/yan.png" @click="subFun(item)" />
                                 <span>{{ item.count }}</span>
                             </div>
+                            <el-divider content-position="right"></el-divider>
                         </div>
                         <div style="text-align: center" v-if="isLoading">努力加载中...</div>
                         <div style="text-align: center;" v-if="noMore">没有更多了</div>
@@ -509,6 +510,11 @@ onUnmounted(() => {
 </template>
 <style></style>
 <style lang="scss" scoped>
+:deep(.el-divider--horizontal) {
+    margin: 16px 0 !important;
+    opacity: 0.4;
+}
+
 :deep(.el-input__wrapper) {
     align-items: center;
     background-color: #F7F7F7 !important;
@@ -670,9 +676,8 @@ label {
                 .kepu_title_des {
                     font-family: Alibaba PuHuiTi 2.0;
                     font-weight: 600;
-                    font-size: 30px;
+                    font-size: 22px;
                     color: #000000;
-
                 }
 
                 .home_mid_plan_button {
@@ -690,7 +695,7 @@ label {
                         color: #ffffff;
                         background-color: #000000;
 
-                        padding: 8px 30px;
+                        padding: 4px 20px;
                         cursor: pointer;
                         display: flex;
                         align-items: center;
@@ -701,15 +706,16 @@ label {
 
             .com_out {
                 height: 500px;
+                padding-top: 20px;
 
                 .com_title {
-                    margin-top: 40px;
+                    margin-top: 5px;
                     display: flex;
                     flex-direction: row;
                     align-items: center;
 
                     img {
-                        width: 66px
+                        width: 40px
                     }
 
                     .com_des {
@@ -717,12 +723,12 @@ label {
                         display: flex;
                         flex-direction: column;
                         justify-content: space-between;
-                        height: 66px;
+                        height: 40px;
 
                         .com_name {
 
                             font-weight: normal;
-                            font-size: 20px;
+                            font-size: 16px;
                             color: #222222;
 
                         }
@@ -742,16 +748,16 @@ label {
 
                 .com_content {
                     letter-spacing: 3px;
-                    margin-top: 20px;
+                    margin-top: 10px;
                     background-color: #F7F7F7;
                     padding: 10px 20px;
                     border-radius: 15px;
                     line-height: 24px;
+                    font-size: 14px;
                 }
 
                 .com_yan {
-
-                    margin-top: 20px;
+                    margin-top: 10px;
                     display: flex;
                     align-items: center;
                     justify-content: end;
@@ -903,6 +909,8 @@ label {
     }
 }
 
+
+
 // .home_footer_out {
 //     width: 100%;
 //     background-color: #000000;

+ 3 - 1
src/views/Home.vue

@@ -45,7 +45,9 @@ onUnmounted(() => {
     width: 100%;
     // display: flex;
     // background-color: rgb(17, 52, 167);
-    height: 100px;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
 
     .home_footer_out {
         width: 100%;

+ 76 - 1
src/views/HomeView.vue

@@ -10,6 +10,9 @@ const router = useRouter()
 const menuStatus = menuStatusStore();
 menuStatus.saveActiveIndex('1')
 
+//点击查看更多展开科普乐园的标志
+const moreFlag = ref<boolean>(false)
+
 const homeHeaderOut = ref<any>()
 const height = ref<number>()
 //心灵探索高度
@@ -43,7 +46,10 @@ const goView = () => {
 //点击查看更多==跳转到科普乐园
 const goMore = () => {
   //点击查看更多跳转到科普乐园
-  router.push({ name: 'popularizationScience' })
+  // router.push({ name: 'popularizationScience' })
+  //查看更多
+  moreFlag.value = true;
+
 }
 
 //点击圆型图标--显示任务--去看看
@@ -246,6 +252,42 @@ const planNumGet = async () => {
     <div class="get_more">
       <img src="../assets/home/get_more.png" @click="goMore" />
     </div>
+    <div>
+      <div class="kepu_title">
+        <div class="kepu_title_des">
+          失眠抑郁问题科普
+        </div>
+        <div>
+          <img src="../assets/kepu/title_right.png" />
+        </div>
+      </div>
+      <div class="kply_inner_duan1">
+        &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数,每一个人或多或少都会有纠结的时候,
+        所以为了预防和及时了解自己的情况,医学界给出来很多测量方式,
+        像最常见的自我测量答题表,专业的他测量表,以及日常行为的观察,就变得极其普遍和有效。(示例)
+      </div>
+      <div class="kply_inner_duan1">
+        &nbsp; &nbsp; &nbsp;睡眠监测适用于各种睡眠障碍相关性疾病的诊断,比如失眠症、发作性睡病、
+        阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
+        眼动图仪、肌电图仪等,需要进行睡眠检测的患者可以在医生的帮助下,将检查仪器穿戴完毕,然后入睡。
+      </div>
+
+      <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg1.png" />
+
+      <div class="kply_inner_duan1">
+        &nbsp; &nbsp; &nbsp;对于患有抑郁症的人群并不在少数,每一个人或多或少都会有纠结的时候,
+        所以为了预防和及时了解自己的情况,医学界给出来很多测量方式,
+        像最常见的自我测量答题表,专业的他测量表,以及日常行为的观察,就变得极其普遍和有效。(示例)
+      </div>
+      <div class="kply_inner_duan1">
+        &nbsp; &nbsp; &nbsp; 睡眠监测适用于各种睡眠障碍相关性疾病的诊断,比如失眠症、发作性睡病、
+        阻塞性睡眠呼吸暂停综合征、不安腿综合征等。睡眠监测仪器主要包括脑电图仪、
+        眼动图仪、肌电图仪等,需要进行睡眠检测的患者可以在医生的帮助下,将检查仪器穿戴完毕,然后入睡。
+      </div>
+
+      <img width="100%" style="margin-top:40px;" src="../assets/kepu/bg2.png" />
+
+    </div>
     <div class="home_mid_plan" v-show="taskCircleFlag && userInfo.planCurrentNum != 0" @click="openSquare"
       ref="plan_jihua">
       <div class=" badge_custom">
@@ -278,6 +320,7 @@ const planNumGet = async () => {
 
 
 .home_header_out {
+  flex: 1;
   position: relative;
   width: 100%;
   min-width: 1200px;
@@ -644,4 +687,36 @@ const planNumGet = async () => {
     width: 100px;
   }
 }
+
+
+.kepu_title {
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  .kepu_title_des {
+    width: 406px;
+    font-family: Alibaba PuHuiTi 2.0;
+    font-weight: 600;
+    font-size: 30px;
+    color: #48D68E;
+  }
+
+  img {
+    width: 480px;
+  }
+}
+
+.kply_inner_duan1 {
+  margin-top: 0px;
+  font-family: Alibaba PuHuiTi 2.0;
+  font-weight: normal;
+  font-size: 18px;
+  color: #333333;
+  line-height: 30px;
+  letter-spacing: 6px;
+
+}
 </style>

+ 17 - 15
src/views/Login.vue

@@ -109,7 +109,7 @@ const loginFun = async () => {
         </div>
         <div class="kply">
             <div class="kply_inner">
-                <div style="padding: 20px 200px;">
+                <div style="padding: 20px 100px;">
 
                     <div style="margin-top:10px">
                         <div class="user_account">账号:</div>
@@ -146,7 +146,7 @@ const loginFun = async () => {
 :deep(.el-input__wrapper) {
     align-items: center;
     border-radius: 60px !important;
-    border: 8px solid #B2F2D2 !important;
+    border: 2px solid #B2F2D2 !important;
     padding-left: 20px;
 
 }
@@ -156,8 +156,8 @@ const loginFun = async () => {
 }
 
 :deep(.el-input__inner) {
-    height: 40px;
-    font-size: 20px;
+    height: 36px;
+    font-size: 16px;
 }
 
 
@@ -170,6 +170,7 @@ const loginFun = async () => {
     background-repeat: no-repeat;
     background-size: contain;
     background-color: #FAFAFA; //估计是需要动态
+    flex: 1;
 
     //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
     .home_header_inner {
@@ -182,13 +183,14 @@ const loginFun = async () => {
 
 
         .report_top {
-            width: 860px;
+            width: 650px;
+            margin-left: 285px;
             margin-top: 20px;
             display: flex;
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
-            margin-left: 170px;
+            // margin-left: 170px;
 
             .xlts_img {
                 width: 200px;
@@ -197,7 +199,7 @@ const loginFun = async () => {
             .report_jt {
                 display: flex;
                 flex-direction: column;
-                font-size: 40px;
+                font-size: 22px;
                 font-weight: 700;
                 letter-spacing: 3px;
             }
@@ -216,14 +218,14 @@ const loginFun = async () => {
             left: 0;
             right: 0;
             margin: auto;
-            width: 860px;
-            min-height: 500px;
+            width: 650px;
+            min-height: 360px;
 
             background-color: #ffffff;
             border-radius: 40px;
 
             .user_account {
-                font-size: 24px;
+                font-size: 20px;
                 // line-height: 70px;
                 margin-bottom: 10px;
                 letter-spacing: 5px;
@@ -231,8 +233,8 @@ const loginFun = async () => {
 
 
             .start_button_out {
-                margin-top: 60px;
-                margin-bottom: 40px;
+                margin-top: 40px;
+                margin-bottom: 20px;
                 display: flex;
                 flex-direction: row;
                 justify-content: center;
@@ -245,11 +247,11 @@ const loginFun = async () => {
                     color: #ffffff;
                     background-color: #000000;
                     margin-right: 20px;
-                    padding: 5px 80px;
+                    padding: 5px 50px;
                     cursor: pointer;
                     display: flex;
                     align-items: center;
-                    font-size: 18px;
+                    font-size: 16px;
 
                 }
             }
@@ -263,7 +265,7 @@ const loginFun = async () => {
             span {
                 color: #48D68E;
                 cursor: pointer;
-                font-size: 20px;
+                font-size: 16px;
             }
         }
     }

+ 1 - 1
src/views/Plan.vue

@@ -179,7 +179,7 @@ onUnmounted(() => {
                 <div>
                     <div style="padding: 20px 40px;" v-show="planList.length == 0 && isFinshed">
                         <div style="padding:10% 20% ;" v-show="planList.length == 0 && isFinshed">
-                            <img width="100%" src="../assets/planNo.png">
+                            <img width="60%" style="margin-left: 20%;" src="../assets/planNo.png">
                         </div>
                     </div>
 

+ 22 - 21
src/views/Register.vue

@@ -276,14 +276,13 @@ onUnmounted(() => {
             <div class="report_top">
                 <div class="report_jt">
                     <span>用户注册</span>
-
                 </div>
                 <!-- <img class="xlts_img" src="../assets/report/report_top.png" /> -->
             </div>
         </div>
         <div class="kply">
             <div class="kply_inner">
-                <div style="padding: 10px 200px;">
+                <div style="padding: 10px 100px;">
                     <div style="margin-top:20px">
                         <div class="user_account">所属组织架构:</div>
                         <div class="input_cus">
@@ -349,7 +348,7 @@ onUnmounted(() => {
 :deep(.el-input__wrapper) {
     align-items: center;
     border-radius: 60px !important;
-    border: 8px solid #B2F2D2 !important;
+    border: 2px solid #B2F2D2 !important;
     padding-left: 40px;
 
 }
@@ -359,8 +358,8 @@ onUnmounted(() => {
 }
 
 :deep(.el-input__inner) {
-    height: 40px;
-    font-size: 20px;
+    height: 36px;
+    font-size: 16px;
 }
 
 :deep(.el-select__placeholder) {
@@ -369,8 +368,8 @@ onUnmounted(() => {
     top: 50%;
     transform: translateY(-50%);
     width: 100%;
-    line-height: 40px;
-    font-size: 20px;
+    line-height: 30px;
+    font-size: 16px;
 }
 
 :deep(.el-select__selection) {
@@ -381,13 +380,13 @@ onUnmounted(() => {
     gap: 6px;
     min-width: 0;
     position: relative;
-    height: 40px;
+    height: 30px;
 
 }
 
 :deep(.el-select__wrapper) {
     border-radius: 60px;
-    border: 8px solid #B2F2D2;
+    border: 2px solid #B2F2D2;
     padding-left: 20px;
 }
 
@@ -400,7 +399,7 @@ onUnmounted(() => {
     color: var(--el-select-multiple-input-color);
     font-family: inherit;
     font-size: 20px;
-    height: 40px;
+    height: 36px;
     max-width: 100%;
     width: 100% !important;
     outline: none;
@@ -425,11 +424,11 @@ onUnmounted(() => {
 }
 
 :deep(.el-radio.el-radio--large .el-radio__label) {
-    font-size: 24px;
+    font-size: 16px;
 }
 
 :deep(.el-radio.el-radio--large) {
-    height: 50px;
+    height: 36px;
 }
 
 :deep(.el-radio__input.is-checked .el-radio__inner) {
@@ -445,6 +444,7 @@ onUnmounted(() => {
 
 
 .home_header_out {
+    flex: 1;
     // position: relative;
     padding-bottom: 60px;
     width: 100%;
@@ -465,8 +465,9 @@ onUnmounted(() => {
 
 
         .report_top {
-            width: 860px;
-            margin-left: 170px;
+            width: 650px;
+            // width: 860px; 210
+            margin-left: 285px;
             margin-top: 20px;
             display: flex;
             flex-direction: row;
@@ -480,7 +481,7 @@ onUnmounted(() => {
             .report_jt {
                 display: flex;
                 flex-direction: column;
-                font-size: 40px;
+                font-size: 22px;
                 font-weight: 700;
                 letter-spacing: 3px;
             }
@@ -497,13 +498,13 @@ onUnmounted(() => {
             left: 0;
             right: 0;
             margin: auto;
-            width: 860px;
+            width: 650px;
             min-height: 500px;
             background-color: #ffffff;
             border-radius: 40px;
 
             .user_account {
-                font-size: 24px;
+                font-size: 20px;
                 // line-height: 70px;
                 margin-bottom: 10px;
                 letter-spacing: 5px;
@@ -512,7 +513,7 @@ onUnmounted(() => {
 
             .start_button_out {
                 margin-top: 40px;
-                margin-bottom: 40px;
+                margin-bottom: 20px;
                 display: flex;
                 flex-direction: row;
                 justify-content: center;
@@ -525,11 +526,11 @@ onUnmounted(() => {
                     color: #ffffff;
                     background-color: #000000;
                     margin-right: 20px;
-                    padding: 10px 90px;
+                    padding: 10px 50px;
                     cursor: pointer;
                     display: flex;
                     align-items: center;
-                    font-size: 20px;
+                    font-size: 16px;
 
                 }
             }
@@ -543,7 +544,7 @@ onUnmounted(() => {
             span {
                 color: #48D68E;
                 cursor: pointer;
-                font-size: 20px;
+                font-size: 16px;
             }
         }
     }

+ 4 - 3
src/views/TestRecord.vue

@@ -124,7 +124,7 @@ onUnmounted(() => {
                 <!--  -->
                 <div style="padding: 20px 40px;">
                     <div style="padding:10% 20%" v-show="list.length == 0">
-                        <img width="100%" src="../assets/planNo.png">
+                        <img width="60%" style="margin-left: 20%;" src="../assets/planNo.png">
                     </div>
                     <div class="infinite-list-wrapper" style="overflow: auto" v-infinite-scroll="getData">
                         <div v-for="item in list">
@@ -173,6 +173,7 @@ onUnmounted(() => {
     background-image: url('../assets/home/bg_ty.png');
     background-repeat: no-repeat;
     background-size: contain;
+    flex: 1;
     background-color: #FAFAFA; //估计是需要动态
 
     //获取屏幕宽度home_header_out 这个div的宽度--然后宽度*1000再除1920即为当前div的宽度
@@ -208,8 +209,8 @@ onUnmounted(() => {
             // height: 1000px;
             .infinite-list-wrapper {
                 // max-height: 900px;
-                max-height: 500px;
-                min-height: 500px;
+                // max-height: 500px;
+                // min-height: 500px;
 
                 .kepu_title {
                     display: flex;