预览ui 大小

.eslintrc.cjs

@@ -5,14 +5,17 @@ module.exports = {
   },
   extends: [
     'plugin:vue/vue3-essential',
-    'standard'
+    'standard',
+    "airbnb/base",
+    "prettier"
   ],
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module'
   },
   plugins: [
-    'vue'
+    'vue',
+    'prettier'
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

components.d.ts

@@ -13,5 +13,6 @@ declare module '@vue/runtime-core' {
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Screen: typeof import('./src/components/screen.vue')['default']
   }
 }

src/components/screen.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="wrapper">
+    <div
+      class="screen"
+      :style="'width:' + width + 'px;height:' + height + 'px'"
+    >
+      <div class="content-wrap" id="screen" :style="style">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script scoped>
+export default {
+  props: {
+    designWidth: {
+      // 设计图尺寸宽
+      type: Number,
+      default: 1920,
+    },
+    designHeight: {
+      // 设计图尺寸高
+      type: Number,
+      default: 1080,
+    },
+  },
+  data() {
+    return {
+      width: 1920,
+      height: 1080,
+      style: {
+        width: `${this.designWidth}px`,
+        height: `${this.designHeight}px`,
+        transform: "scale(1)", // 默认不缩放，垂直水平居中
+      },
+    };
+  },
+  mounted() {
+    this.setScale();
+    this.onresize = this.debounce(() => this.setScale(), 100);
+    window.addEventListener("resize", this.onresize);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.onresize);
+  },
+  methods: {
+    // 防抖
+    debounce(fn, t) {
+      const delay = t || 500;
+      let timer;
+      return function () {
+        const args = arguments;
+        if (timer) {
+          clearTimeout(timer);
+        }
+        const that = this;
+        timer = setTimeout(() => {
+          timer = null;
+          fn.apply(that, args);
+        }, delay);
+      };
+    },
+
+    // 设置缩放比例
+    setScale() {
+      const scale = document.documentElement.clientWidth / this.designWidth;
+      // document.documentElement.clientWidth /
+      //   document.documentElement.clientHeight <
+      // this.designWidth / this.designHeight
+      //   ? document.documentElement.clientWidth / this.designWidth
+      //   : document.documentElement.clientHeight / this.designHeight;
+      document.querySelector("#screen").style.transform = `scale(${scale})`;
+      (this.style = {
+        width: `${this.designWidth}px`,
+        height: `${this.designHeight}px`,
+        transform: `scale(${scale})`, // 默认不缩放，垂直水平居中
+      }),
+        console.log(this.style);
+      this.width = document.documentElement.clientWidth;
+      this.height = document.documentElement.clientHeight;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" type="text/scss">
+.wrapper {
+    position: relative;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    background-color: orange;
+    width: 100vw;
+    height: 100vh;
+
+  .screen {
+    min-height: 100%;
+    overflow: auto;
+    background-size: 100% 100%;
+    
+    .content-wrap {
+      position: relative;
+      transform-origin: 0 0;
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -1,7 +1,30 @@
 <template>
-  <div class='flex light-red-bg wrapper'>
-    <el-button @click='push'>确定</el-button>
-  </div>
+  <screen class='flex content flex-col'>
+    <div class="top">22</div>
+    <div class="full-width flex">
+      <div class="box flex flex-center blod font-32" ref="content">
+        {{ width }} * {{ height }}
+      </div>
+      <div class="box flex flex-center blod font-32" ref="content">
+        {{ width }} * {{ height }}
+      </div>
+      <div class="box flex flex-center blod font-32" ref="content">
+        {{ width }} * {{ height }}
+      </div>
+    </div>
+
+    <div class="full-width flex">
+      <div class="box flex flex-center blod font-32" ref="content">
+        {{ width }} * {{ height }}
+      </div>
+      <div class="box flex flex-center blod font-32" ref="content">
+        {{ width }} * {{ height }}
+      </div>
+      <div class="box flex flex-center blod font-32" ref="content">
+        {{ width }} * {{ height }}
+      </div>
+    </div>
+  </screen>
 </template>
 
 <route>
@@ -14,15 +37,50 @@
 <script>
 import { useStore } from '../../store/user.js'
 import tokenStore from '../../store/token.js'
+import screen from '../../components/screen.vue'
 export default {
+  components:{screen},
   setup () {
     const store = useStore()
     const token = tokenStore()
     return { store, token }
   },
-  created () {
+  data() {
+    return {
+      width: '22',
+      height: '22'
+    }
+  },
+  mounted() {
+    this.init();
+    this.onresize = this.debounce(() => this.init(), 100);
+    window.addEventListener("resize", this.onresize);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.onresize);
   },
   methods: {
+    debounce(fn, t) {
+      const delay = t || 500;
+      let timer;
+      return function () {
+        const args = arguments;
+        if (timer) {
+          clearTimeout(timer);
+        }
+        const that = this;
+        timer = setTimeout(() => {
+          timer = null;
+          fn.apply(that, args);
+        }, delay);
+      };
+    },
+    init(){
+      let box = this.$refs.content.offsetWidth
+      this.width = box
+      this.height = this.$refs.content.offsetHeight
+      console.log(this.width)
+    },
     push () {
       this.$router.push({ path: '/setting', query: { id: 12, type: 'test' } })
     }
@@ -30,6 +88,21 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.top {
+  width: 100vw;
+  height: 112px;
+  background-color: blueviolet;
+}
+.content{
+  background-image: url('https://blade-data.oss-cn-hangzhou.aliyuncs.com/upload/20210724/438e867a8de106e8a17feda3f8dd4c7f.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.box {
+  width: 541.6px;
+  height: 492.8px;
+  background-size: contain;
+  background-image: url('https://blade-data.oss-cn-hangzhou.aliyuncs.com/upload/20210724/25fb5c26d01122e8cd1aaccb026a5733.png');
+}
 </style>

vite.config.js

@@ -2,7 +2,6 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
 import path from 'path'
-import postCssPxToViewport from 'postcss-px-to-viewport'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'