设备监测部分样式优化

common/service/config.service.js

@@ -2,7 +2,7 @@ let BASE_URL = "";
 if (process.env.NODE_ENV == "development") {
   BASE_URL = "http://182.92.126.35:9999"; // 开发环境
 } else {
-  //如果是神东项目  ip地址配置在 login.vue 和 ipConfig.vue中进行配置
+  //如果是神东项目  ip地址配置在 login.vue 和 ipConfig.vue中进行配置  此处的BASE_URL设置为空或注释掉
   //如果是其他项目  ip地址在本文件中配置 BASE_URL 例如 BASE_URL = "http://182.92.126.35:9999";
   // BASE_URL = "http://10.35.116.82:9999";//棋盘井东区
   // BASE_URL = "http://192.168.126.12:9999";//王洼二矿

pages/history/history.vue

@@ -21,24 +21,21 @@
         <div class="flcard">
           <div class="btns" style="margin-top: 10px">
             <u-button
-              type="primary"
+              type="normal"
+              class="u-button"
               :text="deviceName ? deviceName : '选择设备'"
               @click="deviceShow = true"
             ></u-button>
-            <!-- <u-button
-              v-show="TabCur == 'fanmain' || TabCur == 'fanlocal'"
-              type="primary"
-              :text="labelName ? labelName : '子设备'"
-              @click="deviceShow1 = true"
-            ></u-button> -->
             <u-button
-              type="primary"
+              type="normal"
+              class="u-button"
               :text="lable ? lable : '间隔时间'"
               @click="show = true"
             ></u-button>
           </div>
           <div class="btns" style="margin-top: 10px">
             <uni-datetime-picker
+              class="u-button"
               :show="dataShow"
               mode="datetime"
               @cancel="dataShow = false"
@@ -46,6 +43,7 @@
               v-model="StartTime"
             ></uni-datetime-picker>
             <uni-datetime-picker
+              class="u-button"
               :show="dataShow1"
               mode="datetime"
               @cancel="dataShow1 = false"
@@ -114,7 +112,7 @@
                       alt=""
                       class="icon-style"
                     />
-                    <span style="float: right; margin-right: 5px">断开</span>
+                    <span style="float: right">断开</span>
                   </div>
                   <div v-else class="success-tag">
                     <image
@@ -122,7 +120,7 @@
                       alt=""
                       class="icon-style"
                     />
-                    <span style="float: right; margin-right: 5px">连接</span>
+                    <span style="float: right">连接</span>
                   </div>
                 </u-col>
                 <u-col span="3"> </u-col>
@@ -619,6 +617,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.u-button {
+  border-radius: 5px;
+  border: 1px solid #2299fe;
+  font-weight: bold;
+}
 .time-bg {
   background-color: #cce6fb;
   border-radius: 5px;
@@ -687,17 +690,19 @@ export default {
   margin: 1%;
   float: left;
   height: 75px;
-  background: linear-gradient(
-      to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08)
-    ),
-    url("/static/maxbg.png");
-  background-size: 100% 100%;
-  background-position: center;
+  background: url("/static/dataBg.png");
+  background-size: 40% 100%;
+  background-position: right;
   background-repeat: no-repeat;
 }
+.datacard .window {
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
+}
 .error-tag {
   border-radius: 10%;
   display: inline-block;

pages/home/detail/autodoor/autodoor.vue

@@ -70,7 +70,7 @@
             @click="showPasswordDialog('rearSetValue')"
           ></u-button>
         </div> -->
-        <div class="flcard" v-if="this.TabCur == 'gate'">
+        <div class="flcard deviceback" v-if="this.TabCur == 'gate'">
           <doorAnimate
             :gatestate1="frontGateStatus"
             :gatestate2="midGateStatus"
@@ -80,7 +80,7 @@
           >
           </doorAnimate>
         </div>
-        <div class="flcard" v-if="this.TabCur == 'windrect'">
+        <div class="flcard deviceback" v-if="this.TabCur == 'windrect'">
           <windrectAnimate
             :state="state"
             :title="title"
@@ -89,7 +89,7 @@
           >
           </windrectAnimate>
         </div>
-        <div class="flcard" v-if="this.TabCur == 'fanlocal'">
+        <div class="flcard deviceback" v-if="this.TabCur == 'fanlocal'">
           <fanlocalAnimate
             :fan1State="fan1State"
             :fan2State="fan2State"
@@ -98,7 +98,7 @@
           >
           </fanlocalAnimate>
         </div>
-        <div class="flcard" v-if="this.TabCur == 'fanmain'">
+        <div class="flcard deviceback" v-if="this.TabCur == 'fanmain'">
           <fanmainAnimate
             ref="fanpage"
             style="width: 100%"
@@ -111,7 +111,7 @@
             :nowfengji="qidongfengji"
           ></fanmainAnimate>
         </div>
-        <div class="flcard" v-if="this.TabCur == 'window'">
+        <div class="flcard deviceback" v-if="this.TabCur == 'window'">
           <windowAnimate
             :windowAngle="windowAngle"
             :windowAngle1="windowAngle1"
@@ -120,9 +120,13 @@
           ></windowAnimate>
         </div>
         <div v-if="this.cameraList.length > 0">
-          <div class="flcard" v-for="(item, index) in cameraList" :key="index">
+          <div
+            class="flcard deviceback"
+            v-for="(item, index) in cameraList"
+            :key="index"
+          >
             <video
-              style="margin-left: 20px"
+              style="margin-left: 50px"
               id="myVideo"
               controls
               show-loading
@@ -139,11 +143,11 @@
             class="flex-container"
             v-if="TabCur != 'fanlocal' && TabCur != 'fanmain'"
           >
-            <div
-              class="itemback"
+            <view
+              class="datacard"
               v-for="(item, index) in deviceShowList"
               :key="index"
-              v-if="
+              v-show="
                 item.appShow == 1 &&
                 item.monitorcode != 'strinstallpos' &&
                 item.monitorcode != 'netStatus' &&
@@ -152,89 +156,85 @@
                 item.monitorcode != ''
               "
             >
-              <view class="datacard">
+              <view
+                class="TabCurCSS"
+                style="
+                  padding-top: 10rpx;
+                  padding-bottom: 10rpx;
+                  display: flex;
+                  flex-direction: column;
+                  height: 100%;
+                "
+              >
                 <view
+                  v-if="item.datatype == 1 && item.monitorcode == 'doorUse'"
+                  class="demo-layout bg-purple-light"
                   style="
-                    padding-top: 10rpx;
-                    padding-bottom: 10rpx;
-                    display: flex;
-                    flex-direction: column;
-                    height: 100%;
+                    color: #3787fe;
+                    font-size: 30rpx;
+                    font-weight: bold;
+                    margin-left: 20rpx;
+                    text-align: left;
                   "
                 >
-                  <view
-                    v-if="item.datatype == 1 && item.monitorcode == 'doorUse'"
-                    class="demo-layout bg-purple-light"
-                    style="
-                      color: #3787fe;
-                      font-size: 30rpx;
-                      font-weight: bold;
-                      margin-top: 20rpx;
-                      margin-left: 20rpx;
-                      text-align: left;
-                    "
-                  >
-                    {{
-                      tableData[item.monitorcode] == "2"
-                        ? "行人"
-                        : tableData[item.monitorcode] == "1"
-                        ? "行车"
-                        : "-"
-                    }}
-                  </view>
-                  <view
-                    v-else-if="item.datatype == 1"
-                    class="demo-layout bg-purple-light"
-                    style="
-                      color: #3787fe;
-                      font-size: 30rpx;
-                      font-weight: bold;
-                      margin-top: 20rpx;
-                      margin-left: 20rpx;
-                      text-align: left;
-                    "
-                  >
-                    {{
-                      tableData[item.monitorcode] != undefined &&
-                      tableData[item.monitorcode] != null
-                        ? tableData[item.monitorcode]
-                        : "-"
-                    }}
-                  </view>
-                  <view
-                    v-else-if="item.datatype == 2"
-                    class="demo-layout bg-purple-light"
-                    style="
-                      color: #3787fe;
-                      font-size: 30rpx;
-                      font-weight: bold;
-                      margin-top: 20rpx;
-                      margin-left: 20rpx;
-                      text-align: left;
-                    "
-                  >
-                    {{
-                      tableData[item.monitorcode] != undefined &&
-                      tableData[item.monitorcode] != null
-                        ? tableData[item.monitorcode]
-                        : "-"
-                    }}
-                  </view>
-                  <view
-                    class="demo-layout bg-purple-light"
-                    style="
-                      margin-top: 20rpx;
-                      color: #677799;
-                      margin-top: 20rpx;
-                      margin-left: 20rpx;
-                      text-align: left;
-                    "
-                  >
-                    {{ item.des }}
-                  </view>
+                  {{
+                    tableData[item.monitorcode] == "2"
+                      ? "行人"
+                      : tableData[item.monitorcode] == "1"
+                      ? "行车"
+                      : "-"
+                  }}
+                </view>
+                <view
+                  v-else-if="item.datatype == 1"
+                  class="demo-layout bg-purple-light"
+                  style="
+                    color: #3787fe;
+                    font-size: 30rpx;
+                    font-weight: bold;
+                    margin-left: 20rpx;
+                    text-align: left;
+                  "
+                >
+                  {{
+                    tableData[item.monitorcode] != undefined &&
+                    tableData[item.monitorcode] != null
+                      ? tableData[item.monitorcode]
+                      : "-"
+                  }}
+                </view>
+                <view
+                  v-else-if="item.datatype == 2"
+                  class="demo-layout bg-purple-light"
+                  style="
+                    color: #3787fe;
+                    font-size: 30rpx;
+                    font-weight: bold;
+                    margin-left: 20rpx;
+                    text-align: left;
+                  "
+                >
+                  {{
+                    tableData[item.monitorcode] != undefined &&
+                    tableData[item.monitorcode] != null
+                      ? tableData[item.monitorcode]
+                      : "-"
+                  }}
+                </view>
+                <view
+                  class="demo-layout bg-purple-light"
+                  style="
+                    margin-top: 20rpx;
+                    color: #677799;
+                    margin-left: 20rpx;
+                    text-align: left;
+                  "
+                >
+                  {{ item.des }}
                 </view>
               </view>
-            </div>
+              <!-- <div class="right-content"></div> -->
+            </view>
           </div>
           <div class="flex-container" v-else-if="TabCur == 'fanmain'">
             <div class="monitor-content">
@@ -258,7 +258,7 @@
                     </view>
                   </div>
                   <div class="datacard" v-if="item.monitorcode !== 'readTime'">
-                    <div class="left-content">
+                    <div class="TabCurCSS">
                       <view
                         v-if="
                           item.monitorcode == 'netStatus' && item.datatype == 1
@@ -348,7 +348,7 @@
                     </view>
                   </div>
                   <div class="datacard" v-if="item.monitorcode !== 'readTime'">
-                    <div class="left-content">
+                    <div class="TabCurCSS">
                       <view
                         v-if="
                           item.monitorcode == 'netStatus' && item.datatype == 1
@@ -442,7 +442,7 @@
                     </view>
                   </div>
                   <div class="datacard" v-if="item.monitorcode !== 'readTime'">
-                    <div class="left-content">
+                    <div class="TabCurCSS">
                       <view
                         v-if="
                           item.monitorcode == 'netStatus' && item.datatype == 1
@@ -532,7 +532,7 @@
                     </view>
                   </div>
                   <div class="datacard" v-if="item.monitorcode !== 'readTime'">
-                    <div class="left-content">
+                    <div class="TabCurCSS">
                       <view
                         v-if="
                           item.monitorcode == 'netStatus' && item.datatype == 1
@@ -1012,8 +1012,16 @@ export default {
 }
 .flcard {
   padding: 20rpx;
-  background-color: #eef8fe;
-  margin-bottom: 5rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+.deviceback {
+  background: linear-gradient(
+    to right,
+    rgba(75, 135, 254, 0.08),
+    rgba(24, 184, 255, 0.08),
+    rgba(80, 161, 237, 0.08)
+  );
 }
 .additional-div {
   grid-column: span 2; /* 让附加内容跨越三列 */
@@ -1037,10 +1045,6 @@ export default {
   flex-direction: row;
   flex-wrap: wrap;
 }
-.itemback {
-  flex: 0 0 calc(33.33% - 10px); /* 使用calc函数计算每个项目的宽度，减去间距 */
-  margin: 5px; /* 间距设置为5px */
-}
 .datacardtime {
   display: flex;
   width: 100%;
@@ -1065,17 +1069,20 @@ export default {
   float: left;
   height: 75px;
   text-align: center;
-  background: linear-gradient(
-      to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08)
-    ),
-    url("/static/maxbg.png");
-  background-size: 100% 100%;
-  background-position: center;
+  background-image: url("/static/dataBg.png");
+  background-size: 40% 100%;
+  background-position: right;
   background-repeat: no-repeat;
 }
+
+.datacard .TabCurCSS {
+  background: linear-gradient(
+    to right,
+    rgba(75, 135, 254, 0.08),
+    rgba(24, 184, 255, 0.08),
+    rgba(80, 161, 237, 0.08)
+  );
+}
 .left-content {
   padding-top: 10rpx;
   padding-bottom: 10rpx;
@@ -1088,7 +1095,7 @@ export default {
 }
 .right-content {
   width: 50%; /* 右侧内容占据50%宽度 */
-  background-image: url(../../../../static/model/Pa.png);
+  background-image: url("/static/dataBg.png");
   background-size: 100% 125%;
 }
 

pages/home/detail/fanlocalAnimate/fanlocalAnimate2.vue

@@ -1,44 +1,120 @@
 <template>
   <view style="width: 100%; height: 100%">
-   <div class="ventilate" id="topPic">
-            <!-- 进风箭头 -->
-            <div :class="nowfengji == '2'?'arrow1':nowfengji == '1'?'arrow1-fan1':''" id="arrow1"></div>
-            <div :class="nowfengji == '2'?'arrow2':nowfengji == '1'?'arrow2-fan1':''" id="arrow2"></div>
-            <div :class="nowfengji == '2'?'arrow3':nowfengji == '1'?'arrow3-fan1':''" id="arrow3"></div>
-            <div :class="nowfengji == '2'?'arrow4':nowfengji == '1'?'arrow4-fan1':''" id="arrow4"></div>
-            <div :class="nowfengji == '2'?'arrow5':nowfengji == '1'?'arrow5-fan1':''" id="arrow5"></div>
-            <div :class="nowfengji == '2'?'arrow6':nowfengji == '1'?'arrow6-fan1':''" id="arrow6"></div>
-            <div :class="nowfengji == '2'?'arrow7':nowfengji == '1'?'arrow7-fan1':''" id="arrow7"></div>
-            <div :class="nowfengji == '2'?'arrow8':nowfengji == '1'?'arrow8-fan1':''" id="arrow8"></div>
-            <div :class="nowfengji == '2'?'arrow9':nowfengji == '1'?'arrow9-fan1':''" id="arrow9"></div>
-            <div :class="nowfengji == '2'?'arrow10':nowfengji == '1'?'arrow10-fan1':''" id="arrow10"></div>
-          
-           <div style="top:14%;left:18%" v-if="nowfengji == '1'" class="devfan1"></div>
-           <div style="top:14%;left:27.5%" v-if="nowfengji == '1'" class="devfan1"></div>
-           <div style="bottom:13%;left:18%" v-if="nowfengji == '2'" class="devfan1"></div>
-           <div style="bottom:13%;left:27.5%" v-if="nowfengji == '2'" class="devfan1"></div>
-
-            <div style="top:3%;left:9%"  class="state1" v-if="nowfengji == '1'" >运行</div>
-            <div style="top:3%;left:9%"  class="state2" v-else>停止</div>
-            
-            <div style="top:3%;left:34%"  class="state1" v-if="nowfengji == '1'" >运行</div>
-            <div style="top:3%;left:34%"  class="state2" v-else>停止</div>
-
-            
-            <div style="bottom:25%;left:9%"  class="state1" v-if="nowfengji == '2'" >运行</div>
-            <div style="bottom:25%;left:9%"  class="state2" v-else>停止</div>
-            
-            <div style="bottom:25%;left:34%"  class="state1" v-if="nowfengji == '2'" >运行</div>
-            <div style="bottom:25%;left:34%"  class="state2" v-else>停止</div>
-
-
-           <div style="top:17%;right:41%"  class="textshow">主风机</div>
-           <div style="bottom:15%;right:41%"  class="textshow">备风机</div>
-           
-           <div style="top:32%;left:6%"  class="textshow2">前级电机</div>
-           <div style="top:32%;left:34%"  class="textshow2">后级电机</div>
-           <div style="bottom:-2%;left:6%"  class="textshow2">前级电机</div>
-           <div style="bottom:-2%;left:34%"  class="textshow2">后级风机</div>
+    <div class="ventilate" id="topPic">
+      <!-- 进风箭头 -->
+      <div
+        :class="
+          nowfengji == '2' ? 'arrow1' : nowfengji == '1' ? 'arrow1-fan1' : ''
+        "
+        id="arrow1"
+      ></div>
+      <div
+        :class="
+          nowfengji == '2' ? 'arrow2' : nowfengji == '1' ? 'arrow2-fan1' : ''
+        "
+        id="arrow2"
+      ></div>
+      <div
+        :class="
+          nowfengji == '2' ? 'arrow3' : nowfengji == '1' ? 'arrow3-fan1' : ''
+        "
+        id="arrow3"
+      ></div>
+      <div
+        :class="
+          nowfengji == '2' ? 'arrow4' : nowfengji == '1' ? 'arrow4-fan1' : ''
+        "
+        id="arrow4"
+      ></div>
+      <div
+        :class="
+          nowfengji == '2' ? 'arrow5' : nowfengji == '1' ? 'arrow5-fan1' : ''
+        "
+        id="arrow5"
+      ></div>
+      <div
+        :class="
+          nowfengji == '2' ? 'arrow6' : nowfengji == '1' ? 'arrow6-fan1' : ''
+        "
+        id="arrow6"
+      ></div>
+      <div
+        :class="
+          nowfengji == '2' ? 'arrow7' : nowfengji == '1' ? 'arrow7-fan1' : ''
+        "
+        id="arrow7"
+      ></div>
+      <div
+        :class="
+          nowfengji == '2' ? 'arrow8' : nowfengji == '1' ? 'arrow8-fan1' : ''
+        "
+        id="arrow8"
+      ></div>
+      <div
+        :class="
+          nowfengji == '2' ? 'arrow9' : nowfengji == '1' ? 'arrow9-fan1' : ''
+        "
+        id="arrow9"
+      ></div>
+      <div
+        :class="
+          nowfengji == '2' ? 'arrow10' : nowfengji == '1' ? 'arrow10-fan1' : ''
+        "
+        id="arrow10"
+      ></div>
+
+      <div
+        style="top: 14%; left: 18%"
+        v-if="nowfengji == '1'"
+        class="devfan1"
+      ></div>
+      <div
+        style="top: 14%; left: 27.5%"
+        v-if="nowfengji == '1'"
+        class="devfan1"
+      ></div>
+      <div
+        style="bottom: 13%; left: 18%"
+        v-if="nowfengji == '2'"
+        class="devfan1"
+      ></div>
+      <div
+        style="bottom: 13%; left: 27.5%"
+        v-if="nowfengji == '2'"
+        class="devfan1"
+      ></div>
+
+      <div style="top: 3%; left: 9%" class="state1" v-if="nowfengji == '1'">
+        运行
+      </div>
+      <div style="top: 3%; left: 9%" class="state2" v-else>停止</div>
+
+      <div style="top: 3%; left: 34%" class="state1" v-if="nowfengji == '1'">
+        运行
+      </div>
+      <div style="top: 3%; left: 34%" class="state2" v-else>停止</div>
+
+      <div style="bottom: 25%; left: 9%" class="state1" v-if="nowfengji == '2'">
+        运行
+      </div>
+      <div style="bottom: 25%; left: 9%" class="state2" v-else>停止</div>
+
+      <div
+        style="bottom: 25%; left: 34%"
+        class="state1"
+        v-if="nowfengji == '2'"
+      >
+        运行
+      </div>
+      <div style="bottom: 25%; left: 34%" class="state2" v-else>停止</div>
+
+      <div style="top: 17%; right: 41%" class="textshow">主风机</div>
+      <div style="bottom: 15%; right: 41%" class="textshow">备风机</div>
+
+      <div style="top: 32%; left: 6%" class="textshow2">前级电机</div>
+      <div style="top: 32%; left: 34%" class="textshow2">后级电机</div>
+      <div style="bottom: -2%; left: 6%" class="textshow2">前级电机</div>
+      <div style="bottom: -2%; left: 34%" class="textshow2">后级风机</div>
     </div>
   </view>
 </template>
@@ -47,7 +123,7 @@
 export default {
   data() {
     return {
-      nowfengji: ""
+      nowfengji: "",
     };
   },
   props: {
@@ -59,109 +135,106 @@ export default {
       type: String,
       default: "备风机",
     },
-	fan1State: {
+    fan1State: {
       type: String,
       default: "",
     },
-	fan2State: {
+    fan2State: {
       type: String,
       default: "",
     },
   },
   methods: {
-	  
-	      setnowfengji(val) {
-	        if (this.nowfengji != val) {
-	          this.nowfengji = val;
-	          this.setFengjiDonghua();
-	        }
-	      },
-	      setFengjiDonghua() {
-	        if (this.nowfengji == "2") {
-	        } else if (this.nowfengji == "1") {
-	        } else {
-	        }
-	      },
-		  setNowStart(){
-			  		  if(this.fan1State=="1"){
-			  			  this.nowfengji = "1"
-			  		  }
-			  		  else if(this.fan2State=="1"){
-			  			  this.nowfengji = "2"
-			  		  }
-			  		  else{
-			  			  this.nowfengji = ""
-			  		  }
-		  }
+    setnowfengji(val) {
+      if (this.nowfengji != val) {
+        this.nowfengji = val;
+        this.setFengjiDonghua();
+      }
+    },
+    setFengjiDonghua() {
+      if (this.nowfengji == "2") {
+      } else if (this.nowfengji == "1") {
+      } else {
+      }
+    },
+    setNowStart() {
+      if (this.fan1State == "1") {
+        this.nowfengji = "1";
+      } else if (this.fan2State == "1") {
+        this.nowfengji = "2";
+      } else {
+        this.nowfengji = "";
+      }
+    },
   },
-  watch:{
-	  fan1State(val){
-		  this.setNowStart()
-	  },
-	  fan2State(val){
-		  this.setNowStart()
-	  }
+  watch: {
+    fan1State(val) {
+      this.setNowStart();
+    },
+    fan2State(val) {
+      this.setNowStart();
+    },
   },
   onLoad(query) {
     this.setFengjiDonghua();
-	},
+  },
 };
 </script>
 
 <style scoped>
 div.ventilate {
   width: 100%;
-  height:200px;
+  height: 200px;
   min-height: 200px;
   min-width: 300px;
   background-image: url(/static/fan/fan.png);
   background-size: 100% 100%;
   perspective: 800px;
 }
-.state1{
+.state1 {
   position: absolute;
   z-index: 2;
-  width:8%;
+  width: 8%;
   height: 14px;
   padding-bottom: 5px;
   padding-left: 3px;
   background-color: rgba(78, 155, 1, 0.438);
-  border:none;
+  border: none;
   color: rgb(255, 255, 255);
   font-size: 12px;
 }
-.state2{
+.state2 {
   position: absolute;
   z-index: 2;
-  width:8%;
+  width: 8%;
   height: 14px;
   padding-bottom: 5px;
   padding-left: 3px;
   background-color: rgba(167, 42, 11, 0.5);
-  border:none;
+  border: none;
   color: rgb(206, 206, 212);
   font-size: 12px;
 }
-.textshow{
+.textshow {
   position: absolute;
   z-index: 2;
   color: rgb(20, 19, 19);
   font-size: 16px;
 }
-.textshow2{
+.textshow2 {
   position: absolute;
   z-index: 2;
   color: rgb(100, 106, 136);
   font-size: 14px;
 }
 .devfan1,
-.devfan2{
+.devfan2 {
   position: absolute !important;
   z-index: 2;
   min-width: 20px;
   min-height: 20px;
   height: 22px;
-  width:22px;
+  width: 22px;
   background-image: url(/static/fan/devFan.png);
   background-size: 100% 100%;
 }
@@ -176,7 +249,7 @@ div.ventilate {
 @keyframes rotate1 {
   0% {
     -webkit-transform: rotate(0deg);
-    opacity:1;
+    opacity: 1;
   }
   100% {
     -webkit-transform: rotate(360deg);

pages/home/detail/windowAnimate/windowAnimate.vue

@@ -6,43 +6,7 @@
           class="autowindow_new"
           v-show="windowcount == 1"
           :style="{ height: height }"
-		 style=" margin: 0 auto;"
-        >
-			  <div
-			    class="window_new_1"
-			    :style="`transform: rotateX(${windowAngle}deg)`"
-			    id="subwindowpic11"
-			  ></div>
-			  <div
-			    class="window_new_2"
-			    :style="`transform: rotateX(${windowAngle}deg)`"
-			    id="subwindowpic12"
-			  ></div>
-			  <div
-			    class="window_new_3"
-			    :style="`transform: rotateX(${windowAngle}deg)`"
-			    id="subwindowpic13"
-			  ></div>
-			  <div
-			    class="window_new_4"
-			    :style="`transform: rotateX(${windowAngle}deg)`"
-			    id="subwindowpic14"
-			  ></div>
-			  <div
-			    class="window_new_5"
-			    :style="`transform: rotateX(${windowAngle}deg)`"
-			    id="subwindowpic15"
-			  ></div>
-        </div>
-        <div>
-          <video controls style="width: 100%"></video>
-        </div>
-      </div>
-      <div v-show="windowcount == 2">
-		  <div style="display: flex; flex-wrap: nowrap;">
-        <div
-          class="autowindow_new"
-          :style="{ height: height }"
+          style="margin: 0 auto"
         >
           <div
             class="window_new_1"
@@ -70,40 +34,125 @@
             id="subwindowpic15"
           ></div>
         </div>
-        <div
-          class="autowindow_new"
-          :style="{ height: height }"
-        >
-          <div
-            class="window_new_1"
-            :style="`transform: rotateX(${windowAngle1}deg)`"
-            id="subwindowpic11"
-          ></div>
-          <div
-            class="window_new_2"
-            :style="`transform: rotateX(${windowAngle1}deg)`"
-            id="subwindowpic12"
-          ></div>
-          <div
-            class="window_new_3"
-            :style="`transform: rotateX(${windowAngle1}deg)`"
-            id="subwindowpic13"
-          ></div>
-          <div
-            class="window_new_4"
-            :style="`transform: rotateX(${windowAngle1}deg)`"
-            id="subwindowpic14"
-          ></div>
-          <div
-            class="window_new_5"
-            :style="`transform: rotateX(${windowAngle1}deg)`"
-            id="subwindowpic15"
-          ></div>
+        <div>
+          <video controls style="width: 100%"></video>
+        </div>
+      </div>
+      <div v-show="windowcount == 2">
+        <div style="display: flex; flex-wrap: nowrap">
+          <div class="autowindow_new" :style="{ height: height }">
+            <div
+              class="window_new_1"
+              :style="`transform: rotateX(${windowAngle}deg)`"
+              id="subwindowpic11"
+            ></div>
+            <div
+              class="window_new_2"
+              :style="`transform: rotateX(${windowAngle}deg)`"
+              id="subwindowpic12"
+            ></div>
+            <div
+              class="window_new_3"
+              :style="`transform: rotateX(${windowAngle}deg)`"
+              id="subwindowpic13"
+            ></div>
+            <div
+              class="window_new_4"
+              :style="`transform: rotateX(${windowAngle}deg)`"
+              id="subwindowpic14"
+            ></div>
+            <div
+              class="window_new_5"
+              :style="`transform: rotateX(${windowAngle}deg)`"
+              id="subwindowpic15"
+            ></div>
+          </div>
+          <div class="autowindow_new" :style="{ height: height }">
+            <div
+              class="window_new_1"
+              :style="`transform: rotateX(${windowAngle1}deg)`"
+              id="subwindowpic11"
+            ></div>
+            <div
+              class="window_new_2"
+              :style="`transform: rotateX(${windowAngle1}deg)`"
+              id="subwindowpic12"
+            ></div>
+            <div
+              class="window_new_3"
+              :style="`transform: rotateX(${windowAngle1}deg)`"
+              id="subwindowpic13"
+            ></div>
+            <div
+              class="window_new_4"
+              :style="`transform: rotateX(${windowAngle1}deg)`"
+              id="subwindowpic14"
+            ></div>
+            <div
+              class="window_new_5"
+              :style="`transform: rotateX(${windowAngle1}deg)`"
+              id="subwindowpic15"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div v-show="windowcount == 3">
+        <div style="display: flex; flex-wrap: nowrap">
+          <div class="autowindow_new" :style="{ height: height }">
+            <div
+              class="window_new_1"
+              :style="`transform: rotateX(${windowAngle}deg)`"
+              id="subwindowpic11"
+            ></div>
+            <div
+              class="window_new_2"
+              :style="`transform: rotateX(${windowAngle}deg)`"
+              id="subwindowpic12"
+            ></div>
+            <div
+              class="window_new_3"
+              :style="`transform: rotateX(${windowAngle}deg)`"
+              id="subwindowpic13"
+            ></div>
+            <div
+              class="window_new_4"
+              :style="`transform: rotateX(${windowAngle}deg)`"
+              id="subwindowpic14"
+            ></div>
+            <div
+              class="window_new_5"
+              :style="`transform: rotateX(${windowAngle}deg)`"
+              id="subwindowpic15"
+            ></div>
+          </div>
+          <div class="autowindow_new" :style="{ height: height }">
+            <div
+              class="window_new_1"
+              :style="`transform: rotateX(${windowAngle1}deg)`"
+              id="subwindowpic11"
+            ></div>
+            <div
+              class="window_new_2"
+              :style="`transform: rotateX(${windowAngle1}deg)`"
+              id="subwindowpic12"
+            ></div>
+            <div
+              class="window_new_3"
+              :style="`transform: rotateX(${windowAngle1}deg)`"
+              id="subwindowpic13"
+            ></div>
+            <div
+              class="window_new_4"
+              :style="`transform: rotateX(${windowAngle1}deg)`"
+              id="subwindowpic14"
+            ></div>
+            <div
+              class="window_new_5"
+              :style="`transform: rotateX(${windowAngle1}deg)`"
+              id="subwindowpic15"
+            ></div>
+          </div>
         </div>
-		</div>
-		<div>
-		  <video controls style="width: 100%"></video>
-		</div>
       </div>
     </div>
   </view>

pages/home/home.vue

@@ -80,7 +80,7 @@
                       "
                     >
                       <view
-                        :class="TabCur"
+                        class="TabCurCSS"
                         style="
                           padding-top: 10rpx;
                           padding-bottom: 10rpx;
@@ -166,7 +166,7 @@
                       "
                     >
                       <view
-                        :class="TabCur"
+                        class="TabCurCSS"
                         style="
                           padding-top: 10rpx;
                           padding-bottom: 10rpx;
@@ -280,7 +280,7 @@
                       "
                     >
                       <view
-                        :class="TabCur"
+                        class="TabCurCSS"
                         style="
                           padding-top: 10rpx;
                           padding-bottom: 10rpx;
@@ -700,12 +700,13 @@ export default {
     rgba(4, 184, 255, 0.08),
     rgba(60, 161, 237, 0.08)
   );
-  background-image: url("/static/maxbg.png");
-  background-size: 100% 100%;
-  background-position: center;
+  background-image: url("/static/dataBg.png");
+  background-size: 40% 100%;
+  background-position: right;
+  background-repeat: no-repeat;
 }
 
-.datacard .gate {
+.datacard .TabCurCSS {
   background: linear-gradient(
     to right,
     rgba(75, 135, 254, 0.08),
@@ -714,24 +715,6 @@ export default {
   );
 }
 
-.datacard .window {
-  background: linear-gradient(
-    to right,
-    rgba(55, 125, 254, 0.08),
-    rgba(4, 164, 255, 0.08),
-    rgba(60, 131, 237, 0.08)
-  );
-}
-
-.datacard .windrect {
-  background: linear-gradient(
-    to right,
-    rgba(85, 125, 254, 0.08),
-    rgba(34, 164, 255, 0.08),
-    rgba(90, 131, 237, 0.08)
-  );
-}
-
 .error-tag {
   border-radius: 10%;
   display: inline-block;