@@ -32,6 +32,9 @@ | |||
<el-dropdown-item command="MetaTuring">{{ | |||
characters == 1 ? "邃芒慧侃" : "MetaTuring" | |||
}}</el-dropdown-item> | |||
<el-dropdown-item command="realTime">{{ | |||
characters == 1 ? "实时对话" : "实时对话" | |||
}}</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</el-dropdown> | |||
</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', | |||
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({ | |||