Эх сурвалжийг харах

修改学生版首页样式问题

plg 1 сар өмнө
parent
commit
f3f426c98e

+ 16 - 8
src/views/HomeView.vue

@@ -216,15 +216,20 @@ const brightStatusLevel = () => {
 
 
       <div style="display: flex; justify-content: space-around;">
       <div style="display: flex; justify-content: space-around;">
         <div class="home_two_img">
         <div class="home_two_img">
-          <img src="../assets/home/group_six_1.png"
-            style="width: 500px;padding: 20px 40px;background-color: #EFFDFF;border-radius: 20px;box-sizing: border-box;"
-            alt="">
+          <div style="background-color: #EFFDFF;text-align: center;">
+            <img src="../assets/home/group_six_1.png"
+              style="width: auto;height: 35vh; padding: 20px 40px;background-color: #EFFDFF;border-radius: 20px;box-sizing: border-box;"
+              alt="">
+          </div>
+
           <div style="text-align: center;margin-top: 20px;color: #333333;font-weight: 700;">学生心理健康问题的来源</div>
           <div style="text-align: center;margin-top: 20px;color: #333333;font-weight: 700;">学生心理健康问题的来源</div>
           <div class="home_two_des">学生心理健康问题的来源复杂多样,主要包括学业负担、家庭环境(如亲子关系、经济状况)、人际关系(同伴关系、师生关系)以及青春期的生理和心理变化等多重因素。</div>
           <div class="home_two_des">学生心理健康问题的来源复杂多样,主要包括学业负担、家庭环境(如亲子关系、经济状况)、人际关系(同伴关系、师生关系)以及青春期的生理和心理变化等多重因素。</div>
         </div>
         </div>
         <div class="home_two_img">
         <div class="home_two_img">
-          <img src="../assets/home/group_six_2.png" alt=""
-            style="width: 500px;padding: 20px 20px;background-color: #EFFDFF;border-radius: 20px;box-sizing: border-box;">
+          <div style="background-color: #EFFDFF;text-align: center;"> <img src="../assets/home/group_six_2.png" alt=""
+              style="width: auto;height: 35vh;padding: 20px 20px;background-color: #EFFDFF;border-radius: 20px;box-sizing: border-box;">
+          </div>
+
           <div style="text-align: center;margin-top: 20px;color: #333333;font-weight: 700;">大学生抑郁焦虑的风险</div>
           <div style="text-align: center;margin-top: 20px;color: #333333;font-weight: 700;">大学生抑郁焦虑的风险</div>
           <div class="home_two_des">
           <div class="home_two_des">
             有78.52%的学生无抑郁风险,而相比于抑郁,焦虑更可能出现在大学生的生活中,仅有一半的大学生无焦虑风险(54.72%)。其中,不同性别、学校、户口和学段的大学生之间的心理健康状况有显著差异。</div>
             有78.52%的学生无抑郁风险,而相比于抑郁,焦虑更可能出现在大学生的生活中,仅有一半的大学生无焦虑风险(54.72%)。其中,不同性别、学校、户口和学段的大学生之间的心理健康状况有显著差异。</div>
@@ -278,13 +283,15 @@ const brightStatusLevel = () => {
       </div>
       </div>
       <div style="display: flex; justify-content: space-around;position: relative;">
       <div style="display: flex; justify-content: space-around;position: relative;">
         <div class="home_two_img">
         <div class="home_two_img">
-          <img src="../assets/home/group_senven1_new.png" alt="" style="width: 500px;">
+          <img src="../assets/home/group_senven1_new.png" alt=""
+            style="width: 100%;height: 35vh;object-fit: cover;object-position: center;">
           <div class="home_two_des">
           <div class="home_two_des">
             借助专业的心理健康量表和测评工具,学校、家长可以全面、客观地了解学生的心理状态,包括情绪、动机、性格、兴趣、价值观等方面。这有助于及早发现学生可能存在的焦虑、抑郁、自卑等心理问题,从而采取及时有效的干预措施,防止问题进一步恶化。
             借助专业的心理健康量表和测评工具,学校、家长可以全面、客观地了解学生的心理状态,包括情绪、动机、性格、兴趣、价值观等方面。这有助于及早发现学生可能存在的焦虑、抑郁、自卑等心理问题,从而采取及时有效的干预措施,防止问题进一步恶化。
           </div>
           </div>
         </div>
         </div>
         <div class="home_two_img">
         <div class="home_two_img">
-          <img src="../assets/home/group_senven2_new.png" alt="" style="width: 500px;">
+          <img src="../assets/home/group_senven2_new.png" alt=""
+            style="width: 100%;height: 35vh;object-fit: cover;object-position: center;">
           <div class="home_two_des">
           <div class="home_two_des">
             每个学生的心理状态和需求都是独一无二的,借助心理健康评估,学校能够针对学生的个体差异设计个性化的心理健康辅导方案,帮助学生深化自我认知。家长能够深入了解孩子,与学校共同规划心理健康成长路径,携手为孩子构建一个积极健康、充满支持的成长环境。
             每个学生的心理状态和需求都是独一无二的,借助心理健康评估,学校能够针对学生的个体差异设计个性化的心理健康辅导方案,帮助学生深化自我认知。家长能够深入了解孩子,与学校共同规划心理健康成长路径,携手为孩子构建一个积极健康、充满支持的成长环境。
           </div>
           </div>
@@ -456,6 +463,7 @@ body {
   }
   }
 
 
   .home_two_img {
   .home_two_img {
+    margin: 20px;
     padding: 20px;
     padding: 20px;
     box-sizing: border-box;
     box-sizing: border-box;
     box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
     box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
@@ -463,7 +471,7 @@ body {
     border-radius: 20px;
     border-radius: 20px;
 
 
     .home_two_des {
     .home_two_des {
-      width: 460px;
+      // width: 460px;
       padding: 10px 20px 10px 20px;
       padding: 10px 20px 10px 20px;
       color: #818996;
       color: #818996;
       font-size: 16px;
       font-size: 16px;