refactor(components): 优化子服务组件和联系页面

- 修改子服务组件的数据显示逻辑
- 更新联系页面的样式和交互
- 优化成长守护页面的布局和图片加载
- 调整生活页面的图片加载方式
- 在主文件中添加 Lazyload插件的加载指示

src/components/page-subservice/sub-service.vue

@@ -35,16 +35,16 @@ export default {
 
 <template>
   <div class="sub-service-container">
-    <van-tabs v-model="active" scrollspy background="transparent" :line-height="0" :ellipsis="false">
+    <van-tabs v-model="active" background="transparent" :line-height="0" :ellipsis="false">
-      <van-tab v-for="(item, index) in subServices" :key="index">
+      <van-tab v-for="(item, index) in list" :key="index">
         <template #title>
           <!--          <van-icon name="more-o" />-->
           <div class="tab-title" :class="{ 'tab-active': active === index }">
-            {{ item }}
+            {{ item.name }}
           </div>
         </template>
-        <div class="content" v-if="active === index">
+        <div class="content">
-          <slot :active="activeItem">
+          <slot :active="item">
             {{ activeItem }}
           </slot>
         </div>

src/main.js

@@ -25,6 +25,7 @@ Vue.use(Lazyload)
 Vue.use(Notify)
 Vue.use(Lazyload, {
   lazyComponent: true,
+  loading: '加载中...',
 })
 // 全局 防重复点击
 Vue.directive('no-more-click', NoMoreClick)

src/views/pages/contact/index.vue

@@ -7,6 +7,7 @@ export default {
         {
           title: '幸福热线',
           contact: '95560',
+          isPhone: true,
         },
         {
           title: '幸福网址',
@@ -47,9 +48,11 @@ export default {
       <div v-for="(item, index) in info" :key="item.title">
         <div class="text-right mr10">{{ item.title }} :</div>
         <div v-if="index !== 1" class="text-wrap" :style="{ color: index != 0 ? '#000' : '#ED1C24' }">
-          {{ item.contact }}
+          <!--          {{ item.contact }}-->
+          <a :href="`${'tel:' + item.contact}`" v-if="index === 0">{{ item.contact }}</a>
+          <p v-else>{{ item.contact }}</p>
         </div>
-        <a v-else :href="`https://${item.contact}`" target="_blank" class="text-wrap">
+        <a v-else :href="`https://${item.contact}`" target="_blank" class="text-wrap link">
           {{ item.contact }}
         </a>
       </div>
@@ -69,6 +72,10 @@ export default {
 .text-wrap {
   word-break: break-all;
 }
+.link {
+  //   有下划线
+  text-decoration: underline;
+}
 
 .contact-container {
   background-image: url('../../../assets/images/home/homeBack.png');
@@ -86,10 +93,10 @@ export default {
   background-color: #fff;
 
   .contact-info {
-    padding-top: 30%;
+    //width: 80%;
-
+    padding: 30% 10px 0 10px;
-    width: 80%;
+    line-height: 1.5;
-    margin: 0 auto;
+    //margin: 0 auto;
 
     & > div {
       margin: 20px 0;

src/views/pages/growthGuard/index.vue

@@ -16,7 +16,7 @@ export default {
     PageHeader,
     SubService,
   },
-  mounted() { },
+  mounted() {},
   data() {
     return {
       headerImg: require('@/assets/images/growthGuard/headerImg.webp'),
@@ -57,8 +57,7 @@ export default {
 <template>
   <div class="bg-white">
     <page-header :title="title" :subTitle="subTitle" :headerImg="headerImg"></page-header>
-    <service :title="service.title" :subTitle="service.subTitle" :tail="service.tail" :img="service.img"
+    <service :title="service.title" :subTitle="service.subTitle" :tail="service.tail" :img="service.img" :content="service.content">
-      :content="service.content">
       <template>
         <grid-icon :list="service.content.items" :col="3"></grid-icon>
       </template>
@@ -69,7 +68,7 @@ export default {
           <template #default="{ active }">
             <div class="item-content">
               <div v-for="(item, index) in active.items" :key="index">
-                <img class="content-img" :src="item.img" alt="" />
+                <img class="content-img" :src="item.img" alt="" v-lazy="item.img" />
                 <div class="content-title text-left mt10" v-if="item.title">{{ item.title }}</div>
                 <div class="content-desc mt10 mb10" v-html="item.desc"></div>
                 <ul class="ads mt10">
@@ -153,7 +152,7 @@ export default {
       font-style: normal;
     }
 
-    &>div {
+    & > div {
       display: flex;
       flex-direction: column;
       align-items: flex-start;

src/views/pages/growthGuard/list.js

@@ -42,7 +42,7 @@ export const list = [
           {
             title: '拓宽视野',
             // desc: '量身定制升学路径，选校/专业/时间线一站式规划，助力名校申请。',
-            img: require('@/assets/images/growthGuard/hat.webp'),
+            img: require('@/assets/images/growthGuard/book.webp'),
           },
           {
             title: '启迪智慧',
@@ -52,7 +52,7 @@ export const list = [
           {
             title: '培养跨文化交流能力',
             // desc: '海内外求职策略+实习推荐，简历优化/面试辅导，提升职场竞争力。',
-            img: require('@/assets/images/growthGuard/lxs.webp'),
+            img: require('@/assets/images/growthGuard/book.webp'),
           },
         ],
       },
@@ -71,7 +71,7 @@ export const list = [
           {
             title: '绘画',
             // desc: '量身定制升学路径，选校/专业/时间线一站式规划，助力名校申请。',
-            img: require('@/assets/images/growthGuard/hat.webp'),
+            img: require('@/assets/images/growthGuard/book.webp'),
           },
           {
             title: '音乐',
@@ -81,12 +81,12 @@ export const list = [
           {
             title: '运动',
             // desc: '海内外求职策略+实习推荐，简历优化/面试辅导，提升职场竞争力。',
-            img: require('@/assets/images/growthGuard/lxs.webp'),
+            img: require('@/assets/images/growthGuard/book.webp'),
           },
           {
             title: '科技',
             // desc: '各国签证/居留政策解析，学业与身份规划结合，稳妥衔接移民路径。',
-            img: require('@/assets/images/growthGuard/write.webp'),
+            img: require('@/assets/images/growthGuard/book.webp'),
           },
         ],
       },

src/views/pages/life/index.vue

@@ -65,10 +65,10 @@ export default {
           <template #default="{ active }">
             <div class="active-container">
               <div class="active-item" v-for="item in active.items">
-                <img :src="item.img" alt="" />
+                <img :src="item.img" alt="" v-lazy="item.img" />
                 <div class="act-it-body">
                   <div class="flex">
-                    <img :src="item.icon" alt="" />
+                    <img :src="item.icon" alt="" v-lazy="item.icon" />
                     <h3>{{ item.title }}</h3>
                   </div>
                   <p>{{ item.desc }}</p>