From ecc57c95b3e833ee4168fd7ac8f398e229bbc220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Fri, 5 May 2023 15:48:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E6=88=91=E4=BB=AC=E5=8C=BA=E6=A0=B7=E5=BC=8F=E5=88=9D=E6=AD=A5?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AboutUs.vue | 103 ++++++++++++++++++++++++-------------
 1 file changed, 66 insertions(+), 37 deletions(-)

diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
index c817921..3b1e580 100644
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@@ -11,32 +11,35 @@
         <div class="about_text">
           {{ aboutContent }}
         </div>
-        <el-row :gutter="20" style="padding: 0 4% ">
+        <el-row :gutter="20" style="padding: 0 4%;margin-bottom: 50px">
           <el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
             <p>
-              <b>{{ numItem.num }}</b>
+              <b class="num_bold">{{ numItem.num }}</b>
               <span>{{ numItem.units }}</span>
             </p>
             <p>{{ numItem.title }}</p>
           </el-col>
         </el-row>
         <el-row :gutter="10" style="padding: 0 5% ">
-          <el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex">
+          <el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
+                  :class="'culture_'+imgTextIndex">
             <div class="imgAndText">
               <a :href="imgTextItem.href">
                 <span class="pic">
                   <img :src="imgTextItem.src" alt=""/>
                 </span>
-                <div class="img_box">
-                  <div class="img_innerBox">
-                    <div class="about_en">
+                <span class="img_box">
+                  <span class="img_innerBox">
+                    <span class="its">
+                    <span class="about_en">
                       <span>{{ imgTextItem.boldText }}</span>
                       <span>{{ imgTextItem.enText }}</span>
-                    </div>
+                    </span>
                     <span class="line"></span>
                     <span class="about_cn">{{ imgTextItem.cnTitle }}</span>
-                  </div>
-                </div>
+                    </span>
+                  </span>
+                </span>
               </a>
             </div>
           </el-col>
@@ -138,7 +141,7 @@ export default {
     line-height: 28.8px;
   }
 
-  b {
+  .num_bold {
     color: #444;
     line-height: 46px;
     margin: 0 4px 0 0;
@@ -146,7 +149,9 @@ export default {
     font-family: arial;
     font-weight: normal;
   }
-
+  .num_title:last-child {
+    border: none;
+  }
   .num_title {
     font-size: 14px;
     color: #666666;
@@ -158,6 +163,20 @@ export default {
     }
   }
 
+  .culture_1 {
+    .img_box {
+      position: absolute;
+      bottom: auto !important;
+      top: 0;
+    }
+  }
+
+  .imgAndText:hover {
+    img {
+      transform: scale(1.2);
+    }
+  }
+
   .imgAndText {
     display: block;
     margin: 0 15px;
@@ -172,7 +191,6 @@ export default {
 
       .pic {
         display: inline-block;
-        width: 100%;
         overflow: hidden;
 
         img {
@@ -187,34 +205,45 @@ export default {
         left: 0;
         width: 100%;
         background-color: rgba(32, 31, 37, 0.5);
+
         .img_innerBox {
-          width: 100%;
-          display: inline-block;
+          display: block;
           padding: 20px 30px;
-          .about_en{
-            color: #e0c9aa;
-            font-size: 22px;
-            float: left;
-            text-transform: uppercase;
-            font-family: arial;
-            span:first-child{
-              font-weight: bold;
-              margin-right: 10px;
+
+          .its {
+            display: inline-block;
+            width: 100%;
+
+            .about_en {
+              color: #e0c9aa;
+              font-size: 22px;
+              float: left;
+              text-transform: uppercase;
+              line-height: 39.6px;
+              font-family: arial;
+
+              span:first-child {
+                font-weight: bold;
+                margin-right: 10px;
+              }
+            }
+
+            .line {
+              clear: both;
+              width: 50px;
+              height: 1px;
+              float: left;
+              margin: 3px 0;
+              background-color: #e2c9ab;
+            }
+
+            .about_cn {
+              color: #e0c9aa;
+              clear: both;
+              float: left;
+              font-size: 18px;
+              line-height: 32px;
             }
-          }
-          .line{
-            clear: both;
-            width: 50px;
-            height: 1px;
-            float: left;
-            margin: 3px 0;
-            background-color: #e2c9ab;
-          }
-          .about_cn{
-            color: #e0c9aa;
-            clear: both;
-            float: left;
-            font-size: 18px;
           }
         }
       }