页面兼容j加上rem 弹窗兼容rem

package.json

@@ -43,6 +43,7 @@
       "eslint-config-prettier": "^8.3.0",
       "eslint-plugin-prettier": "^4.0.0",
       "eslint-plugin-vue": "^8.0.3",
+      "postcss-pxtorem": "^6.1.0",
       "prettier": "^2.4.1",
       "sass": "^1.32.7",
       "sass-loader": "^12.0.0",

src/assets/elementTheme.scss

@@ -22,7 +22,7 @@
 
 .el-empty .el-empty__description p {
    font-weight: 400;
-   font-size: 2.2rem;
+   font-size: 22px;
    color: #aaaaaa;
 }
 

src/components/ellipsisScroll/ellipsisScroll.vue

@@ -44,19 +44,15 @@ function handleLeaveScroll() {
 </script>
 
 <style lang="scss" scoped>
-.xx {
-   width: 100%;
-}
 .ellipsisScroll {
    width: 100%;
-   display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    &.isScroll {
       &:hover {
          width: auto;
-         overflow: visible;
+         overflow: initial;
          animation: 3s roll linear infinite normal;
       }
       @keyframes roll {

src/hooks/useDialogConfirm/dialogConfirm.vue

@@ -110,17 +110,18 @@ function ok() {
 }
 </style>
 <style lang="scss">
-.modalFrame.useDialogConfirm {
-   --modalFrameTitHeight: 0px !important;
-   .modalFrameTitle {
-      display: none !important;
-   }
+.h-modalFrame.useDialogConfirm {
+   /* prettier-ignore */
+   --modalFrameTitHeight: 0PX;
    .modalFrameBox {
-      background: linear-gradient(180deg, #fdfef2 0%, #fdf6de 100%) !important;
-      box-shadow: 0px 5px 0px 0px #ca8e2d, 0px 7px 10px 0px #6e6e6e !important;
-      border-radius: 20px !important;
-      border: 8px solid #ffdd98 !important;
-      position: relative !important;
+      background: linear-gradient(180deg, #fdfef2 0%, #fdf6de 100%);
+      box-shadow: 0px 5px 0px 0px #ca8e2d, 0px 7px 10px 0px #6e6e6e;
+      border-radius: 20px;
+      border: 8px solid #ffdd98;
+      position: relative;
+      .modalFrameTitle {
+         display: none;
+      }
    }
 }
 </style>

src/libs/rem.ts

@@ -1,9 +1,12 @@
-const baseWidth = 1920 // 设计图宽度
-const baseSize = 10 //  rem 比例
+export const baseWidth = 1920 // 设计图宽度
+export const baseSize = 18 //  rem 比例
+export let size = baseSize
+const minWidth = 680 //  最小缩放比例
 const doc = document.documentElement
 function refreshRem() {
    const width = doc.getBoundingClientRect().width
-   doc.style.fontSize = baseSize * (width / baseWidth) + "px"
+   size = baseSize * ((width > minWidth ? width : minWidth) / baseWidth)
+   doc.style.fontSize = size + "px"
 }
 refreshRem()
 window.addEventListener("resize", refreshRem)

src/plugin/loadingBar/loadingBar.vue

@@ -4,7 +4,7 @@
 * @Date:2022-05-23 15:33:04
 -->
 <template>
-   <div v-show="loadingBarData.show" class="loading-bar">
+   <div v-show="loadingBarData.show" class="h-loading-bar">
       <div class="loading-bar-content">
          <img src="./loading.gif" />
          <span>{{ loadingBarData.text }}</span>
@@ -21,7 +21,7 @@ const loadingBarData = shallowReactive({
    show: false
 })
 const body = document.querySelector("body"),
-   name = "loadingBarBody",
+   name = "h-loadingBarBody",
    defaultText = "正在拼命为您加载中..."
 /** 显示或关闭加载条 */
 const loading = (isShow: boolean, text?: string) => {
@@ -43,7 +43,7 @@ export default defineComponent({
          show: false
       })
       const body = document.querySelector("body"),
-         name = "loadingBarBody",
+         name = "h-loadingBarBody",
          defaultText = "正在加载中..."
       /** 显示或关闭加载条 */
       const loading = (isShow: boolean, text?: string) => {
@@ -58,13 +58,12 @@ export default defineComponent({
    }
 })
 </script>
+<!-- 取消scoped 减少属性权重  外部添加class可以修改里面的样式 -->
 <style lang="scss">
-body.loadingBarBody {
+body.h-loadingBarBody {
    overflow: hidden;
 }
-</style>
-<style lang="scss" scoped>
-.loading-bar {
+.h-loading-bar {
    position: fixed;
    top: 0;
    left: 0;

src/plugin/modalFrame/modalFrame.scss

@@ -45,7 +45,7 @@
       transform: translate(0, -30px);
    }
 }
-.modalFrame {
+.h-modalFrame {
    --modalFrameTitHeight: 40px;
    --modalFrameBtnHeight: 50px;
    position: fixed;

src/plugin/modalFrame/modalFrame.vue

@@ -5,7 +5,7 @@
 -->
 <template>
    <transition name="bounceModalFrame" @afterLeave="unmount">
-      <div v-show="show" class="modalFrame" :class="props.className" @click="handleMaskClose">
+      <div v-show="show" class="h-modalFrame" :class="props.className" @click="handleMaskClose">
          <div class="animationBox">
             <div ref="modalFrameBoxDom" class="modalFrameBox" :style="modalFrameStyle" @click.stop>
                <div ref="modalFrameTitleDom" class="modalFrameTitle" :class="{ noMove: !props.draggable }">
@@ -13,7 +13,6 @@
                   <el-icon class="icon" @click="close"><Close /></el-icon>
                </div>
                <div class="frameBox" :class="{ frameBtnNone: !filterBtnShow }">
-                  <!-- 这里有个异常bug，系统默认上传文件取消时候，不知道为啥会触发cancel，所以这里将cancel,close,ok改为onCancel,onClose,onOk -->
                   <component :is="props.template" ref="templateModal" @onCancel="cancel" @onClose="close" @onOk="ok" :modal-data="props.modalData" />
                </div>
                <div v-if="filterBtnShow" class="frameBtn">
@@ -34,6 +33,7 @@
 import { Close } from "@element-plus/icons-vue"
 import { addClass, removeClass } from "@/libs/tools"
 import { ref, computed, onMounted, DefineComponent, ComponentPublicInstance, App } from "vue"
+import { baseSize, baseWidth, size } from "@/libs/rem"
 
 interface modalFrameDataType {
    // eslint-disable-next-line @typescript-eslint/ban-types
@@ -62,11 +62,11 @@ const props = withDefaults(defineProps<modalFrameDataType>(), {
    btnShow: () => [true, true], //是否显示按钮，[true,false],可以控制按钮的显示隐藏
    btnTit: () => ["确认", "取消"], // 按钮的文字，["确认"]
    maskClose: false, //点击遮罩关闭
-   draggable: true //是否可以拖动
+   draggable: false //是否可以拖动
 })
 
 const bodyDom = document.querySelector("body"),
-   name = "modalFrameBody"
+   name = "h-modalFrameBody"
 const show = ref(false) //控制动画显示隐藏
 const vm = ref<ComponentPublicInstance>()
 const vmApp = ref<App<Element>>()
@@ -84,7 +84,7 @@ const modalFrameStyle = computed(() => {
       width = convertValue(props.width)
    const posWidth = computePos("width", width)
    const posHeight = computePos("height", height)
-   return `transform:translate(${posWidth.pos}px,${posHeight.pos}px);width:${posWidth.unit};height:${posHeight.unit};`
+   return `transform:translate(${posWidth.pos}rem,${posHeight.pos}px);width:${posWidth.unit};height:${posHeight.unit};`
 })
 
 function convertValue(strNum: string | number) {
@@ -99,15 +99,19 @@ function convertValue(strNum: string | number) {
    }
 }
 function computePos(type: "width" | "height", value: number | string) {
-   const clientNum = document.documentElement[type == "width" ? "clientWidth" : "clientHeight"]
+   //const clientNum = document.documentElement[type == "width" ? "clientWidth" : "clientHeight"]
+   const clientNum = type == "width" ? baseWidth : document.documentElement.clientHeight
    return typeof value === "string"
       ? {
-           pos: (clientNum - (parseInt(value) / 100) * clientNum) / 2,
+           pos:
+              type == "width"
+                 ? ((clientNum - (parseInt(value) / 100) * clientNum) / 2 / baseSize).toFixed(5)
+                 : (clientNum - (parseInt(value) / 100) * clientNum) / 2,
            unit: value
         }
       : {
-           pos: (clientNum - value) / 2,
-           unit: value + "px"
+           pos: type == "width" ? ((clientNum - value) / 2 / baseSize).toFixed(5) : (clientNum - value * (size / baseSize)) / 2,
+           unit: (value / baseSize).toFixed(5) + "rem"
         }
 }
 onMounted(() => {
@@ -115,6 +119,8 @@ onMounted(() => {
    props.draggable && drag(modalFrameTitleDom.value!)
    window.addEventListener("resize", refreshPos)
 })
+
+/* 拖拽还没有兼容rem */
 function drag(el: HTMLElement) {
    function mousedown(e: MouseEvent) {
       const parentElement = modalFrameBoxDom.value!
@@ -148,7 +154,7 @@ 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)`
+      modalFrameBoxDom.value.style.transform = `translate(${posWidth.pos}rem, ${posHeight.pos}px)`
    }
 }
 //取消按钮
@@ -193,12 +199,10 @@ function unmount() {
 }
 defineExpose({ vm, vmApp, remove, show })
 </script>
-
-<style lang="scss" scoped>
-@import "./modalFrame.scss";
-</style>
+<!-- 取消scoped 减少属性权重  外部添加class可以修改里面的样式 -->
 <style lang="scss">
-body.modalFrameBody {
+@import "./modalFrame.scss";
+body.h-modalFrameBody {
    overflow: hidden;
 }
 </style>

src/views/cloudTextbooks/chooseDialog.vue

@@ -231,15 +231,16 @@ function handlePaly(id: string) {
 }
 </style>
 <style lang="scss">
-.modalFrame.chooseDialog {
-   --modalFrameTitHeight: 0px !important;
-   .modalFrameTitle {
-      display: none !important;
-   }
+.h-modalFrame.chooseDialog {
+   /* prettier-ignore */
+   --modalFrameTitHeight: 0PX;
    .modalFrameBox {
-      background: url("@/img/cloudTextbooks/bg.png") no-repeat !important;
-      background-size: cover !important;
-      box-shadow: none !important;
+      background: url("@/img/cloudTextbooks/bg.png") no-repeat;
+      background-size: cover;
+      box-shadow: none;
+      .modalFrameTitle {
+         display: none;
+      }
    }
 }
 </style>

src/views/cloudTextbooks/cloudTextbooks.vue

@@ -22,7 +22,6 @@
                   @focus="handleInputFocus"
                   @blur="handleInputBlur"
                   v-model="queryStr"
-                  style="max-width: 600px"
                   placeholder="请输入教材名称"
                   clearable
                   class="iptSelect"
@@ -283,7 +282,6 @@ function handleClick(id: string) {
          flex-direction: column;
          align-items: center;
          padding-top: 10px;
-         min-width: 1240px;
          .bookshelf {
             width: 1500px;
             padding: 0 116px;
@@ -349,6 +347,7 @@ function handleClick(id: string) {
                      font-weight: 400;
                      font-size: 16px;
                      color: #6b3c2d;
+                     white-space: nowrap;
                   }
                }
                .name {
@@ -360,21 +359,6 @@ function handleClick(id: string) {
                }
             }
          }
-         @media screen and (max-width: 1600px) {
-            .bookshelf {
-               width: 1400px;
-            }
-         }
-         @media screen and (max-width: 1500px) {
-            .bookshelf {
-               width: 1300px;
-            }
-         }
-         @media screen and (max-width: 1400px) {
-            .bookshelf {
-               width: 1200px;
-            }
-         }
       }
    }
    .empty {

src/views/homePage/homePage_gym.vue

@@ -4,7 +4,7 @@
 * @Date:2024-03-20 17:26:35
 -->
 <template>
-   <navContainer class="navContainer homePageNav" :headImg="headImg" :navs="navs">
+   <navContainer class="homePageNav" :headImg="headImg" :navs="navs">
       <div class="homePage">
          <ElScrollbar class="elScrollbar">
             <div class="classTypes">
@@ -82,10 +82,10 @@ function handleRouter(url?: string) {
 }
 </script>
 <style lang="scss" scoped>
-.navContainer.homePageNav {
+.homePageNav.navContainer {
    &:deep(.navCon) {
       .navImg {
-         margin-left: 5rem;
+         margin-left: 50px;
          > img {
             width: 91px;
             height: 92px;
@@ -108,7 +108,7 @@ function handleRouter(url?: string) {
       .el-scrollbar__view {
          width: 100%;
          display: flex;
-         padding: 5rem 5rem 0;
+         padding: 50px 50px 0;
       }
       .el-scrollbar__wrap {
          overflow-x: hidden;
@@ -123,29 +123,29 @@ function handleRouter(url?: string) {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
-      height: 72.9rem;
+      height: 729px;
       align-content: space-between;
       .classType {
          background: #feffff;
-         box-shadow: 0px 0.2rem 1.4rem 0 #f1e3cc;
-         border-radius: 3.4rem;
-         width: 36rem;
-         height: 35rem;
+         box-shadow: 0px 2px 14px 0 #f1e3cc;
+         border-radius: 34px;
+         width: 360px;
+         height: 350px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          cursor: pointer;
-         padding: 4.4rem 5.3rem;
+         padding: 44px 53px;
          &:hover {
             transform: scale(1.02);
-            box-shadow: 0px 0.2rem 1.4rem 0px #e4d7c2;
+            box-shadow: 0px 2px 14px 0px #e4d7c2;
          }
          > div {
-            margin-top: 1rem;
+            margin-top: 10px;
             font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
             font-weight: bold;
-            font-size: 2.8rem;
+            font-size: 28px;
             color: #393939;
          }
          > img {
@@ -155,10 +155,10 @@ function handleRouter(url?: string) {
    }
    .courseBoard {
       flex-shrink: 0;
-      margin-left: 5rem;
-      margin-top: -3.5rem;
-      width: 57.2rem;
-      height: 76.4rem;
+      margin-left: 50px;
+      margin-top: -35px;
+      width: 572px;
+      height: 764px;
       background: url("@/img/homePage/bg.png") no-repeat;
       background-size: 100% 100%;
       position: relative;
@@ -168,10 +168,10 @@ function handleRouter(url?: string) {
          display: flex;
          justify-content: center;
          align-items: center;
-         top: 24.8rem;
+         top: 248px;
          :deep(.empty) {
             .el-empty__image {
-               width: 36rem;
+               width: 360px;
             }
          }
       }

src/views/homePage/homePage_gyt.vue

@@ -4,7 +4,7 @@
 * @Date:2024-03-20 17:26:35
 -->
 <template>
-   <navContainer class="navContainer homePageNav" :headImg="headImg" :navs="navs">
+   <navContainer class="homePageNav" :headImg="headImg" :navs="navs">
       <div class="homePage">
          <ElScrollbar class="elScrollbar">
             <div class="classTypes">
@@ -83,10 +83,10 @@ function handleRouter(url?: string) {
 </script>
 
 <style lang="scss" scoped>
-.navContainer.homePageNav {
+.homePageNav.navContainer {
    &:deep(.navCon) {
       .navImg {
-         margin-left: 5rem;
+         margin-left: 50px;
          > img {
             width: 91px;
             height: 92px;
@@ -109,7 +109,7 @@ function handleRouter(url?: string) {
       .el-scrollbar__view {
          width: 100%;
          display: flex;
-         padding: 5rem 5rem 0;
+         padding: 50px 50px 0;
       }
       .el-scrollbar__wrap {
          overflow-x: hidden;
@@ -124,29 +124,29 @@ function handleRouter(url?: string) {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
-      height: 72.9rem;
+      height: 729px;
       align-content: space-between;
       .classType {
          background: #feffff;
-         box-shadow: 0px 0.2rem 1.4rem 0 #f1e3cc;
-         border-radius: 3.4rem;
-         width: 36rem;
-         height: 35rem;
+         box-shadow: 0px 2px 14px 0 #f1e3cc;
+         border-radius: 34px;
+         width: 360px;
+         height: 350px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          cursor: pointer;
-         padding: 4.4rem 5.3rem;
+         padding: 44px 53px;
          &:hover {
             transform: scale(1.02);
-            box-shadow: 0px 0.2rem 1.4rem 0px #e4d7c2;
+            box-shadow: 0px 2px 14px 0px #e4d7c2;
          }
          > div {
-            margin-top: 1rem;
+            margin-top: 10px;
             font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
             font-weight: bold;
-            font-size: 2.8rem;
+            font-size: 28px;
             color: #393939;
          }
          > img {
@@ -156,10 +156,10 @@ function handleRouter(url?: string) {
    }
    .courseBoard {
       flex-shrink: 0;
-      margin-left: 5rem;
-      margin-top: -3.5rem;
-      width: 57.2rem;
-      height: 76.4rem;
+      margin-left: 50px;
+      margin-top: -35px;
+      width: 572px;
+      height: 764px;
       background: url("@/img/homePage/bg.png") no-repeat;
       background-size: 100% 100%;
       position: relative;
@@ -169,10 +169,10 @@ function handleRouter(url?: string) {
          display: flex;
          justify-content: center;
          align-items: center;
-         top: 24.8rem;
+         top: 248px;
          :deep(.empty) {
             .el-empty__image {
-               width: 36rem;
+               width: 360px;
             }
          }
       }

src/viewsframe/layout/layout.vue

@@ -105,8 +105,6 @@ function handleLogout() {
          .name {
             margin-left: 6px;
             font-size: 18px;
-            height: 18px;
-            line-height: 18px;
             color: #244b55;
             font-weight: 500;
             width: 56px;

src/viewsframe/login/login.vue

@@ -17,7 +17,7 @@
             <img v-show="qrcodeStatus === 2" class="scanned" src="@/img/loginErr/scanned.png" />
             <div v-show="qrcodeStatus !== 2" v-loading="!uuid" class="qrcodeBox">
                <div class="qrCodeCon" :class="{ refresh: qrcodeStatus === 3 }">
-                  <qrcode-vue class="qrCode" v-if="uuid" :value="qrcode" :size="164" />
+                  <qrcode-vue class="qrCode" v-if="uuid" :value="qrcode" />
                   <img @click="handleRefresh" src="@/img/loginErr/refresh.png" />
                </div>
             </div>
@@ -105,7 +105,6 @@ function handleRefresh() {
    width: 100%;
    height: 100%;
    min-height: 640px;
-   min-width: 1280px;
    background: url("@/img/loginErr/bg.png") no-repeat;
    background-size: cover;
    display: flex;
@@ -155,7 +154,13 @@ function handleRefresh() {
                   display: block;
                }
             }
+            .qrCode {
+               width: 164px !important;
+               height: 164px !important;
+            }
             > img {
+               width: 68px;
+               height: 68px;
                display: none;
             }
          }

vue.config.js

@@ -7,6 +7,26 @@ module.exports = defineConfig({
          //全局变量
          sass: {
             additionalData: `@use "@/assets/variables.scss" as *;`
+         },
+         postcss: {
+            postcssOptions: {
+               plugins: [
+                  require("postcss-pxtorem")({
+                     rootValue: 18, // 换算的基数
+                     selectorBlackList: ["-nopx"], // 忽略转换正则匹配项 列入一些ui库, ['.el'] 就是忽略elementUI库
+                     propList: ["*"],
+                     exclude: file => {
+                        if (file.includes("coursewarePlay")) {
+                           return true
+                        }
+                        if (file.includes("normalize")) {
+                           return true
+                        }
+                        return false
+                     }
+                  })
+               ]
+            }
          }
       }
    },

yarn.lock

@@ -5372,6 +5372,11 @@ postcss-ordered-values@^5.1.3:
     cssnano-utils "^3.1.0"
     postcss-value-parser "^4.2.0"
 
+postcss-pxtorem@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz#7e6410e30426adef53bad6c4c5f00cd5f586937c"
+  integrity sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==
+
 postcss-reduce-initial@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz"