更新图片压缩 弹窗自适应

src/plugin/modalFrame/modalFrame.vue

@@ -7,7 +7,7 @@
    <transition name="bounceModalFrame" @afterLeave="unmount">
       <div v-show="show" class="modalFrame" :class="props.className" @click="handleMaskClose">
          <div class="animationBox">
-            <div class="modalFrameBox" :style="modalFrameStyle" @click.stop>
+            <div ref="modalFrameBoxDom" class="modalFrameBox" :style="modalFrameStyle" @click.stop>
                <div ref="modalFrameTitleDom" class="modalFrameTitle" :class="{ noMove: !props.draggable }">
                   <span>{{ props.title }}</span>
                   <el-icon class="icon" @click="close"><Close /></el-icon>
@@ -33,7 +33,7 @@
 <script setup lang="ts">
 import { Close } from "@element-plus/icons-vue"
 import { addClass, removeClass } from "@/libs/tools"
-import { ref, computed, onMounted, nextTick, DefineComponent, ComponentPublicInstance, App } from "vue"
+import { ref, computed, onMounted, DefineComponent, ComponentPublicInstance, App } from "vue"
 
 interface modalFrameDataType {
    // eslint-disable-next-line @typescript-eslint/ban-types
@@ -71,6 +71,7 @@ const show = ref(false) //控制动画显示隐藏
 const vm = ref<ComponentPublicInstance>()
 const vmApp = ref<App<Element>>()
 const modalFrameTitleDom = ref<HTMLDivElement>()
+const modalFrameBoxDom = ref<HTMLDivElement>()
 const templateModal = ref<ComponentPublicInstance>()
 //计算按钮是否显示
 const filterBtnShow = computed(() => {
@@ -111,14 +112,12 @@ function computePos(type: "width" | "height", value: number | string) {
 }
 onMounted(() => {
    addClass(bodyDom, name)
-   props.draggable &&
-      nextTick(() => {
-         drag(modalFrameTitleDom.value!)
-      })
+   props.draggable && drag(modalFrameTitleDom.value!)
+   window.addEventListener("resize", refreshPos)
 })
 function drag(el: HTMLElement) {
    function mousedown(e: MouseEvent) {
-      const parentElement = el.parentElement!
+      const parentElement = modalFrameBoxDom.value!
       const parentElementRect = parentElement.getBoundingClientRect()
       const downX = e.clientX
       const downY = e.clientY
@@ -144,6 +143,14 @@ function drag(el: HTMLElement) {
    }
    el.addEventListener("mousedown", mousedown)
 }
+//重新计算位置 居中
+function refreshPos() {
+   const posWidth = computePos("width", props.width)
+   const posHeight = computePos("height", props.height)
+   if (modalFrameBoxDom.value) {
+      modalFrameBoxDom.value.style.transform = `translate(${posWidth.pos}px, ${posHeight.pos}px)`
+   }
+}
 //取消按钮
 function cancel() {
    if (props.onCancel) {
@@ -179,6 +186,7 @@ function remove() {
    show.value = false
 }
 function unmount() {
+   window.removeEventListener("resize", refreshPos)
    vm.value && bodyDom!.removeChild(vm.value.$el)
    vmApp.value?.unmount()
    removeClass(bodyDom, name)

src/views/homePage/homePage_gym.vue

@@ -4,23 +4,25 @@
 * @Date:2024-03-20 17:26:35
 -->
 <template>
-   <navContainer class="navContainer homePageNav" :headImg="headImg" :navs="navs">
-      <div class="homePage">
-         <ElScrollbar class="elScrollbar">
-            <div class="classTypes">
-               <div class="classType" v-for="item in classTypes" :key="item.name" @click="handleRouter(item.url)">
-                  <img :src="item.img" />
-                  <div>{{ item.name }}</div>
+   <div class="homePage">
+      <navContainer class="homePageNav" :headImg="headImg" :navs="navs">
+         <div class="homePageCon">
+            <ElScrollbar class="elScrollbar">
+               <div class="classTypes">
+                  <div class="classType" v-for="item in classTypes" :key="item.name" @click="handleRouter(item.url)">
+                     <img :src="item.img" />
+                     <div>{{ item.name }}</div>
+                  </div>
                </div>
-            </div>
-            <div class="courseBoard">
-               <div class="details">
-                  <el-empty class="empty" :image="require('@/img/layout/empty1.png')" description="您还没有待上课程哦～" />
+               <div class="courseBoard">
+                  <div class="details">
+                     <el-empty class="empty" :image="require('@/img/layout/empty1.png')" description="您还没有待上课程哦～" />
+                  </div>
                </div>
-            </div>
-         </ElScrollbar>
-      </div>
-   </navContainer>
+            </ElScrollbar>
+         </div>
+      </navContainer>
+   </div>
 </template>
 
 <script setup lang="ts">
@@ -82,94 +84,100 @@ function handleRouter(url?: string) {
 }
 </script>
 <style lang="scss" scoped>
-.navContainer.homePageNav :deep(.navCon) {
-   .navImg {
-      margin-left: 5rem;
-      > img {
-         width: 91px;
-         height: 92px;
-         top: 70%;
-      }
-   }
-   .nav {
-      font-size: 28px;
-      font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
-      &:last-child {
-         margin-right: 30px;
-      }
-   }
-}
 .homePage {
    width: 100%;
    height: 100%;
-   & > :deep(.elScrollbar) {
-      .el-scrollbar__view {
-         width: 100%;
-         display: flex;
-         padding: 5rem 5rem 0;
-      }
-      .el-scrollbar__wrap {
-         overflow-x: hidden;
-      }
-      .el-scrollbar__bar.is-vertical {
-         width: 4px;
-         right: 0;
-      }
-   }
-   .classTypes {
-      flex-grow: 1;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      height: 72.9rem;
-      align-content: space-between;
-      .classType {
-         background: #feffff;
-         box-shadow: 0px 0.2rem 1.4rem 0 #f1e3cc;
-         border-radius: 3.4rem;
-         width: 36rem;
-         height: 35rem;
-         display: flex;
-         justify-content: center;
-         align-items: center;
-         flex-direction: column;
-         cursor: pointer;
-         padding: 4.4rem 5.3rem;
-         &:hover {
-            transform: scale(1.02);
-            box-shadow: 0px 0.2rem 1.4rem 0px #e4d7c2;
+   .homePageNav {
+      &:deep(.navCon) {
+         .navImg {
+            margin-left: 5rem;
+            > img {
+               width: 91px;
+               height: 92px;
+               top: 70%;
+            }
          }
-         > div {
-            margin-top: 1rem;
+         .nav {
+            font-size: 28px;
             font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
-            font-weight: bold;
-            font-size: 2.8rem;
-            color: #393939;
+            &:last-child {
+               margin-right: 30px;
+            }
          }
-         > img {
+      }
+   }
+   .homePageCon {
+      width: 100%;
+      height: 100%;
+      & > :deep(.elScrollbar) {
+         .el-scrollbar__view {
             width: 100%;
+            display: flex;
+            padding: 5rem 5rem 0;
+         }
+         .el-scrollbar__wrap {
+            overflow-x: hidden;
+         }
+         .el-scrollbar__bar.is-vertical {
+            width: 4px;
+            right: 0;
          }
       }
-   }
-   .courseBoard {
-      flex-shrink: 0;
-      margin-left: 5rem;
-      margin-top: -3.5rem;
-      width: 57.2rem;
-      height: 76.4rem;
-      background: url("@/img/homePage/bg.png") no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      .details {
-         width: 100%;
-         position: absolute;
+      .classTypes {
+         flex-grow: 1;
          display: flex;
-         justify-content: center;
-         align-items: center;
-         top: 24.8rem;
-         :deep(.empty) {
-            .el-empty__image {
-               width: 36rem;
+         flex-wrap: wrap;
+         justify-content: space-between;
+         height: 72.9rem;
+         align-content: space-between;
+         .classType {
+            background: #feffff;
+            box-shadow: 0px 0.2rem 1.4rem 0 #f1e3cc;
+            border-radius: 3.4rem;
+            width: 36rem;
+            height: 35rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            cursor: pointer;
+            padding: 4.4rem 5.3rem;
+            &:hover {
+               transform: scale(1.02);
+               box-shadow: 0px 0.2rem 1.4rem 0px #e4d7c2;
+            }
+            > div {
+               margin-top: 1rem;
+               font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
+               font-weight: bold;
+               font-size: 2.8rem;
+               color: #393939;
+            }
+            > img {
+               width: 100%;
+            }
+         }
+      }
+      .courseBoard {
+         flex-shrink: 0;
+         margin-left: 5rem;
+         margin-top: -3.5rem;
+         width: 57.2rem;
+         height: 76.4rem;
+         background: url("@/img/homePage/bg.png") no-repeat;
+         background-size: 100% 100%;
+         position: relative;
+         .details {
+            width: 100%;
+            position: absolute;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            top: 24.8rem;
+            :deep(.empty) {
+               .el-empty__image {
+                  width: 36rem;
+               }
             }
          }
       }

src/views/homePage/homePage_gyt.vue

@@ -4,23 +4,25 @@
 * @Date:2024-03-20 17:26:35
 -->
 <template>
-   <navContainer class="navContainer homePageNav" :headImg="headImg" :navs="navs">
-      <div class="homePage">
-         <ElScrollbar class="elScrollbar">
-            <div class="classTypes">
-               <div class="classType" v-for="item in classTypes" :key="item.name" @click="handleRouter(item.url)">
-                  <img :src="item.img" />
-                  <div>{{ item.name }}</div>
+   <div class="homePage">
+      <navContainer class="homePageNav" :headImg="headImg" :navs="navs">
+         <div class="homePageCon">
+            <ElScrollbar class="elScrollbar">
+               <div class="classTypes">
+                  <div class="classType" v-for="item in classTypes" :key="item.name" @click="handleRouter(item.url)">
+                     <img :src="item.img" />
+                     <div>{{ item.name }}</div>
+                  </div>
                </div>
-            </div>
-            <div class="courseBoard">
-               <div class="details">
-                  <el-empty class="empty" :image="require('@/img/layout/empty1.png')" description="您还没有待上课程哦～" />
+               <div class="courseBoard">
+                  <div class="details">
+                     <el-empty class="empty" :image="require('@/img/layout/empty1.png')" description="您还没有待上课程哦～" />
+                  </div>
                </div>
-            </div>
-         </ElScrollbar>
-      </div>
-   </navContainer>
+            </ElScrollbar>
+         </div>
+      </navContainer>
+   </div>
 </template>
 
 <script setup lang="ts">
@@ -83,94 +85,100 @@ function handleRouter(url?: string) {
 </script>
 
 <style lang="scss" scoped>
-.navContainer.homePageNav :deep(.navCon) {
-   .navImg {
-      margin-left: 5rem;
-      > img {
-         width: 91px;
-         height: 92px;
-         top: 70%;
-      }
-   }
-   .nav {
-      font-size: 28px;
-      font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
-      &:last-child {
-         margin-right: 30px;
-      }
-   }
-}
 .homePage {
    width: 100%;
    height: 100%;
-   & > :deep(.elScrollbar) {
-      .el-scrollbar__view {
-         width: 100%;
-         display: flex;
-         padding: 5rem 5rem 0;
-      }
-      .el-scrollbar__wrap {
-         overflow-x: hidden;
-      }
-      .el-scrollbar__bar.is-vertical {
-         width: 4px;
-         right: 0;
-      }
-   }
-   .classTypes {
-      flex-grow: 1;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      height: 72.9rem;
-      align-content: space-between;
-      .classType {
-         background: #feffff;
-         box-shadow: 0px 0.2rem 1.4rem 0 #f1e3cc;
-         border-radius: 3.4rem;
-         width: 36rem;
-         height: 35rem;
-         display: flex;
-         justify-content: center;
-         align-items: center;
-         flex-direction: column;
-         cursor: pointer;
-         padding: 4.4rem 5.3rem;
-         &:hover {
-            transform: scale(1.02);
-            box-shadow: 0px 0.2rem 1.4rem 0px #e4d7c2;
+   .homePageNav {
+      &:deep(.navCon) {
+         .navImg {
+            margin-left: 5rem;
+            > img {
+               width: 91px;
+               height: 92px;
+               top: 70%;
+            }
          }
-         > div {
-            margin-top: 1rem;
+         .nav {
+            font-size: 28px;
             font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
-            font-weight: bold;
-            font-size: 2.8rem;
-            color: #393939;
+            &:last-child {
+               margin-right: 30px;
+            }
          }
-         > img {
+      }
+   }
+   .homePageCon {
+      width: 100%;
+      height: 100%;
+      & > :deep(.elScrollbar) {
+         .el-scrollbar__view {
             width: 100%;
+            display: flex;
+            padding: 5rem 5rem 0;
+         }
+         .el-scrollbar__wrap {
+            overflow-x: hidden;
+         }
+         .el-scrollbar__bar.is-vertical {
+            width: 4px;
+            right: 0;
          }
       }
-   }
-   .courseBoard {
-      flex-shrink: 0;
-      margin-left: 5rem;
-      margin-top: -3.5rem;
-      width: 57.2rem;
-      height: 76.4rem;
-      background: url("@/img/homePage/bg.png") no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      .details {
-         width: 100%;
-         position: absolute;
+      .classTypes {
+         flex-grow: 1;
          display: flex;
-         justify-content: center;
-         align-items: center;
-         top: 24.8rem;
-         :deep(.empty) {
-            .el-empty__image {
-               width: 36rem;
+         flex-wrap: wrap;
+         justify-content: space-between;
+         height: 72.9rem;
+         align-content: space-between;
+         .classType {
+            background: #feffff;
+            box-shadow: 0px 0.2rem 1.4rem 0 #f1e3cc;
+            border-radius: 3.4rem;
+            width: 36rem;
+            height: 35rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            cursor: pointer;
+            padding: 4.4rem 5.3rem;
+            &:hover {
+               transform: scale(1.02);
+               box-shadow: 0px 0.2rem 1.4rem 0px #e4d7c2;
+            }
+            > div {
+               margin-top: 1rem;
+               font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
+               font-weight: bold;
+               font-size: 2.8rem;
+               color: #393939;
+            }
+            > img {
+               width: 100%;
+            }
+         }
+      }
+      .courseBoard {
+         flex-shrink: 0;
+         margin-left: 5rem;
+         margin-top: -3.5rem;
+         width: 57.2rem;
+         height: 76.4rem;
+         background: url("@/img/homePage/bg.png") no-repeat;
+         background-size: 100% 100%;
+         position: relative;
+         .details {
+            width: 100%;
+            position: absolute;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            top: 24.8rem;
+            :deep(.empty) {
+               .el-empty__image {
+                  width: 36rem;
+               }
             }
          }
       }