|
|
@@ -0,0 +1,818 @@
|
|
|
+<template>
|
|
|
+ <!-- 新的主通机动画 -->
|
|
|
+ <view style="width: 100%; height: 100%">
|
|
|
+ <div class="pageback">
|
|
|
+ <!-- 动画展示 -->
|
|
|
+ <div style="z-index: 33; height: 100%">
|
|
|
+ <div class="ventilate" id="topPic">
|
|
|
+ <!-- 进风箭头 -->
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1'
|
|
|
+ ? door1 == 1
|
|
|
+ ? topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic1-10'
|
|
|
+ : reverseVal + 'arrowpic1'
|
|
|
+ : topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic1-3'
|
|
|
+ : ''
|
|
|
+ : nowfengji == '2'
|
|
|
+ ? door2 == 1
|
|
|
+ ? topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic1-11'
|
|
|
+ : reverseVal + 'arrowpic1-2'
|
|
|
+ : topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic1-4'
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ id="arrowpic1"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1'
|
|
|
+ ? door1 == 1
|
|
|
+ ? topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic2-10'
|
|
|
+ : reverseVal + 'arrowpic2'
|
|
|
+ : topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic2-3'
|
|
|
+ : ''
|
|
|
+ : nowfengji == '2'
|
|
|
+ ? door2 == 1
|
|
|
+ ? topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic2-11'
|
|
|
+ : reverseVal + 'arrowpic2-2'
|
|
|
+ : topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic2-4'
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ id="arrowpic2"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1'
|
|
|
+ ? door1 == 1
|
|
|
+ ? topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic3-10'
|
|
|
+ : reverseVal + 'arrowpic3'
|
|
|
+ : topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic3-3'
|
|
|
+ : ''
|
|
|
+ : nowfengji == '2'
|
|
|
+ ? door2 == 1
|
|
|
+ ? topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic3-11'
|
|
|
+ : reverseVal + 'arrowpic3-2'
|
|
|
+ : topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic3-4'
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ id="arrowpic3"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1'
|
|
|
+ ? door1 == 1
|
|
|
+ ? topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic4-10'
|
|
|
+ : reverseVal + 'arrowpic4'
|
|
|
+ : topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic4-3'
|
|
|
+ : ''
|
|
|
+ : nowfengji == '2'
|
|
|
+ ? door2 == 1
|
|
|
+ ? topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic4-11'
|
|
|
+ : reverseVal + 'arrowpic4-2'
|
|
|
+ : topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic4-4'
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ id="arrowpic4"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1'
|
|
|
+ ? door1 == 1
|
|
|
+ ? topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic5-10'
|
|
|
+ : reverseVal + 'arrowpic5'
|
|
|
+ : topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic5-3'
|
|
|
+ : ''
|
|
|
+ : nowfengji == '2'
|
|
|
+ ? door2 == 1
|
|
|
+ ? topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic5-11'
|
|
|
+ : reverseVal + 'arrowpic5-2'
|
|
|
+ : topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic5-4'
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ id="arrowpic5"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1'
|
|
|
+ ? door1 == 1
|
|
|
+ ? topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic6-10'
|
|
|
+ : reverseVal + 'arrowpic6'
|
|
|
+ : topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic6-3'
|
|
|
+ : ''
|
|
|
+ : nowfengji == '2'
|
|
|
+ ? door2 == 1
|
|
|
+ ? topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic6-11'
|
|
|
+ : reverseVal + 'arrowpic6-2'
|
|
|
+ : topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic6-4'
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ id="arrowpic6"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1'
|
|
|
+ ? door1 == 1
|
|
|
+ ? topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic7-10'
|
|
|
+ : reverseVal + 'arrowpic7'
|
|
|
+ : topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic7-3'
|
|
|
+ : ''
|
|
|
+ : nowfengji == '2'
|
|
|
+ ? door2 == 1
|
|
|
+ ? topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic7-11'
|
|
|
+ : reverseVal + 'arrowpic7-2'
|
|
|
+ : topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic7-4'
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ id="arrowpic7"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1'
|
|
|
+ ? door1 == 1
|
|
|
+ ? topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic8-10'
|
|
|
+ : reverseVal + 'arrowpic8'
|
|
|
+ : topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic8-3'
|
|
|
+ : ''
|
|
|
+ : nowfengji == '2'
|
|
|
+ ? door2 == 1
|
|
|
+ ? topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic8-11'
|
|
|
+ : reverseVal + 'arrowpic8-2'
|
|
|
+ : topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic8-4'
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ id="arrowpic8"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1'
|
|
|
+ ? door1 == 1
|
|
|
+ ? topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic9-10'
|
|
|
+ : reverseVal + 'arrowpic9'
|
|
|
+ : topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic9-3'
|
|
|
+ : ''
|
|
|
+ : nowfengji == '2'
|
|
|
+ ? door2 == 1
|
|
|
+ ? topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic9-11'
|
|
|
+ : reverseVal + 'arrowpic9-2'
|
|
|
+ : topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic9-4'
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ id="arrowpic9"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1'
|
|
|
+ ? door1 == 1
|
|
|
+ ? topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic10-10'
|
|
|
+ : reverseVal + 'arrowpic10'
|
|
|
+ : topdoor1 == 1
|
|
|
+ ? reverseVal + 'arrowpic10-3'
|
|
|
+ : ''
|
|
|
+ : nowfengji == '2'
|
|
|
+ ? door2 == 1
|
|
|
+ ? topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic10-11'
|
|
|
+ : reverseVal + 'arrowpic10-2'
|
|
|
+ : topdoor2 == 1
|
|
|
+ ? reverseVal + 'arrowpic10-4'
|
|
|
+ : ''
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ id="arrowpic10"
|
|
|
+ ></div>
|
|
|
+
|
|
|
+ <!-- 风扇动画展示 -->
|
|
|
+ <!-- 巷道门阀 -->
|
|
|
+
|
|
|
+ <div
|
|
|
+ id="topdoor1"
|
|
|
+ class="doordivb"
|
|
|
+ style="width: 1%; height: 40%; top: 3%; left: 71%"
|
|
|
+ >
|
|
|
+ <div id="topdoor" :class="[door1 == 1 ? 'door1' : 'door2']"></div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="bottomdoor1"
|
|
|
+ class="doordivb"
|
|
|
+ style="width: 1%; height: 46%; top: 54.3%; left: 72%"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id="bottomdoor"
|
|
|
+ :class="[door2 == 1 ? 'door1' : 'door2']"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 天窗 -->
|
|
|
+ <div
|
|
|
+ id="topwindow1"
|
|
|
+ class="topwindow"
|
|
|
+ style="width: 3%; height: 19%; top: 2%; left: 66.9%; z-index: 10"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id="topwindow"
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1' && topdoor1 == 1 ? 'topwindow1' : 'topwindow2',
|
|
|
+ ]"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="topwindow2"
|
|
|
+ class="topwindow"
|
|
|
+ style="width: 3%; height: 19%; top: 53%; left: 67%; z-index: 10"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id="topwindow"
|
|
|
+ :class="[
|
|
|
+ nowfengji == '2' && topdoor2 ? 'topwindow1' : 'topwindow2',
|
|
|
+ ]"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="box-left" style="width:5.5%;height:14%;top: 15%;left: 20%;"></div> -->
|
|
|
+ <div
|
|
|
+ class="box"
|
|
|
+ style="top: 12.2%; left: 30.4%"
|
|
|
+ v-if="groupType != 'lh' && groupType !== 'wlyk'"
|
|
|
+ >
|
|
|
+ <div id="box2" :class="reverseVal ? 'fz' : 'zz'">
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="box-right" style="width:6%;height:14%;top: 15%;left:32%;"> -->
|
|
|
+ <!-- 风机旁边阀门 -->
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="box-s"
|
|
|
+ style="top: 12.2%; left: 34.5%"
|
|
|
+ :style="
|
|
|
+ groupType != 'lh' && groupType !== 'wlyk'
|
|
|
+ ? 'top: 12.2%;left: 34.5%;'
|
|
|
+ : 'top: 12.2%;left: 32.5%;'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div id="box2-s" :class="reverseVal ? 'fz1' : 'zz1'">
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="box-left" style="width:5.5%;height:14%;top: 80%;left: 20%;"></div> -->
|
|
|
+ <div
|
|
|
+ class="box"
|
|
|
+ style="bottom: 11.7%; left: 27.8%"
|
|
|
+ v-if="groupType != 'lh' && groupType !== 'wlyk'"
|
|
|
+ >
|
|
|
+ <div id="box1" :class="reverseVal ? 'fz' : 'zz'">
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 蝶阀 -->
|
|
|
+ <div
|
|
|
+ id="topfundoor1"
|
|
|
+ class="fundoor"
|
|
|
+ style="width: 3%; height: 36%; left: 45.9%; z-index: 10; top: 6.6%"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id="topfundoor"
|
|
|
+ :class="[
|
|
|
+ nowfengji == '1' && fundoor1 == 1 ? 'fundoor1' : 'fundoor2',
|
|
|
+ ]"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="bottomfundoor1"
|
|
|
+ class="fundoor"
|
|
|
+ style="width: 3%; height: 36%; left: 44%; z-index: 10; top: 57%"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ id="bottomfundoor"
|
|
|
+ :class="[
|
|
|
+ nowfengji == '2' && fundoor2 == 1 ? 'fundoor1' : 'fundoor2',
|
|
|
+ ]"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <!-- 风机 -->
|
|
|
+ <!-- <div class="box-right" style="width:6%;height:14%;top: 80%;left:32.5%;"> -->
|
|
|
+ <div
|
|
|
+ class="box-s"
|
|
|
+ style="bottom: 11.7%; left: 32.4%"
|
|
|
+ :style="
|
|
|
+ groupType != 'lh' && groupType !== 'wlyk'
|
|
|
+ ? 'bottom: 11.7%;left:32.4%;'
|
|
|
+ : 'bottom: 11.7%;left:30.4%;'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div id="box1-s" :class="reverseVal ? 'fz1' : 'zz1'">
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 文字标识 -->
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ top: 20%;
|
|
|
+ left: 10%;
|
|
|
+ color: #ff0;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>1号电机</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ top: 20%;
|
|
|
+ left: 39%;
|
|
|
+ color: #ff0;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>2号电机</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ color: #ff0;
|
|
|
+ bottom: 57%;
|
|
|
+ left: 10%;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>1号电机</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ bottom: 57%;
|
|
|
+ left: 38%;
|
|
|
+ color: #ff0;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span>2号电机</span>
|
|
|
+ </div>
|
|
|
+ <div style="position: absolute; color: #fff; bottom: -3.7%; left: 28.4%">
|
|
|
+ <span v-if="topindex == 2">1#风机</span>
|
|
|
+ <span v-if="topindex == 1">2#风机</span>
|
|
|
+ </div>
|
|
|
+ <div style="position: absolute; color: #fff; bottom: 45.7%; left: 31.4%">
|
|
|
+ <span v-if="topindex == 2">2#风机</span>
|
|
|
+ <span v-if="topindex == 1">1#风机</span>
|
|
|
+ </div>
|
|
|
+ <!-- 风筒风速传感器 -->
|
|
|
+ <div class="imgF1"></div>
|
|
|
+ <div class="imgF2"></div>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ fengliangUp: "", // 风量上限
|
|
|
+ fengliangDown: "", // 风量下限
|
|
|
+ controTypeName: "变频器频率",
|
|
|
+ // 界面风机动画
|
|
|
+
|
|
|
+ // 控制类型 1 变频器频率 2 需风量
|
|
|
+ controlType: "1",
|
|
|
+ loading: "", // 数据加载
|
|
|
+ yMax1: 100,
|
|
|
+ yMax2: 10,
|
|
|
+ yMax3: 1000,
|
|
|
+ topindex: 1,
|
|
|
+ textColor: "#000",
|
|
|
+ option1: {},
|
|
|
+ nowfengji: "",
|
|
|
+ reverseVal: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: [
|
|
|
+ "door1",
|
|
|
+ "topdoor1",
|
|
|
+ "fundoor1",
|
|
|
+ "door2",
|
|
|
+ "topdoor2",
|
|
|
+ "fundoor2",
|
|
|
+ "groupType",
|
|
|
+ "fanMsStatus",
|
|
|
+ ],
|
|
|
+ created() {
|
|
|
+ // this.myInterval()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ fanMsStatus(val) {
|
|
|
+ if (val == false) {
|
|
|
+ this.reverseVal = "reverse-";
|
|
|
+ } else {
|
|
|
+ this.reverseVal = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 获取第一页实时数据
|
|
|
+ beforeMount: function (e) {
|
|
|
+ var than = this;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 顶部风机序号值
|
|
|
+ setTopIndex(val) {
|
|
|
+ this.topindex = val;
|
|
|
+ },
|
|
|
+ // 根据当前运行分机，设置动画
|
|
|
+ setQidongfengji(val) {
|
|
|
+ if (this.nowfengji != val) {
|
|
|
+ this.nowfengji = val;
|
|
|
+ this.setFengjiDonghua();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 风机动画
|
|
|
+ setFengjiDonghua() {
|
|
|
+ if (this.nowfengji == "2") {
|
|
|
+ if (configUrl.group != "lh") {
|
|
|
+ document.getElementById("box1").style.animationPlayState = "running";
|
|
|
+ document.getElementById("box1").style.WebkitAnimationPlayState =
|
|
|
+ "running";
|
|
|
+ document.getElementById("box2").style.animationPlayState = "paused";
|
|
|
+ document.getElementById("box2").style.WebkitAnimationPlayState =
|
|
|
+ "paused";
|
|
|
+ }
|
|
|
+ document.getElementById("box1-s").style.animationPlayState = "running";
|
|
|
+ document.getElementById("box1-s").style.WebkitAnimationPlayState =
|
|
|
+ "running";
|
|
|
+
|
|
|
+ document.getElementById("box2-s").style.animationPlayState = "paused";
|
|
|
+ document.getElementById("box2-s").style.WebkitAnimationPlayState =
|
|
|
+ "paused";
|
|
|
+ } else if (this.nowfengji == "1") {
|
|
|
+ if (configUrl.group != "lh") {
|
|
|
+ document.getElementById("box2").style.animationPlayState = "running";
|
|
|
+ document.getElementById("box2").style.WebkitAnimationPlayState =
|
|
|
+ "running";
|
|
|
+ document.getElementById("box1").style.animationPlayState = "paused";
|
|
|
+ document.getElementById("box1").style.WebkitAnimationPlayState =
|
|
|
+ "paused";
|
|
|
+ }
|
|
|
+ document.getElementById("box2-s").style.animationPlayState = "running";
|
|
|
+ document.getElementById("box2-s").style.WebkitAnimationPlayState =
|
|
|
+ "running";
|
|
|
+ document.getElementById("box1-s").style.animationPlayState = "paused";
|
|
|
+ document.getElementById("box1-s").style.WebkitAnimationPlayState =
|
|
|
+ "paused";
|
|
|
+ } else {
|
|
|
+ document.getElementById("box2").style.animationPlayState = "paused";
|
|
|
+ document.getElementById("box2").style.WebkitAnimationPlayState =
|
|
|
+ "paused";
|
|
|
+ document.getElementById("box2-s").style.animationPlayState = "paused";
|
|
|
+ document.getElementById("box2-s").style.WebkitAnimationPlayState =
|
|
|
+ "paused";
|
|
|
+ document.getElementById("box1").style.animationPlayState = "paused";
|
|
|
+ document.getElementById("box1").style.WebkitAnimationPlayState =
|
|
|
+ "paused";
|
|
|
+ document.getElementById("box1-s").style.animationPlayState = "paused";
|
|
|
+ document.getElementById("box1-s").style.WebkitAnimationPlayState =
|
|
|
+ "paused";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {},
|
|
|
+ destroyed() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+div.pageback {
|
|
|
+ padding-top: 10px;
|
|
|
+ margin-top: 12px;
|
|
|
+ width: 100vw;
|
|
|
+ height: calc(60% - 50px);
|
|
|
+ min-height: 350px;
|
|
|
+ background-image: url(/static/mainfan/page-back.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+div.ventilate {
|
|
|
+ margin-top: 12px;
|
|
|
+ width: calc(100vw - 20px);
|
|
|
+ height: calc(60% - 50px);
|
|
|
+ min-height: 330px;
|
|
|
+ background-image: url(/static/mainfan/main_ventilate_new.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ perspective: 800px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+@media screen and (max-width: 4096px) {
|
|
|
+ .box {
|
|
|
+ position: absolute;
|
|
|
+ transform: perspective(1000px) rotateY(-23deg);
|
|
|
+ width: 1%;
|
|
|
+ height: 20%;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ }
|
|
|
+ .box-s {
|
|
|
+ position: absolute;
|
|
|
+ transform: perspective(1000px) rotateY(-23deg);
|
|
|
+ width: 1%;
|
|
|
+ height: 20%;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media screen and (min-width: 4096px) {
|
|
|
+ .box {
|
|
|
+ position: absolute;
|
|
|
+ transform: perspective(1000px) rotateY(21deg);
|
|
|
+ width: 1%;
|
|
|
+ height: 20%;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ }
|
|
|
+ .box-s {
|
|
|
+ position: absolute;
|
|
|
+ transform: perspective(1000px) rotateY(21deg);
|
|
|
+ width: 1%;
|
|
|
+ height: 20%;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ }
|
|
|
+}
|
|
|
+.doordivb {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ /* background-image: url(/static/aminfandoor-new-1.png); */
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.door1 {
|
|
|
+ position: absolute;
|
|
|
+ transform: scaleX(0.1) scaleY(0.5);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: -2px;
|
|
|
+ left: 0px;
|
|
|
+ transition: all 2s ease;
|
|
|
+ transform-origin: 100% 100%;
|
|
|
+ background-image: url(/static/mainfan/fun-door-new-1.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.door2 {
|
|
|
+ position: absolute;
|
|
|
+ transform: scaleX(1) scaleY(1);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: -2px;
|
|
|
+ left: 0px;
|
|
|
+ transition: all 2s ease;
|
|
|
+ transform-origin: 100% 100%;
|
|
|
+ background-image: url(/static/mainfan/fun-door-new-1.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.fundoor {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url(/static/mainfan/fun-door-new-1.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.fundoor1 {
|
|
|
+ position: absolute;
|
|
|
+ transform: scaleX(0);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 1px;
|
|
|
+ left: 1px;
|
|
|
+ transition: all 2s ease;
|
|
|
+ background-image: url(/static/mainfan/fun-door-new-2.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.fundoor2 {
|
|
|
+ position: absolute;
|
|
|
+ transform: scaleX(1);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 1px;
|
|
|
+ left: 1px;
|
|
|
+ transition: all 2s ease;
|
|
|
+ background-image: url(/static/mainfan/fun-door-new-2.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.topwindow {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ /* background-image: url(../././assets/img/topwindow-1.png); */
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.topwindow1 {
|
|
|
+ position: absolute;
|
|
|
+ transform: scaleY(0.05);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ transition: all 2s ease;
|
|
|
+ transform-origin: 100% 0%;
|
|
|
+ background-image: url(/static/mainfan/topwindow-new-2.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.topwindow2 {
|
|
|
+ position: absolute;
|
|
|
+ transform: scaleY(1);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ transition: all 2s ease;
|
|
|
+ transform-origin: 100% 0%;
|
|
|
+ background-image: url(/static/mainfan/topwindow-new-2.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.box::before,
|
|
|
+.box-s::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: -20px;
|
|
|
+ left: 0;
|
|
|
+ width: 50%;
|
|
|
+ height: 10px;
|
|
|
+ background: #000;
|
|
|
+ filter: blur(10px);
|
|
|
+ opacity: 0.6;
|
|
|
+ transform: rotateX(90deg);
|
|
|
+}
|
|
|
+.box .zz {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ animation: animate 5s linear infinite;
|
|
|
+ animation-play-state: paused;
|
|
|
+ -webkit-animation-play-state: paused;
|
|
|
+}
|
|
|
+.box .fz {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ animation: animateFz 5s linear infinite;
|
|
|
+ animation-play-state: paused;
|
|
|
+ -webkit-animation-play-state: paused;
|
|
|
+}
|
|
|
+.box-s .zz1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ animation: animate2 5s linear infinite;
|
|
|
+ animation-play-state: paused;
|
|
|
+ -webkit-animation-play-state: paused;
|
|
|
+}
|
|
|
+.box-s .fz1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ animation: animateFz1 5s linear infinite;
|
|
|
+ animation-play-state: paused;
|
|
|
+ -webkit-animation-play-state: paused;
|
|
|
+}
|
|
|
+.box div span,
|
|
|
+.box-s div span {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(0deg, #f1f1f1, #999, #f1f1f1);
|
|
|
+ border-radius: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.box div span:nth-child(1),
|
|
|
+.box-s div span:nth-child(1) {
|
|
|
+ transform: rotateX(0deg);
|
|
|
+}
|
|
|
+.box div span:nth-child(2),
|
|
|
+.box-s div span:nth-child(2) {
|
|
|
+ transform: rotateX(45deg);
|
|
|
+}
|
|
|
+.box div span:nth-child(3),
|
|
|
+.box-s div span:nth-child(3) {
|
|
|
+ transform: rotateX(-45deg);
|
|
|
+}
|
|
|
+.box div span:nth-child(4),
|
|
|
+.box-s div span:nth-child(4) {
|
|
|
+ transform: rotateX(90deg);
|
|
|
+}
|
|
|
+div.box-right {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url(/static/mainfan/fengji-right2.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+div.box-left {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url(/static/mainfan/fengji-left.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+@keyframes animate {
|
|
|
+ 0% {
|
|
|
+ transform: perspective(1000px) rotateX(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: perspective(1000px) rotateX(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes animateFz {
|
|
|
+ 0% {
|
|
|
+ transform: perspective(1000px) rotateX(360deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: perspective(1000px) rotateX(0deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes animate2 {
|
|
|
+ 0% {
|
|
|
+ transform: perspective(1000px) rotateX(360deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: perspective(1000px) rotateX(0deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes animateFz1 {
|
|
|
+ 0% {
|
|
|
+ transform: perspective(1000px) rotateX(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: perspective(1000px) rotateX(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
