Procházet zdrojové kódy

修改横竖屏适配 已经横屏还原度

zhaojijng před 2 roky
rodič
revize
3cd8a538bd

+ 6 - 6
src/assets/image/horImg/changeHor.svg

@@ -1,7 +1,7 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.625" y="4.375" width="13.125" height="20.125" rx="1.75" stroke="#575271" stroke-width="1.6"/>
-<rect x="7" y="20.125" width="4.375" height="1.6" rx="0.8" fill="#575271"/>
-<path d="M18.375 14H23.625C24.5915 14 25.375 14.7835 25.375 15.75V22.75C25.375 23.7165 24.5915 24.5 23.625 24.5H18.375" stroke="#575271" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M23.625 10.625C23.625 8.20875 21.6662 6.25 19.25 6.25" stroke="#575271" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M23.2277 12.2474C23.3123 12.3207 23.4377 12.3207 23.5223 12.2474L25.8416 10.2388C25.9991 10.1025 25.9027 9.84375 25.6943 9.84375H21.0557C20.8473 9.84375 20.7509 10.1025 20.9084 10.2388L23.2277 12.2474Z" fill="#575271"/>
+<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.62494" y="4.98022" width="13.125" height="20.125" rx="1.75" stroke="#EFDEC6" stroke-width="1.6"/>
+<rect x="6.99994" y="20.7302" width="4.375" height="1.6" rx="0.8" fill="#EFDEC6"/>
+<path d="M18.375 14.6052H23.625C24.5915 14.6052 25.375 15.3887 25.375 16.3552V23.3552C25.375 24.3217 24.5915 25.1052 23.625 25.1052H18.375" stroke="#EFDEC6" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M19.1097 4.98022C21.5259 4.98022 23.4847 6.93898 23.4847 9.35522" stroke="#EFDEC6" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M23.507 11.4777C23.4224 11.5509 23.2969 11.5509 23.2124 11.4777L20.893 9.46906C20.7356 9.33268 20.832 9.07397 21.0403 9.07397L25.679 9.07397C25.8873 9.07397 25.9838 9.33268 25.8263 9.46906L23.507 11.4777Z" fill="#EFDEC6"/>
 </svg>

+ 7 - 0
src/assets/image/horImg/changeHor2.svg

@@ -0,0 +1,7 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.625" y="4.375" width="13.125" height="20.125" rx="1.75" stroke="#575271" stroke-width="1.6"/>
+<rect x="7" y="20.125" width="4.375" height="1.6" rx="0.8" fill="#575271"/>
+<path d="M18.375 14H23.625C24.5915 14 25.375 14.7835 25.375 15.75V22.75C25.375 23.7165 24.5915 24.5 23.625 24.5H18.375" stroke="#575271" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M23.625 10.625C23.625 8.20875 21.6662 6.25 19.25 6.25" stroke="#575271" stroke-width="1.6" stroke-linecap="round"/>
+<path d="M23.2277 12.2474C23.3123 12.3207 23.4377 12.3207 23.5223 12.2474L25.8416 10.2388C25.9991 10.1025 25.9027 9.84375 25.6943 9.84375H21.0557C20.8473 9.84375 20.7509 10.1025 20.9084 10.2388L23.2277 12.2474Z" fill="#575271"/>
+</svg>

+ 17 - 10
src/components/HorFloorSpace.vue

@@ -21,8 +21,9 @@
                     }"
                 >
                     <div class="title">{{ selIndicator.name }}</div>
-                    <div class="textCont">
-                        <span class="value">{{ totalAvgValues }}{{ selIndicator.unit }}</span><br /><span class="name">平均{{ selIndicator.name }}</span>
+                    <div class="ltextCont">
+                        <div class="value">{{ totalAvgValues }}{{ selIndicator.unit }}</div>
+                        <div class="name">平均{{ selIndicator.name }}</div>
                     </div>
                     <div class="other">
                         <img
@@ -543,8 +544,10 @@ export default defineComponent({
     .imageDiv {
         height: 32px;
         margin: 0 32px;
+        font-size:0;
         text-align: center;
         img {
+            font-size: 0;
             height: 100%;
         }
     }
@@ -599,8 +602,9 @@ export default defineComponent({
             text-align: center;
             .other {
                 height: 62%;
-                padding: 10px 0;
+                padding: 14px 0;
                 box-sizing: border-box;
+                font-size: 0;
                 .img {
                     height: 100%;
                     padding: 0;
@@ -610,19 +614,21 @@ export default defineComponent({
             .title {
                 color: #f7ecdb;
                 font-size: 24px;
-                font-size: 1.3vw;
+                //font-size: 1.3vw;
                 height: 18%;
+                font-weight: 600;
             }
-            .textCont {
+            .ltextCont {
                 color: #f7ecdb;
-                font-size: 20px;
-                font-size: 1.1vw;
-                line-height: 1;
+                line-height: 23px;
                 height: 20%;
+
                 .value {
-                    font-weight: 600;
+                    font-weight: 700;
+                    font-size: 20px;
                 }
                 .name {
+                    font-weight: 400;
                     font-size: 14px;
                 }
             }
@@ -687,6 +693,7 @@ export default defineComponent({
         display: flex;
         flex: 1;
         flex-wrap: wrap;
+        font-size: 14px;
         .space-box {
             padding: 4px;
             box-sizing: border-box;
@@ -699,7 +706,7 @@ export default defineComponent({
                 min-width: 20px;
                 border-radius: 8px;
                 color: #f7ecdb;
-
+                backdrop-filter: blur(5px);
                 background: rgba(34, 139, 81, 0.76);
                 text-align: center;
                 padding: 0 8px;

+ 2 - 2
src/components/LastAllEnergy.vue

@@ -153,13 +153,13 @@ export default defineComponent({
     .saveBack {
         height: 15px;
         background-image: url("@/assets/image/horImg/lastGold.svg");
-        transition: width 3s linear;
+        transition: width 1.5s linear;
         width: 0;
     }
     .totalBack {
         height: 15px;
         background-image: url("@/assets/image/horImg/lastGray.svg");
-        transition: width 2s linear;
+        transition: width 1.5s linear;
         width: 0;
     }
 }

+ 9 - 9
src/components/LastMonthData.vue

@@ -10,9 +10,7 @@
                 v-for="(item, index) in lastDataArr"
                 :key="index"
             >
-                <div class="item-left">
-                    <img :src="item.img" />
-                </div>
+                <div class="item-left"><img :src="item.img" /></div>
                 <div class="item-right">
                     <div class="item-value">
                         <span>{{ item.value }}</span><span>{{ item.unit }}</span>
@@ -157,16 +155,17 @@ export default defineComponent({
     .item {
         //padding-top: 60px;
         display: flex;
-
+        align-items: center;
         .item-left {
-            width: 86px;
-            height: 86px;
+            width: 62px;
+            height: 62px;
             margin-right: 20px;
             background: rgba(100, 108, 130, 0.3);
             backdrop-filter: blur(10px);
             border-radius: 12px;
+            font-size:0;
             img {
-                width: 86px;
+                width: 62px;
             }
         }
         .item-right {
@@ -183,7 +182,7 @@ export default defineComponent({
         .item-content {
             display: flex;
             align-items: center;
-            padding-top: 8px;
+            padding-top: 6px;
             font-weight: 500;
             font-size: 14px;
         }
@@ -195,7 +194,7 @@ export default defineComponent({
             white-space: nowrap;
 
             .min {
-                padding-top: 8px;
+                padding-top: 4px;
             }
         }
     }
@@ -204,6 +203,7 @@ export default defineComponent({
     height: 100%;
     padding-left: 35px;
     .item {
+        align-items: center;
         padding-top: 0;
     }
     .itemWrap {

+ 12 - 8
src/components/NowData.vue

@@ -9,7 +9,11 @@
         </div>
 
         <div class="contain">
-            <div class="item" v-for="(item, index) in realDataArr" :key="index">
+            <div
+                class="item"
+                v-for="(item, index) in realDataArr"
+                :key="index"
+            >
                 <div
                     class="item_content"
                     :style="{
@@ -18,8 +22,7 @@
                     }"
                 >
                     <div class="content_value">
-                        <span>{{ item.value }}</span
-                        ><span>{{ item.unit }}</span>
+                        <span>{{ item.value }}</span><span class="unit">{{ item.unit }}</span>
                     </div>
                     <div class="content_name">
                         <span>{{ item.name }}</span>
@@ -163,6 +166,10 @@ export default defineComponent({
                 text-fill-color: transparent;
                 text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
                 line-height: 64px;
+                .unit {
+                    font-size: 32px;
+                    margin-left: 8px;
+                }
             }
             .content_name {
                 margin-top: 8px;
@@ -194,19 +201,16 @@ export default defineComponent({
 }
 .verticalNowData {
     //height: 380px;
-    height:27%;
+    height: 27%;
     .item {
         .item_content {
             .content_value {
-                font-size: 46px;
+                font-size: 44px;
             }
             .content_name {
                 margin-top: 12px;
                 font-size: 28px;
             }
-            .content_level {
-                margin-top: 12px;
-            }
         }
     }
 }

+ 4 - 1
src/components/TemChart.vue

@@ -172,12 +172,15 @@ export default defineComponent({
             chart
                 .area()
                 .position("time*temp")
-                .color("l(90) 0:#F2E3CD 1:#CFAE88")
+                .color(
+                    "l(90) 0:rgba(237,217,190,0.8) 0.6:rgb(149, 162, 194, 0.01)"
+                )
                 .tooltip(false)
                 .shape("smooth");
 
             chart
                 .point()
+                .tooltip(false)
                 .position("time*temp")
                 .shape("breath-point");
 

+ 1 - 1
src/components/airSwitchHor.vue

@@ -160,7 +160,7 @@ export default defineComponent({
         line-height: 34px;
         text-align: center;
         color: #f7e6cd;
-        margin-top: 26px;
+        margin-top: 24px;
     }
 }
 </style>

+ 2 - 2
src/components/lastEnergyChart.vue

@@ -194,7 +194,7 @@ export default defineComponent({
                     line: {
                         style: {
                             lineWidth: 1, // 设置线的宽度
-                            stroke: "rgba(224,194,155,0.6)", // 设置线的颜色
+                            stroke: "rgba(224,194,155,0.2)", // 设置线的颜色
                             lineDash: [3, 3], // 设置虚线样式
                         },
                     },
@@ -212,7 +212,7 @@ export default defineComponent({
                         line: {
                             style: {
                                 lineWidth: 1, // 设置线的宽度
-                                stroke: "rgba(224,194,155,0.5)", // 设置线的颜色
+                                stroke: "rgba(224,194,155,0.2)", // 设置线的颜色
                                 lineDash: [3, 3], // 设置虚线样式
                             },
                         },

+ 18 - 8
src/components/pageHead.vue

@@ -8,21 +8,31 @@
             <!-- <img :src="title" v-else /> -->
         </div>
         <div class="horHead-left">
-            <img :src="logo" alt="" style="height: 48px" />
+            <img
+                :src="logo"
+                alt=""
+                style="height: 48px"
+            />
         </div>
         <div class="horHead-right">
             <div class="right-item">
                 <span class="item-time">{{ nowStr }}</span>
             </div>
             <div class="right-item">{{ weatherCont.text }}</div>
-            <div class="right-item" @click="changeScreen">
+            <div
+                class="right-item"
+                @click="changeScreen"
+            >
                 <img
                     class="firstImg"
                     alt=""
                     :src="nowScreen == 'vertical' ? changeHor : changeVer"
                 />
             </div>
-            <div class="right-item" style="display: none">退出</div>
+            <div
+                class="right-item"
+                style="display: none"
+            >退出</div>
         </div>
     </div>
 </template>
@@ -41,17 +51,16 @@ export default defineComponent({
         },
     },
     setup(props, contx) {
-       
         const { persagyLogo, zhijiangLogo, changeHor, changeVer } = dapingImage;
 
         const route: any = useRoute();
         const router = useRouter();
         const projectStore = useProjectStore();
 
-        const { weatherCont, projectObj, projectId } =
-            storeToRefs(projectStore);
+        const { weatherCont, projectObj, projectId } = storeToRefs(
+            projectStore
+        );
 
-      
         const allData = reactive({
             // logo: new URL(
             //     "../assets/image/horImg/zhijianglogo.png",
@@ -118,6 +127,7 @@ export default defineComponent({
         position: absolute;
         top: 0;
         left: 0;
+        font-size: 0;
     }
     .horHead-right {
         position: absolute;
@@ -144,7 +154,7 @@ export default defineComponent({
             // border-radius: 8px;
             .firstImg {
                 margin-right: 6px;
-                width:28px;
+                width: 28px;
             }
             .item-time {
                 font-family: Persagy;

+ 2 - 1
src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import "./style.scss";
-import "amfe-flexible";
+//import "amfe-flexible";
+import "@/utils/rem";
 import App from "./App.vue";
 import router from "./router";
 import "element-plus/dist/index.css";

+ 31 - 0
src/utils/rem.ts

@@ -0,0 +1,31 @@
+import { useRoute, useRouter } from "vue-router";
+import { ref, computed, onMounted } from "vue";
+
+// 基准大小
+const baseSize = 192;
+// 设置 rem 函数
+function setRem() {
+    // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
+
+    // 设置页面根节点字体大小
+
+    let baseWidth = 1920;
+    const href = window.location.href;
+    if (href.indexOf("horiScreen") > -1) {
+        baseWidth = 1920;
+    }
+    if (href.indexOf("verScreen") > -1) {
+        baseWidth = 1280;
+    }
+    const scale = document.documentElement.clientWidth / baseWidth;
+    document.documentElement.style.fontSize = `${
+        baseSize * Math.min(scale, 1)
+    }px`;
+}
+// 初始化
+setRem();
+// 改变窗口大小时重新设置 rem
+window.onresize = () => {
+    setRem();
+};
+export {};

+ 7 - 1
src/views/horiScreen/index.vue

@@ -158,7 +158,7 @@ export default {
         }
         .bgBuild {
             position: absolute;
-            top: -10%;
+            top: -11%;
             left: 0;
             width: 120%;
             // height: 1420PX;//不想自动转换成rem的px 只需要将px大写 PX就可以了
@@ -203,11 +203,17 @@ export default {
                 width: 36%;
                 height: 100%;
                 background: rgba(149, 162, 194, 0.2);
+                backdrop-filter: blur(18px);
+                border-top-left-radius: 20px;
+                border-bottom-left-radius: 20px;
             }
             .bottom-right {
                 width: 64%;
                 height: 100%;
                 background: rgba(149, 162, 194, 0.2);
+                backdrop-filter: blur(18px);
+                border-top-right-radius: 20px;
+                border-bottom-right-radius: 20px;
             }
         }
     }

+ 1 - 1
src/views/verScreen/index.vue

@@ -101,7 +101,7 @@ export default defineComponent({
                     // if (allData.nowPage == 4) {
                     //     allData.nowPage = 1;
                     // }
-                }, 600000);
+                }, 6000);
             },
         });