|
|
@@ -0,0 +1,191 @@
|
|
|
+<template>
|
|
|
+ <div class="pureWaterSystem-index">
|
|
|
+ <div class="center-top-button-max-box">
|
|
|
+ <img class="position-img position-img-1" src="@/assets/ZDimages/img_bg_cdo@1x.png">
|
|
|
+ <img class="position-img position-img-2" src="@/assets/ZDimages/img_bg_zc@1x.png">
|
|
|
+ <img class="position-img position-img-3" src="@/assets/ZDimages/img_bg_zc@1x.png">
|
|
|
+ <img class="position-img position-img-4" src="@/assets/ZDimages/img_bg_zc@1x.png">
|
|
|
+ <img class="position-img position-img-5" src="@/assets/ZDimages/img_bg_zc@1x.png">
|
|
|
+ <img class="position-img position-img-6" src="@/assets/ZDimages/img_bg_zc@1x.png">
|
|
|
+ <img class="position-img position-img-7" src="@/assets/ZDimages/img_bg_xz@1x.png">
|
|
|
+ <img class="position-img position-img-8" src="@/assets/ZDimages/img_bg_cdo@1x.png">
|
|
|
+ <p class="null-p"></p>
|
|
|
+ <p class="button-p" @click="goPage(1)">安全总览</p>
|
|
|
+ <p class="button-p" @click="goPage(2)">资源设备</p>
|
|
|
+ <p class="button-p" @click="goPage(3)">三维模型</p>
|
|
|
+ <p class="button-p" @click="goPage(6)">视频监控</p>
|
|
|
+ <p class="button-p" @click="goPage(5)">应急管控</p>
|
|
|
+ <p class="button-check-p">纯水系统</p>
|
|
|
+ <p class="null-p"></p>
|
|
|
+ </div>
|
|
|
+ <div class="left-max-big-box">
|
|
|
+ <title-page-img-components :propsData="propsData1"></title-page-img-components>
|
|
|
+ <div class="max-big-box">
|
|
|
+ <div class="big-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="big-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-max-big-box">
|
|
|
+ <title-page-img-components :propsData="propsData2"></title-page-img-components>
|
|
|
+ <div class="max-big-box">
|
|
|
+ <div class="big-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="big-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
|
|
|
+ export default {
|
|
|
+ name: 'index',
|
|
|
+ components: {
|
|
|
+ titlePageImgComponents
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ //组件传参
|
|
|
+ propsData1:{
|
|
|
+ title:'理科楼 - 纯水设备数据监测',
|
|
|
+ },
|
|
|
+ propsData2:{
|
|
|
+ title:'食品楼 - 纯水设备数据监测',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //页面切换
|
|
|
+ goPage(type){
|
|
|
+ this.$parent.pageCheck(type);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+ .pureWaterSystem-index{
|
|
|
+ height:1409px;
|
|
|
+ padding:0 60px;
|
|
|
+ display: flex;
|
|
|
+ .center-top-button-max-box{
|
|
|
+ width:911px;
|
|
|
+ position: absolute;
|
|
|
+ left:50%;
|
|
|
+ margin:0 -445px;
|
|
|
+ height:60px;
|
|
|
+ display: flex;
|
|
|
+ .position-img-1{
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:-74px;
|
|
|
+ }
|
|
|
+ .position-img-2{
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:9px;
|
|
|
+ }
|
|
|
+ .position-img-3{
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:154px;
|
|
|
+ }
|
|
|
+ .position-img-4{
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:300px;
|
|
|
+ }
|
|
|
+ .position-img-5{
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:446px;
|
|
|
+ }
|
|
|
+ .position-img-6{
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:592px;
|
|
|
+ }
|
|
|
+ .position-img-7{
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:740px;
|
|
|
+ }
|
|
|
+ .position-img-8{
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:888px;
|
|
|
+ }
|
|
|
+ .null-p{
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ .button-p{
|
|
|
+ z-index:5;
|
|
|
+ cursor: pointer;
|
|
|
+ font-family: Source Han Sans, Source Han Sans;
|
|
|
+ width:145px;
|
|
|
+ font-size:24px;
|
|
|
+ font-weight:700;
|
|
|
+ line-height:60px;
|
|
|
+ text-align: center;
|
|
|
+ background: -webkit-linear-gradient(0deg, #FFFFFF, #FFFFFF); /* Chrome, Safari */
|
|
|
+ background: linear-gradient(0deg, #FFFFFF, #FFFFFF); /* 标准语法 */
|
|
|
+ -webkit-background-clip: text; /* Chrome, Safari */
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent; /* Chrome, Safari */
|
|
|
+ color: transparent; /* 其他浏览器 */
|
|
|
+ }
|
|
|
+ .button-check-p{
|
|
|
+ z-index:5;
|
|
|
+ cursor: pointer;
|
|
|
+ font-family: Source Han Sans, Source Han Sans;
|
|
|
+ width:145px;
|
|
|
+ font-weight:700;
|
|
|
+ font-size:24px;
|
|
|
+ line-height:24px;
|
|
|
+ height:24px;
|
|
|
+ margin-top:18px;
|
|
|
+ text-align: center;
|
|
|
+ background: -webkit-linear-gradient(0deg, #34e4ff, #FFFFFF); /* Chrome, Safari */
|
|
|
+ background: linear-gradient(0deg, #34e4ff, #FFFFFF); /* 标准语法 */
|
|
|
+ -webkit-background-clip: text; /* Chrome, Safari */
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent; /* Chrome, Safari */
|
|
|
+ color: transparent; /* 其他浏览器 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left-max-big-box{
|
|
|
+ width:1280px;
|
|
|
+ margin-top:90px;
|
|
|
+ height:1235px;
|
|
|
+ }
|
|
|
+ .right-max-big-box{
|
|
|
+ width:1280px;
|
|
|
+ margin-top:90px;
|
|
|
+ margin-left:37px;
|
|
|
+ height:1235px;
|
|
|
+ }
|
|
|
+ .max-big-box{
|
|
|
+ width:1280px;
|
|
|
+ height:1172px;
|
|
|
+ background-color: red;
|
|
|
+ .big-box{
|
|
|
+ height:570px;
|
|
|
+ background-color: #2f54eb;
|
|
|
+ }
|
|
|
+ .big-box:nth-child(2){
|
|
|
+ margin-top:32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|