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

651 rivejä
17 KiB

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