AboutUs.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736
  1. <template>
  2. <div class="banner">
  3. <div class="banner-content">
  4. <p class="banner-title mywow" animate-param="fadeInUp,delay-0.2s">关于飞信云</p>
  5. <p class="banner-text mywow" animate-param="fadeInUp,delay-0.2s">
  6. 飞信云短信群发平台是基于中国三大运营商直接提供的短信端口与互联网连接实现与客户指定号码进行短信批量发送和自定义发送的平台。致力于短信应用技术的开发产品销售和系统集成,为广大客户提供全方位的短信应用解决方案。
  7. </p>
  8. <div class="banner-type mywow" animate-param="fadeInUp,delay-0.2s">
  9. <div class="type-item">
  10. <p class="type-statistics">
  11. <span class="statistics-val">1</span><span class="statistics-tag">w+</span>
  12. </p>
  13. <p class="type-name">用户数量</p>
  14. </div>
  15. <div class="type-item">
  16. <p class="type-statistics">
  17. <span class="statistics-val">1200</span
  18. ><span class="statistics-tag">条/秒</span>
  19. </p>
  20. <p class="type-name">通道流速</p>
  21. </div>
  22. <div class="type-item">
  23. <p class="type-statistics">
  24. <span class="statistics-val">50</span><span class="statistics-tag">+</span>
  25. </p>
  26. <p class="type-name">用户数量</p>
  27. </div>
  28. <div class="type-item">
  29. <p class="type-statistics">
  30. <span class="statistics-val"><5</span><span class="statistics-tag">s</span>
  31. </p>
  32. <p class="type-name">直连网关通道</p>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="AboutUs bg">
  38. <div class="center1440 AboutUs-content">
  39. <div class="AboutUs-left mywow" animate-param="fadeInUp,delay-0.2s">
  40. <img src="../assets/icon/icon_17.png" />
  41. </div>
  42. <div class="AboutUs-right">
  43. <p class="headline mywow" animate-param="fadeInUp,delay-0.2s">关于我们</p>
  44. <p class="subhead mywow" animate-param="fadeInUp,delay-0.2s">
  45. 我们的愿景是向客户提供业界领先的网络电信增值业务经营服务,目前用户数量已突破1w+,合作伙伴100+,如今已建立起良好的口碑,我们提供以下供客户选择:
  46. </p>
  47. <div class="type-box">
  48. <div class="type-list mywow" animate-param="fadeInUp,delay-0.2s">
  49. <div
  50. animate-param="fadeInUp,delay-0.2s"
  51. :class="[
  52. 'type-item one-row mywow',
  53. activeAboutUs === index ? 'active-type-item' : '',
  54. ]"
  55. v-for="(item, index) in AboutUsList"
  56. @click.stop="activeAboutUs = index"
  57. >
  58. {{ item.label }}
  59. </div>
  60. </div>
  61. </div>
  62. <div class="type-content mywow" animate-param="fadeInUp,delay-0.2s">
  63. <div class="type-content-item" v-for="s in AboutUsList[activeAboutUs].children">
  64. <img :src="s.icon" />
  65. <p class="type-content-name one-row">{{ s.name }}</p>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="promise">
  72. <div class="center1440">
  73. <p class="headline mywow" animate-param="fadeInUp,delay-0.2s">服务承诺</p>
  74. <p class="subhead mywow" animate-param="fadeInUp,delay-0.2s">好的售后服务也是客户信赖的原因</p>
  75. <div class="promise-content mywow" animate-param="fadeInUp,delay-0.2s">
  76. <div class="promise-content-item" v-for="item in 4">
  77. <img class="icon" src="../assets/icon/icon_24.png" />
  78. <p class="title">准时到达</p>
  79. <p class="value">
  80. <span class="tag">一</span>
  81. <span class="text">安全的三网合一通道,可覆盖移动、电信、联通</span>
  82. </p>
  83. <p class="value">
  84. <span class="tag">一</span>
  85. <span class="text">106全号段</span>
  86. </p>
  87. <p class="value">
  88. <span class="tag">一</span>
  89. <span class="text">多条备用通道支持</span>
  90. </p>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <!-- 资质与证书 -->
  96. <div class="certificate">
  97. <div class="center1440">
  98. <p class="headline mywow" animate-param="fadeInUp,delay-0.2s">资质和证书</p>
  99. <div class="certificate-content mywow" animate-param="fadeInUp,delay-0.2s">
  100. <n-carousel
  101. class="certificate-carousel"
  102. autoplay
  103. :interval="5000"
  104. :show-dots="false"
  105. :slides-per-view="4"
  106. :space-between="64"
  107. draggable
  108. >
  109. <div class="carousel-item" v-for="item in certificateList" :key="item">
  110. <img class="carousel-img" :src="item.img" />
  111. <p class="carousel-label">{{ item.label }}</p>
  112. </div>
  113. </n-carousel>
  114. </div>
  115. </div>
  116. </div>
  117. <!-- 联系飞信云 -->
  118. <div class="affiliation">
  119. <div class="center1440">
  120. <p class="headline mywow" animate-param="fadeInUp,delay-0.2s">联系飞信云</p>
  121. <p class="subhead mywow" animate-param="fadeInUp,delay-0.2s">欢迎通过以下方式联系我们</p>
  122. </div>
  123. <div class="affiliation-content mywow" animate-param="fadeInUp,delay-0.2s">
  124. <div class="affiliation-left">
  125. <img src="./../assets/images/map.png" />
  126. </div>
  127. <div class="affiliation-right bg">
  128. <p class="right-item">
  129. <img class="right-icon" src="./../assets/icon/icon_19.png" />
  130. <span class="right-text">公司官网:www.51skyton.com/</span>
  131. </p>
  132. <p class="right-item">
  133. <img class="right-icon" src="./../assets/icon/icon_20.png" />
  134. <span class="right-text">公司邮箱:pengde@flysms.cn</span>
  135. </p>
  136. <p class="right-item">
  137. <img class="right-icon" src="./../assets/icon/icon_21.png" />
  138. <span class="right-text">联系热线:027 - 63492056</span>
  139. </p>
  140. <p class="right-item">
  141. <img class="right-icon" src="./../assets/icon/icon_22.png" />
  142. <span class="right-text">公司地址:武汉市北辰光谷里A8栋2002</span>
  143. </p>
  144. <div class="right-btn">
  145. <img class="icon" src="./../assets/icon/icon_23.png" />
  146. <span class="text">导航去这里</span>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </template>
  152. <script setup>
  153. import {} from "vue";
  154. // 关于我们
  155. import icon_18 from "./../assets/icon/icon_18.png";
  156. const activeAboutUs = ref(0);
  157. const AboutUsList = [
  158. {
  159. label: "云通讯产品",
  160. children: [
  161. {
  162. icon: icon_18,
  163. name: "通知短信",
  164. },
  165. {
  166. icon: icon_18,
  167. name: "验证码短信",
  168. },
  169. {
  170. icon: icon_18,
  171. name: "会员营销短信",
  172. },
  173. {
  174. icon: icon_18,
  175. name: "图片视频短信",
  176. },
  177. {
  178. icon: icon_18,
  179. name: "5G短信",
  180. },
  181. {
  182. icon: icon_18,
  183. name: "语音短信",
  184. },
  185. {
  186. icon: icon_18,
  187. name: "国际短信",
  188. },
  189. ],
  190. },
  191. {
  192. label: "物联网",
  193. children: [
  194. {
  195. icon: icon_18,
  196. name: "通知短信",
  197. },
  198. {
  199. icon: icon_18,
  200. name: "验证码短信",
  201. },
  202. {
  203. icon: icon_18,
  204. name: "会员营销短信",
  205. },
  206. {
  207. icon: icon_18,
  208. name: "图片视频短信",
  209. },
  210. {
  211. icon: icon_18,
  212. name: "5G短信",
  213. },
  214. {
  215. icon: icon_18,
  216. name: "语音短信",
  217. },
  218. {
  219. icon: icon_18,
  220. name: "国际短信",
  221. },
  222. ],
  223. },
  224. {
  225. label: "号码检测",
  226. children: [
  227. {
  228. icon: icon_18,
  229. name: "通知短信",
  230. },
  231. {
  232. icon: icon_18,
  233. name: "验证码短信",
  234. },
  235. {
  236. icon: icon_18,
  237. name: "会员营销短信",
  238. },
  239. {
  240. icon: icon_18,
  241. name: "图片视频短信",
  242. },
  243. {
  244. icon: icon_18,
  245. name: "5G短信",
  246. },
  247. {
  248. icon: icon_18,
  249. name: "语音短信",
  250. },
  251. {
  252. icon: icon_18,
  253. name: "国际短信",
  254. },
  255. ],
  256. },
  257. {
  258. label: "实名认证",
  259. children: [
  260. {
  261. icon: icon_18,
  262. name: "通知短信",
  263. },
  264. {
  265. icon: icon_18,
  266. name: "验证码短信",
  267. },
  268. {
  269. icon: icon_18,
  270. name: "会员营销短信",
  271. },
  272. {
  273. icon: icon_18,
  274. name: "图片视频短信",
  275. },
  276. {
  277. icon: icon_18,
  278. name: "5G短信",
  279. },
  280. {
  281. icon: icon_18,
  282. name: "语音短信",
  283. },
  284. {
  285. icon: icon_18,
  286. name: "国际短信",
  287. },
  288. ],
  289. },
  290. {
  291. label: "业务风控",
  292. children: [
  293. {
  294. icon: icon_18,
  295. name: "通知短信",
  296. },
  297. {
  298. icon: icon_18,
  299. name: "验证码短信",
  300. },
  301. {
  302. icon: icon_18,
  303. name: "会员营销短信",
  304. },
  305. {
  306. icon: icon_18,
  307. name: "图片视频短信",
  308. },
  309. {
  310. icon: icon_18,
  311. name: "5G短信",
  312. },
  313. {
  314. icon: icon_18,
  315. name: "语音短信",
  316. },
  317. {
  318. icon: icon_18,
  319. name: "国际短信",
  320. },
  321. ],
  322. },
  323. {
  324. label: "IDC",
  325. children: [
  326. {
  327. icon: icon_18,
  328. name: "通知短信",
  329. },
  330. {
  331. icon: icon_18,
  332. name: "验证码短信",
  333. },
  334. {
  335. icon: icon_18,
  336. name: "会员营销短信",
  337. },
  338. {
  339. icon: icon_18,
  340. name: "图片视频短信",
  341. },
  342. {
  343. icon: icon_18,
  344. name: "5G短信",
  345. },
  346. {
  347. icon: icon_18,
  348. name: "语音短信",
  349. },
  350. {
  351. icon: icon_18,
  352. name: "国际短信",
  353. },
  354. ],
  355. },
  356. ];
  357. // 资质与证书
  358. import certificate_01 from "./../assets/images/certificate_01.png";
  359. import certificate_02 from "./../assets/images/certificate_02.png";
  360. import certificate_03 from "./../assets/images/certificate_03.png";
  361. import certificate_04 from "./../assets/images/certificate_04.png";
  362. const certificateList = ref([
  363. {
  364. label: "隐私信息管理体系认证证书",
  365. img: certificate_01,
  366. },
  367. {
  368. label: "质量管理体系认证证书",
  369. img: certificate_02,
  370. },
  371. {
  372. label: "中华人民共和国电信网码号资源使用证书",
  373. img: certificate_03,
  374. },
  375. {
  376. label: "中华人民共和国增值电信业务经营许可证",
  377. img: certificate_04,
  378. },
  379. ]);
  380. </script>
  381. <style scoped lang="scss">
  382. .banner {
  383. width: 100%;
  384. min-height: 560px;
  385. font-family: var(--family-01);
  386. font-weight: var(--weight-400);
  387. background-image: url("../assets/images/bg_02.png");
  388. background-repeat: no-repeat;
  389. background-position: center center;
  390. background-size: cover;
  391. display: flex;
  392. align-items: center;
  393. .banner-content {
  394. width: 1284px;
  395. margin: 0 auto;
  396. padding: var(--size-68);
  397. .banner-title {
  398. font-size: var(--size-48);
  399. color: var(--color-01);
  400. }
  401. .banner-text {
  402. padding-top: var(--size-30);
  403. font-size: var(--size-20);
  404. color: var(--color-02);
  405. line-height: var(--size-37);
  406. }
  407. .banner-type {
  408. display: flex;
  409. align-items: stretch;
  410. padding-top: var(--size-52);
  411. .type-item {
  412. padding-right: var(--size-53);
  413. .type-statistics {
  414. color: var(--color-01);
  415. font-weight: var(--weight-600);
  416. .statistics-val {
  417. font-size: var(--size-50);
  418. font-family: var(--family-02);
  419. }
  420. .statistics-tag {
  421. font-family: var(--family-01);
  422. font-size: var(--size-24);
  423. }
  424. }
  425. .type-name {
  426. font-size: var(--size-16);
  427. color: var(--color-02);
  428. padding-top: var(--size-12);
  429. // line-height: 37px;
  430. }
  431. }
  432. }
  433. }
  434. }
  435. .AboutUs {
  436. width: 100%;
  437. min-height: 791px;
  438. background-image: url("../assets/images/bg_04.png");
  439. display: flex;
  440. align-items: center;
  441. padding: var(--size-122) 0;
  442. .AboutUs-content {
  443. display: flex;
  444. justify-content: space-between;
  445. align-items: center;
  446. .AboutUs-left {
  447. flex-shrink: 0;
  448. width: 531px;
  449. height: 547px;
  450. img {
  451. width: 100%;
  452. height: 100%;
  453. object-fit: contain;
  454. }
  455. }
  456. .AboutUs-right {
  457. padding-left: var(--size-100);
  458. flex: 1;
  459. .headline {
  460. font-size: var(--size-48);
  461. padding-bottom: var(--size-30);
  462. }
  463. .subhead {
  464. font-size: var(--size-20);
  465. color: var(--color-02);
  466. line-height: 1.3;
  467. }
  468. .type-box {
  469. width: 100%;
  470. .type-list {
  471. width: 100%;
  472. display: flex;
  473. padding-top: var(--size-62);
  474. .type-item {
  475. flex: 1;
  476. flex-shrink: 0;
  477. margin-right: var(--size-6);
  478. height: var(--size-40);
  479. line-height: var(--size-40);
  480. background: var(--color-06);
  481. border-radius: var(--size-4);
  482. font-size: var(--size-18);
  483. padding: 0 var(--size-10);
  484. text-align: center;
  485. cursor: pointer;
  486. &:last-child {
  487. margin-right: 0;
  488. }
  489. }
  490. .active-type-item {
  491. background-color: var(--color-04);
  492. color: #fff;
  493. }
  494. }
  495. }
  496. .type-content {
  497. padding-top: 46px;
  498. width: 100%;
  499. display: flex;
  500. flex-wrap: wrap;
  501. justify-content: space-between;
  502. .type-content-item {
  503. flex-shrink: 0;
  504. display: flex;
  505. flex-direction: column;
  506. align-items: center;
  507. justify-content: center;
  508. padding: 0 10px;
  509. img {
  510. width: 42px;
  511. height: 42px;
  512. object-fit: contain;
  513. }
  514. .type-content-name {
  515. font-size: var(--size-16);
  516. text-align: center;
  517. color: var(--color-02);
  518. padding-top: var(--size-14);
  519. }
  520. }
  521. }
  522. }
  523. }
  524. }
  525. .promise {
  526. width: 100%;
  527. min-height: 791px;
  528. font-family: var(--family-01);
  529. font-weight: var(--weight-400);
  530. background-image: url("../assets/images/home_bg_02.png");
  531. p {
  532. text-align: center;
  533. }
  534. .headline {
  535. font-size: var(--size-34);
  536. font-family: var(--family-01);
  537. font-weight: var(--weight-700);
  538. color: var(--color-01);
  539. padding-top: var(--size-93);
  540. }
  541. .subhead {
  542. padding-top: var(--size-17);
  543. font-size: var(--size-18);
  544. font-family: var(--family-01);
  545. font-weight: var(--weight-400);
  546. color: var(--color-03);
  547. }
  548. .promise-content {
  549. width: 100%;
  550. display: flex;
  551. flex-direction: row;
  552. align-items: stretch;
  553. padding-top: var(--size-60);
  554. border-bottom: 2px solid var(--color-04);
  555. .promise-content-item {
  556. min-height: 384px;
  557. flex: 1;
  558. flex-shrink: 0;
  559. background-color: #fff;
  560. box-shadow: var(--shadow-01);
  561. border-radius: 8px;
  562. padding: var(--size-52);
  563. display: flex;
  564. flex-direction: column;
  565. // transform: scale(1.1);
  566. transition: flex 0.2s;
  567. cursor: pointer;
  568. &:hover {
  569. flex: 1.2;
  570. }
  571. p {
  572. text-align: left;
  573. }
  574. .icon {
  575. width: 95px;
  576. height: 75px;
  577. object-fit: contain;
  578. }
  579. .title {
  580. font-size: 24px;
  581. padding-top: var(--size-25);
  582. line-height: 1;
  583. }
  584. .value {
  585. font-size: 16px;
  586. color: #666666;
  587. display: flex;
  588. padding-top: var(--size-15);
  589. line-height: 1.2;
  590. &:first-child {
  591. padding-top: var(--size-30);
  592. }
  593. .tag {
  594. flex-shrink: 0;
  595. font-weight: var(--weight-700);
  596. padding-right: 7px;
  597. }
  598. }
  599. }
  600. }
  601. }
  602. .certificate {
  603. width: 100%;
  604. min-height: 744px;
  605. font-family: var(--family-01);
  606. font-weight: var(--weight-400);
  607. background-image: url("../assets/images/home_bg_04.png");
  608. .headline {
  609. text-align: center;
  610. font-size: var(--size-48);
  611. padding: var(--size-90) 0 var(--size-40);
  612. }
  613. .certificate-content {
  614. width: 100%;
  615. .certificate-carousel {
  616. width: 100%;
  617. .carousel-item {
  618. .carousel-img {
  619. width: 100%;
  620. height: 420px;
  621. object-fit: contain;
  622. }
  623. .carousel-label {
  624. font-size: var(--size-18);
  625. text-align: center;
  626. padding: 0 var(--size-20);
  627. }
  628. }
  629. }
  630. }
  631. }
  632. .affiliation {
  633. .headline {
  634. font-size: var(--size-48);
  635. text-align: center;
  636. padding-top: var(--size-92);
  637. }
  638. .subhead {
  639. font-size: var(--size-18);
  640. text-align: center;
  641. color: var(--color-03);
  642. padding-top: var(--size-21);
  643. }
  644. .affiliation-content {
  645. width: 100%;
  646. display: flex;
  647. justify-content: space-between;
  648. align-items: stretch;
  649. padding-top: var(--size-41);
  650. .affiliation-left {
  651. flex-shrink: 0;
  652. width: 50%;
  653. height: 420px;
  654. img {
  655. width: 100%;
  656. height: 100%;
  657. object-fit: contain;
  658. }
  659. }
  660. .affiliation-right {
  661. flex-shrink: 0;
  662. width: 50%;
  663. height: 420px;
  664. background-image: url("../assets/images/bg_05.png");
  665. padding: 0 var(--size-100);
  666. display: flex;
  667. flex-direction: column;
  668. align-items: flex-start;
  669. justify-content: center;
  670. position: relative;
  671. &::after {
  672. content: "";
  673. position: absolute;
  674. left: 0;
  675. top: 50%;
  676. transform: translate(-80%, -50%);
  677. width: 0;
  678. height: 0;
  679. border: var(--size-35) solid;
  680. border-left-width: 0;
  681. border-color: transparent var(--color-07) transparent transparent;
  682. }
  683. .right-item {
  684. display: flex;
  685. align-items: center;
  686. padding-bottom: var(--size-20);
  687. .right-icon {
  688. width: var(--size-30);
  689. height: var(--size-30);
  690. object-fit: contain;
  691. }
  692. .right-text {
  693. padding-left: var(--size-10);
  694. font-size: var(--size-24);
  695. color: #ffffff;
  696. }
  697. }
  698. .right-btn {
  699. width: 228px;
  700. height: 60px;
  701. border-radius: 6px;
  702. background-color: #fff;
  703. display: flex;
  704. justify-content: center;
  705. align-items: center;
  706. cursor: pointer;
  707. .icon {
  708. width: 25px;
  709. height: 27px;
  710. object-fit: contain;
  711. }
  712. .text {
  713. padding-left: var(--size-8);
  714. font-size: var(--size-24);
  715. color: var(--color-07);
  716. }
  717. }
  718. }
  719. }
  720. }
  721. </style>