邃芒官网(PC) https://www.metavatar.cc
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 

650 linhas
18 KiB

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