完善首页样式和细节调整优化

hookehuyr
Commit be246e0e00f7a7b87a6582b18c7b97a1082fe855 be246e0e 1 parent 5682b3c8
Showing 1 changed file with 120 additions and 41 deletions
src/views/index.vue
--- a/src/views/index.vue
View file @be246e0
+++ b/src/views/index.vue
View file @be246e0
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 09:45:01
+ * @LastEditTime: 2024-09-30 16:14:48
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -16,33 +16,32 @@
       <hager-h1 title="海格全球" sub="Hager Global"></hager-h1>
       <div class="hager-global">
         <p>海格集团是全球领先的电气及智能化鲜决方案和服务提供商，应用领域涵盖住宅，商业建筑，公共建筑和工业。</p>
-        <p>海格申气品牌代表了集闭的核心业务，蜀盖配电系统。申缆管理系统。KNX 智能榕制系统和开关面板，楼宇自动化和安防系统。集团旗下还拥有Berker. Bocchiott
+        <p>海格申气品牌代表了集闭的核心业务，蜀盖配电系统。申缆管理系统。KNX 智能榕制系统和开关面板，楼宇自动化和安防系统。集团旗下还拥有 7 E3 / DC</p>
-        Elcom 7 E3 / DC</p>
         <p>海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术，能源效率、生活辅助系统，电动交通、
         可再生能源。配电系统是这盛技术得以实现的中枢。也是伴随我们成长的其础产品</p>
-        <div style="display: flex; justify-content: space-between; padding: 2rem; align-items: center; text-align: center;">
+        <div class="hager-global-info">
-          <div>
+          <div class="hager-global-info-item">
-            <p>32亿</p>
+            <p class="num"><span>32</span>亿</p>
-            <p>32亿</p>
+            <p class="text">2023年销售额32亿欧元</p>
-            <p>Sales ot 3.2 billion eurosin 2023</p>
+            <p class="text">Sales ot 3.2 billion  2023</p>
           </div>
-          <div>
+          <div class="hager-global-info-item">
-            <p>32亿</p>
+            <p class="num"><span>32</span>亿</p>
-            <p>32亿</p>
+            <p class="text">2023年销售额32亿欧元</p>
-            <p>100+ countries adopt HAGER solution</p>
+            <p class="text">Sales ot 3.2 billion  2023</p>
           </div>
-          <div>
+          <div class="hager-global-info-item">
-            <p>32亿</p>
+            <p class="num"><span>32</span>亿</p>
-            <p>32亿</p>
+            <p class="text">2023年销售额32亿欧元</p>
-            <p>13,000 employees</p>
+            <p class="text">Sales ot 3.2 billion  2023</p>
           </div>
-          <div>
+          <div class="hager-global-info-item">
-            <p>32亿</p>
+            <p class="num"><span>32</span>亿</p>
-            <p>32亿</p>
+            <p class="text">2023年销售额32亿欧元</p>
-            <p>13,000 employees</p>
+            <p class="text">Sales ot 3.2 billion  2023</p>
           </div>
         </div>
-        <div style="display: flex; justify-content: center;">
+        <div style="display: flex; justify-content: center; margin-top: 1rem;">
           <hager-more></hager-more>
         </div>
       </div>
@@ -91,33 +90,30 @@
     <hager-box class="box-2n">
       <hager-h1 title="最新资讯" sub="News"></hager-h1>
       <div class="news-container">
-        <el-row :gutter="0">
+        <el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
           <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">
+            <img v-if="index % 2 === 0" :src="item.src" alt="News Image 1">
-          </el-col>
+            <div v-else @click="goToNew(item)" class="news-item">
-          <el-col :span="12" style="background-color: #FFF; height: 25rem;">
+              <div class="news-item-title">{{ item.title }}</div>
-            <div style="padding: 3rem;">
+              <p class="news-item-sub">{{ item.sub }}</p>
-              <div style="font-weight: bold; font-size: 1.25rem;">获奖+1！海格电气荣获2023酒店文旅优秀国际标⋯</div>
+              <p class="news-item-content">{{ item.content }}</p>
-              <p>o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast</p>
-              <p style="margin: 2rem 0;">11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整</p>
               <i class="el-icon-right"></i>
             </div>
           </el-col>
-        </el-row>
-        <el-row :gutter="0">
           <el-col :span="12" style="background-color: #FFF; height: 25rem;">
-            <div style="padding: 3rem;">
+            <div v-if="index % 2 === 0" @click="goToNew(item)" class="news-item">
-              <div style="font-weight: bold; font-size: 1.25rem;">获奖+1！海格电气荣获2023酒店文旅优秀国际标⋯</div>
+              <div class="news-item-title">{{ item.title }}</div>
-              <p>o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast</p>
+              <p class="news-item-sub">{{ item.sub }}</p>
-              <p style="margin: 2rem 0;">11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整</p>
+              <p class="news-item-content">{{ item.content }}</p>
               <i class="el-icon-right"></i>
             </div>
-          </el-col>
+            <img v-else :src="item.src" alt="News Image 1">
-          <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-row>
       </div>
+      <div style="display: flex; justify-content: center; margin-top: 2rem;">
+        <hager-more></hager-more>
+      </div>
     </hager-box>
     <hager-box class="box-n">
       <hager-h1 title="招聘信息" sub="Recruit"></hager-h1>
@@ -140,6 +136,22 @@ export default {
   components: { hagerBox, hagerH1, hagerMore },
   data () {
     return {
+      news_list: [{
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
+        content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
+        sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
+      }, {
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
+        content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
+        sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
+      }, {
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
+        content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
+        sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
+      }]
     }
   },
   async mounted () {
@@ -159,7 +171,11 @@ export default {
     }
   },
   methods: {
-
+    goToNew (v) {
+      this.$router.push({
+        path: '/news/detail'
+      });
+    }
   }
 }
 </script>
@@ -191,6 +207,32 @@ export default {
     background-color: #f1f1f1;
     padding: 2rem 0;
   }
+  .hager-global {
+    padding: 2rem 0;
+    p {
+      line-height: 2;
+    }
+    .hager-global-info {
+      display: flex;
+      justify-content: space-between;
+      padding: 2rem;
+      align-items: center;
+      text-align: center;
+      .hager-global-info-item {
+        .num {
+          color: @primary-color;
+          font-size: 1.5rem;
+          font-weight: bold;
+          span {
+            font-size: 3rem;
+          }
+        }
+        .text {
+
+        }
+      }
+    }
+  }
   .hager-solution {
     margin-top: 2rem;
     display: grid;
@@ -213,11 +255,15 @@ export default {
         cursor: pointer;
       }
       &.other {
+        display: flex;
         background-color: #e0f7ff; /* 特殊的样式 */
-        color: #007bff;
+        color: @secondary-color;
         font-weight: bold;
-        line-height: 8rem;
+        // line-height: 8rem;
         background-image: none;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
       }
       p {
         position: absolute;
@@ -230,6 +276,39 @@ export default {
       }
     }
   }
+  .news-container {
+    margin-top: 2rem;
+    img {
+      width: 100%; height: 100%; border-radius: 5px;object-fit: cover;
+    }
+    .news-item {
+      padding: 3rem;
+      &:hover {
+        cursor: pointer;
+      }
+      .news-item-title {
+        font-weight: bold;
+        font-size: 1.35rem;
+        color: @secondary-color;
+        display: -webkit-box;        /* 结合其他属性进行多行文本处理 */
+        -webkit-line-clamp: 1;       /* 设置显示的行数 */
+        -webkit-box-orient: vertical; /* 垂直排列 */
+        overflow: hidden;            /* 超出部分隐藏 */
+        text-overflow: ellipsis;     /* 使用省略号替代超出的文本 */
+      }
+      .news-item-sub {
+        color: @primary-color;
+        margin-top: 0.25rem;
+      }
+      .news-item-content {
+        margin: 2rem 0;
+      }
+      i {
+        color: @primary-color;
+        font-size: 1.5rem;
+      }
+    }
+  }
   .hager-product-center {
     margin-top: 2rem;
     display: grid;