nuxtProject/pages/index.vue

<template>

  <div class="client-new-platform-page client-index-page">

    <!-- 首页banner栏 -->
    <div class="client-banner-box" v-if="bannerList.length > 0">
      <el-carousel trigger="click" >
        <el-carousel-item v-for="(item,index) in bannerList" :key="index">
            <div @click="clickBanner(item)" :style="{backgroundImage: 'url(' + item.image + ')'}" class="index-carousel-box"></div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-else :style="{backgroundImage: 'url(' + bannerDefault + ')'}" class="client-index-banner"></div>

    <!-- img list -->
    <div class="client-products-services">
        <h4 class="client-double-title">家政公司<br/>专属管理与运营方案</h4>
        <div class="client-container">
            <div class="products-services-box website-row-reverse">
                <img :src="productsImg1" alt="专属管理与运营方案" />
                <div class="products-services-content">
                  <h5>定制化数据报表:</h5>
                  <p>根据家政公司的规模和业务重点，生成专属家政人员信息数据，辅助决策。</p>
                  <h5>个性化权限分配:</h5>
                  <p>支持按岗位自定义权限，例如派单员仅能操作订单分配，财务仅可查看收支数据，确保管理安全。</p>
                  <h5>灵活接单规则:</h5>
                  <p>可设置专属派单逻辑，也可手动调整规则权重，适配公司运营策略。</p>
                </div>
          </div>
        </div>
        <div style="background: #f9fdfc;">
          <h4 class="client-double-title">户主<br/>专属服务筛选与体验</h4>
          <div class="client-container">
            <div class="products-services-box">
              <img :src="productsImg2" alt="专属服务筛选与体验" />
              <div class="products-services-content">
                <h5>个性化人员推荐</h5>
                <p>根据户主的历史订单、家庭情况，智能筛选符合需求的家政人员，减少筛选时间。</p>
                <h5>定制化订单设置:</h5>
                <p>支持自定义服务细节)，并可保存"常用服务模板"，下次下单直接复用，提升效率。</p>
                <h5>专属评价反馈通道:</h5>
                <p>服务完成后，可根据自身关注点(自定义评价维度，评价结果将直接影响该家政人员的推荐优先级，保障后续服务质量。</p>
              </div>
            </div>
          </div>
        </div>
        <h4 class="client-double-title" style="padding: 0">家政人员<br/>专属成长与服务工具</h4>
        <div class="client-container">
          <div class="products-services-box website-row-reverse">
            <img :src="productsImg3" alt="专属成长与服务工具" />
            <div class="products-services-content">
              <h5>个性化服务提醒:</h5>
              <p>根据家政人员的接单类型和服务区域，智能匹配订单，避免无效信息干扰。</p>
              <h5>定制化培训计划:</h5>
              <p>结合家政人员的现有技能和服务评价，推荐针对性培训课程，助力技能提升。</p>
              <h5>灵活日程管理:</h5>
              <p>支持手动添加个人档期，系统自动避开冲突订单，清晰掌握收入情况。</p>
            </div>
          </div>
        </div>
        <div style="background: #f9fdfc;padding-bottom: 24px">
          <h4 class="client-double-title">管理后台<br/>专属行业监管与统计</h4>
          <div class="client-container">
            <div class="products-services-box">
              <img :src="productsImg4" alt="专属服务筛选与体验" />
              <div class="products-services-content">
                <h5>定制化监管维度:</h5>
                <p>针对不同地区的家政行业政策，可自定义监管规则，确保合规运营。</p>
                <h5>定制化监管维度:</h5>
                <p>支持按区域、按服务类型自定义统计维度，生成行业趋势报告，为政策制定或行业分析提供数据支持。</p>
              </div>
            </div>
          </div>
        </div>
    </div>

    <!-- 合作客户 -->
    <div class="client-customer-box">
      <div class="client-container">
        <h4 class="client-double-title">合作客户<br/>他们一直都在使用</h4>
        <ul class="customer-img-box">
          <li><img :src="customerImg1" alt="吉邻家政" /></li>
          <li><img :src="customerImg2" alt="优逸家政" /></li>
          <li><img :src="customerImg3" alt="佳禾家政" /></li>
          <li><img :src="customerImg4" alt="吉邻家政" /></li>
          <li><img :src="customerImg5" alt="优逸家政" /></li>
          <li><img :src="customerImg6" alt="佳禾家政" /></li>
          <li><img :src="customerImg7" alt="吉邻家政" /></li>
          <li><img :src="customerImg8" alt="优逸家政" /></li>
          <li><img :src="customerImg9" alt="佳禾家政" /></li>
        </ul>
      </div>
    </div>

    <!-- 合作伙伴 -->
    <!--<div style="background: #f9fdfc;padding-bottom: 64px">
      <h4 class="client-title">合作伙伴</h4>
      <div class="client-container mt25">
        <ul class="hzhb-ul-box">
          <li>中国商业联合会</li>
          <li>中国社科教育培训中心</li>
          <li>人力教培</li>
          <li>全国工商联人才交流服务中心</li>
        </ul>
      </div>
    </div>-->

    <!-- 新闻资讯 PC-->
    <div class="client-news-information" v-if="topCarousels.length > 0">
      <h4 class="client-title">新闻资讯</h4>
      <div class="client-container">
          <div class="industry-information-box">
            <div class="industry-information-left">
              <img v-if="topCarousels.length > 0" :src="topCarousels[0].cover || newImage" alt="新闻资讯"/>
              <img v-else :src="newImage" alt="默认新闻"/>
                <h4 @click="checkInfo(topCarousels[0])">{{ topCarousels[0].title }}</h4>
                <div><b>{{ topCarousels[0].yyyy }}</b><span>{{ topCarousels[0].mmdd }}</span></div>
                <p v-html="topCarousels[0].content"></p>
            </div>
            <div class="industry-information-right">
              <ul>
                <li v-for="(item, index) in topCarousels" v-if="index >= 1">
                  <h4 @click="checkInfo(item)">
                    <a style="display: none" :href="`${baseUrl}/news/${item.id}`"></a>
                    <span>{{ item.yyyy }}</span>{{ item.title }}
                  </h4>
                  <p><span>{{ item.mmdd}}</span><span v-html="item.content" class="content-text"></span></p>
                </li>
              </ul>
            </div>
          </div>
      </div>

    </div>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  export default {
    name:       'index',
    layout:     'templateA',
    watchQuery: true,
    async fetch({ $axios, store, query }) {
      try {
        const { data } = await $axios.post('/home/links/list');
        store.commit('SetFooterYouQingLianJie', data.data.data);
      } catch (e) {
        console.log('错误')
      }

    },
    async asyncData({ $axios, store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/');

      let [res1, res2] = await Promise.all([
                                             await $axios.$post(`/common/client/web/news/list`, { 'page': 1,'size':6 }).then(res => {
                                               return res;
                                             }),
                                             await $axios.$post(`/common/client/web/home/list`, {}).then(res => {
                                               return res;
                                             }),
                                           ]);

      console.log(res1.data);
      // 处理新闻数据，添加 yyyy 和 mmdd 字段
      const processedNews = (res1.data.data || []).map(item => {
        // 从 createDate 中提取年份和月日
        const dateStr = item.createDate || '';
        const dateParts = dateStr.split('-');

        return {
          ...item,
          // 提取年份：2026
          yyyy: dateParts[0] || '',
          // 提取月日：01-04
          mmdd: dateParts.length > 1 ? `${dateParts[1]}-${dateParts[2] || ''}` : '',
        };
      });

      return {

          topCarousels: [],
         bannerList: res2.data||[],
         bannerDefault:require(`~/static/images/website/banner/cx-banner-index.png`),
      };
    },
    data() {
      return {
        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
        topCarousels2:  [],
        newImage:   require(`~/static/images/website/index/news-img.png`),
        // 产品和服务
        productsImg1:   require(`~/static/images/website/index/index-img1.png`),
        productsImg2:   require(`~/static/images/website/index/index-img2.png`),
        productsImg3:   require(`~/static/images/website/index/index-img3.png`),
        productsImg4:   require(`~/static/images/website/index/index-img4.png`),
        // 客户logo
        customerImg1:   require(`~/static/images/website/index/hzkh-icon1.png`),
        customerImg2:   require(`~/static/images/website/index/hzkh-icon2.png`),
        customerImg3:   require(`~/static/images/website/index/hzkh-icon3.png`),
        customerImg4:   require(`~/static/images/website/index/hzkh-icon4.png`),
        customerImg5:   require(`~/static/images/website/index/hzkh-icon5.png`),
        customerImg6:   require(`~/static/images/website/index/hzkh-icon6.png`),
        customerImg7:   require(`~/static/images/website/index/hzkh-icon7.png`),
        customerImg8:   require(`~/static/images/website/index/hzkh-icon8.png`),
        customerImg9:   require(`~/static/images/website/index/hzkh-icon9.png`),
        activeIndex:    '首页',
        activeName:     'first',// tab页签
      };
    },

    head(){
      return {
        title: '家政管理系统',
        /*meta: [
          {
            name: 'description',
            content: '麦塔在线考试系统和在线培训系统是由大连栋科软件工程有限公司历经多年独立研发,有完全自主知识产权的在线考试系统、在线培训系统。麦塔在线答题系统、在线学习系统全面支持移动端，栋科10年教育软件开发经验，10大功能模块，365天实时跟踪服务。麦塔无纸化考试系统节省30%的考试成本，跨平台支持手机端考试、练习！'
          },
          {
            name: 'keywords',
            content: '在线考试系统,考试系统,在线培训系统,培训系统,在线答题系统,答题系统,在线学习系统,学习系统,答题软件'
          },

        ],*/
      }
    },
    methods:    {
      clickBanner(data){
      /*  console.log(data);

*/      if(data.url){
          window.open(data.url)
        }
        // this.$router.push({ name: 'indexEducation' });
      },

      checkInfo(data) {
        const opt = {
          id: data.id,
        };
        this.$router.push({ name: 'news-id', params: opt });
      },
    },
    computed: {
      baseUrl() {
        return this.getBaseUrl;
      },
      ...mapGetters(['getBaseUrl']),
    },
  };
</script>

<style></style>