| @@ -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({ | ||||