feixinyun/pages/index.vue

<template>
  <div class="banner-box">
    <div class="center1200">
      <p class="banner-title animate__animated animate__bounce">互联网基础设施服务提供商</p>
      <p class="banner-explain">向客户提供业界领先的网络电信增值业务经营服务。</p>
      <div class="center-btn">了解详情</div>
    </div>
  </div>
  <div class="product-presentation">
    <div class="center1200">
      <p class="title slideInUp">产品介绍</p>
      <p class="explain">我们专注短信领域，赋能未来</p>
      <div class="classify-label">
        <div
          :class="[
            'classify-item',
            activeClassify === index ? 'active-classify-item' : '',
          ]"
          v-for="(item, index) in classifyList"
          :key="`classify_${index}`"
          @click.stop="onSelectClassify(index)"
        >
          <img class="classify-icon" :src="item.icon" />
          <p class="classify-name">{{ item.label }}</p>
        </div>
      </div>
      <div class="classify-content">
        <div class="content-left">
          <template v-if="sublevelList && sublevelList.length > 0">
            <div class="subleve-label">
              <div class="subleve-item one-row" v-for="(sv, svIndex) in sublevelList">
                <img class="subleve-icon" :src="sv.icon" />
                <span
                  :class="[
                    'subleve-name one-row',
                    activeSublevel === svIndex ? 'active-subleve-item' : '',
                  ]"
                  @click.stop="activeSublevel = svIndex"
                >
                  {{ sv.label }}
                </span>
              </div>
            </div>
            <div class="subleve-explain">
              {{ sublevelList[activeSublevel].explain }}
            </div>

            <div class="btn-01">了解详情</div>
          </template>
          <!-- <div></div> -->
        </div>
        <div class="content-right">
          <img
            class="model-img"
            v-if="sublevelList[activeSublevel].img"
            :src="sublevelList[activeSublevel].img"
          />
        </div>
      </div>
    </div>
  </div>
  <!-- 平台优势 -->
  <div class="advantage">
    <div class="center1200">
      <p class="title slideInUp">平台优势</p>
      <p class="explain">为什么选择飞信云</p>

      <div class="advantage-content">
        <div class="advantage-item" v-for="(item, index) in advantageList">
          <img class="advantage-icon" :src="item.icon" />
          <p class="advantage-name">{{ item.label }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 合作案例 -->
  <div class="cooperation-case">
    <div class="center1200">
      <p class="title slideInUp">平台优势</p>
      <div class="case-content">
        <div class="case-item" v-for="(item, index) in caseList">
          <img class="case-icon" :src="item.icon" />
        </div>
      </div>
    </div>
  </div>

  <!-- 联系我们 -->
  <div class="contact-us">
    <div class="center1200">
      <p class="contact-us-title">联系我们，即刻申请免费测试账号</p>
      <p class="contact-us-hint">为您的企业提供更稳定高效的信息服务！</p>
      <div class="contact-us-btn">联系我们<span>></span></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";

// 产品介绍 Begin ---------------------
import icon_01 from "./../static/icon/icon_01.png";
import icon_02 from "./../static/icon/icon_02.png";
import icon_03 from "./../static/icon/icon_03.png";
import icon_04 from "./../static/icon/icon_04.png";
import icon_05 from "./../static/icon/icon_05.png";
import icon_06 from "./../static/icon/icon_06.png";
import icon_07 from "./../static/icon/icon_07.png";
import icon_08 from "./../static/icon/icon_08.png";
const activeClassify = ref(0);
const activeSublevel = ref(0);
const sublevelList = ref<any>([]);

const classifyList = ref([
  {
    label: "云通讯产品",
    icon: icon_01,
    children: [
      {
        label: "通知短信",
        icon: icon_08,
        img: icon_07,
        explain:
          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
        link: "#",
      },
      {
        label: "短信验证码",
        icon: icon_08,
        explain:
          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
        link: "#",
      },
      {
        label: "会员营销短信",
        icon: icon_08,
        explain:
          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
        link: "#",
      },
      {
        label: "图片/视频短信",
        icon: icon_08,
        explain:
          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
        link: "#",
      },
      {
        label: "5G短信",
        icon: icon_08,
        explain:
          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
        link: "#",
      },
      {
        label: "语音短信",
        icon: icon_08,
        explain:
          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
        link: "#",
      },
      {
        label: "国际短信",
        icon: icon_08,
        explain:
          "提供通知类短信服务，三网合一的高质量短信通道，适用服务通知、物流通知、订单通知、注册及消费信息确认等",
        link: "#",
      },
    ],
  },
  {
    label: "物联网",
    icon: icon_02,
  },
  {
    label: "号码检测",
    icon: icon_03,
  },
  {
    label: "实名认证",
    icon: icon_04,
  },
  {
    label: "业务风控",
    icon: icon_05,
  },
  {
    label: "IDC",
    icon: icon_06,
  },
]);

// 选择一级分类
const onSelectClassify = (e) => {
  activeClassify.value = e;
  sublevelList.value = classifyList.value[activeClassify.value].children;
  activeSublevel.value = 0;
};

onSelectClassify(0);

// 产品介绍 End ---------------------

// 平台优势

const activeAdvantage = ref(0);

const advantageList = ref([
  {
    label: "云通讯产品",
    icon: icon_01,
  },
  {
    label: "多流量套餐",
    icon: icon_02,
  },
  {
    label: "检测高效,覆盖面广",
    icon: icon_03,
  },
  {
    label: "认证准确，数据可视化",
    icon: icon_04,
  },
  {
    label: "安全防控，算法精确",
    icon: icon_05,
  },
  {
    label: "专业化运维",
    icon: icon_06,
  },
]);

// 合作案例
import logo_01 from "./../static/icon/logo_01.png";
import logo_02 from "./../static/icon/logo_02.png";
import logo_03 from "./../static/icon/logo_03.png";
import logo_04 from "./../static/icon/logo_04.png";
import logo_05 from "./../static/icon/logo_05.png";
import logo_06 from "./../static/icon/logo_06.png";
import logo_07 from "./../static/icon/logo_07.png";
import logo_08 from "./../static/icon/logo_08.png";
import logo_09 from "./../static/icon/logo_09.png";
import logo_10 from "./../static/icon/logo_10.png";
import logo_11 from "./../static/icon/logo_11.png";
import logo_12 from "./../static/icon/logo_12.png";
const caseList = ref([
  {
    icon: logo_01,
  },
  {
    icon: logo_02,
  },
  {
    icon: logo_03,
  },
  {
    icon: logo_04,
  },
  {
    icon: logo_05,
  },
  {
    icon: logo_06,
  },
  {
    icon: logo_07,
  },
  {
    icon: logo_08,
  },
  {
    icon: logo_09,
  },
  {
    icon: logo_10,
  },
  {
    icon: logo_11,
  },
  {
    icon: logo_12,
  },
]);
</script>
<style lang="scss" scoped>
@import "./../static/css/tool.scss";
.banner-box {
  width: 100%;
  min-height: 750px;
  font-family: var(--family-01);
  font-weight: var(--weight-400);
  background-image: url("../public/images/home_bg_01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  .banner-title {
    font-size: var(--size-48);
    color: var(--color-01);
  }
  .banner-explain {
    font-size: var(--size-24);
    color: var(--color-02);
    padding: var(--size-26) 0 var(--size-48);
  }
}

.product-presentation {
  width: 100%;
  background-image: url("../public/images/home_bg_02.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: var(--size-95);
  .title {
    font-size: var(--size-34);
    font-family: var(--family-01);
    font-weight: var(--weight-700);
    color: var(--color-01);
    line-height: var(--size-48);
    text-align: center;
  }
  .explain {
    font-size: var(--size-18);
    font-family: var(--family-01);
    font-weight: var(--weight-400);
    text-align: center;
    color: var(--color-03);
    line-height: var(--size-48);
  }
  .classify-label {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-top: var(--size-31);
    align-items: stretch;
    .classify-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .classify-icon {
        width: var(--size-60);
        height: var(--size-60);
        object-fit: contain;
      }
      .classify-name {
        font-size: var(--size-20);
        line-height: var(--size-48);
        font-family: var(--family-01);
        font-weight: var(--weight-400);
        color: var(--color-02);
        position: relative;
        transition: all 0.2s;
        &::after {
          transition: all 0.6s;
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          width: 0;
          height: var(--size-2);
          background-color: transparent;
        }
      }
    }
    .active-classify-item {
      .classify-name {
        color: var(--color-04);
        font-weight: var(--weight-600);
        &::after {
          width: auto;
          background-color: var(--color-04);
        }
      }
    }
  }
  .classify-content {
    width: 100%;
    padding-top: var(--size-52);
    display: flex;
    align-items: stretch;
    .content-left {
      width: 1px;
      flex: 1;
      // padding-right: var(--size-100);
      display: flex;
      flex-direction: column;
      justify-content: center;
      .subleve-label {
        width: 100%;
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        .subleve-item {
          width: 25%;
          display: flex;
          flex-direction: row;
          align-items: center;
          cursor: pointer;
          font-size: var(--color-18);
          font-family: var(--family-01);
          font-weight: var(--weight-400);
          line-height: var(--size-48);
          color: var(--color-01);
          .subleve-icon {
            width: var(--size-28);
            height: var(--size-25);
            object-fit: cover;
          }
          .subleve-name {
            text-align: left;
            padding: 0 var(--size-20) 0 var(--size-6);
          }
        }
        .active-subleve-item {
          color: var(--color-04);
          font-weight: var(--weight-700);
        }
      }
      .subleve-explain {
        font-size: var(--size-16);
        font-family: var(--family-01);
        font-weight: var(--weight-400);
        color: var(--color-01);
        // line-height: var(--size-32);
        padding: var(--size-55) 0;
      }
    }
    .content-right {
      transform: translateX(81px);
      flex-shrink: 0;
      width: var(--size-487);
      height: var(--size-627);
      .model-img {
        width: var(--size-487);
        height: var(--size-627);
        object-fit: cover;
      }
    }
  }
}

.advantage {
  width: 100%;
  background-image: url("../public/images/home_bg_03.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: var(--size-95);
  .title {
    font-size: var(--size-34);
    font-family: var(--family-01);
    font-weight: var(--weight-700);
    color: var(--color-01);
    text-align: center;
  }
  .explain {
    font-size: var(--size-18);
    font-family: var(--family-01);
    font-weight: var(--weight-400);
    text-align: center;
    color: var(--color-03);
    padding: var(--size-17) 0 var(--size-20);
  }

  .advantage-content {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    padding: var(--size-59) 0 var(--size-50);
    .advantage-item {
      flex-shrink: 0;
      // width: 362px;

      width: calc((100% - var(--size-122)) / 3);
      height: 221px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      box-shadow: var(--shadow-01);
      margin-right: calc(var(--size-122) / 2);
      margin-bottom: var(--size-39);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        background-color: var(--color-04);
        .advantage-name {
          color: #fff;
        }
      }
      &:nth-child(3n) {
        margin-right: 0;
      }
      .advantage-icon {
        width: var(--size-86);
        height: var(--size-76);
        object-fit: contain;
      }
      .advantage-name {
        padding-top: var(--size-17);
        font-size: var(--size-24);
        font-family: var(--family-01);
        font-weight: var(--color-01);
      }
    }
  }
}

.cooperation-case {
  width: 100%;
  background-image: url("../public/images/home_bg_04.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: var(--size-95);
  .title {
    font-size: var(--size-34);
    font-family: var(--family-01);
    font-weight: var(--weight-700);
    color: var(--color-01);
    text-align: center;
  }
  .case-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--size-40) 0 var(--size-60);
    .case-item {
      width: calc((100% - var(--size-96)) / 4);
      height: 133px;
      margin-right: calc(var(--size-96) / 3);
      margin-bottom: calc(var(--size-96) / 3);
      background-color: #fff;
      box-shadow: var(--shadow-01);
      padding: var(--size-15) var(--size-20);
      border-radius: 8px;
      cursor: pointer;
      &:nth-child(4n) {
        margin-right: 0;
      }
      .case-icon {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}

.contact-us {
  width: 100%;
  min-height: 317px;
  background-image: url("../public/images/home_bg_05.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .contact-us-title {
    font-size: var(--size-36);
    font-family: var(--family-01);
    font-weight: var(--weight-400);
    color: #ffffff;
    line-height: 48px;
  }
  .contact-us-hint {
    font-size: var(--size-18);
    font-family: var(--family-01);
    font-weight: var(--weight-400);
    color: #ffffff;
    padding: var(--size-29) 0 var(--size-46);
  }
  .contact-us-btn {
    width: 227px;
    height: 61px;
    background: #ffffff;
    border-radius: 6px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: var(--size-24);
    font-family: var(--family-01);
    font-weight: var(--weight-400); 
    color: #08b3e9; 
    span{
      padding-left: var(--size-18);
    }
  }
}
</style>