ebiz-sunful-eco-h5/src/views/nextPage/ecologicalConstruction/index.vue

<template>
  <div id="ecological-construction-container" class="ecological-construction-container">
    <next-page-header :headerImg="headerImg"></next-page-header>
    <div class="header-text">
      <div class="text-1">ECOLOGICAL CONSTRUCTION</div>
      <div class="text-2">生态建设</div>
      <p>
        在“互联网+”时代，幸福人寿本着“以客户为中心”的理念，顺应数字化趋势，以科技领先、拥抱变化为改革发展之道，充分利
        用股东优势，积极推动市场化、专业化、科技化、差异化、集约化发展，致力于打造“金融+科技+生态”的发展战略格局。
      </p>
    </div>

    <div class="label-layout">匠心臻选，只为满足您的每一个需求期待！</div>
    <!--    2025，客户权益重磅升级-->
    <div class="flex-container">
      <h3>2025，客户权益重磅升级</h3>
      <p class="mt5">致力于打造“金融+科技+生态”的发展战略格局</p>
      <img src="../../../assets/images/h5/ecologicalConstruction/img.png" alt="" class="mt15" />

      <p class="text mt15">
        全力运用金融科技驱动亚务创新，重构以客户为中心的业务体系和运营体系，推动销售变革，形成高效管理，在不断改善客户体验的同时，与合作伙伴一起形成相互赋能的新型生态。
      </p>
    </div>
    <!--    幸福生态圈-->
    <div class="flex-container bgF5F7FA">
      <h3>幸福生态圈</h3>
      <p class="mt5">打造五位一体的生态布局</p>
      <img src="../../../assets/images/h5/ecologicalConstruction/quan.png" alt="" class="mt35" />

      <p class="text mt35">
        2025年，幸福人寿即将迎来自己18岁的生日，“成人之者，将责成人礼焉”，18岁的幸福人寿将砺霜成器，勇担重任，重新整合生态体系，重磅升级客户权益体系，围绕“健康无忧、颐养天年、成长护航、财富臻享、生活优享“，打造五位一体的生态布局，覆盖客户生活的方方面面，响应客户的日常需求。
      </p>
    </div>
  </div>
</template>
<script>
import headerImg from '@/assets/images/h5/ecologicalConstruction/eco-header-img.png'
export default {
  name: 'ecological-construction',
  data() {
    return {
      headerImg,
    }
  },
}
</script>

<style scoped lang="scss">
#ecological-construction-container {
  background: #f5f7fa;
  & .header-text {
    position: absolute;
    top: 51px;
    left: 20px;
    & .text-1 {
      font-family: HarmonyOS_Sans_Medium;
      font-size: 19px;
      color: #ffffff;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: uppercase;
      opacity: 0.3;
    }
    & .text-2 {
      font-family: PingFangSC, PingFang SC;
      font-weight: 800;
      font-size: 23px;
      color: #ffffff;
      line-height: 32px;
      text-align: left;
      font-style: normal;
      margin-top: -15px;
      position: relative;
      padding-bottom: 18px;
      &:after {
        content: '';
        position: absolute;
        width: 34px;
        height: 3px;
        background: #c81d2d;
        left: 0;
        bottom: 0;
      }
    }
    p {
      margin-top: 20px;
      width: 270px;
      height: 97px;
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 13px;
      color: #ffffff;
      line-height: 17px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  & .label-layout {
    width: 100%;
    margin-top: -42px;
    height: 42px;
    display: block;
    background: #c81d2d;
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 42px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
  }
  .bgF5F7FA {
    background: #f5f7fa !important;
  }
  & .flex-container {
    padding: 30px 15px 40px 15px;
    background: #fff;
    text-align: center;
    & h3 {
      font-family: AlibabaPuHuiTi_2_75_SemiBold;
      font-size: 16px;
      color: #000000;
      line-height: 26px;
      font-style: normal;
      text-transform: none;
    }
    & p {
      font-family: AlibabaPuHuiTi_2_45_Light;
      font-size: 10px;
      color: #666666;
      font-style: normal;
      text-transform: none;
    }
    & img {
      width: 100%;
      display: block;
    }
    & .text {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 12px;
      color: #646465;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding: 0 20px 15px 20px;
      position: relative;
      &:after {
        width: 27px;
        height: 3px;
        background: #c81d2d;
        content: '';
        position: absolute;
        left: 20px;
        bottom: 0;
      }
    }
  }
}
</style>