浏览代码

需改样式问题1

zhaojijng 2 年之前
父节点
当前提交
1450619f0b
共有 5 个文件被更改,包括 34 次插入37 次删除
  1. 3 3
      src/components/LastAllEnergy.vue
  2. 12 11
      src/components/LastSaveEnergy.vue
  3. 3 3
      src/components/NowData.vue
  4. 15 19
      src/components/airSwitchHor.vue
  5. 1 1
      src/style.scss

+ 3 - 3
src/components/LastAllEnergy.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="lastMonth"
-        :class="[screenType === 'hor' ? 'horizontalClass ' : 'verAllClass ']"
+        :class="[screenType === 'hor' ? 'horizontalClass ' : 'verLastClass ']"
     >
         <div class="subhead-title">
             <span>上月总能耗</span>
@@ -158,9 +158,9 @@ export default defineComponent({
         width: 0;
     }
 }
-.verAllClass {
+.verLastClass {
     height: 420px;
-    padding: 0 36px;
+    padding: 0 50px 50px;
     background: rgba(149, 162, 194, 0.1);
     backdrop-filter: blur(40px);
     border-radius: 20px;

+ 12 - 11
src/components/LastSaveEnergy.vue

@@ -58,7 +58,6 @@ export default defineComponent({
         });
 
         projectStore.$subscribe((mutation, state) => {
-            
             const lastAllEnergy = state.lastAllEnergy || {};
             allData.lastAllEnergyRes = {
                 cdmCo2: lastAllEnergy.cdmCo2
@@ -94,22 +93,23 @@ export default defineComponent({
         height: calc(100% - 60px);
         padding-top: 10px;
         box-sizing: border-box;
+        text-align: center;
         // display: flex;
         // justify-content: center;
         // align-items: center;
         color: #f7e6cd;
         position: relative;
         .svideo {
-            width: 100%;
+            height: 100%;
         }
         .co2Wrap {
             position: absolute;
             // font-size: 22px;
-            font-size: 1.2vw;
+            font-size: 1.1vw;
             .value {
                 padding: 0 8px;
                 font-size: 24px;
-                font-size: 1.4vw;
+                font-size: 1.2vw;
             }
             .co2Img {
                 width: 58px;
@@ -120,22 +120,23 @@ export default defineComponent({
             left: 0%;
         }
         .scarbon {
-            top: 3%;
-            right: 10%;
+            top: 2%;
+            right: 14%;
         }
         .stree {
-            top: 62%;
-            right: 0%;
+            top: 63%;
+            right: 4%;
         }
         .electWrap {
             position: absolute;
-            top: 20%;
+            top: 25%;
             left: 32%;
-            width:200px;
+            width: 28%;
             font-size: 30px;
             font-size: 1.4vw;
             // line-height: 45px;
             text-align: center;
+            white-space: nowrap;
             color: #f7e6cd;
             .value {
                 margin-top: 5px;
@@ -150,7 +151,7 @@ export default defineComponent({
 }
 .verAllClass {
     height: 600px;
-    padding: 0 36px;
+    padding: 0 50px 50px;
     background: rgba(149, 162, 194, 0.1);
     backdrop-filter: blur(40px);
     border-radius: 20px;

+ 3 - 3
src/components/NowData.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="NowData"
-        :class="[screenType === 'hor' ? 'horizontalClass' : 'verticalNowData']"
+        :class="[screenType === 'hor' ? 'horiNowClass' : 'verticalNowData']"
     >
         <div class="head-title">
             <span>实时数据</span>
@@ -113,8 +113,8 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-.horizontalClass {
-    height: 50%;
+.horiNowClass {
+    height: 48%;
 }
 
 .NowData {

+ 15 - 19
src/components/airSwitchHor.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="airSwitch">
-        <div class="air-cont">
+        <div class="airWrap">
             <div class="container" id="container"></div>
-        </div>
-        <div class="air-title">
-            <span> {{ airStatus ? "空调已开启" : "空调已关闭" }}</span>
+            <div class="air-title">
+                <span> {{ airStatus ? "空调已开启" : "空调已关闭" }}</span>
+            </div>
         </div>
     </div>
 </template>
@@ -23,7 +23,6 @@ export default defineComponent({
         },
     },
     setup(props, contx) {
-      
         const { airValue, airStatus } = useAirSwitch();
         const allData = reactive({
             airStatus: airStatus,
@@ -143,28 +142,25 @@ export default defineComponent({
 <style scoped lang="scss">
 .airSwitch {
     height: 100%;
+    width: 100%;
+    .airWrap {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
     .container {
         height: 200px;
     }
-    .air-cont {
-        .air-rate {
-            font-size: 16px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            color: #f7e6cd;
-            .air-rate-value {
-                color: #f7e6cd;
-                font-size: 42px;
-                font-weight: 700;
-            }
-        }
-    }
+
     .air-title {
+        width: 100%;
         font-size: 24px;
         line-height: 34px;
         text-align: center;
         color: #f7e6cd;
+        margin-top: 26px;
     }
 }
 </style>

+ 1 - 1
src/style.scss

@@ -24,9 +24,9 @@ html {
     height: 100%;
     margin: 0;
     padding: 0;
+    user-select: none;
 }
 body {
-    overflow-x: hidden;
     margin: 0;
     padding: 0;
     height: 100%;