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

596 lines
16 KiB

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