upup更新

src/components/PaintingDetailBox.vue

@@ -2,6 +2,8 @@
 import { ref, onMounted, computed, onBeforeUnmount } from 'vue'
 
 import { useRoute } from 'vue-router'
+import { useWindowSize } from "@vueuse/core"
+
 
 const props = defineProps({
   idx: {
@@ -40,6 +42,9 @@ const moveLoc = ref(0)
 // 横轴左侧大盒子的宽度
 const leftBoxWidth = ref(0)
 
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+
 const mousemoveFu = (e, flag) => {
   let ev = e || event
   if (isFlag.value && isMove.value) {
@@ -265,6 +270,9 @@ onBeforeUnmount(() => {
 ::deep(.el-image-viewer__actions__inner){
   justify-content: center;
 }
+::deep(.el-image){
+  width: calc(50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+}
 .box {
   width: 100%;
   height: 100%;
@@ -279,10 +287,13 @@ onBeforeUnmount(() => {
     overflow: hidden;
     .addIcon {
       position: absolute;
-      bottom: 50px;
-      left: 50px;
+      bottom: calc(50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      left: calc(50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       cursor: pointer;
-      font-size: 30px;
+      font-size: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      .el-image{
+        width: calc(50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      }
     }
 
     // 竖大盒子
@@ -353,8 +364,8 @@ onBeforeUnmount(() => {
 
     .smImgBox {
       position: absolute;
-      bottom: 5px;
-      right: 5px;
+      bottom: calc(5px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      right: calc(5px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       background-color: rgba(0, 0, 0, 0.5);
       padding: 10px 20px;
       .smImgBoxMain {

src/components/PaintingInfoBox.vue

@@ -2,6 +2,11 @@
 import { ref, computed, onMounted, onBeforeUnmount } from "vue"
 import { useRoute } from 'vue-router'
 import { useStore } from "vuex"
+import { useWindowSize } from "@vueuse/core"
+
+
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 const store = useStore()
 
@@ -237,13 +242,13 @@ onBeforeUnmount(() => {
     white-space: nowrap;
     .top {
       width: 100%;
-      height: 65px;
+      height: calc(65px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       display: flex;
       align-items: center;
       justify-content: space-between;
       .title {
         color: #ffecb0;
-        font-size: 44px;
+        font-size: calc(44px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
         font-family: "KingHwa_OldSong";
         white-space: pre-wrap;
       }
@@ -251,24 +256,27 @@ onBeforeUnmount(() => {
         display: flex;
         align-items: center;
         color: #e1edd9;
-        font-size: 20px;
+        font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
         font-family: "KaiTi";
         cursor: pointer;
+        >img{
+          width: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+        }
       }
     }
     .line {
       width: 100%;
       height: 1px;
       background: #ffffff;
-      margin-top: 20px;
+      margin-top: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     }
     .bottom {
       width: 100%;
-      margin-top: 20px;
+      margin-top: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       height: 89%;
       overflow: auto;
-      font-size: 30px;
-      line-height: 35px;
+      font-size: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      line-height: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       padding: 10px 40px 20px 0 ;
       color: #E1EDD9;
       font-family: 'KaiTi';
@@ -277,7 +285,7 @@ onBeforeUnmount(() => {
         white-space: pre-wrap;
       }
       &::-webkit-scrollbar {
-        width: 4px;
+        width: calc(4px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       }
       /* 滚动条轨道（track）的样式 */
       &::-webkit-scrollbar-track {
@@ -287,7 +295,7 @@ onBeforeUnmount(() => {
       /* 滚动条滑块（thumb）的样式 */
       &::-webkit-scrollbar-thumb {
         background: #e1edd942; /* 滑块的背景颜色 */
-        border-radius: 50px;
+        border-radius: calc(50px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       }
     }
   }