fix 首页细节优化调整

hookehuyr
Commit 213625f48fa6eac3166424c7bfb99118610f550a 213625f4 1 parent 3e67f624
Showing 2 changed files with 64 additions and 28 deletions
components.d.ts
src/views/index.vue
--- a/components.d.ts
View file @213625f
+++ b/components.d.ts
View file @213625f
@@ -11,6 +11,7 @@ declare module 'vue' {
     ElBreadcrumbItem: typeof import('element-ui/lib/breadcrumb-item')['default']
     ElCarousel: typeof import('element-ui/lib/carousel')['default']
     ElCarouselItem: typeof import('element-ui/lib/carousel-item')['default']
+    ElCheckbox: typeof import('element-ui/lib/checkbox')['default']
     ElCol: typeof import('element-ui/lib/col')['default']
     ElCollapse: typeof import('element-ui/lib/collapse')['default']
     ElCollapseItem: typeof import('element-ui/lib/collapse-item')['default']
--- a/src/views/index.vue
View file @213625f
+++ b/src/views/index.vue
View file @213625f
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-20 21:33:43
+ * @LastEditTime: 2024-10-21 11:30:52
  * @FilePath: /hager/src/views/index.vue
  * @Description: 首页
 -->
@@ -48,7 +48,7 @@
           </div>
         </div>
         <div class="more-box" style="margin-top: 1rem;">
-          <hager-more></hager-more>
+          <hager-more @click.native="getToGroup"></hager-more>
         </div>
       </div>
     </hager-box>
@@ -84,7 +84,6 @@
       </div>
     </hager-box>
     <hager-box class="box-n">
-      <!-- TODO: 待完善, 产品分类跳转，没有更多分类了？ -->
       <hager-h1 title="产品中心" sub="Product"></hager-h1>
       <!-- <div v-if="!is_xs" class="hager-product-center">
         <el-row :gutter="15">
@@ -108,11 +107,11 @@
             </div>
           </swiper-slide>
         </swiper>
-        <div v-if="product_list.length <= productSlidesPerView" class="more-box" style="margin-top: 2rem;">
+        <!-- <div v-if="product_list.length <= productSlidesPerView" class="more-box" style="margin-top: 2rem;">
-          <hager-more></hager-more>
-        </div>
-        <div v-else class="hager-product-center-more xs">
           <hager-more></hager-more>
+        </div> -->
+        <div v-if="product_list.length > productSlidesPerView" class="hager-product-center-more xs">
+          <!-- <hager-more></hager-more> -->
           <div class="xs-control">
             <div>
               <i :class="['el-icon-arrow-left', activeProductIndex === 0 ? 'disabled' : '']" @click="prevProductBtn()"></i>
@@ -127,27 +126,27 @@
       <div class="news-container">
         <el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
           <el-col :span="12" style="background-color: #FFF; height: 25rem;">
-            <img class="news-item-img" v-if="index % 2 === 0" :src="item.src" alt="News Image 1">
+            <img class="news-item-img" v-if="index % 2 === 0" :src="item.src">
-            <div v-else @click="goToNew(item)" class="news-item">
+            <div v-else class="news-item">
               <div class="news-item-title">{{ item.title }}</div>
               <p class="news-item-sub"  v-clamp="2">{{ item.sub }}</p>
               <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
-              <div class="news-item-more" style="margin-top: 3rem;">MORE</div>
+              <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
             </div>
           </el-col>
           <el-col :span="12" style="background-color: #FFF; height: 25rem;">
-            <div v-if="index % 2 === 0" @click="goToNew(item)" class="news-item">
+            <div v-if="index % 2 === 0" class="news-item">
               <div class="news-item-title">{{ item.title }}</div>
               <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
               <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
-              <div class="news-item-more" style="margin-top: 3rem;">MORE</div>
+              <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
             </div>
-            <img class="news-item-img" v-else :src="item.src" alt="News Image 1">
+            <img class="news-item-img" v-else :src="item.src">
           </el-col>
         </el-row>
       </div>
       <div class="more-box"  style="margin-top: 3rem;">
-        <hager-more></hager-more>
+        <hager-more @click.native="goToNews"></hager-more>
       </div>
     </hager-box>
     <div v-else style="background-color: #f9f9f9; padding-bottom: 1rem;">
@@ -156,11 +155,11 @@
         <el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
           <el-col :span="24">
             <img class="news-item-img xs" :src="item.src" alt="News Image 1">
-            <div @click="goToNew(item)" class="news-item xs">
+            <div class="news-item xs">
               <div class="news-item-title">{{ item.title }}</div>
               <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
               <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
-              <div class="news-item-more">MORE</div>
+              <div class="news-item-more" @click="goToNew(item)">MORE</div>
             </div>
           </el-col>
         </el-row>
@@ -173,7 +172,7 @@
       <hager-h1 title="招聘信息" sub="Recruitment"></hager-h1>
       <p style="margin: 2rem 0;">德国匠心，专注为你。海格集团招贤纳士，携手前行！我们诚邀各界精英加入我们的行列，共同书写成功的篇章。用你的才华，创造无限可能！ </p>
       <div class="more-box"  style="margin-top: 2rem;">
-        <hager-more></hager-more>
+        <hager-more @click.native="goToRecruit"></hager-more>
       </div>
     </hager-box>
   </div>
@@ -223,37 +222,48 @@ export default {
       }],
       screen_width: 0,
       solution_list: [{
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        id: '1',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '1住宅解决方案'
       }, {
-        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        id: '1',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '2住宅解决方案'
       }, {
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        id: '1',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '3住宅解决方案'
       }, {
-        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        id: '1',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '4住宅解决方案'
       }, {
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        id: '1',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '3住宅解决方案'
       }, {
-        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        id: '1',
+        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
         title: '4住宅解决方案'
       }],
       product_list: [{
+        id: '1',
         src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
         title: '配电产品'
       }, {
+        id: '1',
         src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
         title: '成套产品'
       }, {
+        id: '1',
         src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
         title: '开关面板'
       }, {
+        id: '1',
         src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
         title: '智能控制'
       }, {
+        id: '1',
         src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
         title: '能源管理'
       }],
@@ -312,6 +322,11 @@ export default {
     }
   },
   methods: {
+    getToGroup () {
+      this.$router.push({
+        path: '/about/global'
+      });
+    },
     splitListIntoChunks (list) {
       const chunkSize = 4; // 每组4个项目
       const result = [];
@@ -332,7 +347,20 @@ export default {
     },
     goToNew (v) {
       this.$router.push({
-        path: '/news/detail'
+        path: '/news/detail',
+        query: {
+          id: v.id
+        }
+      });
+    },
+    goToNews () {
+      this.$router.push({
+        path: '/news'
+      });
+    },
+    goToRecruit () {
+      this.$router.push({
+        path: '/recruit'
       });
     },
     goToSolution (v) {
@@ -408,6 +436,12 @@ export default {
         span.strong {
           color: @primary-color;
         }
+        i {
+          color: #F56400;
+          &:hover {
+            cursor: pointer;
+          }
+        }
       }
     }
     .hager-global-info {
@@ -518,9 +552,6 @@ export default {
       &.xs {
         padding: 2rem;
       }
-      &:hover {
-        cursor: pointer;
-      }
       .news-item-title {
         font-weight: bold;
         font-size: 1.35rem;
@@ -550,6 +581,10 @@ export default {
         width: 5rem;
         text-align: center;
         font-size: 0.8rem;
+
+        &:hover {
+          cursor: pointer;
+        }
       }
       // i {
       //   color: @primary-color;
@@ -606,7 +641,7 @@ export default {
     justify-content: center;
     margin-top: 2rem;
     &.xs {
-      justify-content: space-between;
+      justify-content: flex-end;
       padding-left: 20%;
     }
   }