✨ feat(解决方案详情): 样式更新到设计稿

hookehuyr
Commit 1f2f3082d7411b4f4c96b993bc5f3f9ca2d9f052 1f2f3082 1 parent 080d4a9a
Showing 3 changed files with 94 additions and 83 deletions
src/components/hagerHCarousel.vue
src/views/index.vue
src/views/solution/detail.vue
--- a/src/components/hagerHCarousel.vue
View file @1f2f308
+++ b/src/components/hagerHCarousel.vue
View file @1f2f308
 <!--
  * @Date: 2024-09-29 16:27:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-29 16:48:19
+ * @LastEditTime: 2024-10-10 15:17:58
  * @FilePath: /hager/src/components/hagerHCarousel.vue
  * @Description: 文件描述
 -->
@@ -12,12 +12,17 @@
       <div class="carousel">
         <div class="carousel-track" :style="trackStyle">
           <div v-for="item in items" :key="item.id" class="carousel-item">
-            <!-- <img :src="item.image" :alt="item.name" style="width: 100%;"> -->
             <div class="product-item">
               <el-image style="width: 14rem; height: 14rem;" :src="item.image" fit="fit"></el-image>
             </div>
             <h3>{{ item.name }}</h3>
-            <p>{{ item.description }}</p>
+            <div class="product-desc">
+              <p>{{ item.description }}</p>
+              <p>{{ item.description }}</p>
+              <p>{{ item.description }}</p>
+              <p>{{ item.description }}</p>
+              <p>{{ item.description }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -36,27 +41,27 @@ export default {
       items: [{
         id: 1,
         image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-        name: 'Item 1',
+        name: 'hW空气材路幸',
-        description: 'This is the description for Item 1.'
+        description: '额定电流范围：630-5000A'
       }, {
         id: 2,
         image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
-        name: 'Item 2',
+        name: 'hW空气材路幸',
-        description: 'This is the description for Item 2.'
+        description: '额定电流范围：630-5000A'
       }, {
         id: 3,
         image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-        name: 'Item 3',
+        name: 'hW空气材路幸',
-        description: 'This is the description for Item 3.'
+        description: '额定电流范围：630-5000A'
       }, {
         id: 4,
         image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
-        name: 'Item 4',
+        name: 'hW空气材路幸',
         description: 'This is the description for Item 4.'
       }, {
         id: 5,
         image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-        name: 'Item 5',
+        name: 'hW空气材路幸',
         description: 'This is the description for Item 5.'
       }, {
         id: 6,
@@ -121,9 +126,21 @@ export default {
   .carousel-item {
     flex: 0 0 25%; /* 4 items, so each takes 25% */
     box-sizing: border-box;
-    padding: 10px;
+    padding: 1rem;
     padding-left: 0;
     // text-align: center;
+    h3 {
+      font-size: 1.15rem;
+      color: @secondary-color;
+      margin: 0.5rem 0;
+    }
+    .product-desc {
+      color: @text-color;
+      font-size: 0.85rem;
+      p {
+        margin-bottom: 0.25rem;
+      }
+    }
     .product-item {
       height: auto;
       padding: 1.5rem;
--- a/src/views/index.vue
View file @1f2f308
+++ b/src/views/index.vue
View file @1f2f308
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-10 14:19:59
+ * @LastEditTime: 2024-10-10 14:44:15
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -19,7 +19,7 @@
         <p>海格申气品牌代表了集闭的核心业务，蜀盖配电系统。申缆管理系统。KNX 智能榕制系统和开关面板，楼宇自动化和安防系统。集团旗下还拥有 7 E3 / DC</p>
         <p>海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术，能源效率、生活辅助系统，电动交通、
         可再生能源。配电系统是这盛技术得以实现的中枢。也是伴随我们成长的其础产品</p>
-        <div class="hager-global-info">
+        <div :class="['hager-global-info', is_xs ? 'xs' : '']">
           <div class="hager-global-info-item">
             <p class="num"><span>32</span>亿</p>
             <p class="text">2023年销售额32亿欧元</p>
@@ -265,6 +265,9 @@ export default {
       padding: 2rem;
       align-items: center;
       text-align: center;
+      &.xs {
+        flex-direction: column;
+      }
       .hager-global-info-item {
         .num {
           color: @primary-color;
--- a/src/views/solution/detail.vue
View file @1f2f308
+++ b/src/views/solution/detail.vue
View file @1f2f308
 <!--
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-29 17:24:02
+ * @LastEditTime: 2024-10-10 15:40:35
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
 -->
@@ -13,10 +13,9 @@
         <el-col :span="12" style="height: 25rem;">
           <img style="width: 100%; height: 100%; border-radius: 5px;object-fit: cover;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="News Image 1">
         </el-col>
-        <el-col :span="12" style="background-color: #FFF; height: 25rem;">
+        <el-col class="brief-introduction" :span="12">
-          <div style="padding: 3rem;">
+          <div class="intro-box">
-            <div style="font-weight: bold; font-size: 1.25rem;">学校解决方案</div>
+            <hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1>
-            <p>Electronic solutions</p>
             <p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
             <i class="el-icon-right"></i>
           </div>
@@ -28,63 +27,11 @@
     <hager-box class="box-2n">
       <hager-h1 title="成功案例" sub="Success Cases" style="margin: 2rem 0;"></hager-h1>
       <div class="hager-success-cases">
-        <div class="card">
+        <div class="card" v-for="(item, index) in success_data_list" :key="index">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
+          <img :src="item.img" alt="学校图片" class="card-image">
           <div class="card-content">
-            <h3>厦门翔城中小学</h3>
+            <h3>{{ item.title }}</h3>
-            <p>
+            <p>{{ item.sub }}</p>
-              占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
-            </p>
-            <i class="el-icon-right"></i>
-          </div>
-        </div>
-        <div class="card">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <h3>厦门翔城中小学</h3>
-            <p>
-              占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
-            </p>
-            <i class="el-icon-right"></i>
-          </div>
-        </div>
-        <div class="card">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <h3>厦门翔城中小学</h3>
-            <p>
-              占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
-            </p>
-            <i class="el-icon-right"></i>
-          </div>
-        </div>
-        <div class="card">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <h3>厦门翔城中小学</h3>
-            <p>
-              占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
-            </p>
-            <i class="el-icon-right"></i>
-          </div>
-        </div>
-        <div class="card">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <h3>厦门翔城中小学</h3>
-            <p>
-              占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
-            </p>
-            <i class="el-icon-right"></i>
-          </div>
-        </div>
-        <div class="card">
-          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="学校图片" class="card-image">
-          <div class="card-content">
-            <h3>厦门翔城中小学</h3>
-            <p>
-              占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。
-            </p>
             <i class="el-icon-right"></i>
           </div>
         </div>
@@ -114,7 +61,31 @@ export default {
   mixins: [mixin.init],
   data () {
     return {
-
+      success_data_list: [{
+        title: '厦门翔城中小学',
+        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
+        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      }, {
+        title: '厦门翔城中小学',
+        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
+        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      }, {
+        title: '厦门翔城中小学',
+        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
+        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      }, {
+        title: '厦门翔城中小学',
+        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
+        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      }, {
+        title: '厦门翔城中小学',
+        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
+        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      }, {
+        title: '厦门翔城中小学',
+        sub: '占地面积约43811.99平方米，总建筑面积约32188.83平方米，规模48个教学班，可提供2400个优质初中学位。翔城中学是翔安第一所拥有游泳馆的中学。',
+        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      }]
     }
   },
   mounted () {
@@ -136,6 +107,17 @@ export default {
     background-color: #f1f1f1;
     padding: 2rem 0;
   }
+  .brief-introduction {
+    background-color: #FFF;
+    height: 25rem;
+    .intro-box {
+      padding: 3rem;
+      i {
+        color: @primary-color;
+        font-size: 1.5rem;
+      }
+    }
+  }
   .hager-success-cases {
     margin-top: 2rem;
     display: grid;
@@ -178,13 +160,22 @@ export default {
       }
       .card-content {
-        padding: 15px;
+        padding: 1rem 1.5rem;
-      }
+        h3 {
-
+          color: @secondary-color;
-      .card h3 {
+          font-size: 1.25rem;
-        font-size: 18px;
+          margin: 0;
-        color: #0072c6;
+          margin-bottom: 0.5rem;
-        margin-bottom: 10px;
+        }
+        p {
+          font-size: 0.95rem;
+          line-height: 1.8;
+        }
+        i {
+          margin-top: 1rem;
+          color: @primary-color;
+          font-size: 1.5rem;
+        }
       }
       .card p {