邃芒官网(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.
 
 
 

621 lines
17 KiB

  1. <template>
  2. <div class="Box" id="top">
  3. <div class="module_1">
  4. <img src="../../assets/img/metavatar_live/suiMang_live@2x.png" width="100%" height="100%" />
  5. <div class="titleBox">
  6. <div class="title_item1" v-if="characters == 1">邃芒慧影</div>
  7. <div class="title_item1_y" v-if="characters == 1">数字人内容生产从未如此高效便捷</div>
  8. <div class="desc" v-if="characters == 1">
  9. <div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div>
  10. <div>高自然度,逼真度让您的数字人完全跨过恐怖谷</div>
  11. </div>
  12. <!-- 英文部分 -->
  13. <div class="title_item1" v-if="characters != 1">MetaStream</div>
  14. <div class="title_item1_y" v-if="characters != 1">Digital human content production has never been so efficient and convenient</div>
  15. <div class="desc" v-if="characters != 1">
  16. <div>Text, voice, and source video multiple drive methods support the production of content at any time and keep up with hot spots</div>
  17. <div>High naturalness and realism let your digital human completely cross the uncanny valley</div>
  18. </div>
  19. <div class="title_btn" @click="showBox">
  20. {{ characters == 1 ? '立刻体验' : 'Try it now' }}
  21. </div>
  22. </div>
  23. <div class="md1" id="md1"></div>
  24. </div>
  25. <div class="module_2">
  26. <div class="title" v-if="characters == 1">
  27. 只需
  28. <img src="../../assets/img/metavatar_live/3@2x.png" />
  29. 步完成一条数字人视频内容生成
  30. </div>
  31. <div class="title" v-if="characters != 1">
  32. Just
  33. <img src="../../assets/img/metavatar_live/3@2x.png" />
  34. step to complete the generation of digital human video content
  35. </div>
  36. <div class="images">
  37. <li>
  38. <img src="../../assets/img/metavatar_live/001@2x.png" alt="" />
  39. </li>
  40. <li>
  41. <img src="../../assets/img/metavatar_live/002@2x.png" alt="" />
  42. </li>
  43. <li>
  44. <img src="../../assets/img/metavatar_live/003@2x.png" alt="" />
  45. </li>
  46. <li>
  47. <img src="../../assets/img/metavatar_live/004@2x.png" alt="" />
  48. </li>
  49. </div>
  50. </div>
  51. <div class="module_3">
  52. <div class="title" v-if="characters == 1">中之人驱动</div>
  53. <div class="title" v-if="characters != 1">“中の人” driving</div>
  54. <img src="../../assets/img/metavatar_live/picInside@2x.png" alt="" />
  55. </div>
  56. <el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%">
  57. <el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form">
  58. <el-form-item class="width" prop="name">
  59. <el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input>
  60. </el-form-item>
  61. <el-form-item class="width" prop="phone">
  62. <el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input>
  63. </el-form-item>
  64. <el-form-item class="width" prop="email">
  65. <el-input v-model="form.email" placeholder="Email"></el-input>
  66. </el-form-item>
  67. </el-form>
  68. <span slot="footer" class="dialog-footer">
  69. <el-button @click="dialogVisible = false">{{ characters == 1 ? '取 消' : 'Cancel' }}</el-button>
  70. <el-button type="primary" @click="submit()">{{ characters == 1 ? '提 交' : 'Submit' }}</el-button>
  71. </span>
  72. </el-dialog>
  73. </div>
  74. </template>
  75. <script>
  76. import 'swiper/dist/js/swiper';
  77. import 'swiper/dist/css/swiper.css';
  78. import Swiper from 'swiper';
  79. import { mapState, mapActions } from 'vuex';
  80. export default {
  81. data() {
  82. return {
  83. //零时存放
  84. charactersMy: 1,
  85. languageLsit: [
  86. {
  87. name: 'Cn',
  88. value: 1,
  89. url: require('../../assets/img/cn.jpeg')
  90. },
  91. {
  92. name: 'En',
  93. value: 2,
  94. url: require('../../assets/img/en.jpg')
  95. }
  96. ],
  97. //
  98. userName: '',
  99. phone: '',
  100. email: '',
  101. form: {
  102. name: '',
  103. phone: '',
  104. email: ''
  105. },
  106. rules: {
  107. name: [
  108. {
  109. required: true,
  110. min: 1,
  111. max: 10,
  112. message: '此项必填,内容最大10个字符!',
  113. trigger: 'blur'
  114. }
  115. ],
  116. phone: [
  117. {
  118. required: true,
  119. trigger: 'change',
  120. message: '请先输手机号',
  121. trigger: 'blur'
  122. },
  123. {
  124. validator(rule, value, callback, source, options) {
  125. var errors = [];
  126. // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
  127. let phone = /^1[35789]\d{9}$/;
  128. if (value && !phone.test(value)) {
  129. callback('抱歉,请输入正确的手机号');
  130. }
  131. callback(errors);
  132. }
  133. }
  134. ],
  135. email: [
  136. {
  137. required: true,
  138. trigger: 'change',
  139. message: '请输入邮箱!',
  140. trigger: 'blur'
  141. },
  142. {
  143. validator(rule, value, callback, source, options) {
  144. var errors = [];
  145. // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
  146. let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  147. if (value && !email.test(value)) {
  148. callback('抱歉,请输入正确的邮箱');
  149. }
  150. callback(errors);
  151. }
  152. }
  153. ]
  154. },
  155. rulesEnglish: {
  156. name: [
  157. {
  158. required: true,
  159. min: 1,
  160. max: 10,
  161. message: 'This item is required !',
  162. trigger: 'blur'
  163. }
  164. ],
  165. phone: [
  166. {
  167. required: true,
  168. trigger: 'change',
  169. message: 'Please enter your cell phone number',
  170. trigger: 'blur'
  171. },
  172. {
  173. validator(rule, value, callback, source, options) {
  174. var errors = [];
  175. let phone = /^1[35789]\d{9}$/;
  176. if (value && !phone.test(value)) {
  177. callback('Sorry, please enter the correct cell phone number');
  178. }
  179. callback(errors);
  180. }
  181. }
  182. ],
  183. email: [
  184. {
  185. required: true,
  186. trigger: 'change',
  187. message: 'Please enter email!',
  188. trigger: 'blur'
  189. },
  190. {
  191. validator(rule, value, callback, source, options) {
  192. var errors = [];
  193. let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  194. if (value && !email.test(value)) {
  195. callback('Sorry, please enter the correct email address');
  196. }
  197. callback(errors);
  198. }
  199. }
  200. ]
  201. },
  202. // characters: 1, //1=》中文 2=》英文
  203. timeFlag: 5,
  204. dialogVisible: false,
  205. module_6_data: [
  206. {
  207. url: require('../../assets/img/demo_1.png'),
  208. name: '增加电子商务销售额',
  209. name_y: 'Increase eCommerce sales'
  210. },
  211. {
  212. url: require('../../assets/img/demo_2.png'),
  213. name: '推动品牌声誉',
  214. name_y: 'Drive Brand engagement'
  215. },
  216. {
  217. url: require('../../assets/img/demo_3.png'),
  218. name: '拓展客户服务',
  219. name_y: 'Scale customer service'
  220. },
  221. {
  222. url: require('../../assets/img/demo_4.png'),
  223. name: ' 节约您的劳动成本',
  224. name_y: ' Augment your current workforce'
  225. },
  226. {
  227. url: require('../../assets/img/demo_5.png'),
  228. name: ' 提供支持和陪伴',
  229. name_y: 'Provide support and companionship'
  230. },
  231. {
  232. url: require('../../assets/img/demo_6.png'),
  233. name: '投资元宇宙的未来',
  234. name_y: 'Deliver knowledge and learning'
  235. },
  236. {
  237. url: require('../../assets/img/demo_7.png'),
  238. name: '数字化名人的力量',
  239. name_y: 'Leverage the power of Digital Celebrities'
  240. },
  241. {
  242. url: require('../../assets/img/demo_8.png'),
  243. name: '传递学习和知识',
  244. name_y: ' Invest in the metaverse future'
  245. }
  246. ],
  247. carouselLsit: [
  248. {
  249. url: require('../../assets/img/carousel1.png')
  250. },
  251. {
  252. url: require('../../assets/img/carousel2.png')
  253. },
  254. {
  255. url: require('../../assets/img/carousel3.png')
  256. }
  257. ],
  258. partnerLsit: [
  259. {
  260. url: require('../../assets/img/partner1.png')
  261. },
  262. {
  263. url: require('../../assets/img/partner2.png')
  264. },
  265. {
  266. url: require('../../assets/img/partner3.png')
  267. },
  268. {
  269. url: require('../../assets/img/partner4.png')
  270. },
  271. {
  272. url: require('../../assets/img/partner5.png')
  273. }
  274. ],
  275. timeLsit: [
  276. {
  277. title: '2018-10',
  278. ctn1_y: 'Team built up in Oct. 2018',
  279. // ctn2_y: "Team built up in Oct. 2018",
  280. ctn1: '团队组建'
  281. // ctn2: "团队组建"
  282. },
  283. {
  284. url: require('../../assets/img/carousel2.png'),
  285. title: '2019',
  286. ctn1_y: 'Deliver the first movie project in May. 2019',
  287. // ctn2_y: "Deliver the first movie project in May. 2019",
  288. ctn1: '第一个影视特效 ',
  289. ctn2: '项目交付'
  290. },
  291. {
  292. url: require('../../assets/img/carousel3.png'),
  293. title: '2021-05',
  294. ctn1_y: 'Beta of MetaGene published in May,2021',
  295. // ctn2_y: "Beta of MetaGene published in May,2021",
  296. ctn1: '内部产品',
  297. ctn2: 'Metagene V1完成'
  298. },
  299. {
  300. url: require('../../assets/img/carousel3.png'),
  301. title: '2021-08',
  302. ctn1_y: 'Metavatar built up in Aug, 2021',
  303. // ctn2_y: "Metavatar built up in Aug, 2021",
  304. ctn1: '邃芒科技成立'
  305. // ctn2: "邃芒科技成立",
  306. },
  307. {
  308. url: require('../../assets/img/carousel3.png'),
  309. title: '2022-01',
  310. ctn1_y: 'Angel fund in Jan, 2022',
  311. // ctn2_y: "Angel fund in Jan, 2022",
  312. ctn1: '获得天使轮融资'
  313. // ctn2: "获得天使轮融资",
  314. },
  315. {
  316. url: require('../../assets/img/carousel3.png'),
  317. title: '2022-06',
  318. ctn1_y: 'Deliver the first project based on Magenta for our strategic partner in Jun,2022',
  319. // ctn2_y: "Beta of MetaGene published in May,2021",
  320. ctn1: '为战略合作伙伴新奥特',
  321. ctn2: '交付首个基于MetaGene的内容生产项目'
  322. }
  323. ]
  324. };
  325. },
  326. methods: {
  327. ...mapActions(['setCharacters']),
  328. change(value) {
  329. console.log(value);
  330. this.setCharacters(value);
  331. },
  332. showBox() {
  333. this.dialogVisible = true;
  334. },
  335. goView(id) {
  336. document.querySelector('#' + id).scrollIntoView({
  337. behavior: 'smooth', //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
  338. block: 'start', //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
  339. inline: 'nearest' //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
  340. });
  341. // console.log(document.querySelector(id),);
  342. },
  343. goPages(path) {
  344. this.$router.push(`/${path}`);
  345. },
  346. submit() {
  347. this.$refs.form.validate(valid => {
  348. console.log(valid);
  349. if (valid) {
  350. let params = {
  351. mallName: this.form.email, //邮箱
  352. applicant: this.form.name, //姓名
  353. phone: this.form.phone //电话
  354. };
  355. this.$axios({
  356. method: 'post',
  357. url: '/C/api/wxMallApply/add',
  358. headers: {
  359. 'Content-Type': 'application/json;charset=UTF-8'
  360. },
  361. data: params
  362. })
  363. .then(res => {
  364. this.form.email = '';
  365. this.form.name = '';
  366. this.form.phone = '';
  367. this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully');
  368. this.dialogVisible = false;
  369. })
  370. .catch(err => {
  371. this.$message.error(err.message);
  372. });
  373. }
  374. });
  375. }
  376. },
  377. computed: {
  378. ...mapState({
  379. characters: state => state.publicObj.characters
  380. })
  381. },
  382. mounted() {
  383. // console.log();
  384. // this.$refs["vidoe"].play();
  385. new Swiper('.swiper-container', {
  386. slidesPerView: 3,
  387. spaceBetween: 30,
  388. centeredSlides: true,
  389. loop: true,
  390. // 如果需要分页器
  391. pagination: {
  392. el: '.swiper-pagination',
  393. clickable: true // 分页器可以点击
  394. },
  395. // 如果需要前进后退按钮
  396. navigation: {
  397. nextEl: '.swiper-button-next',
  398. prevEl: '.swiper-button-prev'
  399. },
  400. // 如果需要滚动条
  401. scrollbar: {
  402. el: '.swiper-scrollbar'
  403. }
  404. });
  405. },
  406. created() {
  407. this.$nextTick(() => {
  408. this.goView('top');
  409. });
  410. }
  411. };
  412. </script>
  413. <style lang="scss" scoped>
  414. .Box {
  415. width: 100%;
  416. overflow: hidden;
  417. }
  418. .topBox {
  419. width: 90%;
  420. overflow: hidden;
  421. position: fixed;
  422. top: 0;
  423. left: 0;
  424. z-index: 1000;
  425. // background-color: rgba(255, 255, 255, 0.1);
  426. }
  427. .logoBox {
  428. margin-top: 35px;
  429. margin-left: 35px;
  430. margin-bottom: 35px;
  431. float: left;
  432. overflow: hidden;
  433. }
  434. .logo {
  435. float: left;
  436. // width: 60px;
  437. // height: 30px;
  438. }
  439. .logoTitle {
  440. float: left;
  441. line-height: 30px;
  442. margin-left: 10px;
  443. font-size: 22px;
  444. }
  445. .categoryBox {
  446. height: 30px;
  447. width: 600px;
  448. float: left;
  449. margin-top: 20px;
  450. margin-left: 16%;
  451. display: flex;
  452. justify-content: space-between;
  453. cursor: pointer;
  454. }
  455. .categoryitem {
  456. width: 110px;
  457. line-height: 30px;
  458. color: #7d7d7d;
  459. font-size: 15px;
  460. // background-color: #16e9d6
  461. }
  462. .cutBox {
  463. float: right;
  464. margin-top: 35px;
  465. margin-right: 50px;
  466. overflow: hidden;
  467. cursor: pointer;
  468. }
  469. .cutImg {
  470. width: 30px;
  471. height: 20px;
  472. float: left;
  473. margin-top: 10px;
  474. margin-right: 10px;
  475. }
  476. .en {
  477. float: left;
  478. font-size: 15px;
  479. }
  480. .module_1 {
  481. width: 100%;
  482. // height: 1080px;
  483. // background-color: aquamarine;
  484. // background-image: url("../../assets/img/bg.png");
  485. background-repeat: no-repeat;
  486. background-size: 100% 100%;
  487. overflow: hidden;
  488. position: relative;
  489. margin-top: 80px;
  490. background-color: #f1f4f7;
  491. .titleBox {
  492. width: 36%;
  493. position: absolute;
  494. top: 390px;
  495. left: 194px;
  496. overflow: hidden;
  497. color: #323232;
  498. .title_item1 {
  499. margin-bottom: 14px;
  500. font-size: 60px;
  501. }
  502. .title_item1_y {
  503. // margin-bottom: 14px;
  504. font-size: 36px;
  505. }
  506. .title_item2 {
  507. margin-bottom: 20px;
  508. font-size: 42px;
  509. }
  510. .title_item3 {
  511. font-size: 16px;
  512. line-height: 30px;
  513. }
  514. .title_btn {
  515. margin-top: 60px;
  516. height: 60px;
  517. width: 220px;
  518. text-align: center;
  519. line-height: 60px;
  520. color: #323232;
  521. border-radius: 40px;
  522. border: #323232 solid 3px;
  523. font-size: 18px;
  524. cursor: pointer;
  525. transition: all 0.3s;
  526. &:hover {
  527. color: #16e9d6;
  528. border: #16e9d6 solid 3px;
  529. }
  530. }
  531. .desc {
  532. margin-top: 29px;
  533. font-size: 16px;
  534. line-height: 36px;
  535. }
  536. }
  537. }
  538. .module_2 {
  539. height: 760px;
  540. background: #ffffff;
  541. padding-top: 32px;
  542. padding-left: 116px;
  543. padding-right: 85px;
  544. .title {
  545. text-align: center;
  546. margin-bottom: 72px;
  547. font-size: 36px;
  548. img {
  549. position: relative;
  550. top: 18px;
  551. width: 59px;
  552. height: 60px;
  553. }
  554. }
  555. .images {
  556. display: flex;
  557. justify-content: space-between;
  558. li {
  559. list-style: none;
  560. margin-right: 9px;
  561. img {
  562. width: 423px;
  563. height: 540px;
  564. cursor: pointer;
  565. transition: all 0.3s;
  566. &:hover {
  567. box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.548);
  568. transform: translateY(-20px);
  569. }
  570. }
  571. }
  572. }
  573. }
  574. .module_3 {
  575. height: 810px;
  576. background-color: #ebeef7;
  577. padding-top: 33px;
  578. text-align: center;
  579. .title {
  580. text-align: center;
  581. font-size: 48px;
  582. font-family: Microsoft YaHei;
  583. font-weight: 400;
  584. color: #4d4d4d;
  585. line-height: 36px;
  586. margin-bottom: 44px;
  587. }
  588. img {
  589. width: 1250px;
  590. height: 665px;
  591. opacity: 0.85;
  592. transition: all 0.3s;
  593. &:hover {
  594. opacity: 1;
  595. }
  596. }
  597. }
  598. </style>