index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604
  1. <template>
  2. <div class="banner-box">
  3. <div class="center1200">
  4. <p class="banner-title animate__animated animate__bounce">互联网基础设施服务提供商</p>
  5. <p class="banner-explain">向客户提供业界领先的网络电信增值业务经营服务。</p>
  6. <div class="center-btn">了解详情</div>
  7. </div>
  8. </div>
  9. <div class="product-presentation">
  10. <div class="center1200">
  11. <p class="title slideInUp">产品介绍</p>
  12. <p class="explain">我们专注短信领域,赋能未来</p>
  13. <div class="classify-label">
  14. <div
  15. :class="[
  16. 'classify-item',
  17. activeClassify === index ? 'active-classify-item' : '',
  18. ]"
  19. v-for="(item, index) in classifyList"
  20. :key="`classify_${index}`"
  21. @click.stop="onSelectClassify(index)"
  22. >
  23. <img class="classify-icon" :src="item.icon" />
  24. <p class="classify-name">{{ item.label }}</p>
  25. </div>
  26. </div>
  27. <div class="classify-content">
  28. <div class="content-left">
  29. <template v-if="sublevelList && sublevelList.length > 0">
  30. <div class="subleve-label">
  31. <div class="subleve-item one-row" v-for="(sv, svIndex) in sublevelList">
  32. <img class="subleve-icon" :src="sv.icon" />
  33. <span
  34. :class="[
  35. 'subleve-name one-row',
  36. activeSublevel === svIndex ? 'active-subleve-item' : '',
  37. ]"
  38. @click.stop="activeSublevel = svIndex"
  39. >
  40. {{ sv.label }}
  41. </span>
  42. </div>
  43. </div>
  44. <div class="subleve-explain">
  45. {{ sublevelList[activeSublevel].explain }}
  46. </div>
  47. <div class="btn-01">了解详情</div>
  48. </template>
  49. <!-- <div></div> -->
  50. </div>
  51. <div class="content-right">
  52. <img
  53. class="model-img"
  54. v-if="sublevelList[activeSublevel].img"
  55. :src="sublevelList[activeSublevel].img"
  56. />
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. <!-- 平台优势 -->
  62. <div class="advantage">
  63. <div class="center1200">
  64. <p class="title slideInUp">平台优势</p>
  65. <p class="explain">为什么选择飞信云</p>
  66. <div class="advantage-content">
  67. <div class="advantage-item" v-for="(item, index) in advantageList">
  68. <img class="advantage-icon" :src="item.icon" />
  69. <p class="advantage-name">{{ item.label }}</p>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <!-- 合作案例 -->
  75. <div class="cooperation-case">
  76. <div class="center1200">
  77. <p class="title slideInUp">平台优势</p>
  78. <div class="case-content">
  79. <div class="case-item" v-for="(item, index) in caseList">
  80. <img class="case-icon" :src="item.icon" />
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. <!-- 联系我们 -->
  86. <div class="contact-us">
  87. <div class="center1200">
  88. <p class="contact-us-title">联系我们,即刻申请免费测试账号</p>
  89. <p class="contact-us-hint">为您的企业提供更稳定高效的信息服务!</p>
  90. <div class="contact-us-btn">联系我们<span>></span></div>
  91. </div>
  92. </div>
  93. </template>
  94. <script lang="ts" setup>
  95. import { ref, reactive } from "vue";
  96. // 产品介绍 Begin ---------------------
  97. import icon_01 from "./../static/icon/icon_01.png";
  98. import icon_02 from "./../static/icon/icon_02.png";
  99. import icon_03 from "./../static/icon/icon_03.png";
  100. import icon_04 from "./../static/icon/icon_04.png";
  101. import icon_05 from "./../static/icon/icon_05.png";
  102. import icon_06 from "./../static/icon/icon_06.png";
  103. import icon_07 from "./../static/icon/icon_07.png";
  104. import icon_08 from "./../static/icon/icon_08.png";
  105. const activeClassify = ref(0);
  106. const activeSublevel = ref(0);
  107. const sublevelList = ref<any>([]);
  108. const classifyList = ref([
  109. {
  110. label: "云通讯产品",
  111. icon: icon_01,
  112. children: [
  113. {
  114. label: "通知短信",
  115. icon: icon_08,
  116. img: icon_07,
  117. explain:
  118. "提供通知类短信服务,三网合一的高质量短信通道,适用服务通知、物流通知、订单通知、注册及消费信息确认等",
  119. link: "#",
  120. },
  121. {
  122. label: "短信验证码",
  123. icon: icon_08,
  124. explain:
  125. "提供通知类短信服务,三网合一的高质量短信通道,适用服务通知、物流通知、订单通知、注册及消费信息确认等",
  126. link: "#",
  127. },
  128. {
  129. label: "会员营销短信",
  130. icon: icon_08,
  131. explain:
  132. "提供通知类短信服务,三网合一的高质量短信通道,适用服务通知、物流通知、订单通知、注册及消费信息确认等",
  133. link: "#",
  134. },
  135. {
  136. label: "图片/视频短信",
  137. icon: icon_08,
  138. explain:
  139. "提供通知类短信服务,三网合一的高质量短信通道,适用服务通知、物流通知、订单通知、注册及消费信息确认等",
  140. link: "#",
  141. },
  142. {
  143. label: "5G短信",
  144. icon: icon_08,
  145. explain:
  146. "提供通知类短信服务,三网合一的高质量短信通道,适用服务通知、物流通知、订单通知、注册及消费信息确认等",
  147. link: "#",
  148. },
  149. {
  150. label: "语音短信",
  151. icon: icon_08,
  152. explain:
  153. "提供通知类短信服务,三网合一的高质量短信通道,适用服务通知、物流通知、订单通知、注册及消费信息确认等",
  154. link: "#",
  155. },
  156. {
  157. label: "国际短信",
  158. icon: icon_08,
  159. explain:
  160. "提供通知类短信服务,三网合一的高质量短信通道,适用服务通知、物流通知、订单通知、注册及消费信息确认等",
  161. link: "#",
  162. },
  163. ],
  164. },
  165. {
  166. label: "物联网",
  167. icon: icon_02,
  168. },
  169. {
  170. label: "号码检测",
  171. icon: icon_03,
  172. },
  173. {
  174. label: "实名认证",
  175. icon: icon_04,
  176. },
  177. {
  178. label: "业务风控",
  179. icon: icon_05,
  180. },
  181. {
  182. label: "IDC",
  183. icon: icon_06,
  184. },
  185. ]);
  186. // 选择一级分类
  187. const onSelectClassify = (e) => {
  188. activeClassify.value = e;
  189. sublevelList.value = classifyList.value[activeClassify.value].children;
  190. activeSublevel.value = 0;
  191. };
  192. onSelectClassify(0);
  193. // 产品介绍 End ---------------------
  194. // 平台优势
  195. const activeAdvantage = ref(0);
  196. const advantageList = ref([
  197. {
  198. label: "云通讯产品",
  199. icon: icon_01,
  200. },
  201. {
  202. label: "多流量套餐",
  203. icon: icon_02,
  204. },
  205. {
  206. label: "检测高效,覆盖面广",
  207. icon: icon_03,
  208. },
  209. {
  210. label: "认证准确,数据可视化",
  211. icon: icon_04,
  212. },
  213. {
  214. label: "安全防控,算法精确",
  215. icon: icon_05,
  216. },
  217. {
  218. label: "专业化运维",
  219. icon: icon_06,
  220. },
  221. ]);
  222. // 合作案例
  223. import logo_01 from "./../static/icon/logo_01.png";
  224. import logo_02 from "./../static/icon/logo_02.png";
  225. import logo_03 from "./../static/icon/logo_03.png";
  226. import logo_04 from "./../static/icon/logo_04.png";
  227. import logo_05 from "./../static/icon/logo_05.png";
  228. import logo_06 from "./../static/icon/logo_06.png";
  229. import logo_07 from "./../static/icon/logo_07.png";
  230. import logo_08 from "./../static/icon/logo_08.png";
  231. import logo_09 from "./../static/icon/logo_09.png";
  232. import logo_10 from "./../static/icon/logo_10.png";
  233. import logo_11 from "./../static/icon/logo_11.png";
  234. import logo_12 from "./../static/icon/logo_12.png";
  235. const caseList = ref([
  236. {
  237. icon: logo_01,
  238. },
  239. {
  240. icon: logo_02,
  241. },
  242. {
  243. icon: logo_03,
  244. },
  245. {
  246. icon: logo_04,
  247. },
  248. {
  249. icon: logo_05,
  250. },
  251. {
  252. icon: logo_06,
  253. },
  254. {
  255. icon: logo_07,
  256. },
  257. {
  258. icon: logo_08,
  259. },
  260. {
  261. icon: logo_09,
  262. },
  263. {
  264. icon: logo_10,
  265. },
  266. {
  267. icon: logo_11,
  268. },
  269. {
  270. icon: logo_12,
  271. },
  272. ]);
  273. </script>
  274. <style lang="scss" scoped>
  275. @import "./../static/css/tool.scss";
  276. .banner-box {
  277. width: 100%;
  278. min-height: 750px;
  279. font-family: var(--family-01);
  280. font-weight: var(--weight-400);
  281. background-image: url("../public/images/home_bg_01.png");
  282. background-repeat: no-repeat;
  283. background-position: center center;
  284. background-size: cover;
  285. display: flex;
  286. align-items: center;
  287. .banner-title {
  288. font-size: var(--size-48);
  289. color: var(--color-01);
  290. }
  291. .banner-explain {
  292. font-size: var(--size-24);
  293. color: var(--color-02);
  294. padding: var(--size-26) 0 var(--size-48);
  295. }
  296. }
  297. .product-presentation {
  298. width: 100%;
  299. background-image: url("../public/images/home_bg_02.png");
  300. background-repeat: no-repeat;
  301. background-position: center center;
  302. background-size: cover;
  303. padding-top: var(--size-95);
  304. .title {
  305. font-size: var(--size-34);
  306. font-family: var(--family-01);
  307. font-weight: var(--weight-700);
  308. color: var(--color-01);
  309. line-height: var(--size-48);
  310. text-align: center;
  311. }
  312. .explain {
  313. font-size: var(--size-18);
  314. font-family: var(--family-01);
  315. font-weight: var(--weight-400);
  316. text-align: center;
  317. color: var(--color-03);
  318. line-height: var(--size-48);
  319. }
  320. .classify-label {
  321. width: 100%;
  322. display: flex;
  323. justify-content: space-around;
  324. padding-top: var(--size-31);
  325. align-items: stretch;
  326. .classify-item {
  327. display: flex;
  328. flex-direction: column;
  329. justify-content: center;
  330. align-items: center;
  331. cursor: pointer;
  332. .classify-icon {
  333. width: var(--size-60);
  334. height: var(--size-60);
  335. object-fit: contain;
  336. }
  337. .classify-name {
  338. font-size: var(--size-20);
  339. line-height: var(--size-48);
  340. font-family: var(--family-01);
  341. font-weight: var(--weight-400);
  342. color: var(--color-02);
  343. position: relative;
  344. transition: all 0.2s;
  345. &::after {
  346. transition: all 0.6s;
  347. content: "";
  348. position: absolute;
  349. left: 0;
  350. right: 0;
  351. bottom: 0;
  352. width: 0;
  353. height: var(--size-2);
  354. background-color: transparent;
  355. }
  356. }
  357. }
  358. .active-classify-item {
  359. .classify-name {
  360. color: var(--color-04);
  361. font-weight: var(--weight-600);
  362. &::after {
  363. width: auto;
  364. background-color: var(--color-04);
  365. }
  366. }
  367. }
  368. }
  369. .classify-content {
  370. width: 100%;
  371. padding-top: var(--size-52);
  372. display: flex;
  373. align-items: stretch;
  374. .content-left {
  375. width: 1px;
  376. flex: 1;
  377. // padding-right: var(--size-100);
  378. display: flex;
  379. flex-direction: column;
  380. justify-content: center;
  381. .subleve-label {
  382. width: 100%;
  383. display: flex;
  384. align-items: stretch;
  385. flex-wrap: wrap;
  386. .subleve-item {
  387. width: 25%;
  388. display: flex;
  389. flex-direction: row;
  390. align-items: center;
  391. cursor: pointer;
  392. font-size: var(--color-18);
  393. font-family: var(--family-01);
  394. font-weight: var(--weight-400);
  395. line-height: var(--size-48);
  396. color: var(--color-01);
  397. .subleve-icon {
  398. width: var(--size-28);
  399. height: var(--size-25);
  400. object-fit: cover;
  401. }
  402. .subleve-name {
  403. text-align: left;
  404. padding: 0 var(--size-20) 0 var(--size-6);
  405. }
  406. }
  407. .active-subleve-item {
  408. color: var(--color-04);
  409. font-weight: var(--weight-700);
  410. }
  411. }
  412. .subleve-explain {
  413. font-size: var(--size-16);
  414. font-family: var(--family-01);
  415. font-weight: var(--weight-400);
  416. color: var(--color-01);
  417. // line-height: var(--size-32);
  418. padding: var(--size-55) 0;
  419. }
  420. }
  421. .content-right {
  422. transform: translateX(81px);
  423. flex-shrink: 0;
  424. width: var(--size-487);
  425. height: var(--size-627);
  426. .model-img {
  427. width: var(--size-487);
  428. height: var(--size-627);
  429. object-fit: cover;
  430. }
  431. }
  432. }
  433. }
  434. .advantage {
  435. width: 100%;
  436. background-image: url("../public/images/home_bg_03.png");
  437. background-repeat: no-repeat;
  438. background-position: center center;
  439. background-size: cover;
  440. padding-top: var(--size-95);
  441. .title {
  442. font-size: var(--size-34);
  443. font-family: var(--family-01);
  444. font-weight: var(--weight-700);
  445. color: var(--color-01);
  446. text-align: center;
  447. }
  448. .explain {
  449. font-size: var(--size-18);
  450. font-family: var(--family-01);
  451. font-weight: var(--weight-400);
  452. text-align: center;
  453. color: var(--color-03);
  454. padding: var(--size-17) 0 var(--size-20);
  455. }
  456. .advantage-content {
  457. display: flex;
  458. align-items: stretch;
  459. justify-content: center;
  460. flex-wrap: wrap;
  461. padding: var(--size-59) 0 var(--size-50);
  462. .advantage-item {
  463. flex-shrink: 0;
  464. // width: 362px;
  465. width: calc((100% - var(--size-122)) / 3);
  466. height: 221px;
  467. display: flex;
  468. flex-direction: column;
  469. justify-content: center;
  470. align-items: center;
  471. background-color: #fff;
  472. box-shadow: var(--shadow-01);
  473. margin-right: calc(var(--size-122) / 2);
  474. margin-bottom: var(--size-39);
  475. border-radius: 8px;
  476. cursor: pointer;
  477. transition: all 0.3s;
  478. &:hover {
  479. background-color: var(--color-04);
  480. .advantage-name {
  481. color: #fff;
  482. }
  483. }
  484. &:nth-child(3n) {
  485. margin-right: 0;
  486. }
  487. .advantage-icon {
  488. width: var(--size-86);
  489. height: var(--size-76);
  490. object-fit: contain;
  491. }
  492. .advantage-name {
  493. padding-top: var(--size-17);
  494. font-size: var(--size-24);
  495. font-family: var(--family-01);
  496. font-weight: var(--color-01);
  497. }
  498. }
  499. }
  500. }
  501. .cooperation-case {
  502. width: 100%;
  503. background-image: url("../public/images/home_bg_04.png");
  504. background-repeat: no-repeat;
  505. background-position: center center;
  506. background-size: cover;
  507. padding-top: var(--size-95);
  508. .title {
  509. font-size: var(--size-34);
  510. font-family: var(--family-01);
  511. font-weight: var(--weight-700);
  512. color: var(--color-01);
  513. text-align: center;
  514. }
  515. .case-content {
  516. display: flex;
  517. flex-wrap: wrap;
  518. justify-content: center;
  519. padding: var(--size-40) 0 var(--size-60);
  520. .case-item {
  521. width: calc((100% - var(--size-96)) / 4);
  522. height: 133px;
  523. margin-right: calc(var(--size-96) / 3);
  524. margin-bottom: calc(var(--size-96) / 3);
  525. background-color: #fff;
  526. box-shadow: var(--shadow-01);
  527. padding: var(--size-15) var(--size-20);
  528. border-radius: 8px;
  529. cursor: pointer;
  530. &:nth-child(4n) {
  531. margin-right: 0;
  532. }
  533. .case-icon {
  534. width: 100%;
  535. height: 100%;
  536. object-fit: contain;
  537. }
  538. }
  539. }
  540. }
  541. .contact-us {
  542. width: 100%;
  543. min-height: 317px;
  544. background-image: url("../public/images/home_bg_05.png");
  545. background-repeat: no-repeat;
  546. background-position: center center;
  547. background-size: cover;
  548. display: flex;
  549. flex-direction: column;
  550. align-items: center;
  551. justify-content: center;
  552. .contact-us-title {
  553. font-size: var(--size-36);
  554. font-family: var(--family-01);
  555. font-weight: var(--weight-400);
  556. color: #ffffff;
  557. line-height: 48px;
  558. }
  559. .contact-us-hint {
  560. font-size: var(--size-18);
  561. font-family: var(--family-01);
  562. font-weight: var(--weight-400);
  563. color: #ffffff;
  564. padding: var(--size-29) 0 var(--size-46);
  565. }
  566. .contact-us-btn {
  567. width: 227px;
  568. height: 61px;
  569. background: #ffffff;
  570. border-radius: 6px;
  571. background-color: #fff;
  572. display: flex;
  573. justify-content: center;
  574. align-items: center;
  575. cursor: pointer;
  576. font-size: var(--size-24);
  577. font-family: var(--family-01);
  578. font-weight: var(--weight-400);
  579. color: #08b3e9;
  580. span{
  581. padding-left: var(--size-18);
  582. }
  583. }
  584. }
  585. </style>