瀏覽代碼

文案改版

ctt_ywq
congzc 2 年之前
父節點
當前提交
75b9344781
共有 5 個檔案被更改,包括 586 行新增917 行删除
  1. 二進制
      src/assets/img/zhongzhiren.png
  2. +281
    -394
      src/components/home/home.vue
  3. +97
    -154
      src/components/views/generate.vue
  4. +104
    -187
      src/components/views/live.vue
  5. +104
    -182
      src/components/views/shadow.vue

二進制
src/assets/img/zhongzhiren.png 查看文件

Before After
Width: 841  |  Height: 449  |  Size: 303 KiB

+ 281
- 394
src/components/home/home.vue
文件差異過大導致無法顯示
查看文件


+ 97
- 154
src/components/views/generate.vue 查看文件

@@ -1,10 +1,6 @@
<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"
@@ -14,43 +10,32 @@
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 generative high fidelity and natural digital human automatically by
variety labels & prompt
</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>
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
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" }}
{{ characters == 1 ? '立刻体验' : 'Try it now' }}
</div>
</div>
<div class="md1" id="md1"></div>
@@ -58,93 +43,53 @@
<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() {
@@ -152,14 +97,14 @@ export default {
//零时存放
charactersMy: 1,
//
userName: "",
phone: "",
email: "",
userName: '',
phone: '',
email: '',
form: {
name: "",
phone: "",
email: "",
name: '',
phone: '',
email: ''
},
rules: {
@@ -168,16 +113,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) {
@@ -185,18 +130,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) {
@@ -204,12 +149,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: [
@@ -217,54 +162,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);
@@ -273,9 +218,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;
},
@@ -284,10 +229,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),);
},
@@ -295,48 +240,46 @@ 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,
@@ -344,29 +287,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>


+ 104
- 187
src/components/views/live.vue 查看文件

@@ -1,16 +1,10 @@
<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>
@@ -18,21 +12,19 @@
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaStreaming</div>
<div class="title_item1_y" v-if="characters != 1">
The live broadcast virtual person is natural and lifelike,
ultra-realistic hardly to tell the differences from real human being.
</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 broadcast solves real-world problems such as production
capacity of real people, IP ownership, etc. by virtual digital human
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>Can work for you 7*24 in various scenarios</div>
</div>
<div class="title_btn" @click="showBox">
{{ characters == 1 ? "立刻体验" : "Try it now" }}
{{ characters == 1 ? '立刻体验' : 'Try it now' }}
</div>
</div>
<div class="md1" id="md1"></div>
@@ -40,138 +32,65 @@
<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">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="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">
Digital live streaming
</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=""
/>
<div class="textInImg" v-if="characters != 1">Toonman live</div>
<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() {
@@ -181,14 +100,14 @@ export default {
//
userName: "",
phone: "",
email: "",
userName: '',
phone: '',
email: '',
form: {
name: "",
phone: "",
email: "",
name: '',
phone: '',
email: ''
},
rules: {
@@ -197,16 +116,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) {
@@ -214,18 +133,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) {
@@ -233,12 +152,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: [
@@ -246,54 +165,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);
@@ -304,10 +223,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),);
},
@@ -315,48 +234,46 @@ 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,
@@ -364,27 +281,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>


+ 104
- 182
src/components/views/shadow.vue 查看文件

@@ -1,26 +1,20 @@
<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"
src="https://video.metavatar.cc/sv/2474483a-188345f1cb5/2474483a-188345f1cb5.mp4"
src="https://video.metavatar.cc/sv/979bc5a-18841d2371c/979bc5a-18841d2371c.mp4"
max-width="800px"
height="800px"
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>
@@ -28,24 +22,18 @@
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaNeuver</div>
<div class="title_item1_y" v-if="characters != 1">
Digital human content production has never been so efficient and
convenient
</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>
Text, voice, and source video multiple drive methods support the
production of content at any time and keep up with hot spots
</div>
<div>
High naturalness and realism let your digital human completely cross
the uncanny valley
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>
<div class="title_btn" @click="showBox">
{{ characters == 1 ? "立刻体验" : "Try it now" }}
{{ characters == 1 ? '立刻体验' : 'Try it now' }}
</div>
</div>
<div class="md1" id="md1"></div>
@@ -54,73 +42,33 @@
<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"
/>
<video
ref="videoII"
src="https://video.metavatar.cc/sv/2474483a-188345f1cb5/2474483a-188345f1cb5.mp4"
/>
<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" />
</div>
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> -->
</li>
@@ -130,60 +78,35 @@
<div class="module_3">
<div class="title" v-if="characters == 1">中之人驱动</div>
<div class="title" v-if="characters != 1">“中の人” driving</div>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png"
alt=""
/>
<img v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/picInside@2x.png" alt="" />
<img v-if="characters != 1" src="../../assets/img/zhongzhiren.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() {
@@ -193,14 +116,14 @@ export default {
charactersMy: 1,
//
userName: "",
phone: "",
email: "",
userName: '',
phone: '',
email: '',
form: {
name: "",
phone: "",
email: "",
name: '',
phone: '',
email: ''
},
rules: {
@@ -209,16 +132,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) {
@@ -226,18 +149,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) {
@@ -245,12 +168,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: [
@@ -258,60 +181,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;
},
@@ -324,10 +247,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),);
},
@@ -335,48 +258,46 @@ 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,
@@ -384,29 +305,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>
@@ -616,6 +537,7 @@ export default {
background-color: #ebeef7;
padding-top: 33px;
text-align: center;
transition: all 0.3s;
.title {
text-align: center;
font-size: 48px;


Loading…
取消
儲存