首页最新资讯模块显示兼容性优化

hookehuyr
Commit 1f355bbb68bb98822c30a39e9659e7bc246533bb 1f355bbb 1 parent a04bd986
Showing 2 changed files with 120 additions and 30 deletions
src/main.js
src/views/index.vue
--- a/src/main.js
View file @1f355bb
+++ b/src/main.js
View file @1f355bb
 /*
  * @Date: 2024-08-26 10:12:56
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-11 13:20:49
+ * @LastEditTime: 2024-10-15 18:40:00
  * @FilePath: /hager/src/main.js
  * @Description: 文件描述
  */
@@ -28,6 +28,47 @@ Vue.component(CollapseTransition.name, CollapseTransition)
 Vue.use(VueAwesomeSwiper);
+Vue.directive('clamp', {
+  inserted(el, binding) {
+    // 保存原始的完整文本
+    el.__fullText__ = el.innerText;
+
+    // 初始调用文本截断函数
+    clampText(el, binding.value);
+
+    // 添加 resize 监听器
+    el.__resizeHandler__ = () => {
+      clampText(el, binding.value);
+    };
+    window.addEventListener('resize', el.__resizeHandler__);
+  },
+
+  componentUpdated(el, binding) {
+    // 组件更新时重新截断文本
+    clampText(el, binding.value);
+  },
+
+  unbind(el) {
+    // 移除监听器以避免内存泄漏
+    window.removeEventListener('resize', el.__resizeHandler__);
+    delete el.__resizeHandler__;
+  }
+});
+
+function clampText(element, lineCount) {
+  const lineHeight = parseFloat(getComputedStyle(element).lineHeight); // 获取行高
+  const maxHeight = lineHeight * lineCount;  // 根据行数计算最大高度
+  let fullText = element.__fullText__;       // 使用原始的完整文本进行截断
+  element.innerText = fullText;              // 每次截断前恢复完整文本
+  element.style.maxHeight = `${maxHeight}px`; // 设置最大高度
+
+  // 处理文本截断
+  while (element.scrollHeight > element.offsetHeight) { // 如果内容溢出
+    fullText = fullText.slice(0, -1); // 每次减少一个字符
+    element.innerText = fullText + '...'; // 重新设置文本并加省略号
+  }
+}
+
 new Vue({
   router,
   render: (h) => h(App),
--- a/src/views/index.vue
View file @1f355bb
+++ b/src/views/index.vue
View file @1f355bb
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-15 17:18:48
+ * @LastEditTime: 2024-10-15 18:40:38
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -47,7 +47,7 @@
             <p class="text">22 production sites</p>
           </div>
         </div>
-        <div style="display: flex; justify-content: center; margin-top: 1rem;">
+        <div class="more-box" style="margin-top: 1rem;">
           <hager-more></hager-more>
         </div>
       </div>
@@ -55,14 +55,14 @@
     <hager-box class="box-2n" @screen-width="handleScreenWidth">
       <hager-h1 title="解决方案" sub="Solution"></hager-h1>
       <div v-if="!is_xs" class="hager-solution">
-        <el-row :gutter="15">
+        <el-row :gutter="15" v-for="(item, index) in splitListIntoChunks(solution_list)" :key="index">
-          <el-col :span="6" v-for="(item, index) in solution_list" :key="index">
+          <el-col :span="6" v-for="(x, idx) in item" :key="idx">
             <div
-              @click="goToSolution(item)"
+              @click="goToSolution(x)"
-              class="solution-item"
+              :class="['solution-item', x.id === 'other' ? 'other' : '']"
-              :style="{ backgroundImage: 'url('+item.src+')' }"
+              :style="{ backgroundImage: 'url('+x.src+')' }"
               >
-              <p>{{ item.title }}</p>
+              <p>{{ x.title }}</p>
             </div>
           </el-col>
         </el-row>
@@ -114,32 +114,35 @@
           </div>
         </div>
       </div>
+      <div class="more-box" style="margin-top: 2rem;">
+        <hager-more></hager-more>
+      </div>
     </hager-box>
     <hager-box v-if="!is_xs" class="box-2n">
       <hager-h1 title="最新资讯" sub="News"></hager-h1>
       <div class="news-container">
         <el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
-          <el-col :span="12" style="height: 25rem;">
+          <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">
             <div v-else @click="goToNew(item)" class="news-item">
               <div class="news-item-title">{{ item.title }}</div>
-              <p class="news-item-sub">{{ item.sub }}</p>
+              <p class="news-item-sub"  v-clamp="2">{{ item.sub }}</p>
-              <p class="news-item-content">{{ item.content }}</p>
+              <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
-              <i class="el-icon-right"></i>
+              <div 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 class="news-item-title">{{ item.title }}</div>
-              <p class="news-item-sub">{{ item.sub }}</p>
+              <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
-              <p class="news-item-content">{{ item.content }}</p>
+              <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
-              <i class="el-icon-right"></i>
+              <div 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">
           </el-col>
         </el-row>
       </div>
-      <div style="display: flex; justify-content: center; margin-top: 2rem;">
+      <div class="more-box"  style="margin-top: 3rem;">
         <hager-more></hager-more>
       </div>
     </hager-box>
@@ -151,21 +154,21 @@
             <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-title">{{ item.title }}</div>
-              <p class="news-item-sub">{{ item.sub }}</p>
+              <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
-              <p class="news-item-content">{{ item.content }}</p>
+              <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
-              <i class="el-icon-right"></i>
+              <div class="news-item-more">MORE</div>
             </div>
           </el-col>
         </el-row>
       </div>
-      <div style="display: flex; justify-content: center; margin-top: 2rem;">
+      <div class="more-box" style="margin-top: 3rem;">
         <hager-more></hager-more>
       </div>
     </div>
     <hager-box class="box-n">
       <hager-h1 title="招聘信息" sub="Recruit"></hager-h1>
       <p style="margin: 2rem 0;">心国近心，支注万你。海恰人囫指员光工，然于則行！我们哦这音齐稱央那八我们附行列，共同书与成功的扁草。用你的才罕，刨道九限可能！</p>
-      <div style="display: flex; justify-content: center; margin-top: 2rem;">
+      <div class="more-box"  style="margin-top: 2rem;">
         <hager-more></hager-more>
       </div>
     </hager-box>
@@ -188,7 +191,7 @@ export default {
         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'
+        sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid astgy 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酒店文旅优秀',
@@ -214,6 +217,12 @@ export default {
       }, {
         src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
         title: '4住宅解决方案'
+      }, {
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        title: '3住宅解决方案'
+      }, {
+        src: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
+        title: '4住宅解决方案'
       }],
       product_list: [{
         src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
@@ -288,6 +297,21 @@ export default {
     }
   },
   methods: {
+    splitListIntoChunks (list) {
+      const chunkSize = 4; // 每组4个项目
+      const result = [];
+
+      // 按每4个为一组进行分割
+      for (let i = 0; i < list.length; i += chunkSize) {
+        const chunk = list.slice(i, i + chunkSize);
+        result.push(chunk);
+      }
+
+      // 在最后一组添加 {src:'', title:'other'}
+      result[result.length - 1].push({ id: 'other', src: '', title: 'Other解决方案' });
+
+      return result;
+    },
     toggleFold (v) {
       this.is_fold = !this.is_fold;
     },
@@ -422,21 +446,26 @@ export default {
     background-size: cover;
     background-position: center;
     transition: transform 0.3s ease-in-out;
+    margin-bottom: 1rem;
     &:hover {
-      // transform: scale(1.05);
+      transform: scale(1.05);
-      // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       cursor: pointer;
     }
     &.other {
       display: flex;
       background-color: #e0f7ff; /* 特殊的样式 */
       color: @secondary-color;
-      font-weight: bold;
+      // font-weight: bold;
       // line-height: 8rem;
       background-image: none;
       align-items: center;
       justify-content: center;
-      font-size: 1.5rem;
+      font-size: 1.25rem;
+      p {
+        position: relative;
+        background-color: #e0f7ff;
+      }
     }
     p {
       position: absolute;
@@ -502,14 +531,29 @@ export default {
       .news-item-sub {
         color: @primary-color;
         margin-top: 0.25rem;
+        line-height: 1.5em;
+        overflow: hidden;
+        word-break: break-word;
       }
       .news-item-content {
         margin: 2rem 0;
+        color: @text-color;
+        line-height: 1.5em;
+        overflow: hidden;
+        word-break: break-word;
       }
-      i {
+      .news-item-more {
-        color: @primary-color;
+        border: 0.08rem solid #F56400;
-        font-size: 1.5rem;
+        color: #F56400;
+        padding: 0.5rem 1rem;
+        width: 5rem;
+        text-align: center;
+        font-size: 0.8rem;
       }
+      // i {
+      //   color: @primary-color;
+      //   font-size: 1.5rem;
+      // }
     }
   }
@@ -563,5 +607,10 @@ export default {
       padding-left: 20%;
     }
   }
+
+  .more-box {
+    display: flex;
+    justify-content: center;
+  }
 }
 </style>