邃芒官网(PC) https://www.metavatar.cc
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 

564 行
15 KiB

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