邃芒官网(PC) https://www.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1706 lines
44 KiB

  1. <template>
  2. <div class="Box">
  3. <div class="topBox">
  4. <div class="logoBox" @click="go('/')">
  5. <img src="../../assets/img/logo.png" alt class="logo" />
  6. <div class="logoTitle">metavatar</div>
  7. </div>
  8. <div class="categoryBox">
  9. <div class="categoryitem" @click="goView('Product')">
  10. {{ characters == 1 ? "产品能力" : "Product" }}
  11. </div>
  12. <div class="categoryitem" @click="goView('Technology')">
  13. {{ characters == 1 ? "创新技术" : "Technology" }}
  14. </div>
  15. <div class="categoryitem" @click="goView('Solutions')">
  16. {{ characters == 1 ? "解决方案" : "Solutions" }}
  17. </div>
  18. <div class="categoryitem" @click="goView('Cases')">
  19. {{ characters == 1 ? "经典案例" : "Cases" }}
  20. </div>
  21. <div class="categoryitem">
  22. <el-dropdown trigger="click" @command="handleCommand">
  23. <span class="el-dropdown-link">
  24. {{ characters == 1 ? "更多案例" : "AllCases"
  25. }}<i class="el-icon-arrow-down el-icon--right"></i>
  26. </span>
  27. <el-dropdown-menu slot="dropdown">
  28. <el-dropdown-item command="turing">邃图灵</el-dropdown-item>
  29. <el-dropdown-item command="live">邃芒慧播</el-dropdown-item>
  30. <el-dropdown-item command="generate">邃芒慧生</el-dropdown-item>
  31. <el-dropdown-item command="shadow">邃芒慧影</el-dropdown-item>
  32. </el-dropdown-menu>
  33. </el-dropdown>
  34. </div>
  35. <div class="categoryitem" @click="goView('aboutUs')">
  36. {{ characters == 1 ? "关于我们" : "About us" }}
  37. </div>
  38. </div>
  39. <div class="cutBox">
  40. <div class="en">
  41. <el-select
  42. v-model="charactersMy"
  43. placeholder="请选择"
  44. @change="change"
  45. >
  46. <el-option
  47. v-for="item in languageLsit"
  48. :key="item.value"
  49. :label="item.name"
  50. :value="item.value"
  51. >
  52. <div class>
  53. <img :src="item.url" alt class="cutImg" />
  54. <span>{{ item.name }}</span>
  55. </div>
  56. </el-option>
  57. </el-select>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="module_1">
  62. <img src="../../assets/img/BG@2x.png" width="100%" height="100%" />
  63. <div class="titleBox">
  64. <div class="title_item1" v-if="characters == 1">
  65. 超写实!虚拟数字人创造者
  66. </div>
  67. <div class="title_item3" v-if="characters == 1">
  68. 轻松创造您独一无二的数字人IP
  69. </div>
  70. <!-- <div class="title_item3" v-if="characters==1">创造生成 超真实 超写实 风格化 不同性别</div>
  71. <div class="title_item3" v-if="characters==1">多人种 分身化身随心创造</div> -->
  72. <div class="title_item1_y">Hyperrealism</div>
  73. <div class="title_item2" v-if="characters != 1">
  74. Digital human creator
  75. </div>
  76. <div class="title_item3" v-if="characters != 1">
  77. Easily create your unique digital IP
  78. </div>
  79. <div class="title_btn" @click="showBox">
  80. {{ characters == 1 ? "立刻体验" : "Try it now" }}
  81. </div>
  82. </div>
  83. <div class="md1" id="Product"></div>
  84. </div>
  85. <div class="module_2" id="module_2">
  86. <div class="characters_l">
  87. <div class="titleBox">
  88. <div class="title">
  89. {{ characters == 1 ? "Ai驱动" : "ai drive" }}
  90. </div>
  91. </div>
  92. <div class="ctnBox">
  93. <div class="title_ctn1">
  94. {{
  95. characters == 1
  96. ? "文字驱动数字人交互,面容生动表情自然,ai语音配合专业文案和音频素材"
  97. : "Text and AI language Sound driven digital human interaction, vivid face and natural expression,"
  98. }}
  99. </div>
  100. <div class="title_ctn1">
  101. {{
  102. characters == 1
  103. ? "让邃芒数字人学富五车,驾驭各种复杂场景"
  104. : "make Suimang digital people clever to driving various complex scenes"
  105. }}
  106. </div>
  107. </div>
  108. </div>
  109. <div class="characters_2">
  110. <div class="titleBox">
  111. <div class="title">
  112. {{ characters == 1 ? "真人驱动" : "human drive" }}
  113. </div>
  114. </div>
  115. <div class="ctnBox">
  116. <div class="title_ctn1">
  117. {{
  118. characters == 1
  119. ? "文字驱动数字人交互,面容生动表情自然,ai语音配合专业文案和音频素材让邃芒数字人学富五车,"
  120. : "Text and AI language Sound driven digital human interaction, vivid face and natural expression,"
  121. }}
  122. </div>
  123. <div class="title_ctn1">
  124. {{
  125. characters == 1
  126. ? "驾驭各种复杂场景"
  127. : "make Suimang digital people clever to driving various complex scenes"
  128. }}
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <div class="module_3" id="module_3">
  134. <div class="imgBox1">
  135. <img src="../../assets/img/module_3_1.png" alt />
  136. </div>
  137. <div class="imgBox2">
  138. <img src="../../assets/img/module_3_2.png" alt />
  139. </div>
  140. </div>
  141. <div class="module_4" id="module_4">
  142. <div class="btnBox1">
  143. <div class="btnText" @click="showBox">
  144. {{ characters == 1 ? "立刻体验" : "Try it now" }}
  145. </div>
  146. </div>
  147. <div class="btnBox2">
  148. <div class="btnText" @click="showBox">
  149. {{ characters == 1 ? "立刻体验" : "Try it now" }}
  150. </div>
  151. </div>
  152. </div>
  153. <div :class="characters == 1 ? 'module_5_0' : 'module_5_1'" id="Technology">
  154. <div :class="characters == 1 ? 'titleBox' : 'titleBox1'">
  155. <div class="title">
  156. {{
  157. characters == 1 ? "快速 高效 完美" : "Fast Efficient Perfect"
  158. }}
  159. </div>
  160. <div class="paragraph">
  161. {{
  162. characters == 1
  163. ? "邃芒数字人通过StyleGAN和基于神经辐射场(NeRF)的场景表征 "
  164. : "Suimang Digital Human brings digital human creation into a new generation"
  165. }}
  166. </div>
  167. <!-- <div class="paragraph" v-if="characters != 1">
  168. User can experiences a completely automatic process of character
  169. creation, manipulation and intelligent interaction without any
  170. intervention.MetaGene provides high-resolution virtual digital human ,
  171. “digital twin”, symbolization characters editable freely rapidly.
  172. </div> -->
  173. <div class="paragraph">
  174. {{
  175. characters == 1
  176. ? "与容积渲染将数字人创造带入了全新世代!"
  177. : "through StyleGAN and neural radiation field (NeRF) based scene"
  178. }}
  179. </div>
  180. <div class="paragraph">
  181. {{ characters == 1 ? "" : "representation and volume rendering! " }}
  182. </div>
  183. <div class="read_btn" @click="showBox">
  184. {{ characters == 1 ? "了解详情" : "Read more" }}
  185. </div>
  186. </div>
  187. <div class="md1" id="Solutions"></div>
  188. </div>
  189. <div class="module_6" id="module_6">
  190. <div class="title">
  191. {{
  192. characters == 1
  193. ? "让如此优秀的数字人服务于您的更多应用场景吧!"
  194. : "Let such excellent digital people serve more of your application scenarios!"
  195. }}
  196. </div>
  197. <div class="imgBox">
  198. <div
  199. class="itemBox"
  200. v-for="(item, index) in module_6_data"
  201. :key="index"
  202. >
  203. <img :src="item.url" alt />
  204. <p>{{ characters == 1 ? item.name : item.name_y }}</p>
  205. </div>
  206. </div>
  207. </div>
  208. <div class="module_7">
  209. <div class="fillBox">
  210. <div class="title">
  211. {{
  212. characters == 1
  213. ? "超写实数字人的互动全新体验"
  214. : "A new interactive experience of hyper-realistic digital people"
  215. }}
  216. </div>
  217. <div class="hintBox">
  218. <div class="triangle"></div>
  219. <div class="news1">
  220. {{ characters == 1 ? "你好,我是XXXX" : "Hello, I'm XXXX" }}
  221. </div>
  222. </div>
  223. <div class="hintBox_1">
  224. <div class="triangle"></div>
  225. <div class="news1">
  226. {{
  227. characters == 1
  228. ? "你会说英语吗?Avrli"
  229. : "Do you speak English? Avrli"
  230. }}
  231. </div>
  232. </div>
  233. <div class="hintBox">
  234. <div class="triangle"></div>
  235. <div class="news1">
  236. Which one would you like--this one or that one
  237. </div>
  238. </div>
  239. <div class="hintBox_1">
  240. <div class="triangle"></div>
  241. <div class="news1">
  242. {{
  243. characters == 1
  244. ? "你会说英语吗?Avrli"
  245. : "Do you speak English? Avrli"
  246. }}
  247. </div>
  248. </div>
  249. <div class="hintBox">
  250. <div class="triangle"></div>
  251. <div class="news1">
  252. {{
  253. characters == 1
  254. ? "据北京市气象局消息,丰台、石景山有雷阵雨天气"
  255. : "According to the Beijing Meteorological Bureau,"
  256. }}
  257. </div>
  258. </div>
  259. <div class="bnt_look" @click="showBox">
  260. {{ characters == 1 ? "立刻体验" : "Try it now" }}
  261. </div>
  262. </div>
  263. </div>
  264. <div class="module_8" id="Cases">
  265. <div class="title">SELECTED CASES</div>
  266. <div class="title_1">{{ characters == 1 ? "经典案例" : "" }}</div>
  267. <div class="xian"></div>
  268. <div class="swiper-container">
  269. <div class="swiper-wrapper">
  270. <div
  271. class="swiper-slide"
  272. v-for="(item, index) in carouselLsit"
  273. :key="index"
  274. >
  275. <img class="swiper-slide-img" :src="item.url" />
  276. </div>
  277. </div>
  278. <div class="swiper-button-prev"></div>
  279. <div class="swiper-button-next"></div>
  280. </div>
  281. <div class="tiktok">
  282. {{ characters == 1 ? "tiktok直播Rilloky" : "tiktokRilloky" }}
  283. </div>
  284. <div class="tiktok_ctn">
  285. {{
  286. characters == 1
  287. ? "随着元宇宙概念的升温,数字艺人开始广泛的出现在公众面前为人们所习惯。邃芒科技的AI养成路线,致力于打造超写实虚"
  288. : "With the warming of the concept of meta-universe, digital artists begin to appear widely in front of the public, and people are used to it. Jia Mang Technology's AI"
  289. }}
  290. </div>
  291. </div>
  292. <div class="module_9" id="aboutUs">
  293. <div class="weBox" @click="goPages('aboutUs')">
  294. <div class="weText">
  295. <div class="conBox">
  296. <div class="title">ABOUT ME</div>
  297. <div class="title_h" v-if="characters == 1">关于我们</div>
  298. <!-- <div :class="characters == 1 ? 'ctn1' : 'ctn'">
  299. {{
  300. characters == 1
  301. ? "北京邃芒科技公司正式成立于2021年8月,团队组建于2018年10月。"
  302. : "Metavatar is founded in August 2021, the team built up in year 2018. "
  303. }}
  304. </div> -->
  305. <div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
  306. {{
  307. characters == 1
  308. ? "随着元宇宙概念的升温,数字艺人开始广泛的出现在公众面前为人们所习惯。邃芒科技的AI养成路线,致力于打造超写实虚拟形象,解决传统CG模型生产的IP不够真实的痛点,突破恐怖谷,用更低的成本实现影视工业级标准的直播和生产。 对于影视工业的其他痛点,人员密集型劳动高昂的成本,邃芒科技也给出了更有现代感的解决方案,工程师团队对于像素级的影视工业需求,设计出了针对于抠像、擦除、填补背景的专用模型,节约制作成本,缩短制作周期,优化制作流程。 工程师团队由博士后带队,集合了来自中科院、清华、北京邮电大学等高校的优秀人才,研究生比例超过团队50%以上。"
  309. : "With the warming of the concept of meta-universe, digital artists begin to appear widely in front of the public, and people are used to it. Jia Mang Technology's AI cultivation route is dedicated to creating a super-realistic virtual image, solving the pain point that the IP produced by the traditional CG model is not real enough, With the warming of the concept of meta-universe, digital artists begin to appear widely in front of the public, and people are used to it. Jia Mang Technology's AI cultivation route is dedicated to creating a super-realistic virtual image, solving the pain point that the IP produced by the traditional CG model is not real enough, "
  310. }}
  311. </div>
  312. <!-- <div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
  313. {{
  314. characters == 1
  315. ? "邃芒科技专注虚拟数字人,提供未来世界数字形象巨量需求的生产力与能力,依靠技术与商业双轮驱动为用户打开元宇宙大门。"
  316. : "Metavatar focus on digital human sector, provides capability of producing the massive amount requirements for the future metaverse. Vision to be the first level company as a KEY to knock out the door of metaverse; Developing the leading technology and create customer value along the way."
  317. }}
  318. </div> -->
  319. </div>
  320. </div>
  321. <img src="../../assets/img/myS.png" alt class="weImg" />
  322. </div>
  323. <div class="timeBox">
  324. <div class="xian"></div>
  325. <div class="timeF">
  326. <div
  327. class="itemBox"
  328. v-for="(item, index) in timeLsit"
  329. :key="index"
  330. @click="timeFlag = index"
  331. >
  332. <div class="timeText">{{ item.title }}</div>
  333. <div class="ImgBox">
  334. <!-- <img
  335. :src="
  336. timeFlag == index
  337. ? require('../../assets/img/a.png')
  338. : require('../../assets/img/h.png')
  339. "
  340. alt
  341. /> -->
  342. <div class="circle"></div>
  343. </div>
  344. <div class="ctn">
  345. {{ characters == 1 ? item.ctn1 : item.ctn1_y }}
  346. </div>
  347. <div class="ctn">
  348. {{ characters == 1 ? item.ctn2 : item.ctn2_y }}
  349. </div>
  350. </div>
  351. </div>
  352. </div>
  353. <div class="cooperationBox">
  354. <div class="titleBox">
  355. <div class="title">PARTNER</div>
  356. <div class="title_h" v-if="characters == 1">合作伙伴</div>
  357. </div>
  358. </div>
  359. <div class="cooperation">
  360. <div
  361. class="cooperationItem"
  362. v-for="(item, index) in partnerLsit"
  363. :key="index"
  364. >
  365. <img :src="item.url" alt />
  366. </div>
  367. </div>
  368. </div>
  369. <el-dialog
  370. :title="
  371. characters == 1
  372. ? '留下您的信息,我们会尽快与您取得联系'
  373. : 'Tell us about yourself, we ll be in touch right away.'
  374. "
  375. :visible.sync="dialogVisible"
  376. width="34%"
  377. >
  378. <el-form ref="form" :rules="rules" :model="form">
  379. <el-form-item class="width" prop="name">
  380. <el-input
  381. v-model="form.name"
  382. maxlength="10"
  383. :placeholder="characters == 1 ? '姓名' : 'Name'"
  384. ></el-input>
  385. </el-form-item>
  386. <el-form-item class="width" prop="phone">
  387. <el-input
  388. v-model="form.phone"
  389. :placeholder="characters == 1 ? '手机' : 'Phone'"
  390. ></el-input>
  391. </el-form-item>
  392. <el-form-item class="width" prop="Pmail">
  393. <el-input v-model="form.email" placeholder="Email"></el-input>
  394. </el-form-item>
  395. </el-form>
  396. <span slot="footer" class="dialog-footer">
  397. <el-button @click="dialogVisible = false">{{
  398. characters == 1 ? "取 消" : "Cancel"
  399. }}</el-button>
  400. <el-button type="primary" @click="submit()">{{
  401. characters == 1 ? "提 交" : "Submit"
  402. }}</el-button>
  403. </span>
  404. </el-dialog>
  405. </div>
  406. </template>
  407. <script>
  408. import "swiper/dist/js/swiper";
  409. import "swiper/dist/css/swiper.css";
  410. import Swiper from "swiper";
  411. import { mapState, mapActions } from "vuex";
  412. export default {
  413. data() {
  414. return {
  415. //零时存放
  416. charactersMy: 1,
  417. languageLsit: [
  418. {
  419. name: "Cn",
  420. value: 1,
  421. url: require("../../assets/img/cn.jpeg"),
  422. },
  423. {
  424. name: "En",
  425. value: 2,
  426. url: require("../../assets/img/en.jpg"),
  427. },
  428. ],
  429. //
  430. userName: "",
  431. phone: "",
  432. email: "",
  433. form: {
  434. name: "",
  435. phone: "",
  436. email: "",
  437. },
  438. rules: {
  439. name: [
  440. {
  441. required: true,
  442. min: 1,
  443. max: 10,
  444. message: "此项必填,内容最大10个字符!",
  445. trigger: "blur",
  446. },
  447. ],
  448. phone: [
  449. {
  450. required: true,
  451. trigger: "change",
  452. message: "请先输手机号",
  453. },
  454. {
  455. validator(rule, value, callback, source, options) {
  456. var errors = [];
  457. // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
  458. let phone = /^1[35789]\d{9}$/;
  459. if (value && !phone.test(value)) {
  460. callback("抱歉,请输入正确的手机号");
  461. }
  462. callback(errors);
  463. },
  464. },
  465. ],
  466. email: [
  467. {
  468. required: true,
  469. trigger: "change",
  470. message: "请先输邮箱",
  471. },
  472. ],
  473. },
  474. // characters: 1, //1=》中文 2=》英文
  475. timeFlag: 5,
  476. dialogVisible: false,
  477. module_6_data: [
  478. {
  479. url: require("../../assets/img/demo_1.png"),
  480. name: "增加电子商务销售额",
  481. name_y: "Increase eCommerce sales",
  482. },
  483. {
  484. url: require("../../assets/img/demo_2.png"),
  485. name: "推动品牌声誉",
  486. name_y: "Drive Brand engagement",
  487. },
  488. {
  489. url: require("../../assets/img/demo_3.png"),
  490. name: "拓展客户服务",
  491. name_y: "Scale customer service",
  492. },
  493. {
  494. url: require("../../assets/img/demo_4.png"),
  495. name: " 节约您的劳动成本",
  496. name_y: " Augment your current workforce",
  497. },
  498. {
  499. url: require("../../assets/img/demo_5.png"),
  500. name: " 提供支持和陪伴",
  501. name_y: "Provide support and companionship",
  502. },
  503. {
  504. url: require("../../assets/img/demo_6.png"),
  505. name: "投资元宇宙的未来",
  506. name_y: "Deliver knowledge and learning",
  507. },
  508. {
  509. url: require("../../assets/img/demo_7.png"),
  510. name: "数字化名人的力量",
  511. name_y: "Leverage the power of Digital Celebrities",
  512. },
  513. {
  514. url: require("../../assets/img/demo_8.png"),
  515. name: "传递学习和知识",
  516. name_y: " Invest in the metaverse future",
  517. },
  518. ],
  519. carouselLsit: [
  520. {
  521. url: require("../../assets/img/carousel1.png"),
  522. },
  523. {
  524. url: require("../../assets/img/carousel2.png"),
  525. },
  526. {
  527. url: require("../../assets/img/carousel3.png"),
  528. },
  529. ],
  530. partnerLsit: [
  531. {
  532. url: require("../../assets/img/partner1.png"),
  533. },
  534. {
  535. url: require("../../assets/img/partner2.png"),
  536. },
  537. {
  538. url: require("../../assets/img/partner3.png"),
  539. },
  540. {
  541. url: require("../../assets/img/partner4.png"),
  542. },
  543. {
  544. url: require("../../assets/img/partner5.png"),
  545. },
  546. ],
  547. timeLsit: [
  548. {
  549. title: "2018-10",
  550. ctn1_y: "Team built up in Oct. 2018",
  551. // ctn2_y: "Team built up in Oct. 2018",
  552. ctn1: "团队组建",
  553. // ctn2: "团队组建"
  554. },
  555. {
  556. url: require("../../assets/img/carousel2.png"),
  557. title: "2019",
  558. ctn1_y: "Deliver the first movie project in May. 2019",
  559. // ctn2_y: "Deliver the first movie project in May. 2019",
  560. ctn1: "第一个影视特效 ",
  561. ctn2: "项目交付",
  562. },
  563. {
  564. url: require("../../assets/img/carousel3.png"),
  565. title: "2021-05",
  566. ctn1_y: "Beta of MetaGene published in May,2021",
  567. // ctn2_y: "Beta of MetaGene published in May,2021",
  568. ctn1: "内部产品",
  569. ctn2: "Metagene V1完成",
  570. },
  571. {
  572. url: require("../../assets/img/carousel3.png"),
  573. title: "2021-08",
  574. ctn1_y: "Metavatar built up in Aug, 2021",
  575. // ctn2_y: "Metavatar built up in Aug, 2021",
  576. ctn1: "邃芒科技成立",
  577. // ctn2: "邃芒科技成立",
  578. },
  579. {
  580. url: require("../../assets/img/carousel3.png"),
  581. title: "2022-01",
  582. ctn1_y: "Angel fund in Jan, 2022",
  583. // ctn2_y: "Angel fund in Jan, 2022",
  584. ctn1: "获得天使轮融资",
  585. // ctn2: "获得天使轮融资",
  586. },
  587. {
  588. url: require("../../assets/img/carousel3.png"),
  589. title: "2022-06",
  590. ctn1_y:
  591. "Deliver the first project based on Magenta for our strategic partner in Jun,2022",
  592. // ctn2_y: "Beta of MetaGene published in May,2021",
  593. ctn1: "为战略合作伙伴新奥特",
  594. ctn2: "交付首个基于MetaGene的内容生产项目",
  595. },
  596. ],
  597. };
  598. },
  599. methods: {
  600. ...mapActions(["setCharacters"]),
  601. change(value) {
  602. console.log(value);
  603. this.setCharacters(value);
  604. },
  605. showBox() {
  606. this.dialogVisible = true;
  607. },
  608. goPages(path) {
  609. this.$router.push(path);
  610. },
  611. goView(id) {
  612. document.querySelector("#" + id).scrollIntoView({
  613. behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
  614. block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
  615. inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
  616. });
  617. // console.log(document.querySelector(id),);
  618. },
  619. handleCommand(path) {
  620. this.$router.push(`/${path}`);
  621. },
  622. submit() {
  623. this.$refs.form.validate((valid) => {
  624. console.log(valid);
  625. if (valid) {
  626. let params = {
  627. mallName: this.form.email, //邮箱
  628. applicant: this.form.name, //姓名
  629. phone: this.form.phone, //电话
  630. };
  631. this.$axios({
  632. method: "post",
  633. url: "/api/callback/wxMallApply/add",
  634. headers: {
  635. "Content-Type": "application/json;charset=UTF-8",
  636. },
  637. data: params,
  638. })
  639. .then((res) => {
  640. this.form.email = "";
  641. this.form.name = "";
  642. this.form.phone = "";
  643. this.$message.success(
  644. this.characters == 1 ? "提交成功" : "submit successfully"
  645. );
  646. this.dialogVisible = false;
  647. })
  648. .catch((err) => {
  649. this.$message.error(err.message);
  650. });
  651. }
  652. });
  653. },
  654. },
  655. computed: {
  656. ...mapState({
  657. characters: (state) => state.publicObj.characters,
  658. view: (state) => state.publicObj.view,
  659. }),
  660. },
  661. mounted() {
  662. // console.log();
  663. // this.$refs["vidoe"].play();
  664. new Swiper(".swiper-container", {
  665. slidesPerView: 3,
  666. spaceBetween: 30,
  667. centeredSlides: true,
  668. loop: true,
  669. // 如果需要分页器
  670. pagination: {
  671. el: ".swiper-pagination",
  672. clickable: true, // 分页器可以点击
  673. },
  674. // 如果需要前进后退按钮
  675. navigation: {
  676. nextEl: ".swiper-button-next",
  677. prevEl: ".swiper-button-prev",
  678. },
  679. // 如果需要滚动条
  680. scrollbar: {
  681. el: ".swiper-scrollbar",
  682. },
  683. });
  684. },
  685. created() {
  686. const id = this.$route.query.id;
  687. if (id) {
  688. this.$nextTick(() => {
  689. this.goView(id);
  690. });
  691. }
  692. },
  693. };
  694. </script>
  695. <style lang="scss" scoped>
  696. .Box {
  697. width: 100%;
  698. overflow: hidden;
  699. }
  700. .topBox {
  701. width: 90%;
  702. overflow: hidden;
  703. position: fixed;
  704. top: 0;
  705. left: 0;
  706. z-index: 1000;
  707. // background-color: rgba(255, 255, 255, 0.1);
  708. }
  709. .logoBox {
  710. margin-top: 35px;
  711. margin-left: 35px;
  712. margin-bottom: 35px;
  713. float: left;
  714. overflow: hidden;
  715. }
  716. .logo {
  717. float: left;
  718. // width: 60px;
  719. // height: 30px;
  720. }
  721. .logoTitle {
  722. float: left;
  723. line-height: 30px;
  724. margin-left: 10px;
  725. font-size: 22px;
  726. }
  727. .categoryBox {
  728. height: 30px;
  729. width: 600px;
  730. float: left;
  731. margin-top: 20px;
  732. margin-left: 16%;
  733. display: flex;
  734. justify-content: space-between;
  735. cursor: pointer;
  736. }
  737. .categoryitem {
  738. width: 110px;
  739. line-height: 30px;
  740. color: #7d7d7d;
  741. font-size: 15px;
  742. // background-color: #16e9d6
  743. }
  744. .cutBox {
  745. float: right;
  746. margin-top: 35px;
  747. margin-right: 50px;
  748. overflow: hidden;
  749. cursor: pointer;
  750. }
  751. .cutImg {
  752. width: 30px;
  753. height: 20px;
  754. float: left;
  755. margin-top: 10px;
  756. margin-right: 10px;
  757. }
  758. .en {
  759. float: left;
  760. font-size: 15px;
  761. }
  762. .md1 {
  763. position: absolute;
  764. left: 0;
  765. bottom: 0;
  766. height: 70px;
  767. width: 100%;
  768. }
  769. .module_1 {
  770. width: 100%;
  771. // height: 1080px;
  772. // background-color: aquamarine;
  773. // background-image: url("../../assets/img/bg.png");
  774. background-repeat: no-repeat;
  775. background-size: 100% 100%;
  776. overflow: hidden;
  777. position: relative;
  778. margin-top: 80px;
  779. background-color: #202020;
  780. .titleBox {
  781. width: 36%;
  782. position: absolute;
  783. top: 390px;
  784. left: 190px;
  785. overflow: hidden;
  786. color: #fff;
  787. .title_item1 {
  788. margin-bottom: 14px;
  789. font-size: 42px;
  790. }
  791. .title_item1_y {
  792. // margin-bottom: 14px;
  793. font-size: 42px;
  794. }
  795. .title_item2 {
  796. margin-bottom: 20px;
  797. font-size: 42px;
  798. }
  799. .title_item3 {
  800. font-size: 16px;
  801. line-height: 30px;
  802. }
  803. .title_btn {
  804. margin-top: 60px;
  805. height: 60px;
  806. width: 220px;
  807. text-align: center;
  808. line-height: 60px;
  809. color: #fff;
  810. border-radius: 40px;
  811. border: #fff solid 3px;
  812. font-size: 18px;
  813. cursor: pointer;
  814. transition: all 0.3s;
  815. &:hover {
  816. color: #16e9d6;
  817. border: #16e9d6 solid 3px;
  818. }
  819. }
  820. }
  821. }
  822. .module_2 {
  823. overflow: hidden;
  824. height: 260px;
  825. background-color: #202020;
  826. .characters_l {
  827. width: 49%;
  828. float: left;
  829. height: 100%;
  830. text-align: right;
  831. .titleBox {
  832. overflow: hidden;
  833. }
  834. .title {
  835. margin-top: 50px;
  836. font-size: 30px;
  837. font-family: Source Han Sans CN;
  838. font-weight: 400;
  839. color: #cacaca;
  840. padding-bottom: 26px;
  841. border-bottom: 1px solid #16e9d6;
  842. float: right;
  843. }
  844. .ctnBox {
  845. margin-top: 30px;
  846. .title_ctn1 {
  847. font-size: 14px;
  848. font-family: Microsoft YaHei;
  849. font-weight: 400;
  850. color: #7e7e7e;
  851. margin-bottom: 8px;
  852. }
  853. }
  854. }
  855. .characters_2 {
  856. width: 49%;
  857. float: right;
  858. height: 100%;
  859. text-align: left;
  860. .titleBox {
  861. overflow: hidden;
  862. .title {
  863. margin-top: 50px;
  864. font-size: 30px;
  865. font-family: Source Han Sans CN;
  866. font-weight: 400;
  867. color: #cacaca;
  868. padding-bottom: 26px;
  869. border-bottom: 1px solid #16e9d6;
  870. float: left;
  871. }
  872. }
  873. .ctnBox {
  874. margin-top: 30px;
  875. .title_ctn1 {
  876. font-size: 14px;
  877. font-family: Microsoft YaHei;
  878. font-weight: 400;
  879. color: #7e7e7e;
  880. margin-bottom: 8px;
  881. }
  882. }
  883. }
  884. }
  885. .module_3 {
  886. overflow: hidden;
  887. background-color: #202020;
  888. .imgBox1 {
  889. width: 49%;
  890. height: 570px;
  891. float: left;
  892. // background-color: #16e9d6;
  893. img {
  894. width: 100%;
  895. height: 100%;
  896. }
  897. }
  898. .imgBox2 {
  899. width: 49%;
  900. height: 570px;
  901. float: right;
  902. // background-color: #16e9d6;
  903. img {
  904. width: 100%;
  905. height: 100%;
  906. }
  907. }
  908. }
  909. .module_4 {
  910. overflow: hidden;
  911. background-color: #202020;
  912. .btnBox1 {
  913. width: 49%;
  914. height: 240px;
  915. float: left;
  916. overflow: hidden;
  917. position: relative;
  918. .btnText {
  919. cursor: pointer;
  920. top: 0;
  921. right: 0;
  922. left: 0;
  923. bottom: 0;
  924. position: absolute;
  925. margin: auto;
  926. height: 60px;
  927. width: 220px;
  928. text-align: center;
  929. line-height: 60px;
  930. color: #16e9d6;
  931. border-radius: 40px;
  932. border: #16e9d6 solid 3px;
  933. font-size: 16px;
  934. transition: all 0.3s;
  935. &:hover {
  936. color: #fff;
  937. background-color: #16e9d6;
  938. }
  939. }
  940. }
  941. .btnBox2 {
  942. width: 49%;
  943. height: 240px;
  944. float: right;
  945. overflow: hidden;
  946. position: relative;
  947. .btnText {
  948. cursor: pointer;
  949. top: 0;
  950. right: 0;
  951. left: 0;
  952. bottom: 0;
  953. position: absolute;
  954. margin: auto;
  955. height: 60px;
  956. width: 220px;
  957. text-align: center;
  958. line-height: 60px;
  959. color: #16e9d6;
  960. border-radius: 40px;
  961. border: #16e9d6 solid 3px;
  962. font-size: 16px;
  963. transition: all 0.3s;
  964. &:hover {
  965. color: #fff;
  966. background-color: #16e9d6;
  967. }
  968. }
  969. }
  970. }
  971. .module_5_0 {
  972. height: 1080px;
  973. background-color: #010101;
  974. position: relative;
  975. overflow: hidden;
  976. background-image: url("../../assets/img/module_5_bg1.png");
  977. background-repeat: no-repeat;
  978. background-size: 92% 100%;
  979. background-position: 166% 20%;
  980. .titleBox {
  981. // position: absolute;
  982. // top: 26%;
  983. // left: 16%;
  984. margin-left: 220px;
  985. margin-top: 14%;
  986. width: 680px;
  987. .title {
  988. font-size: 48px;
  989. font-family: Inter;
  990. font-weight: 600;
  991. margin-bottom: 70px;
  992. color: #fff;
  993. }
  994. .paragraph {
  995. margin-bottom: 20px;
  996. font-weight: 400;
  997. color: #7e7e7e;
  998. font-size: 14px;
  999. font-family: Microsoft YaHei;
  1000. font-weight: 400;
  1001. line-height: 30px;
  1002. }
  1003. .read_btn {
  1004. margin-top: 36px;
  1005. height: 60px;
  1006. width: 220px;
  1007. text-align: center;
  1008. line-height: 60px;
  1009. color: #16e9d6;
  1010. border-radius: 40px;
  1011. border: #16e9d6 solid 3px;
  1012. font-size: 16px;
  1013. cursor: pointer;
  1014. transition: all 0.3s;
  1015. &:hover {
  1016. color: #fff;
  1017. background-color: #16e9d6;
  1018. }
  1019. }
  1020. }
  1021. .titleBox1 {
  1022. // position: absolute;
  1023. // top: 20%;
  1024. // left: 16%;
  1025. margin-left: 220px;
  1026. margin-top: 12%;
  1027. width: 680px;
  1028. .title {
  1029. font-size: 44px;
  1030. font-family: Inter;
  1031. font-weight: 600;
  1032. margin-bottom: 40px;
  1033. color: #fff;
  1034. }
  1035. .paragraph {
  1036. margin-bottom: 20px;
  1037. font-weight: 400;
  1038. color: #7e7e7e;
  1039. font-size: 14px;
  1040. font-family: Microsoft YaHei;
  1041. font-weight: 400;
  1042. line-height: 20px;
  1043. }
  1044. .read_btn {
  1045. margin-top: 36px;
  1046. height: 60px;
  1047. width: 220px;
  1048. text-align: center;
  1049. line-height: 60px;
  1050. color: #16e9d6;
  1051. border-radius: 40px;
  1052. border: #16e9d6 solid 3px;
  1053. font-size: 16px;
  1054. cursor: pointer;
  1055. }
  1056. }
  1057. }
  1058. .module_5_1 {
  1059. height: 1080px;
  1060. background-color: #010101;
  1061. position: relative;
  1062. overflow: hidden;
  1063. background-image: url("../../assets/img/module_5_bg_cut.png");
  1064. background-repeat: no-repeat;
  1065. background-size: 92% 100%;
  1066. background-position: 166% 20%;
  1067. .titleBox {
  1068. // position: absolute;
  1069. // top: 26%;
  1070. // left: 16%;
  1071. margin-left: 220px;
  1072. margin-top: 14%;
  1073. width: 680px;
  1074. .title {
  1075. font-size: 48px;
  1076. font-family: Inter;
  1077. font-weight: 600;
  1078. margin-bottom: 70px;
  1079. color: #fff;
  1080. }
  1081. .paragraph {
  1082. margin-bottom: 20px;
  1083. font-weight: 400;
  1084. color: #7e7e7e;
  1085. font-size: 14px;
  1086. font-family: Microsoft YaHei;
  1087. font-weight: 400;
  1088. line-height: 30px;
  1089. }
  1090. .read_btn {
  1091. margin-top: 36px;
  1092. height: 60px;
  1093. width: 220px;
  1094. text-align: center;
  1095. line-height: 60px;
  1096. color: #16e9d6;
  1097. border-radius: 40px;
  1098. border: #16e9d6 solid 3px;
  1099. font-size: 16px;
  1100. cursor: pointer;
  1101. transition: all 0.3s;
  1102. &:hover {
  1103. color: #fff;
  1104. background-color: #16e9d6;
  1105. }
  1106. }
  1107. }
  1108. .titleBox1 {
  1109. // position: absolute;
  1110. // top: 20%;
  1111. // left: 16%;
  1112. margin-left: 220px;
  1113. margin-top: 12%;
  1114. width: 680px;
  1115. .title {
  1116. font-size: 44px;
  1117. font-family: Inter;
  1118. font-weight: 600;
  1119. margin-bottom: 40px;
  1120. color: #fff;
  1121. }
  1122. .paragraph {
  1123. margin-bottom: 20px;
  1124. font-weight: 400;
  1125. color: #7e7e7e;
  1126. font-size: 14px;
  1127. font-family: Microsoft YaHei;
  1128. font-weight: 400;
  1129. line-height: 20px;
  1130. }
  1131. .read_btn {
  1132. margin-top: 36px;
  1133. height: 60px;
  1134. width: 220px;
  1135. text-align: center;
  1136. line-height: 60px;
  1137. color: #16e9d6;
  1138. border-radius: 40px;
  1139. border: #16e9d6 solid 3px;
  1140. font-size: 16px;
  1141. cursor: pointer;
  1142. transition: all 0.3s;
  1143. &:hover {
  1144. color: #fff;
  1145. background-color: #16e9d6;
  1146. }
  1147. }
  1148. }
  1149. }
  1150. .module_6 {
  1151. height: 1080px;
  1152. background-color: #fff;
  1153. .title {
  1154. text-align: center;
  1155. font-size: 24px;
  1156. color: #000;
  1157. margin-top: 150px;
  1158. }
  1159. .imgBox {
  1160. width: 1280px;
  1161. height: 640px;
  1162. margin: 130px auto 0 auto;
  1163. display: flex;
  1164. flex-wrap: wrap;
  1165. .itemBox {
  1166. width: 25%;
  1167. height: 320px;
  1168. position: relative;
  1169. img {
  1170. width: 100%;
  1171. height: 100%;
  1172. }
  1173. p {
  1174. position: absolute;
  1175. left: 0;
  1176. right: 0;
  1177. bottom: 14px;
  1178. margin: auto;
  1179. color: #fff;
  1180. width: 90%;
  1181. font-size: 14px;
  1182. font-family: Microsoft YaHei;
  1183. line-height: 24px;
  1184. font-weight: 400;
  1185. text-align: center;
  1186. }
  1187. }
  1188. }
  1189. }
  1190. .module_7 {
  1191. height: 1000px;
  1192. background-color: #f0f4f7;
  1193. position: relative;
  1194. background-image: url("../../assets/img/module_7_bg.png");
  1195. background-repeat: no-repeat;
  1196. background-size: 775px 1000px;
  1197. background-position: 10% 10%;
  1198. .fillBox {
  1199. position: absolute;
  1200. top: 90px;
  1201. left: 60%;
  1202. .title {
  1203. font-size: 24px;
  1204. margin-bottom: 30px;
  1205. }
  1206. .hintBox {
  1207. overflow: hidden;
  1208. margin-top: 46px;
  1209. .triangle {
  1210. width: 0;
  1211. height: 0;
  1212. border: 14px solid transparent;
  1213. border-right-color: #fff;
  1214. float: left;
  1215. margin-top: 20px;
  1216. transition: all 0.3s;
  1217. }
  1218. .news1 {
  1219. padding: 0 40px;
  1220. height: 68px;
  1221. background: #ffffff;
  1222. // box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
  1223. border-radius: 12px;
  1224. font-size: 18px;
  1225. font-family: Inter;
  1226. font-weight: 400;
  1227. color: #232324;
  1228. line-height: 62px;
  1229. float: left;
  1230. transition: all 0.3s;
  1231. cursor: pointer;
  1232. }
  1233. }
  1234. .hintBox_1 {
  1235. overflow: hidden;
  1236. margin-top: 46px;
  1237. margin-left: 68px;
  1238. .triangle {
  1239. width: 0;
  1240. height: 0;
  1241. border: 14px solid transparent;
  1242. border-right-color: #fff;
  1243. float: left;
  1244. margin-top: 20px;
  1245. }
  1246. .news1 {
  1247. padding: 0 40px;
  1248. height: 68px;
  1249. background: #ffffff;
  1250. // box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
  1251. border-radius: 12px;
  1252. font-size: 18px;
  1253. font-family: Inter;
  1254. font-weight: 400;
  1255. color: #232324;
  1256. line-height: 62px;
  1257. float: left;
  1258. cursor: pointer;
  1259. }
  1260. }
  1261. .bnt_look {
  1262. margin-top: 110px;
  1263. margin-left: 110px;
  1264. width: 241px;
  1265. height: 66px;
  1266. border: 2px solid #000000;
  1267. border-radius: 33px;
  1268. font-size: 16px;
  1269. font-family: Inter;
  1270. font-weight: 600;
  1271. color: #000000;
  1272. line-height: 62px;
  1273. text-align: center;
  1274. cursor: pointer;
  1275. transition: all 0.3s;
  1276. &:hover {
  1277. color: #16e9d6;
  1278. border: #16e9d6 solid 2px;
  1279. }
  1280. }
  1281. }
  1282. }
  1283. .module_8 {
  1284. height: 1080px;
  1285. background: #ffffff;
  1286. .title {
  1287. font-size: 30px;
  1288. font-family: Inter;
  1289. font-weight: 600;
  1290. color: #191919;
  1291. // line-height: 62px;
  1292. margin-top: 80px;
  1293. text-align: center;
  1294. // margin-bottom: 40px;
  1295. }
  1296. .title_1 {
  1297. text-align: center;
  1298. font-size: 24px;
  1299. font-family: Microsoft YaHei;
  1300. font-weight: 400;
  1301. color: #191919;
  1302. line-height: 62px;
  1303. height: 62px;
  1304. }
  1305. .xian {
  1306. width: 66px;
  1307. height: 3px;
  1308. background: #16e9d6;
  1309. margin: 0 auto;
  1310. margin-bottom: 60px;
  1311. }
  1312. .tiktok {
  1313. font-size: 18px;
  1314. font-family: Inter;
  1315. font-weight: 600;
  1316. color: #0f1114;
  1317. line-height: 62px;
  1318. text-align: center;
  1319. }
  1320. .tiktok_ctn {
  1321. width: 559px;
  1322. height: 44px;
  1323. font-size: 14px;
  1324. font-family: Inter;
  1325. font-weight: 400;
  1326. color: #797979;
  1327. line-height: 30px;
  1328. text-align: center;
  1329. margin: 0 auto;
  1330. }
  1331. }
  1332. .module_9 {
  1333. background-color: #d7d8de;
  1334. overflow: hidden;
  1335. .weBox {
  1336. margin-top: 130px;
  1337. margin-left: auto;
  1338. margin-right: auto;
  1339. margin-bottom: 180px;
  1340. width: 1300px;
  1341. height: 550px;
  1342. cursor: pointer;
  1343. transition: all 0.3s;
  1344. .weText {
  1345. width: 576px;
  1346. height: 530px;
  1347. background-color: #191919;
  1348. float: left;
  1349. .conBox {
  1350. width: 500px;
  1351. margin: 40px auto 100px auto;
  1352. .title {
  1353. font-size: 30px;
  1354. font-family: Inter;
  1355. font-weight: 400;
  1356. color: #ffffff;
  1357. line-height: 62px;
  1358. text-align: right;
  1359. }
  1360. .title_h {
  1361. height: 18px;
  1362. font-size: 18px;
  1363. font-family: Microsoft YaHei;
  1364. font-weight: 400;
  1365. color: #ffffff;
  1366. text-align: right;
  1367. }
  1368. .ctn {
  1369. // width: 434px;
  1370. font-size: 12px;
  1371. font-family: Microsoft YaHei;
  1372. font-weight: 400;
  1373. color: #7e7e7e;
  1374. line-height: 24px;
  1375. margin-top: 10px;
  1376. }
  1377. .ctn_c {
  1378. // width: 434px;
  1379. font-size: 12px;
  1380. font-family: Microsoft YaHei;
  1381. font-weight: 400;
  1382. color: #7e7e7e;
  1383. line-height: 22px;
  1384. margin-top: 50px;
  1385. }
  1386. .ctn1 {
  1387. width: 436px;
  1388. height: 222px;
  1389. font-size: 12px;
  1390. font-family: Microsoft YaHei;
  1391. font-weight: 400;
  1392. color: #7e7e7e;
  1393. line-height: 30px;
  1394. margin-top: 40px;
  1395. margin-left: auto;
  1396. margin-right: auto;
  1397. }
  1398. .ctn_c1 {
  1399. width: 436px;
  1400. height: 222px;
  1401. font-size: 12px;
  1402. font-family: Microsoft YaHei;
  1403. font-weight: 400;
  1404. color: #7e7e7e;
  1405. line-height: 30px;
  1406. margin-top: 74px;
  1407. margin-left: auto;
  1408. margin-right: auto;
  1409. }
  1410. }
  1411. }
  1412. .weImg {
  1413. width: 724px;
  1414. height: 530px;
  1415. float: left;
  1416. }
  1417. &:hover {
  1418. transform: scale(1.1);
  1419. }
  1420. }
  1421. .timeBox {
  1422. // overflow: hidden;
  1423. position: relative;
  1424. margin-bottom: 90px;
  1425. }
  1426. .xian {
  1427. width: 100%;
  1428. height: 6px;
  1429. background: #ffffff;
  1430. opacity: 0.57;
  1431. position: absolute;
  1432. top: 97px;
  1433. left: 0;
  1434. }
  1435. .timeF {
  1436. width: 1300px;
  1437. display: flex;
  1438. margin: 0 auto;
  1439. justify-content: space-between;
  1440. .itemBox {
  1441. width: 180px;
  1442. height: 250px;
  1443. border: 1px solid #ffffff;
  1444. opacity: 0.8;
  1445. border-radius: 24px;
  1446. background: #ffffff;
  1447. overflow: hidden;
  1448. cursor: pointer;
  1449. transition: all 0.3s;
  1450. .timeText {
  1451. width: 200px;
  1452. font-size: 16px;
  1453. font-family: Inter;
  1454. font-weight: 600;
  1455. color: #313131;
  1456. line-height: 30px;
  1457. text-align: center;
  1458. margin-top: 28px;
  1459. // margin-bottom: 20px;
  1460. }
  1461. .ImgBox {
  1462. width: 23px;
  1463. height: 23px;
  1464. margin: 30px auto 10px auto;
  1465. // margin-bottom: 10px;
  1466. .circle {
  1467. width: 23px;
  1468. height: 23px;
  1469. background: url("../../assets/img/h.png");
  1470. background-size: cover;
  1471. background-repeat: no-repeat;
  1472. background-position: center;
  1473. background-position: center;
  1474. transform: scale(0.9);
  1475. transition: all 0.3s;
  1476. }
  1477. img {
  1478. width: 23px;
  1479. height: 23px;
  1480. }
  1481. }
  1482. .ctn {
  1483. width: 160px;
  1484. // height: 20px;
  1485. font-size: 12px;
  1486. font-family: Microsoft YaHei;
  1487. font-weight: 400;
  1488. color: #313131;
  1489. line-height: 24px;
  1490. margin: 0 auto;
  1491. text-align: center;
  1492. }
  1493. &:hover {
  1494. opacity: 0.65;
  1495. transform: scale(1.1);
  1496. .circle {
  1497. width: 23px;
  1498. height: 23px;
  1499. background: url("../../assets/img/a.png");
  1500. background-size: cover;
  1501. background-repeat: no-repeat;
  1502. background-position: center;
  1503. background-position: center;
  1504. transform: scale(0.9);
  1505. }
  1506. }
  1507. }
  1508. }
  1509. .cooperationBox {
  1510. margin-bottom: 30px;
  1511. .titleBox {
  1512. display: flex;
  1513. justify-content: center;
  1514. .title {
  1515. font-size: 30px;
  1516. font-family: Microsoft YaHei;
  1517. font-weight: 400;
  1518. color: #0d0912;
  1519. line-height: 62px;
  1520. }
  1521. .title_h {
  1522. font-size: 16px;
  1523. font-family: Microsoft YaHei;
  1524. font-weight: 400;
  1525. color: #0d0912;
  1526. line-height: 62px;
  1527. margin-left: 10px;
  1528. }
  1529. }
  1530. }
  1531. .cooperation {
  1532. width: 70%;
  1533. margin: 0 auto;
  1534. display: flex;
  1535. justify-content: space-between;
  1536. margin-bottom: 130px;
  1537. .cooperationItem {
  1538. width: 200px;
  1539. height: 100px;
  1540. // background-color: #f0f0f0;
  1541. img {
  1542. width: 100%;
  1543. height: 100%;
  1544. // margin: 20px 5%;
  1545. }
  1546. }
  1547. }
  1548. }
  1549. .swiper-container {
  1550. width: 100%;
  1551. }
  1552. .swiper-slide {
  1553. width: 100%;
  1554. height: 100%;
  1555. text-align: center;
  1556. font-size: 18px;
  1557. background: #fff;
  1558. /* Center slide text vertically */
  1559. display: -webkit-box;
  1560. display: -ms-flexbox;
  1561. // display: -webkit-flex;
  1562. display: flex;
  1563. -webkit-box-pack: center;
  1564. -ms-flex-pack: center;
  1565. -webkit-justify-content: center;
  1566. justify-content: space-evenly;
  1567. -webkit-box-align: center;
  1568. -ms-flex-align: center;
  1569. -webkit-align-items: center;
  1570. align-items: center;
  1571. }
  1572. .swiper-slide-active,
  1573. .swiper-slide-duplicate-active {
  1574. transform: scale(1);
  1575. }
  1576. .swiper-slide-img {
  1577. width: 479px;
  1578. height: 600px;
  1579. cursor: pointer;
  1580. opacity: 0.9;
  1581. transition: all 0.3s;
  1582. &:hover {
  1583. opacity: 1;
  1584. transform: scale(1.1);
  1585. }
  1586. }
  1587. .topBox {
  1588. width: 100%;
  1589. overflow: hidden;
  1590. position: fixed;
  1591. top: 0;
  1592. left: 0;
  1593. z-index: 100;
  1594. background-color: #fff;
  1595. }
  1596. .logoBox {
  1597. margin-top: 20px;
  1598. margin-left: 35px;
  1599. margin-bottom: 20px;
  1600. float: left;
  1601. overflow: hidden;
  1602. cursor: pointer;
  1603. }
  1604. .logo {
  1605. float: left;
  1606. width: 60px;
  1607. height: 30px;
  1608. }
  1609. .logoTitle {
  1610. float: left;
  1611. line-height: 30px;
  1612. margin-left: 10px;
  1613. font-size: 22px;
  1614. }
  1615. .categoryBox {
  1616. float: left;
  1617. display: flex;
  1618. justify-content: space-between;
  1619. height: 30px;
  1620. margin-top: 20px;
  1621. margin-left: 6%;
  1622. }
  1623. .categoryitem {
  1624. line-height: 30px;
  1625. color: #7d7d7d;
  1626. font-size: 15px;
  1627. cursor: pointer;
  1628. transition: all 0.3s;
  1629. }
  1630. .el-dropdown-menu__item:focus,
  1631. .el-dropdown-menu__item:not(.is-disabled):hover {
  1632. background-color: #16e9d6;
  1633. color: #fff;
  1634. }
  1635. .categoryitem:hover {
  1636. color: #16e9d6;
  1637. }
  1638. .cutBox {
  1639. float: right;
  1640. margin-top: 20px;
  1641. margin-right: 50px;
  1642. overflow: hidden;
  1643. cursor: pointer;
  1644. }
  1645. .cutImg {
  1646. width: 30px;
  1647. height: 20px;
  1648. float: left;
  1649. margin-top: 6px;
  1650. margin-right: 10px;
  1651. }
  1652. .en {
  1653. float: left;
  1654. font-size: 15px;
  1655. }
  1656. .el-select {
  1657. width: 120px;
  1658. }
  1659. </style>