Browse Source

upload

ctt_ywq
HolyKnightIX 2 years ago
parent
commit
6a401f7b17
2 changed files with 170 additions and 97 deletions
  1. +169
    -96
      src/components/views/generate.vue
  2. +1
    -1
      src/components/views/shadow.vue

+ 169
- 96
src/components/views/generate.vue View File

@@ -1,36 +1,56 @@
<template>
<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
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"
max-width="800px"
height="800px"
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%" /> -->
<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 generative high fidelity and natural digital human automatically by
variety labels & prompt
</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
</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>
@@ -38,53 +58,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() {
@@ -92,14 +152,14 @@ export default {
//零时存放
charactersMy: 1,
//
userName: '',
phone: '',
email: '',
userName: "",
phone: "",
email: "",
form: {
name: '',
phone: '',
email: ''
name: "",
phone: "",
email: "",
},
rules: {
@@ -108,16 +168,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) {
@@ -125,18 +185,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) {
@@ -144,12 +204,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: [
@@ -157,68 +217,77 @@ 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);
this.setCharacters(value);
},
goSetVedio(flag) {
if (flag) {
this.$refs["videoII"].play();
} else {
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},
showBox() {
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),);
},
@@ -226,46 +295,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,
@@ -273,27 +344,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>


+ 1
- 1
src/components/views/shadow.vue View File

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


Loading…
Cancel
Save