소스 검색

fix: rem单位自适应 背景图片 滚动

zhaojijng 2 년 전
부모
커밋
497138964d
36개의 변경된 파일401개의 추가작업 그리고 170개의 파일을 삭제
  1. BIN
      dist/sgdaping/assets/background.1f64aaff.png
  2. 1 0
      dist/sgdaping/assets/background.c300eab1.css
  3. 21 21
      dist/sgdaping/assets/hor_big_bg.2b45085c.js
  4. BIN
      dist/sgdaping/assets/background_up.d1893853.png
  5. BIN
      dist/sgdaping/assets/background_up_ver.6674b9b3.png
  6. BIN
      dist/sgdaping/assets/hor_big_bg.48593e2d.png
  7. 0 1
      dist/sgdaping/assets/hor_big_bg.e74e941f.css
  8. 1 1
      dist/sgdaping/assets/index.9a1335ee.js
  9. 1 0
      dist/sgdaping/assets/index.49e918a1.css
  10. 2 2
      dist/sgdaping/assets/index.07ea06ba.js
  11. 0 1
      dist/sgdaping/assets/index.6b56b487.css
  12. 0 1
      dist/sgdaping/assets/index.83d8a90b.js
  13. 1 0
      dist/sgdaping/assets/index.96bd9347.js
  14. 1 0
      dist/sgdaping/assets/index.98c6b23d.css
  15. 0 1
      dist/sgdaping/assets/index.9a49515f.css
  16. 0 1
      dist/sgdaping/assets/index.b17b424f.js
  17. 1 0
      dist/sgdaping/assets/index.e0b207f6.js
  18. 1 0
      dist/sgdaping/assets/index.eb6f0da0.css
  19. 0 1
      dist/sgdaping/assets/index.f406ee57.css
  20. 100 0
      dist/sgdaping/assets/persagyLogo.da1c54bb.svg
  21. 2 2
      dist/sgdaping/index.html
  22. 12 0
      package-lock.json
  23. 2 0
      package.json
  24. BIN
      src/assets/image/horImg/background.png
  25. BIN
      src/assets/image/horImg/background_up.png
  26. BIN
      src/assets/image/horImg/background_up_ver.png
  27. 90 85
      src/assets/image/horImg/persagyLogo.svg
  28. 0 0
      src/assets/image/horImg/persagyLogo1.svg
  29. BIN
      src/assets/image/horImg/xxx.gif
  30. 6 3
      src/components/LastMonthData.vue
  31. 78 31
      src/components/LastSaveEnergy.vue
  32. 8 5
      src/components/NowData.vue
  33. 1 2
      src/main.ts
  34. 31 8
      src/views/horiScreen/index.vue
  35. 30 4
      src/views/verScreen/index.vue
  36. 11 0
      vite.config.ts

BIN
dist/sgdaping/assets/background.1f64aaff.png


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 1 - 0
dist/sgdaping/assets/background.c300eab1.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 21 - 21
dist/sgdaping/assets/hor_big_bg.2b45085c.js


BIN
dist/sgdaping/assets/background_up.d1893853.png


BIN
dist/sgdaping/assets/background_up_ver.6674b9b3.png


BIN
dist/sgdaping/assets/hor_big_bg.48593e2d.png


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 1
dist/sgdaping/assets/hor_big_bg.e74e941f.css


+ 1 - 1
dist/sgdaping/assets/index.9a1335ee.js

@@ -1 +1 @@
-import{h as e,r as n,o,k as t,_ as s,c as r,f as a}from"./index.07ea06ba.js";const c=e({setup(){return t(),n({}),o(()=>{}),{}}});function u(p,_,f,i,d,l){return a(),r("h2",null,"login\u9875\u9762")}const x=s(c,[["render",u]]);export{x as default};
+import{h as e,r as n,o,k as t,_ as s,c as r,f as a}from"./index.5e456311.js";const c=e({setup(){return t(),n({}),o(()=>{}),{}}});function u(p,_,f,i,d,l){return a(),r("h2",null,"login\u9875\u9762")}const x=s(c,[["render",u]]);export{x as default};

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 1 - 0
dist/sgdaping/assets/index.49e918a1.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 2 - 2
dist/sgdaping/assets/index.07ea06ba.js


+ 0 - 1
dist/sgdaping/assets/index.6b56b487.css

@@ -1 +0,0 @@
-.verticalWrap[data-v-f4ea1e9e]{padding:30px 40px;box-sizing:border-box;scrollbar-width:none;position:relative}.verticalWrap .bg[data-v-f4ea1e9e]{position:absolute;top:0;left:0;z-index:-1;right:0;bottom:0;overflow:hidden;background:#070a25}.verticalWrap .bg img[data-v-f4ea1e9e]{width:100%;height:100%}.verticalWrap .hor-head[data-v-f4ea1e9e]{height:150px;box-sizing:border-box}

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 1
dist/sgdaping/assets/index.83d8a90b.js


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 1 - 0
dist/sgdaping/assets/index.96bd9347.js


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 1 - 0
dist/sgdaping/assets/index.98c6b23d.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 1
dist/sgdaping/assets/index.9a49515f.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 1
dist/sgdaping/assets/index.b17b424f.js


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 1 - 0
dist/sgdaping/assets/index.e0b207f6.js


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 1 - 0
dist/sgdaping/assets/index.eb6f0da0.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 1
dist/sgdaping/assets/index.f406ee57.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 100 - 0
dist/sgdaping/assets/persagyLogo.da1c54bb.svg


+ 2 - 2
dist/sgdaping/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/sgdaping/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>daping</title>
-    <script type="module" crossorigin src="/sgdaping/assets/index.07ea06ba.js"></script>
-    <link rel="stylesheet" href="/sgdaping/assets/index.f406ee57.css">
+    <script type="module" crossorigin src="/sgdaping/assets/index.5e456311.js"></script>
+    <link rel="stylesheet" href="/sgdaping/assets/index.49e918a1.css">
   </head>
   <body>
     <div id="app"></div>

+ 12 - 0
package-lock.json

@@ -689,6 +689,12 @@
         "uri-js": "^4.2.2"
       }
     },
+    "amfe-flexible": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
+      "integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw==",
+      "dev": true
+    },
     "ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2601,6 +2607,12 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "postcss-pxtorem": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
+      "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
+      "dev": true
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",

+ 2 - 0
package.json

@@ -24,8 +24,10 @@
     "@types/js-cookie": "^3.0.2",
     "@types/node": "^18.7.14",
     "@vitejs/plugin-vue": "^3.0.3",
+    "amfe-flexible": "^2.2.1",
     "node-sass": "^7.0.1",
     "path": "^0.12.7",
+    "postcss-pxtorem": "^6.0.0",
     "sass": "^1.54.6",
     "sass-loader": "^13.0.2",
     "typescript": "^4.6.4",

BIN
src/assets/image/horImg/background.png


BIN
src/assets/image/horImg/background_up.png


BIN
src/assets/image/horImg/background_up_ver.png


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 90 - 85
src/assets/image/horImg/persagyLogo.svg


dist/sgdaping/assets/persagyLogo.ab350717.svg → src/assets/image/horImg/persagyLogo1.svg


BIN
src/assets/image/horImg/xxx.gif


+ 6 - 3
src/components/LastMonthData.vue

@@ -45,7 +45,6 @@ export default defineComponent({
         },
     },
     setup(props, contx) {
-       
         const { lastco2, lasthumidity, lastmethanal, lastpm25, lasttemp } =
             dapingImage;
         const allData = reactive({
@@ -150,7 +149,6 @@ export default defineComponent({
     .item {
         padding-top: 60px;
         display: flex;
-        align-items: center;
 
         .item-left {
             width: 86px;
@@ -163,6 +161,10 @@ export default defineComponent({
                 width: 86px;
             }
         }
+        .item-right {
+            width: 120px;
+            white-space: nowrap;
+        }
         .item-value {
             font-family: Persagy;
             font-weight: 700;
@@ -215,8 +217,9 @@ export default defineComponent({
         flex-wrap: wrap;
         //  justify-content:space-around;
         .item {
+            justify-content: center;
             width: 33.33%;
-            // justify-content: center;
+
             .item-content-right {
                 font-size: 14px;
                 white-space: nowrap;

+ 78 - 31
src/components/LastSaveEnergy.vue

@@ -6,23 +6,34 @@
         <div class="subhead-title">
             <span>上月节约能耗</span>
         </div>
-        <div class="saveCont">
-            <div class="co2Wrap sco2">
-                减排<span class="value">{{ lastAllEnergyRes.cdmCo2 }}Kg</span
-                >CO2
+        <div class="saveCont" ref="saveCont">
+            <div
+                class="videoWrap"
+                :style="{ width: videoWidth + 'px', left: videoLeft + 'px' }"
+            >
+                <div class="co2Wrap sco2">
+                    减排<span class="value"
+                        >{{ lastAllEnergyRes.cdmCo2 }}Kg</span
+                    >CO2
+                </div>
+                <div class="co2Wrap scarbon">
+                    减排<span class="value">{{ lastAllEnergyRes.cdmC }}Kg</span
+                    >碳
+                </div>
+                <div class="co2Wrap stree">
+                    为国家种<span class="value">{{
+                        lastAllEnergyRes.cdmTree
+                    }}</span
+                    >棵树
+                </div>
+                <div class="electWrap">
+                    <div>节约电</div>
+                    <div class="value">
+                        {{ lastAllEnergyRes.energySaving }}度
+                    </div>
+                </div>
             </div>
-            <div class="co2Wrap scarbon">
-                减排<span class="value">{{ lastAllEnergyRes.cdmC }}Kg</span>碳
-            </div>
-            <div class="co2Wrap stree">
-                为国家种<span class="value">{{ lastAllEnergyRes.cdmTree }}</span
-                >棵树
-            </div>
-            <div class="electWrap">
-                <div>节约电</div>
-                <div class="value">{{ lastAllEnergyRes.energySaving }}度</div>
-            </div>
-            <video class="svideo" autoplay loop muted>
+            <video class="svideo" autoplay loop muted ref="svideo">
                 <source src="@/assets/image/horImg/saveEnergy.mov" />
             </video>
         </div>
@@ -36,6 +47,7 @@ import {
     toRefs,
     onMounted,
     computed,
+    nextTick,
 } from "vue";
 import { queryLastEnergy } from "@/api/index";
 import useProjectStore from "@/store/useProjectStore";
@@ -50,13 +62,36 @@ export default defineComponent({
         },
     },
     setup(props, contx) {
-        const projectStore = useProjectStore();
-        const { lastAllEnergy } = storeToRefs(projectStore);
+        const svideo = ref();
+        const saveCont = ref();
 
         const allData = reactive({
             lastAllEnergyRes: {},
+            videoWidth: 0,
+            videoLeft: 0,
         });
 
+        onMounted(() => {
+            nextTick(() => {
+                let videoheight = svideo.value.offsetHeight;
+                let videoWidth = (videoheight / 692) * 2116;
+                let contWidth = saveCont.value.offsetWidth;
+
+                allData.videoWidth = videoWidth;
+                allData.videoLeft = (contWidth - videoWidth) / 2;
+                // console.log(
+                //     "svideo",
+                //     svideo.value,
+                //     svideo.value.offsetWidth,
+                //     svideo.value.offsetHeight,
+                // );
+                // 2116 × 692
+            });
+        });
+
+        const projectStore = useProjectStore();
+        const { lastAllEnergy } = storeToRefs(projectStore);
+
         projectStore.$subscribe((mutation, state) => {
             const lastAllEnergy = state.lastAllEnergy || {};
             allData.lastAllEnergyRes = {
@@ -77,7 +112,7 @@ export default defineComponent({
         onMounted(() => {
             //projectStore.setLastAllEnergy();
         });
-        return { ...toRefs(allData), lastAllEnergy };
+        return { ...toRefs(allData), svideo, saveCont };
     },
     computed: {},
 });
@@ -102,38 +137,50 @@ export default defineComponent({
         .svideo {
             height: 100%;
         }
+        .videoWrap {
+            position: absolute;
+            bottom: 0;
+            top: 10px;
+            left: 0;
+            right: 0;
+            margin: 0;
+
+            // left: 0;
+            // right: 0;
+        }
         .co2Wrap {
             position: absolute;
-            // font-size: 22px;
-            font-size: 1.1vw;
+            font-size: 22px;
+            //font-size: 1.1vw;
             .value {
                 padding: 0 8px;
                 font-size: 24px;
-                font-size: 1.2vw;
+                //font-size: 1.2vw;
             }
             .co2Img {
                 width: 58px;
             }
         }
         .sco2 {
-            top: 26%;
-            left: 0%;
+            top: 20%;
+            //top: 62px;
+            left: 7%;
         }
         .scarbon {
-            top: 2%;
-            right: 14%;
+            top: 0%;
+            right: 16%;
         }
         .stree {
-            top: 63%;
-            right: 4%;
+            top: 56%;
+            right: 5%;
         }
         .electWrap {
             position: absolute;
-            top: 25%;
+            top: 27%;
             left: 32%;
             width: 28%;
             font-size: 30px;
-            font-size: 1.4vw;
+            //font-size: 1.4vw;
             // line-height: 45px;
             text-align: center;
             white-space: nowrap;
@@ -142,7 +189,7 @@ export default defineComponent({
                 margin-top: 5px;
                 font-weight: 700;
                 font-size: 46px;
-                font-size: 2vw;
+                //font-size: 2vw;
                 // line-height: 58px;
                 text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
             }

+ 8 - 5
src/components/NowData.vue

@@ -40,7 +40,6 @@ export default defineComponent({
         },
     },
     setup(props, contx) {
-     
         const allData = reactive({
             realDataArr: [],
             selectColor: selectColor,
@@ -118,6 +117,9 @@ export default defineComponent({
 }
 
 .NowData {
+    .subhead-title {
+        margin-left: 14px;
+    }
     .title-right-icon {
         display: inline-block;
         padding: 0;
@@ -143,10 +145,11 @@ export default defineComponent({
             background-position: center -36px;
             background-repeat: no-repeat;
             padding-bottom: 30px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
+            // display: flex;
+            // flex-direction: column;
+            // justify-content: center;
+            // align-items: center;
+            width: 100%;
             text-align: center;
 
             .content_value {

+ 1 - 2
src/main.ts

@@ -1,11 +1,10 @@
 import { createApp } from "vue";
 import "./style.scss";
+import "amfe-flexible";
 import App from "./App.vue";
 import router from "./router";
 import "element-plus/dist/index.css";
 import ElementPlus from "element-plus";
 import { createPinia } from "pinia";
 
-
-
 createApp(App).use(router).use(createPinia()).use(ElementPlus).mount("#app");

+ 31 - 8
src/views/horiScreen/index.vue

@@ -1,10 +1,8 @@
 <template>
     <div class="horizontalScreen">
         <div class="bg">
-            <img
-                src="@/assets/image/horImg/hor_big_bg.png"
-                style="display: none"
-            />
+            <img class="bgUp" src="@/assets/image/horImg/background_up.png" />
+            <img class="bgBuild" src="@/assets/image/horImg/background.png" />
         </div>
         <div class="container">
             <div class="hor-head">
@@ -138,10 +136,35 @@ export default {
         right: 0;
         bottom: 0;
         overflow: hidden;
-        background: #070a25;
-        img {
+        .bgUp {
+            position: absolute;
+            top: 0;
+            left: 0;
             width: 100%;
             height: 100%;
+            z-index: -2;
+        }
+        .bgBuild {
+            position: absolute;
+            top: -409px;
+            left: 0;
+            width: 3100px;
+            height: 2100px;
+            z-index: -4;
+            animation: mymove 60s linear infinite alternate;
+            -webkit-animation: mymove 60s linear infinite alternate;
+        }
+        @keyframes mymove {
+            from {
+                left: 0px;
+            }
+            to {
+                left: -900px;
+            }
+        }
+        img {
+            // width: 100%;
+            // height: 100%;
         }
     }
     .hor-head {
@@ -167,12 +190,12 @@ export default {
             .bottom-left {
                 width: 36%;
                 height: 100%;
-                background: rgba(149, 162, 194, 0.1);
+                background: rgba(149, 162, 194, 0.2);
             }
             .bottom-right {
                 width: 64%;
                 height: 100%;
-                background: rgba(149, 162, 194, 0.1);
+                background: rgba(149, 162, 194, 0.2);
             }
         }
     }

+ 30 - 4
src/views/verScreen/index.vue

@@ -2,9 +2,10 @@
     <div class="verticalWrap">
         <div class="bg">
             <img
-                src="@/assets/image/horImg/hor_big_bg.png"
-                style="display: none"
+                class="bgUp"
+                src="@/assets/image/horImg/background_up_ver.png"
             />
+            <img class="bgBuild" src="@/assets/image/horImg/background.png" />
         </div>
         <div class="container">
             <div class="hor-head">
@@ -119,10 +120,35 @@ export default defineComponent({
         right: 0;
         bottom: 0;
         overflow: hidden;
-        background: #070a25;
-        img {
+        .bgUp {
+            position: absolute;
+            top: 0;
+            left: 0;
             width: 100%;
             height: 100%;
+            z-index: -2;
+        }
+        .bgBuild {
+            position: absolute;
+            top: -409px;
+            left: 0;
+            width: 3100px;
+            height: 2100px;
+            z-index: -4;
+            animation: mymove 60s linear infinite alternate;
+            -webkit-animation: mymove 60s linear infinite alternate;
+        }
+        @keyframes mymove {
+            from {
+                left: 0px;
+            }
+            to {
+                left: -900px;
+            }
+        }
+        img {
+            // width: 100%;
+            // height: 100%;
         }
     }
     .hor-head {

+ 11 - 0
vite.config.ts

@@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue";
 import { resolve } from "path";
 import fs from "fs";
 import dotenv from "dotenv";
+import postCssPxToRem from "postcss-pxtorem";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -17,6 +18,16 @@ export default defineConfig(({ mode }) => {
         build: {
             outDir: "dist/sgdaping",
         },
+        css: {
+            postcss: {
+                plugins: [
+                    postCssPxToRem({
+                        rootValue: 210, // 1rem的大小
+                        propList: ["*"], // 需要转换的属性,这里选择全部都进行转换
+                    }),
+                ],
+            },
+        },
         server: {
             port: 3000,
             open: true,