@@ -32,6 +32,9 @@ | |||||
<el-dropdown-item command="MetaTuring">{{ | <el-dropdown-item command="MetaTuring">{{ | ||||
characters == 1 ? "邃芒慧侃" : "MetaTuring" | characters == 1 ? "邃芒慧侃" : "MetaTuring" | ||||
}}</el-dropdown-item> | }}</el-dropdown-item> | ||||
<el-dropdown-item command="realTime">{{ | |||||
characters == 1 ? "实时对话" : "实时对话" | |||||
}}</el-dropdown-item> | |||||
</el-dropdown-menu> | </el-dropdown-menu> | ||||
</el-dropdown> | </el-dropdown> | ||||
</div> | </div> | ||||
@@ -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> |
@@ -0,0 +1,463 @@ | |||||
<template> | |||||
<div class="Box" id="top"> | |||||
<div class="module_1" style="background-color: #fafffc"> | |||||
<img style="width: 55%" src="../../assets/img/demo.png" alt="" /> | |||||
<div class="itemBox left"> | |||||
<img src="../../assets/icon/voice.png" alt="" /> | |||||
</div> | |||||
<div class="itemBox right"> | |||||
<img src="../../assets/icon/input.png" alt="" /> | |||||
</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(""); | |||||
}, | |||||
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 { | |||||
position: relative; | |||||
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; | |||||
text-align: center; | |||||
.itemBox { | |||||
position: absolute; | |||||
bottom: 50px; | |||||
width: 50px; | |||||
height: 50px; | |||||
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); | |||||
border-radius: 50%; | |||||
text-align: center; | |||||
padding: 20px; | |||||
transition: all 0.3s; | |||||
cursor: pointer; | |||||
&.left { | |||||
left: 250px; | |||||
} | |||||
&.right { | |||||
right: 250px; | |||||
} | |||||
img { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
&:hover { | |||||
opacity: 0.8; | |||||
} | |||||
} | |||||
} | |||||
.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> |
@@ -50,6 +50,16 @@ const routes = [ | |||||
name: 'shadow', | name: 'shadow', | ||||
component: () => import("../components/views/shadow"), | component: () => import("../components/views/shadow"), | ||||
}, | }, | ||||
{ | |||||
path: '/realTime', | |||||
name: 'realTime', | |||||
component: () => import("../components/views/realTime"), | |||||
}, | |||||
{ | |||||
path: '/realTimeC', | |||||
name: 'realTimeC', | |||||
component: () => import("../components/views/realTimeC"), | |||||
}, | |||||
] | ] | ||||
const router = new VueRouter({ | const router = new VueRouter({ | ||||