HolyKnightIX 2 роки тому
джерело
коміт
6a401f7b17
2 змінених файлів з 170 додано та 97 видалено
  1. +169
    -96
      src/components/views/generate.vue
  2. +1
    -1
      src/components/views/shadow.vue

+ 169
- 96
src/components/views/generate.vue Переглянути файл

@@ -1,36 +1,56 @@
<template> <template>
<div class="Box" id="top"> <div class="Box" id="top">
<div class="module_1" style="position: relative; background-color: #000; height: 800px">
<div
class="module_1"
style="position: relative; background-color: #000; height: 800px"
@click="goSetVedio(isPlayed)"
>
<video <video
style="position: absolute; right: 10%"
ref="video"
style="position: absolute; right: 250px"
ref="videoPlayer"
src="https://video.metavatar.cc/sv/5ee09a38-1883359e47a/5ee09a38-1883359e47a.mp4" src="https://video.metavatar.cc/sv/5ee09a38-1883359e47a/5ee09a38-1883359e47a.mp4"
max-width="800px" max-width="800px"
height="800px" height="800px"
autoplay autoplay
muted="muted"
loop="loop" />
muted
controls
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%" /> --> <!-- <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="titleBox">
<div class="title_item1" v-if="characters == 1">邃芒慧生</div> <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 class="desc" v-if="characters == 1">
<div>满足数字分身,虚拟创造,原画复现等场景需要,分钟级定稿IP形象</div>
<div>
满足数字分身,虚拟创造,原画复现等场景需要,分钟级定稿IP形象
</div>
<div>无中生有的专属虚拟IP,彻底消除IP版权后顾之忧</div> <div>无中生有的专属虚拟IP,彻底消除IP版权后顾之忧</div>
</div> </div>
<!-- 英文部分 --> <!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaGene</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 generative high fidelity and natural digital human automatically by
variety labels & prompt
</div>
<div class="desc" v-if="characters != 1"> <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
</div>
</div> </div>
<div class="title_btn" @click="showBox"> <div class="title_btn" @click="showBox">
{{ characters == 1 ? '立刻体验' : 'Try it now' }}
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div> </div>
</div> </div>
<div class="md1" id="md1"></div> <div class="md1" id="md1"></div>
@@ -38,53 +58,93 @@
<div class="module_2"> <div class="module_2">
<div class="title">Metavatar AI</div> <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>
<div class="module_3"> <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> <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>
<div class="module_4"> <div class="module_4">
<div class="imgBox"> <div class="imgBox">
<div class="textInsideBox"> <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 class="style">FULL AGE</div>
</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>
</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-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>
<el-form-item class="width" prop="phone"> <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>
<el-form-item class="width" prop="email"> <el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input> <el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <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> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <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 { export default {
data() { data() {
@@ -92,14 +152,14 @@ export default {
//零时存放 //零时存放
charactersMy: 1, charactersMy: 1,
// //
userName: '',
phone: '',
email: '',
userName: "",
phone: "",
email: "",
form: { form: {
name: '',
phone: '',
email: ''
name: "",
phone: "",
email: "",
}, },
rules: { rules: {
@@ -108,16 +168,16 @@ export default {
required: true, required: true,
min: 1, min: 1,
max: 10, max: 10,
message: '此项必填,内容最大10个字符!',
trigger: 'blur'
}
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
], ],
phone: [ phone: [
{ {
required: true, required: true,
trigger: 'change',
message: '请先输手机号',
trigger: 'blur'
trigger: "change",
message: "请先输手机号",
trigger: "blur",
}, },
{ {
validator(rule, value, callback, source, options) { validator(rule, value, callback, source, options) {
@@ -125,18 +185,18 @@ export default {
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/; let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) { if (value && !phone.test(value)) {
callback('抱歉,请输入正确的手机号');
callback("抱歉,请输入正确的手机号");
} }
callback(errors); callback(errors);
}
}
},
},
], ],
email: [ email: [
{ {
required: true, required: true,
trigger: 'change',
message: '请输入邮箱!',
trigger: 'blur'
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
}, },
{ {
validator(rule, value, callback, source, options) { validator(rule, value, callback, source, options) {
@@ -144,12 +204,12 @@ export default {
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/, // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) { if (value && !email.test(value)) {
callback('抱歉,请输入正确的邮箱');
callback("抱歉,请输入正确的邮箱");
} }
callback(errors); callback(errors);
}
}
]
},
},
],
}, },
rulesEnglish: { rulesEnglish: {
name: [ name: [
@@ -157,68 +217,77 @@ export default {
required: true, required: true,
min: 1, min: 1,
max: 10, max: 10,
message: 'This item is required !',
trigger: 'blur'
}
message: "This item is required !",
trigger: "blur",
},
], ],
phone: [ phone: [
{ {
required: true, 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) { validator(rule, value, callback, source, options) {
var errors = []; var errors = [];
let phone = /^1[35789]\d{9}$/; let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) { 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); callback(errors);
}
}
},
},
], ],
email: [ email: [
{ {
required: true, required: true,
trigger: 'change',
message: 'Please enter email!',
trigger: 'blur'
trigger: "change",
message: "Please enter email!",
trigger: "blur",
}, },
{ {
validator(rule, value, callback, source, options) { validator(rule, value, callback, source, options) {
var errors = []; var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) { if (value && !email.test(value)) {
callback('Sorry, please enter the correct email address');
callback("Sorry, please enter the correct email address");
} }
callback(errors); callback(errors);
}
}
]
},
},
],
}, },
// characters: 1, //1=》中文 2=》英文 // characters: 1, //1=》中文 2=》英文
timeFlag: 5, timeFlag: 5,
dialogVisible: false
dialogVisible: false,
}; };
}, },
methods: { methods: {
...mapActions(['setCharacters']),
...mapActions(["setCharacters"]),
change(value) { change(value) {
console.log(value); console.log(value);
this.setCharacters(value); this.setCharacters(value);
}, },
goSetVedio(flag) {
if (flag) {
this.$refs["videoII"].play();
} else {
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},
showBox() { showBox() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
goView(id) { 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),); // console.log(document.querySelector(id),);
}, },
@@ -226,46 +295,48 @@ export default {
this.$router.push(`/${path}`); this.$router.push(`/${path}`);
}, },
submit() { submit() {
this.$refs.form.validate(valid => {
this.$refs.form.validate((valid) => {
console.log(valid); console.log(valid);
if (valid) { if (valid) {
let params = { let params = {
mallName: this.form.email, //邮箱 mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名 applicant: this.form.name, //姓名
phone: this.form.phone //电话
phone: this.form.phone, //电话
}; };
this.$axios({ this.$axios({
method: 'post',
url: '/C/api/wxMallApply/add',
method: "post",
url: "/C/api/wxMallApply/add",
headers: { 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; this.dialogVisible = false;
}) })
.catch(err => {
.catch((err) => {
this.$message.error(err.message); this.$message.error(err.message);
}); });
} }
}); });
}
},
}, },
computed: { computed: {
...mapState({ ...mapState({
characters: state => state.publicObj.characters
})
characters: (state) => state.publicObj.characters,
}),
}, },
mounted() { mounted() {
// console.log(); // console.log();
// this.$refs["vidoe"].play(); // this.$refs["vidoe"].play();
new Swiper('.swiper-container', {
new Swiper(".swiper-container", {
slidesPerView: 3, slidesPerView: 3,
spaceBetween: 30, spaceBetween: 30,
centeredSlides: true, centeredSlides: true,
@@ -273,27 +344,29 @@ export default {
// 如果需要分页器 // 如果需要分页器
pagination: { pagination: {
el: '.swiper-pagination',
clickable: true // 分页器可以点击
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
}, },
// 如果需要前进后退按钮 // 如果需要前进后退按钮
navigation: { navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}, },
// 如果需要滚动条 // 如果需要滚动条
scrollbar: { scrollbar: {
el: '.swiper-scrollbar'
}
el: ".swiper-scrollbar",
},
}); });
}, },
created() { created() {
this.$nextTick(() => { this.$nextTick(() => {
this.goView('top');
this.goView("top");
this.$refs.videoPlayer.muted = false;
this.$refs.videoPlayer.play();
}); });
}
},
}; };
</script> </script>


+ 1
- 1
src/components/views/shadow.vue Переглянути файл

@@ -2,7 +2,7 @@
<div class="Box" id="top"> <div class="Box" id="top">
<div <div
class="module_1" class="module_1"
style="position: relative; background-color: #47aa5a; height: 800px"
style="position: relative; background-color: #797979; height: 800px"
> >
<video <video
ref="video" ref="video"


Завантаження…
Відмінити
Зберегти