AboutUs.vue 18 KB

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