nuxtProject/pages/gywm/index.vue

<template>
  <div class="client-gywm-page">
    <div :style="{backgroundImage: 'url(' + bannerDefault + ')'}" class="client-banner-box"></div>
    <!-- 产品体验 -->
    <div class="client-container">
      <h4 class="client-title">关于我们</h4>
      <div class="client-cpty-box">
        <div class="cpty-card-box" @click="tyBtn">
          <img :src="tyImg1"/>
          <h3 class="title">我们的愿景</h3>
          <p class="desc">让家政服务更专业、更高效、更温暖</p>
        </div>
        <div class="cpty-card-box" @click="tyBtn">
          <img :src="tyImg2"/>
          <h3 class="title">个性化能力</h3>
          <p class="desc">量身定制，适配不同角色需求</p>
        </div>
        <div class="cpty-card-box" @click="tyBtn">
          <img :src="tyImg3"/>
          <h3 class="title">核心产品特点</h3>
          <p class="desc">四大端联动，全流程覆盖</p>
        </div>
      </div>
      <div class="client-cpty-box wywm-cpty-box">
        <div class="cpty-card-box" @click="tyBtn">
          <img :src="tyImg4"/>
          <h3 class="title">选择我们的理由</h3>
          <p class="desc">技术赋能，降本增效</p>
        </div>
        <div class="cpty-card-box" @click="tyBtn">
          <img :src="tyImg5"/>
          <h3 class="title">联系我们</h3>
          <p class="desc">开启家政服务升级之旅</p>
        </div>
      </div>
    </div>

    <!-- 联系我们 -->
    <div class="lxwm-box" :style="{backgroundImage: 'url(' + lxwmBj + ')'}">
      <h4 class="client-double-title">联系我们<br/>开启家政服务升级之旅</h4>
      <div class="client-container">
        <p class="lxwm-box-text">
          若您是家政公司负责人，想提升管理效率;若您是户主，想找到放心的家政服务;若您是家政人员，想获得规范的服务机会--欢迎联系我们，开启家政服务的全新体验!
        </p>
        <p class="lxwm-box-text">官方邮箱:980182871@qq.com<br/>地址:北京市昌平区北清路1号院6号楼11层2单元1209-B</p>
        <p class="lxwm-box-text">
          《家政学》家政管理系统，不止是一款工具，更是您在家政行业的"合作伙伴"。我们将持续迭代升级，以技术助力每一位用户实现价值提升，共同推动家政行业的美好未来!
        </p>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name:       'gywm',
      layout:     'templateA',
      data() {
        return {
          // banner图
          bannerDefault:   require(`~/static/images/website/banner/cx-banner-gywm.png`),
          // 产品体验
          tyImg1:   require(`~/static/images/website/we/gywm-icon1.png`),
          tyImg2:   require(`~/static/images/website/we/gywm-icon2.png`),
          tyImg3:   require(`~/static/images/website/we/gywm-icon3.png`),
          tyImg4:   require(`~/static/images/website/we/gywm-icon4.png`),
          tyImg5:   require(`~/static/images/website/we/gywm-icon5.png`),
          // 联系我们
          lxwmBj:   require(`~/static/images/website/we/row-bj.png`),
        }
      },
      head(){
        return {
          title: '家政学',
        }
      },
    };
</script>

<style scoped>

</style>