fix: 更新关于页面内容为中文并优化样式

pages/about/index.vue

@@ -36,15 +36,15 @@
     </div>
     <div class="container">
       <div class="page-heading">
-        <h1 class="wow fadeInUp" data-wow-delay=".3s">About Us</h1>
+        <h1 class="wow fadeInUp" data-wow-delay=".3s">关于我们</h1>
         <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
           <li>
-            <a href="p9wfc14694.html">Home</a>
+            <a href="p9wfc14694.html"> 首页</a>
           </li>
           <li>
             <i class="fas fa-chevron-right"></i>
           </li>
-          <li>About Us</li>
+          <li>关于我们</li>
         </ul>
       </div>
     </div>
@@ -217,29 +217,29 @@
   </section>
   <section>
     <div class="main-container">
-        <div class="title-section">
+        <div class="title-section wow fadeInUp" data-wow-delay=".3s">
             <h3>品牌文化</h3>
             <h2>我们努力践行的文化</h2>
         </div>
-        <div class="card-container">
-            <div class="cloud-card orange-gradient">
+        <div class="card-container fadeInUp" data-wow-delay=".5s">
+            <div class="cloud-card orange-gradient " style="background: url('/aboutImg/Group 121.svg') center / cover no-repeat;">
                 <h3>使命</h3>
                 <p>以创新为动力，推动教育科技发展，打造卓越的在线学习平台，让知识传播更加便捷高效</p>
             </div>
-            <div class="cloud-card teal-gradient">
+            <div class="cloud-card teal-gradient" style="background: url('/aboutImg/Group 131.svg') center / cover no-repeat;">
                 <h3>愿景</h3>
                 <p>打造专业优质的教育生态系统，让每个人都能享受到优质的教育资源</p>
             </div>
-            <div class="cloud-card slate-gradient">
+            <div class="cloud-card slate-gradient" style="background: url('/aboutImg/Group 141.svg') center / cover no-repeat;">
                 <h3>价值观</h3>
                 <p>传承创新中华文化精髓，培养具有全球视野的新时代人才</p>
             </div>
         </div>
     </div>
   </section>
-  <section>
-    <div class="min-h-screen bg-gray-50">
-    <div class="container">
+  <section style="background:url('/aboutImg/section.svg') no-repeat ;background-size: 100% auto;background-color: #eff5f6;" >
+    <div class="min-h-screen ">
+    <div class="container wow fadeInUp" data-wow-delay=".3s">
       <!-- 标题区域 -->
       <div class="title-area">
         <h2>教育理念与价值观</h2>
@@ -247,7 +247,7 @@
       </div>
 
       <!-- 内容区域 -->
-      <div class="content-area">
+      <div class="content-area wow fadeInUp" data-wow-delay=".5s">
         <!-- 第一块内容 -->
         <div class="content-item">
           <div class="text-content">
@@ -302,8 +302,6 @@
 <style>
 /* 整体容器样式 */
 .main-container {
-    min-height: 1024px;
-    width: 1440px;
     margin: 0 auto;
     background-color: white;
     padding-top: 4rem;
@@ -342,8 +340,8 @@
 .cloud-card {
     position: relative;
     width: 360px;
-    min-height: 240px;
-    padding: 2.5rem;
+    min-height: 255px;
+    padding: 3rem;
     color: white;
     border-radius: 60px;
     display: flex;
@@ -351,7 +349,7 @@
     justify-content: center;
     align-items: center;
     text-align: center;
-    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+    /* filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); */
 }
 
 
@@ -359,6 +357,7 @@
     font-size: 1.5rem;
     font-weight: bold;
     margin-bottom: 1rem;
+    color:white;
 }
 
 .cloud-card p {
@@ -381,7 +380,7 @@
 
 
 .min-h-screen {
-  min-height: 100vh;
+  /* min-height: 100vh; */
 }
 
 .bg-gray-50 {
@@ -389,8 +388,7 @@
 }
 
 .container {
-  min-height: 1024px;
-  max-width: 1280px;
+
   margin: 0 auto;
   padding: 0 1rem;
   padding-top: 4rem;
@@ -405,7 +403,7 @@
 .title-area h2 {
   font-size: 1.875rem;
   font-weight: bold;
-  color: #1f2937;
+  /* color: #1f2937; */
   margin-bottom: 1rem;
 }
 
@@ -451,9 +449,15 @@
 
 .text-box {
   border-radius: 0.5rem;
-  padding: 1.5rem;
+    padding: 20px;
+    height: 190px;
+    display: flex;
+    align-items: center;
+    background: url('/aboutImg/div.svg') center/cover no-repeat;
+    /* background-size: 600px 150px; */
 }
 
+
 .text-box p {
   color: #4b5563;
   line-height: 1.625;
@@ -462,16 +466,14 @@
 .image-content {
   width: 50%;
   position: relative;
-  padding-top: 75%;
+  display: flex;
+  justify-content: end;
   border-radius: 0.5rem;
   overflow: hidden;
 }
 
 .image-content img {
-  position: absolute;
-  top: 50%;
 
-  width: 50%;
   height: 50%;
   object-fit: cover;
 }