Bladeren bron

1

ctt_ywq
congzc 2 jaren geleden
bovenliggende
commit
1fab466807
8 gewijzigde bestanden met toevoegingen van 624 en 332 verwijderingen
  1. +7
    -5
      src/components/common/tail.vue
  2. +28
    -15
      src/components/common/top.vue
  3. +43
    -13
      src/components/home/home.vue
  4. +157
    -96
      src/components/views/generate.vue
  5. +191
    -100
      src/components/views/live.vue
  6. +192
    -102
      src/components/views/shadow.vue
  7. +5
    -1
      src/components/views/turing.vue
  8. +1
    -0
      src/store/modules/public.js

+ 7
- 5
src/components/common/tail.vue Bestand weergeven

@@ -7,10 +7,11 @@
/>
</div>
<div class="tiemBox">
<div class="tiemBox" id="tiemBox">
<div class="taolIconBox">
<div class="taolIconText">
{{ characters == 1 ? "关注我们" : "follow Us" }}
<!-- {{ characters == 1 ? "关注我们" : "follow Us" }} -->
{{ characters == 1 ? "" : "" }}
</div>
<div class="iconBox">
<img
@@ -32,8 +33,8 @@
</div>
</div>
<div class="contentBox">
<div class="taolIconText">
<div class="contentBox" 啊实打实>
<div class="taolIconText" style="margin-top: 0px">
{{ characters == 1 ? "联系我们" : "Contact us" }}
</div>
<!-- <div class="contentInput">
@@ -121,6 +122,7 @@
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
@@ -337,7 +339,7 @@ export default {
float: left;
}
.taolIconText {
margin-top: -20px;
margin-top: 20px;
font-size: 14px;
font-family: Inter;
font-weight: 400;


+ 28
- 15
src/components/common/top.vue Bestand weergeven

@@ -45,6 +45,9 @@
<div class="categoryitem" @click="goView('aboutUs')">
{{ characters == 1 ? "关于我们" : "About us" }}
</div>
<div class="categoryitem" @click="goView('tiemBox')">
{{ characters == 1 ? "联系我们" : "Contact us" }}
</div>
</div>
<div class="cutBox">
<!-- <img src="@/assets/img/earth.png" alt="" /> -->
@@ -88,20 +91,7 @@ export default {
charactersMy: 1,
};
},
watch: {
// languageLsit(newVal) {
// this.setCharacters([
// {
// name: "Cn",
// value: 1
// },
// {
// name: "En",
// value: 2
// }
// ]);
// }
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
@@ -117,7 +107,7 @@ export default {
this.$router.push(`/${path}`);
},
goView(id) {
if (id == "Technology" || id == "Solutions") {
if (id == "Technology" || id == "Solutions" || id == "aboutUs") {
this.$router.push(`/`);
setTimeout(() => {
document.querySelector("#" + id).scrollIntoView({
@@ -154,6 +144,29 @@ export default {
},
created() {
this.handleScrollTop();
// this.charactersMy = this.$store.state.publicObj.characters;
// console.log();
// console.log(this.charactersMy);
},
watch: {
"$store.state.publicObj.characters": {
handler(newVal) {
console.log(newVal, "vuex");
this.charactersMy = newVal;
},
},
// languageLsit(newVal) {
// this.setCharacters([
// {
// name: "Cn",
// value: 1
// },
// {
// name: "En",
// value: 2
// }
// ]);
// }
},
};
</script>


+ 43
- 13
src/components/home/home.vue Bestand weergeven

@@ -42,7 +42,11 @@
freely
</div>
<div class="title_btn" @click="showBox">
<div
class="title_btn"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
@@ -162,13 +166,27 @@
</div>
</div>
<div class="module_4" id="module_4">
<div class="btnBox1">
<div class="btnText" @click="showBox">
<div
class="btnBox1"
:style="$store.state.publicObj.showTryItNow ? '' : 'height: 40px'"
>
<div
class="btnText"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
<div class="btnBox2">
<div class="btnText" @click="showBox">
<div
class="btnBox2"
:style="$store.state.publicObj.showTryItNow ? '' : 'height: 40px'"
>
<div
class="btnText"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
@@ -225,7 +243,11 @@
}}
</div>
</div>
<div class="bnt_look" @click="showBox">
<div
class="bnt_look"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
@@ -274,7 +296,11 @@
}}
</div>
<div class="read_btn" @click="showBox">
<div
class="read_btn"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "了解详情" : "Read more" }}
</div>
</div>
@@ -920,18 +946,22 @@ export default {
// 浏览器为IE的情况
if (Browser_Agent.indexOf(" MSIE ") != -1) {
const a = navigator.browserLanguage;
if (a != "zh-cn") {
// 英文网站
console.log("英文网站");
if (a == "zh-cn") {
// 中文网站
console.log("中文网站");
this.setCharacters(1);
} else {
this.setCharacters(2);
}
}
// 浏览器非IE的情况
else {
const b = navigator.language;
if (b != "zh-CN") {
// 英文网站
console.log("英文网站");
if (b == "zh-CN") {
// 中文网站
console.log("中文网站");
this.setCharacters(1);
} else {
this.setCharacters(2);
}
}


+ 157
- 96
src/components/views/generate.vue Bestand weergeven

@@ -1,6 +1,10 @@
<template>
<div class="Box" id="top">
<div class="module_1" style="position: relative; background-color: #000; height: 800px" @click="goSetVedio(isPlayed)">
<div
class="module_1"
style="position: relative; background-color: #000; height: 800px"
@click="goSetVedio(isPlayed)"
>
<video
style="position: absolute; right: 250px"
ref="videoPlayer"
@@ -10,32 +14,47 @@
autoplay
muted
controls
loop="loop" />
loop="loop"
/>
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/suiMang_generate@2x.png" width="100%" height="100%" /> -->
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">邃芒慧生</div>
<div class="title_item1_y" v-if="characters == 1">AI全自动生成,高逼真自然度数字人</div>
<div class="title_item1_y" v-if="characters == 1">
AI全自动生成,高逼真自然度数字人
</div>
<div class="desc" v-if="characters == 1">
<div>满足数字分身,虚拟创造,原画复现等场景需要,分钟级定稿IP形象</div>
<div>
满足数字分身,虚拟创造,原画复现等场景需要,分钟级定稿IP形象
</div>
<div>无中生有的专属虚拟IP,彻底消除IP版权后顾之忧</div>
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaGene</div>
<div class="title_item1_y" v-if="characters != 1">AI platform generates high-fidelity, natural digital humans automatically by using labels and prompts.</div>
<div class="title_item1_y" v-if="characters != 1">
AI platform generates high-fidelity, natural digital humans
automatically by using labels and prompts.
</div>
<div class="desc" v-if="characters != 1">
<!-- <div>Meet the needs of digital avatar, virtual creation, original painting reproduction and other scenarios.</div>
<div>The exclusive virtual IP created out of nothing completely, eliminates the worries of IP copyright, finalize the IP image in minutes</div> -->
<div>
Meets the demands of digital avatars, virtual creation, and original painting reproduction. With MetaGene, you can effortlessly create exclusive virtual IPs from scratch, eliminating
concerns about IP copyright. In just minutes, you can finalize the IP image, ensuring a unique and original creation.
Meets the demands of digital avatars, virtual creation, and original
painting reproduction. With MetaGene, you can effortlessly create
exclusive virtual IPs from scratch, eliminating concerns about IP
copyright. In just minutes, you can finalize the IP image, ensuring
a unique and original creation.
</div>
</div>
<div class="title_btn" @click="showBox">
{{ characters == 1 ? '立刻体验' : 'Try it now' }}
<div
class="title_btn"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
<div class="md1" id="md1"></div>
@@ -43,53 +62,93 @@
<div class="module_2">
<div class="title">Metavatar AI</div>
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model2-IMG@2x.png" alt="" />
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model2-IMG@2x.png"
alt=""
/>
</div>
<div class="module_3">
<div class="title" v-if="characters == 1">保持人脸特征 自由调整各类心仪风格</div>
<div class="title" v-if="characters != 1">Maintain facial features and freely adjust various favorite styles</div>
<div class="title" v-if="characters == 1">
保持人脸特征 自由调整各类心仪风格
</div>
<div class="title" v-if="characters != 1">
Maintain facial features and freely adjust various favorite styles
</div>
<div class="style">STYLE</div>
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model3-IMG@2x.png" alt="" />
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model3-IMG@2x.png"
alt=""
/>
</div>
<div class="module_4">
<div class="imgBox">
<div class="textInsideBox">
<div class="title" v-if="characters == 1">丰富的状态编辑 完整的IP形象展示</div>
<div class="title" v-if="characters != 1">Rich status editing, complete IP image display</div>
<div class="title" v-if="characters == 1">
丰富的状态编辑 完整的IP形象展示
</div>
<div class="title" v-if="characters != 1">
Rich status editing, complete IP image display
</div>
<div class="style">FULL AGE</div>
</div>
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model4-IMG@2x.png" alt="" />
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model4-IMG@2x.png"
alt=""
/>
</div>
</div>
<el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%">
<el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form">
<el-dialog
:title="
characters == 1
? '留下您的信息,我们会尽快与您取得联系'
: 'Tell us about yourself, we ll be in touch right away.'
"
:visible.sync="dialogVisible"
width="34%"
>
<el-form
ref="form"
:rules="characters == 1 ? rules : rulesEnglish"
:model="form"
>
<el-form-item class="width" prop="name">
<el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input>
<el-input
v-model="form.name"
maxlength="10"
:placeholder="characters == 1 ? '姓名' : 'Name'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="phone">
<el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input>
<el-input
v-model="form.phone"
:placeholder="characters == 1 ? '手机' : 'Phone'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{ characters == 1 ? '取 消' : 'Cancel' }}</el-button>
<el-button type="primary" @click="submit()">{{ characters == 1 ? '提 交' : 'Submit' }}</el-button>
<el-button @click="dialogVisible = false">{{
characters == 1 ? "取 消" : "Cancel"
}}</el-button>
<el-button type="primary" @click="submit()">{{
characters == 1 ? "提 交" : "Submit"
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import 'swiper/dist/js/swiper';
import 'swiper/dist/css/swiper.css';
import Swiper from 'swiper';
import { mapState, mapActions } from 'vuex';
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";
export default {
data() {
@@ -97,14 +156,14 @@ export default {
//零时存放
charactersMy: 1,
//
userName: '',
phone: '',
email: '',
userName: "",
phone: "",
email: "",
form: {
name: '',
phone: '',
email: ''
name: "",
phone: "",
email: "",
},
rules: {
@@ -113,16 +172,16 @@ export default {
required: true,
min: 1,
max: 10,
message: '此项必填,内容最大10个字符!',
trigger: 'blur'
}
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: 'change',
message: '请先输手机号',
trigger: 'blur'
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
@@ -130,18 +189,18 @@ export default {
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback('抱歉,请输入正确的手机号');
callback("抱歉,请输入正确的手机号");
}
callback(errors);
}
}
},
},
],
email: [
{
required: true,
trigger: 'change',
message: '请输入邮箱!',
trigger: 'blur'
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
@@ -149,12 +208,12 @@ export default {
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback('抱歉,请输入正确的邮箱');
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
}
}
]
},
},
],
},
rulesEnglish: {
name: [
@@ -162,54 +221,54 @@ export default {
required: true,
min: 1,
max: 10,
message: 'This item is required !',
trigger: 'blur'
}
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: 'change',
message: 'Please enter your cell phone number',
trigger: 'blur'
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback('Sorry, please enter the correct cell phone number');
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
}
}
},
},
],
email: [
{
required: true,
trigger: 'change',
message: 'Please enter email!',
trigger: 'blur'
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback('Sorry, please enter the correct email address');
callback("Sorry, please enter the correct email address");
}
callback(errors);
}
}
]
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false
dialogVisible: false,
};
},
methods: {
...mapActions(['setCharacters']),
...mapActions(["setCharacters"]),
change(value) {
console.log(value);
@@ -218,9 +277,9 @@ export default {
goSetVedio(flag) {
if (flag) {
this.$refs['videoII'].play();
this.$refs["videoII"].play();
} else {
this.$refs['videoII'].pause();
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},
@@ -229,10 +288,10 @@ export default {
this.dialogVisible = true;
},
goView(id) {
document.querySelector('#' + id).scrollIntoView({
behavior: 'smooth', //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: 'start', //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: 'nearest' //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
@@ -240,46 +299,48 @@ export default {
this.$router.push(`/${path}`);
},
submit() {
this.$refs.form.validate(valid => {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone //电话
phone: this.form.phone, //电话
};
this.$axios({
method: 'post',
url: '/C/api/wxMallApply/add',
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
'Content-Type': 'application/json;charset=UTF-8'
"Content-Type": "application/json;charset=UTF-8",
},
data: params
data: params,
})
.then(res => {
this.form.email = '';
this.form.name = '';
this.form.phone = '';
this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully');
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch(err => {
.catch((err) => {
this.$message.error(err.message);
});
}
});
}
},
},
computed: {
...mapState({
characters: state => state.publicObj.characters
})
characters: (state) => state.publicObj.characters,
}),
},
mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper('.swiper-container', {
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
@@ -287,29 +348,29 @@ export default {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true // 分页器可以点击
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar'
}
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView('top');
this.goView("top");
this.$refs.videoPlayer.muted = false;
this.$refs.videoPlayer.play();
});
}
},
};
</script>


+ 191
- 100
src/components/views/live.vue Bestand weergeven

@@ -1,10 +1,16 @@
<template>
<div class="Box" id="top">
<div class="module_1">
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png" width="100%" height="100%" />
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png"
width="100%"
height="100%"
/>
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">邃芒慧播</div>
<div class="title_item1_y" v-if="characters == 1">直播虚拟人自然逼真,分身真假难辨</div>
<div class="title_item1_y" v-if="characters == 1">
直播虚拟人自然逼真,分身真假难辨
</div>
<div class="desc" v-if="characters == 1">
<div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div>
@@ -12,19 +18,28 @@
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaStreaming</div>
<div class="title_item1_y" v-if="characters != 1">MetaStreaming Virtual Person for live broadcasts is incredibly realistic, blurring the line between virtual and real.</div>
<div class="title_item1_y" v-if="characters != 1">
MetaStreaming Virtual Person for live broadcasts is incredibly
realistic, blurring the line between virtual and real.
</div>
<div class="desc" v-if="characters != 1">
<!-- <div>Virtual live broadcast solves real-world problems such as production capacity of real people, IP ownership, etc. by virtual digital human</div>
<div>Can work for you 7*24 in various scenarios</div> -->
<div>
Virtual live broadcasting solves real-world challenges like production capacity and IP ownership by utilizing virtual digital humans. These virtual counterparts work 24/7 across various
Virtual live broadcasting solves real-world challenges like
production capacity and IP ownership by utilizing virtual digital
humans. These virtual counterparts work 24/7 across various
scenarios.
</div>
</div>
<div class="title_btn" @click="showBox">
{{ characters == 1 ? '立刻体验' : 'Try it now' }}
<div
class="title_btn"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
<div class="md1" id="md1"></div>
@@ -33,64 +48,138 @@
<div class="module_2">
<div class="title" v-if="characters == 1">真人无需出镜驱动数字人直播</div>
<!-- <div class="title" v-if="characters != 1">Digital live broadcasting manipulated by AI, text, voice, video etc.to free real people workforce on camera.</div> -->
<div class="title" v-if="characters != 1">AI-powered digital live broadcasting frees real people from on-camera work by utilizing text, voice, and video.</div>
<div class="title" v-if="characters != 1">
AI-powered digital live broadcasting frees real people from on-camera
work by utilizing text, voice, and video.
</div>
<div class="imgBox">
<li style="position: relative">
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2x.png" alt="" />
<img v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2xEnglish.png" alt="" />
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2xEnglish.png"
alt=""
/>
<div class="textInImg" v-if="characters != 1">中の人</div>
</li>
<li style="position: relative">
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2x.png" alt="" />
<img v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2xEnglish.png" alt="" />
<div class="textInImg" v-if="characters != 1">Virtual human frees real person</div>
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2xEnglish.png"
alt=""
/>
<div class="textInImg" v-if="characters != 1">
Virtual human frees real person
</div>
</li>
<li style="position: relative">
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2x.png" alt="" />
<img v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2xEnglish.png" alt="" />
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2xEnglish.png"
alt=""
/>
<div class="textInImg" v-if="characters != 1">Cartoon character</div>
</li>
<div class="redCard" v-if="characters == 1">无缝接入各主流平台</div>
<div class="redCard" v-if="characters != 1">Seamless access to all platforms, tictok,intagram, facebook,wechat etc.</div>
<div class="pinkCard" v-if="characters == 1">IP版权归属明确 无后顾之忧</div>
<div class="pinkCard" v-if="characters != 1">No IP copyright concerns</div>
<div class="blueCard" v-if="characters == 1">出镜声形从此统一 打造沉淀企业IP</div>
<div class="blueCard" v-if="characters != 1">Unified voice and appearance for digital IP of the precipitation enterprise will be created。</div>
<div class="redCard" v-if="characters != 1">
Seamless access to all platforms, tictok,intagram, facebook,wechat
etc.
</div>
<div class="pinkCard" v-if="characters == 1">
IP版权归属明确 无后顾之忧
</div>
<div class="pinkCard" v-if="characters != 1">
No IP copyright concerns
</div>
<div class="blueCard" v-if="characters == 1">
出镜声形从此统一 打造沉淀企业IP
</div>
<div class="blueCard" v-if="characters != 1">
Unified voice and appearance for digital IP of the precipitation
enterprise will be created。
</div>
</div>
</div>
<div class="module_3">
<div class="title" v-if="characters == 1">脚本驱动数字人直播</div>
<div class="title" v-if="characters != 1">Script-driven digital human live broadcast</div>
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive@2x.png" alt="" />
<img v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive_en@2x.png" alt="" />
<div class="title" v-if="characters != 1">
Script-driven digital human live broadcast
</div>
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive_en@2x.png"
alt=""
/>
</div>
<el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%">
<el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form">
<el-dialog
:title="
characters == 1
? '留下您的信息,我们会尽快与您取得联系'
: 'Tell us about yourself, we ll be in touch right away.'
"
:visible.sync="dialogVisible"
width="34%"
>
<el-form
ref="form"
:rules="characters == 1 ? rules : rulesEnglish"
:model="form"
>
<el-form-item class="width" prop="name">
<el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input>
<el-input
v-model="form.name"
maxlength="10"
:placeholder="characters == 1 ? '姓名' : 'Name'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="phone">
<el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input>
<el-input
v-model="form.phone"
:placeholder="characters == 1 ? '手机' : 'Phone'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{ characters == 1 ? '取 消' : 'Cancel' }}</el-button>
<el-button type="primary" @click="submit()">{{ characters == 1 ? '提 交' : 'Submit' }}</el-button>
<el-button @click="dialogVisible = false">{{
characters == 1 ? "取 消" : "Cancel"
}}</el-button>
<el-button type="primary" @click="submit()">{{
characters == 1 ? "提 交" : "Submit"
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import 'swiper/dist/js/swiper';
import 'swiper/dist/css/swiper.css';
import Swiper from 'swiper';
import { mapState, mapActions } from 'vuex';
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";
export default {
data() {
@@ -100,14 +189,14 @@ export default {
//
userName: '',
phone: '',
email: '',
userName: "",
phone: "",
email: "",
form: {
name: '',
phone: '',
email: ''
name: "",
phone: "",
email: "",
},
rules: {
@@ -116,16 +205,16 @@ export default {
required: true,
min: 1,
max: 10,
message: '此项必填,内容最大10个字符!',
trigger: 'blur'
}
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: 'change',
message: '请先输手机号',
trigger: 'blur'
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
@@ -133,18 +222,18 @@ export default {
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback('抱歉,请输入正确的手机号');
callback("抱歉,请输入正确的手机号");
}
callback(errors);
}
}
},
},
],
email: [
{
required: true,
trigger: 'change',
message: '请输入邮箱!',
trigger: 'blur'
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
@@ -152,12 +241,12 @@ export default {
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback('抱歉,请输入正确的邮箱');
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
}
}
]
},
},
],
},
rulesEnglish: {
name: [
@@ -165,54 +254,54 @@ export default {
required: true,
min: 1,
max: 10,
message: 'This item is required !',
trigger: 'blur'
}
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: 'change',
message: 'Please enter your cell phone number',
trigger: 'blur'
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback('Sorry, please enter the correct cell phone number');
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
}
}
},
},
],
email: [
{
required: true,
trigger: 'change',
message: 'Please enter email!',
trigger: 'blur'
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback('Sorry, please enter the correct email address');
callback("Sorry, please enter the correct email address");
}
callback(errors);
}
}
]
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false
dialogVisible: false,
};
},
methods: {
...mapActions(['setCharacters']),
...mapActions(["setCharacters"]),
change(value) {
console.log(value);
@@ -223,10 +312,10 @@ export default {
this.dialogVisible = true;
},
goView(id) {
document.querySelector('#' + id).scrollIntoView({
behavior: 'smooth', //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: 'start', //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: 'nearest' //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
@@ -234,46 +323,48 @@ export default {
this.$router.push(`/${path}`);
},
submit() {
this.$refs.form.validate(valid => {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone //电话
phone: this.form.phone, //电话
};
this.$axios({
method: 'post',
url: '/C/api/wxMallApply/add',
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
'Content-Type': 'application/json;charset=UTF-8'
"Content-Type": "application/json;charset=UTF-8",
},
data: params
data: params,
})
.then(res => {
this.form.email = '';
this.form.name = '';
this.form.phone = '';
this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully');
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch(err => {
.catch((err) => {
this.$message.error(err.message);
});
}
});
}
},
},
computed: {
...mapState({
characters: state => state.publicObj.characters
})
characters: (state) => state.publicObj.characters,
}),
},
mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper('.swiper-container', {
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
@@ -281,27 +372,27 @@ export default {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true // 分页器可以点击
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar'
}
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView('top');
this.goView("top");
});
}
},
};
</script>


+ 192
- 102
src/components/views/shadow.vue Bestand weergeven

@@ -1,6 +1,9 @@
<template>
<div class="Box" id="top">
<div class="module_1" style="position: relative; background-color: #7868ca; height: 800px">
<div
class="module_1"
style="position: relative; background-color: #7868ca; height: 800px"
>
<video
ref="videoPlayer"
style="position: absolute; right: 250px"
@@ -10,11 +13,14 @@
autoplay
muted
controls
loop="loop" />
loop="loop"
/>
<!-- <img src="../../assets/img/metavatar_live/suiMang_live@2x.png" width="100%" height="100%" /> -->
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">邃芒慧影</div>
<div class="title_item1_y" v-if="characters == 1">数字人内容生产从未如此高效便捷</div>
<div class="title_item1_y" v-if="characters == 1">
数字人内容生产从未如此高效便捷
</div>
<div class="desc" v-if="characters == 1">
<div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div>
@@ -22,18 +28,28 @@
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaNeuver</div>
<div class="title_item1_y" v-if="characters != 1">Supports multimodl user input, text, voice, and source video.</div>
<div class="title_item1_y" v-if="characters != 1">
Supports multimodl user input, text, voice, and source video.
</div>
<div class="desc" v-if="characters != 1">
<div>
Allows your digital human to seamlessly cross the uncanny valley, ensuring an immersive and believable experience.enabling content production at any time and keeping up with all the latest
trends.
Allows your digital human to seamlessly cross the uncanny valley,
ensuring an immersive and believable experience.enabling content
production at any time and keeping up with all the latest trends.
</div>
<div v-if="false">
High naturalness and realism let your digital human completely cross
the uncanny valley
</div>
<div v-if="false">High naturalness and realism let your digital human completely cross the uncanny valley</div>
</div>
<div class="title_btn" @click="showBox">
{{ characters == 1 ? '立刻体验' : 'Try it now' }}
<div
class="title_btn"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
<div class="md1" id="md1"></div>
@@ -42,33 +58,74 @@
<div class="module_2">
<div class="title" v-if="characters == 1">
只需
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png" />
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png"
/>
步完成一条数字人视频内容生成
</div>
<div class="title" v-if="characters != 1">
Just
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png" />
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png"
/>
step to complete the generation of digital human video content
</div>
<div class="images">
<li>
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001@2x.png" alt="" />
<img v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001_en.jpg" alt="" />
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001_en.jpg"
alt=""
/>
</li>
<li>
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002@2x.png" alt="" />
<img v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002_en.jpg" alt="" />
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002_en.jpg"
alt=""
/>
</li>
<li>
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003@2x.png" alt="" />
<img v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003_en.jpg" alt="" />
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003_en.jpg"
alt=""
/>
</li>
<li class="videoLi">
<div class="imgBox1" @click="goSetVedio(isPlayed)">
<img v-if="isPlayed" class="play" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/play.png" title="click to play" />
<img v-else class="play" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/pause.png" title="click to pause" />
<img
v-if="isPlayed"
class="play"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/play.png"
title="click to play"
/>
<img
v-else
class="play"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/pause.png"
title="click to pause"
/>
<!-- <video ref="videoII" src="https://video.metavatar.cc/sv/2474483a-188345f1cb5/2474483a-188345f1cb5.mp4" /> -->
<video ref="videoII" src="https://video.metavatar.cc/sv/979bc5a-18841d2371c/979bc5a-18841d2371c.mp4" />
<video
ref="videoII"
src="https://video.metavatar.cc/sv/979bc5a-18841d2371c/979bc5a-18841d2371c.mp4"
/>
</div>
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> -->
</li>
@@ -78,35 +135,66 @@
<div class="module_3">
<div class="title" v-if="characters == 1">中之人驱动</div>
<div class="title" v-if="characters != 1">“中の人” driving</div>
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_zh.png" alt="" />
<img v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_1_en.png" alt="" />
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_zh.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_1_en.png"
alt=""
/>
</div>
<el-dialog :title="characters == 1 ? '留下您的信息,我们会尽快与您取得联系' : 'Tell us about yourself, we ll be in touch right away.'" :visible.sync="dialogVisible" width="34%">
<el-form ref="form" :rules="characters == 1 ? rules : rulesEnglish" :model="form">
<el-dialog
:title="
characters == 1
? '留下您的信息,我们会尽快与您取得联系'
: 'Tell us about yourself, we ll be in touch right away.'
"
:visible.sync="dialogVisible"
width="34%"
>
<el-form
ref="form"
:rules="characters == 1 ? rules : rulesEnglish"
:model="form"
>
<el-form-item class="width" prop="name">
<el-input v-model="form.name" maxlength="10" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input>
<el-input
v-model="form.name"
maxlength="10"
:placeholder="characters == 1 ? '姓名' : 'Name'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="phone">
<el-input v-model="form.phone" :placeholder="characters == 1 ? '手机' : 'Phone'"></el-input>
<el-input
v-model="form.phone"
:placeholder="characters == 1 ? '手机' : 'Phone'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{ characters == 1 ? '取 消' : 'Cancel' }}</el-button>
<el-button type="primary" @click="submit()">{{ characters == 1 ? '提 交' : 'Submit' }}</el-button>
<el-button @click="dialogVisible = false">{{
characters == 1 ? "取 消" : "Cancel"
}}</el-button>
<el-button type="primary" @click="submit()">{{
characters == 1 ? "提 交" : "Submit"
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import 'swiper/dist/js/swiper';
import 'swiper/dist/css/swiper.css';
import Swiper from 'swiper';
import { mapState, mapActions } from 'vuex';
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";
export default {
data() {
@@ -116,14 +204,14 @@ export default {
charactersMy: 1,
//
userName: '',
phone: '',
email: '',
userName: "",
phone: "",
email: "",
form: {
name: '',
phone: '',
email: ''
name: "",
phone: "",
email: "",
},
rules: {
@@ -132,16 +220,16 @@ export default {
required: true,
min: 1,
max: 10,
message: '此项必填,内容最大10个字符!',
trigger: 'blur'
}
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: 'change',
message: '请先输手机号',
trigger: 'blur'
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
@@ -149,18 +237,18 @@ export default {
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback('抱歉,请输入正确的手机号');
callback("抱歉,请输入正确的手机号");
}
callback(errors);
}
}
},
},
],
email: [
{
required: true,
trigger: 'change',
message: '请输入邮箱!',
trigger: 'blur'
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
@@ -168,12 +256,12 @@ export default {
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback('抱歉,请输入正确的邮箱');
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
}
}
]
},
},
],
},
rulesEnglish: {
name: [
@@ -181,60 +269,60 @@ export default {
required: true,
min: 1,
max: 10,
message: 'This item is required !',
trigger: 'blur'
}
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: 'change',
message: 'Please enter your cell phone number',
trigger: 'blur'
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback('Sorry, please enter the correct cell phone number');
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
}
}
},
},
],
email: [
{
required: true,
trigger: 'change',
message: 'Please enter email!',
trigger: 'blur'
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback('Sorry, please enter the correct email address');
callback("Sorry, please enter the correct email address");
}
callback(errors);
}
}
]
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false
dialogVisible: false,
};
},
methods: {
...mapActions(['setCharacters']),
...mapActions(["setCharacters"]),
goSetVedio(flag) {
if (flag) {
this.$refs['videoII'].play();
this.$refs["videoII"].play();
} else {
this.$refs['videoII'].pause();
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},
@@ -247,10 +335,10 @@ export default {
this.dialogVisible = true;
},
goView(id) {
document.querySelector('#' + id).scrollIntoView({
behavior: 'smooth', //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: 'start', //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: 'nearest' //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
@@ -258,46 +346,48 @@ export default {
this.$router.push(`/${path}`);
},
submit() {
this.$refs.form.validate(valid => {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone //电话
phone: this.form.phone, //电话
};
this.$axios({
method: 'post',
url: '/C/api/wxMallApply/add',
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
'Content-Type': 'application/json;charset=UTF-8'
"Content-Type": "application/json;charset=UTF-8",
},
data: params
data: params,
})
.then(res => {
this.form.email = '';
this.form.name = '';
this.form.phone = '';
this.$message.success(this.characters == 1 ? '提交成功' : 'submit successfully');
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch(err => {
.catch((err) => {
this.$message.error(err.message);
});
}
});
}
},
},
computed: {
...mapState({
characters: state => state.publicObj.characters
})
characters: (state) => state.publicObj.characters,
}),
},
mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper('.swiper-container', {
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
@@ -305,29 +395,29 @@ export default {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true // 分页器可以点击
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar'
}
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView('top');
this.goView("top");
this.$refs.videoPlayer.muted = false;
this.$refs.videoPlayer.play();
});
}
},
};
</script>


+ 5
- 1
src/components/views/turing.vue Bestand weergeven

@@ -29,7 +29,11 @@
Easily create your unique digital IP
</div> -->
<div class="title_btn" @click="showBox">
<div
class="title_btn"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "与李雷交谈" : "coming soon" }}
</div>
</div>


+ 1
- 0
src/store/modules/public.js Bestand weergeven

@@ -1,6 +1,7 @@
let publicObj = {
state: {
characters: 1,//1=》中文 2=》英文
showTryItNow: false
},
mutations: {
setCharacters(state, data) {


Laden…
Annuleren
Opslaan