|
@@ -1,603 +0,0 @@
|
|
|
-<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>
|