|
|
|
@@ -0,0 +1,504 @@ |
|
|
|
<template> |
|
|
|
<div class="Box" id="top"> |
|
|
|
<div |
|
|
|
class="module_1" |
|
|
|
style="position: relative; background-color: #000; height: 800px" |
|
|
|
@click="goSetVedio(isPlayed)" |
|
|
|
> |
|
|
|
<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 |
|
|
|
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"> |
|
|
|
We breathe life into generative AI |
|
|
|
</div> |
|
|
|
<!-- 英文部分 --> |
|
|
|
<div class="title_item1" v-if="characters != 1"> |
|
|
|
We breathe life into generative AI |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="title_btn" @click="startTalking"> |
|
|
|
{{ characters == 1 ? "开始对话" : "Start to talk" }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import "swiper/dist/js/swiper"; |
|
|
|
import "swiper/dist/css/swiper.css"; |
|
|
|
import Swiper from "swiper"; |
|
|
|
import { mapState, mapActions } from "vuex"; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
//零时存放 |
|
|
|
charactersMy: 1, |
|
|
|
// |
|
|
|
userName: "", |
|
|
|
phone: "", |
|
|
|
email: "", |
|
|
|
|
|
|
|
form: { |
|
|
|
name: "", |
|
|
|
phone: "", |
|
|
|
email: "", |
|
|
|
}, |
|
|
|
|
|
|
|
rules: { |
|
|
|
name: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
min: 1, |
|
|
|
max: 10, |
|
|
|
message: "此项必填,内容最大10个字符!", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
phone: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
trigger: "change", |
|
|
|
message: "请先输手机号", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
{ |
|
|
|
validator(rule, value, callback, source, options) { |
|
|
|
var errors = []; |
|
|
|
// 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(errors); |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
email: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
trigger: "change", |
|
|
|
message: "请输入邮箱!", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
{ |
|
|
|
validator(rule, value, callback, source, options) { |
|
|
|
var errors = []; |
|
|
|
// 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(errors); |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
rulesEnglish: { |
|
|
|
name: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
min: 1, |
|
|
|
max: 10, |
|
|
|
message: "This item is required !", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
phone: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
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(errors); |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
email: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
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(errors); |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
// characters: 1, //1=》中文 2=》英文 |
|
|
|
timeFlag: 5, |
|
|
|
dialogVisible: false, |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
...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"。 |
|
|
|
}); |
|
|
|
// console.log(document.querySelector(id),); |
|
|
|
}, |
|
|
|
goPages(path) { |
|
|
|
this.$router.push(`/${path}`); |
|
|
|
}, |
|
|
|
|
|
|
|
startTalking() { |
|
|
|
this.$router.push("/realTimeC"); |
|
|
|
}, |
|
|
|
|
|
|
|
submit() { |
|
|
|
this.$refs.form.validate((valid) => { |
|
|
|
console.log(valid); |
|
|
|
if (valid) { |
|
|
|
let params = { |
|
|
|
mallName: this.form.email, //邮箱 |
|
|
|
applicant: this.form.name, //姓名 |
|
|
|
phone: this.form.phone, //电话 |
|
|
|
}; |
|
|
|
this.$axios({ |
|
|
|
method: "post", |
|
|
|
url: "/C/api/wxMallApply/add", |
|
|
|
headers: { |
|
|
|
"Content-Type": "application/json;charset=UTF-8", |
|
|
|
}, |
|
|
|
data: params, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
this.form.email = ""; |
|
|
|
this.form.name = ""; |
|
|
|
this.form.phone = ""; |
|
|
|
this.$message.success( |
|
|
|
this.characters == 1 ? "提交成功" : "submit successfully" |
|
|
|
); |
|
|
|
this.dialogVisible = false; |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
this.$message.error(err.message); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState({ |
|
|
|
characters: (state) => state.publicObj.characters, |
|
|
|
}), |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
// console.log(); |
|
|
|
// this.$refs["vidoe"].play(); |
|
|
|
new Swiper(".swiper-container", { |
|
|
|
slidesPerView: 3, |
|
|
|
spaceBetween: 30, |
|
|
|
centeredSlides: true, |
|
|
|
loop: true, |
|
|
|
|
|
|
|
// 如果需要分页器 |
|
|
|
pagination: { |
|
|
|
el: ".swiper-pagination", |
|
|
|
clickable: true, // 分页器可以点击 |
|
|
|
}, |
|
|
|
|
|
|
|
// 如果需要前进后退按钮 |
|
|
|
navigation: { |
|
|
|
nextEl: ".swiper-button-next", |
|
|
|
prevEl: ".swiper-button-prev", |
|
|
|
}, |
|
|
|
|
|
|
|
// 如果需要滚动条 |
|
|
|
scrollbar: { |
|
|
|
el: ".swiper-scrollbar", |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.goView("top"); |
|
|
|
this.$refs.videoPlayer.muted = false; |
|
|
|
this.$refs.videoPlayer.play(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.Box { |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.topBox { |
|
|
|
width: 90%; |
|
|
|
overflow: hidden; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
z-index: 1000; |
|
|
|
// background-color: rgba(255, 255, 255, 0.1); |
|
|
|
} |
|
|
|
.logoBox { |
|
|
|
margin-top: 35px; |
|
|
|
margin-left: 35px; |
|
|
|
margin-bottom: 35px; |
|
|
|
float: left; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.logo { |
|
|
|
float: left; |
|
|
|
// width: 60px; |
|
|
|
// height: 30px; |
|
|
|
} |
|
|
|
.logoTitle { |
|
|
|
float: left; |
|
|
|
line-height: 30px; |
|
|
|
margin-left: 10px; |
|
|
|
font-size: 22px; |
|
|
|
} |
|
|
|
.categoryBox { |
|
|
|
height: 30px; |
|
|
|
width: 600px; |
|
|
|
float: left; |
|
|
|
margin-top: 20px; |
|
|
|
margin-left: 16%; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.categoryitem { |
|
|
|
width: 110px; |
|
|
|
line-height: 30px; |
|
|
|
color: #7d7d7d; |
|
|
|
font-size: 15px; |
|
|
|
// background-color: #16e9d6 |
|
|
|
} |
|
|
|
.cutBox { |
|
|
|
float: right; |
|
|
|
margin-top: 35px; |
|
|
|
margin-right: 50px; |
|
|
|
overflow: hidden; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.cutImg { |
|
|
|
width: 30px; |
|
|
|
height: 20px; |
|
|
|
float: left; |
|
|
|
margin-top: 10px; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
.en { |
|
|
|
float: left; |
|
|
|
font-size: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.module_1 { |
|
|
|
width: 100%; |
|
|
|
// height: 1080px; |
|
|
|
// background-color: aquamarine; |
|
|
|
// background-image: url("../../assets/img/bg.png"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
overflow: hidden; |
|
|
|
position: relative; |
|
|
|
margin-top: 80px; |
|
|
|
background-color: #f1f4f7; |
|
|
|
.titleBox { |
|
|
|
width: 36%; |
|
|
|
position: absolute; |
|
|
|
top: 240px; |
|
|
|
left: 194px; |
|
|
|
overflow: hidden; |
|
|
|
color: #ffffff; |
|
|
|
.title_item1 { |
|
|
|
margin-bottom: 14px; |
|
|
|
font-size: 60px; |
|
|
|
} |
|
|
|
.title_item1_y { |
|
|
|
// margin-bottom: 14px; |
|
|
|
font-size: 36px; |
|
|
|
} |
|
|
|
.title_item2 { |
|
|
|
margin-bottom: 20px; |
|
|
|
font-size: 42px; |
|
|
|
} |
|
|
|
.title_item3 { |
|
|
|
font-size: 16px; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
.title_btn { |
|
|
|
margin-top: 60px; |
|
|
|
height: 60px; |
|
|
|
width: 220px; |
|
|
|
text-align: center; |
|
|
|
line-height: 60px; |
|
|
|
color: #ffffff; |
|
|
|
border-radius: 40px; |
|
|
|
border: #ffffff solid 3px; |
|
|
|
font-size: 18px; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.3s; |
|
|
|
&:hover { |
|
|
|
color: #16e9d6; |
|
|
|
border: #16e9d6 solid 3px; |
|
|
|
} |
|
|
|
} |
|
|
|
.desc { |
|
|
|
margin-top: 29px; |
|
|
|
font-size: 16px; |
|
|
|
line-height: 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.module_2 { |
|
|
|
height: 930px; |
|
|
|
// height: 1080px; |
|
|
|
background-color: #fff; |
|
|
|
padding-top: 53px; |
|
|
|
// padding-top: 133px; |
|
|
|
text-align: center; |
|
|
|
.title { |
|
|
|
text-align: center; |
|
|
|
font-size: 48px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #232324; |
|
|
|
line-height: 62px; |
|
|
|
margin-bottom: 44px; |
|
|
|
} |
|
|
|
img { |
|
|
|
width: 1293px; |
|
|
|
height: 798px; |
|
|
|
opacity: 0.85; |
|
|
|
transition: all 0.3s; |
|
|
|
&:hover { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.module_3 { |
|
|
|
height: 850px; |
|
|
|
background-color: #ebeef7; |
|
|
|
padding-top: 53px; |
|
|
|
text-align: center; |
|
|
|
.title { |
|
|
|
text-align: center; |
|
|
|
font-size: 36px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #4d4d4d; |
|
|
|
line-height: 36px; |
|
|
|
margin-bottom: 82px; |
|
|
|
} |
|
|
|
.style { |
|
|
|
text-align: center; |
|
|
|
font-size: 24px; |
|
|
|
letter-spacing: 20px; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
font-weight: 400; |
|
|
|
color: #4d4d4d; |
|
|
|
line-height: 36px; |
|
|
|
margin-bottom: 99px; |
|
|
|
} |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 527px; |
|
|
|
opacity: 0.85; |
|
|
|
transition: all 0.3s; |
|
|
|
&:hover { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.module_4 { |
|
|
|
height: 850px; |
|
|
|
background-color: #fff; |
|
|
|
padding-top: 26px; |
|
|
|
padding-left: 116px; |
|
|
|
text-align: center; |
|
|
|
.imgBox { |
|
|
|
position: relative; |
|
|
|
width: 1669px; |
|
|
|
height: 782px; |
|
|
|
.textInsideBox { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
top: 40px; |
|
|
|
transform: translateX(-50%); |
|
|
|
// margin-left: 570px; |
|
|
|
z-index: 99; |
|
|
|
.title { |
|
|
|
font-size: 36px; |
|
|
|
font-family: Microsoft YaHei; |
|
|
|
font-weight: 400; |
|
|
|
color: #4d4d4d; |
|
|
|
line-height: 36px; |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 94px; |
|
|
|
} |
|
|
|
.style { |
|
|
|
font-size: 24px; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
font-weight: 400; |
|
|
|
letter-spacing: 20px; |
|
|
|
color: #4d4d4d; |
|
|
|
line-height: 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
opacity: 0.85; |
|
|
|
transition: all 0.3s; |
|
|
|
&:hover { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |