页面样式调整

hookehuyr
Commit f04d08cc5631fc7642ee9a449b6dd0f2df148e2a f04d08cc 1 parent c475d913
Showing 4 changed files with 33 additions and 29 deletions
src/views/about/honors.vue
src/views/concat.vue
src/views/index.vue
src/views/news/index.vue
--- a/src/views/about/honors.vue
View file @f04d08c
+++ b/src/views/about/honors.vue
View file @f04d08c
 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 15:24:20
+ * @LastEditTime: 2024-10-24 16:21:41
  * @FilePath: /hager/src/views/about/honors.vue
  * @Description: 关于海格-荣誉展示
 -->
@@ -40,9 +40,9 @@
           <div class="card-image-box">
             <div class="card-image" :style="{ backgroundImage: `url(${x.cover})` }"></div>
           </div>
-          <div class="card-content">
+          <div ref="contentDiv" :class="['card-content', active_idx === 0 ? 'a' : '', active_idx === 1 ? 'b' : '', active_idx === 2 ? 'c' : '', ]">
             <h3>{{ x.post_title }}</h3>
-            <p ref="contentDiv" v-if="x.post_content">{{ x.post_content }}</p>
+            <p v-if="x.post_content" v-html="x.post_content"></p>
           </div>
         </div>
       </div>
@@ -62,7 +62,7 @@
               </div>
               <div class="card-content xs">
                 <h3>{{ x.post_title }}</h3>
-                <p v-if="x.post_content" class="content">{{ x.post_content }}</p>
+                <p v-if="x.post_content" class="content" v-html="x.post_content"></p>
               </div>
             </div>
           </div>
@@ -278,17 +278,27 @@ export default {
         background-color: #F7F7F7;
         padding: 2rem 1.5rem;
         padding-bottom: 0.5rem;
+        overflow: scroll;
+        &.a {
+          height: 10rem;
+        }
+        &.b {
+          height: 4rem;
+        }
+        &.c {
+          height: 4rem;
+        }
         h3 {
           color: @secondary-color;
           font-size: 1rem;
           margin: 0;
-          height: 3rem;
+          height: 2rem;
           line-height: 1.5;
         }
         p {
           font-size: 0.95rem;
           line-height: 1.8;
-          height: 8rem;
+          // height: 3rem;
           margin-bottom: 0.5rem;
           overflow: scroll;
         }
@@ -299,6 +309,7 @@ export default {
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-start; /* 保证剩余元素靠左对齐 */
+      align-items: stretch; /* 让所有子元素的高度保持一致 */
     }
     .card {
--- a/src/views/concat.vue
View file @f04d08c
+++ b/src/views/concat.vue
View file @f04d08c
 <!--
  * @Date: 2024-10-18 09:31:05
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 13:54:25
+ * @LastEditTime: 2024-10-24 17:17:49
  * @FilePath: /hager/src/views/concat.vue
  * @Description: 联系我们
 -->
@@ -415,12 +415,12 @@
       <div v-if="!is_xs" v-for="(item, index) in concat_list" :key="index">
         <div :class="['concat-area', is_xs ? 'xs' : '']">{{ item.area }}</div>
         <div>
-          <el-row v-for="(concat, idx) in item.list" :key="idx" :gutter="0" style="border-bottom: 1px solid #DADADA;">
+          <el-row v-for="(concat, idx) in item.list" :key="idx" :gutter="0" :style="{borderBottom: idx === item.list.length - 1 ? '' : '1px solid #DADADA'}">
             <el-col :span="12" v-for="(x, i) in concat" :key="i" :style="{borderRight: i%2 === 0 ? '1px solid #DADADA' : '', padding: '1.5rem 0'}">
               <el-row :gutter="0">
                 <el-col :span="13" class="title"><span class="inner">{{ x.area }}</span></el-col>
                 <el-col :span="3" class="name outer"><p class="inner">{{ x.name }}</p></el-col>
-                <el-col :span="8" class="number outer">
+                <el-col :span="8" :class="['number', 'outer', x.tel.length >= 2 ? 'double' : '']">
                   <p v-for="(tel, index) in x.tel" :key="index" class="inner">{{ tel }}</p>
                 </el-col>
               </el-row>
@@ -770,9 +770,15 @@ export default {
     .number {
       color: #F56400;
       font-weight: bold;
+      position: relative;
       &.outer {
         text-align: right;
       }
+      &.double {
+        position: absolute;
+        right: 0;
+        top: -50%;
+      }
       .inner {
         margin-right: 1.5rem;
         &.xs {
--- a/src/views/index.vue
View file @f04d08c
+++ b/src/views/index.vue
View file @f04d08c
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 15:39:51
+ * @LastEditTime: 2024-10-24 16:34:09
  * @FilePath: /hager/src/views/index.vue
  * @Description: 首页
 -->
@@ -9,7 +9,7 @@
   <div class="hager-container">
     <el-carousel :height="top_img_height" :interval="0">
       <el-carousel-item v-for="(item, index) in banner_list" :key="index">
-        <el-image style="height: 100%;" fit="fill" :src="item.src"></el-image>
+        <el-image style="height: 100%;" fit="fill" :src="item.value"></el-image>
       </el-carousel-item>
     </el-carousel>
     <hager-box class="box-n">
@@ -192,20 +192,7 @@ export default {
   data () {
     return {
       is_fold: false,
-      banner_list: [
+      banner_list: [],
-        {
-          src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
-        },
-        {
-          src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
-        },
-        {
-          src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
-        },
-        {
-          src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
-        },
-      ],
       news_list: [],
       screen_width: 0,
       solution_list: [],
@@ -256,7 +243,7 @@ export default {
     const { code, data } = await getHomeAPI();
     if (code) {
       this.product_list = data.product;
-      // this.banner_list = data.banner;
+      this.banner_list = data.banner;
       this.solution_list = data.solution;
       this.news_list = data.news;
     }
--- a/src/views/news/index.vue
View file @f04d08c
+++ b/src/views/news/index.vue
View file @f04d08c
 <!--
  * @Date: 2024-10-18 12:05:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 14:42:28
+ * @LastEditTime: 2024-10-24 15:53:59
  * @FilePath: /hager/src/views/news/index.vue
  * @Description: 文件描述
 -->
@@ -110,7 +110,7 @@ export default {
       }
       .top-center {
         position: absolute;
-        transform: translateY(100%); /* 垂直与水平居中 */
+        transform: translateY(50%); /* 垂直与水平居中 */
       }
     }
@@ -138,7 +138,7 @@ export default {
         }
         .card-image {
           width: 100%;
-          height: auto;
+          height: 26rem;
           object-fit: cover;
         }