邃芒官网(PC) https://www.metavatar.cc
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 

524 rindas
14 KiB

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