优化公益单位变形问题的弹窗交互方式

houtai/src/pages/A1Rule/RuleEdit/index.tsx

@@ -91,7 +91,7 @@ function RuleEdit({ id, closePage, upTableList, editMode }: Props) {
     async (values: any) => {
     
       const obj = {
-        description: "",
+        description: "每观看完一个视频可得分",
         id: 10,
         name: "观看视频",
         rtf: "",

houtai/src/pages/A1Rule/TopicSetting/index.tsx

@@ -631,7 +631,7 @@ function TopicSetting({ closeFu }: Props) {
               <Input
                 placeholder="请输入"
                 maxLength={
-                  curEdit ? (curEdit.project === "题目描述" ? 200 : 20) : 20
+                  curEdit ? (curEdit.project === "题目描述" || curEdit.project === "答案解析" ? 200 : 50) : 50
                 }
               />
             </Form.Item>

zhengquan/src/views/Home/components/unitList.vue

@@ -49,30 +49,30 @@ const handleMouseOut = () => {
   hoverIndex.value = -1
 }
 
-var timer = null as any
-
-watch(hoverIndex, (newVal: any) => {
-  const infoBoxPcDom = document.getElementById('infoBoxPc')
-  if (infoBoxPcDom) {
-    clearTimeout(timer)
-    timer = setTimeout(() => {
-      if (newVal % 7 <= 4 && newVal % 7 > 0) {
-        infoBoxPcDom.style.right = 'auto'
-        infoBoxPcDom.style.left = hoverDomRightX.value + 'px'
-      } else if (newVal % 7 == -1) {
-        isShowInfoBox.value = false
-      } else {
-        infoBoxPcDom.style.left = 'auto'
-        infoBoxPcDom.style.right = window.innerWidth - hoverDomLeftX.value + 'px'
-      }
-      if (newVal <= 7 && newVal > 0) {
-        infoBoxPcDom!.style.bottom = window.innerHeight - hoverDomBottomY.value - hoverDomBottomY.value / 4 + 'px'
-      } else if (newVal > 8) {
-        infoBoxPcDom!.style.bottom = window.innerHeight - hoverDomBottomY.value - 40 + 'px'
-      }
-      isShowInfoBox.value = true
-    }, 100)
-  }
+// var timer = null as any
+
+watch(hoverIndex, () => {
+  // const infoBoxPcDom = document.getElementById('infoBoxPc')
+  // if (infoBoxPcDom) {
+  //   clearTimeout(timer)
+  //   timer = setTimeout(() => {
+  //     if (newVal % 7 <= 4 && newVal % 7 > 0) {
+  //       infoBoxPcDom.style.right = 'auto'
+  //       infoBoxPcDom.style.left = hoverDomRightX.value + 'px'
+  //     } else if (newVal % 7 == -1) {
+  //       isShowInfoBox.value = false
+  //     } else {
+  //       infoBoxPcDom.style.left = 'auto'
+  //       infoBoxPcDom.style.right = window.innerWidth - hoverDomLeftX.value + 'px'
+  //     }
+  //     if (newVal <= 7 && newVal > 0) {
+  //       infoBoxPcDom!.style.bottom = window.innerHeight - hoverDomBottomY.value - hoverDomBottomY.value / 4 + 'px'
+  //     } else if (newVal > 8) {
+  //       infoBoxPcDom!.style.bottom = window.innerHeight - hoverDomBottomY.value - 40 + 'px'
+  //     }
+  //     isShowInfoBox.value = true
+  //   }, 100)
+  // }
 
 }, { immediate: true })
 
@@ -132,14 +132,15 @@ onMounted(() => {
 <template>
   <div class='scene-list-box'>
     <!-- 信息展示 -->
-    <div id="infoBoxPc" class="info-box" v-show="curUnit && isShowInfoBox && !browser.mobile"
-      @mousemove="isShowInfoBox = true">
-      <img class="close-icon" @click="isShowInfoBox = false" src="@/assets/images/close-icon.png" alt="">
-      <div class="info-box-top"></div>
-      <div class="info-box-bottom">
-        <div class="bottom-left">
-          <h4>{{ curUnit ? curUnit.title : '' }}</h4>
-          <div class="left-disc">{{ curUnit ? curUnit.disc : '' }}</div>
+    <div class="info-shade" v-show="curUnit && isShowInfoBox && !browser.mobile">
+      <div id="infoBoxPc" class="info-box">
+        <img class="close-icon" @click="isShowInfoBox = false" src="@/assets/images/close-icon.png" alt="">
+        <div class="info-box-top"></div>
+        <div class="info-box-bottom">
+          <div class="bottom-left">
+            <h2>{{ curUnit ? curUnit.title : '' }}</h2>
+            <div class="left-disc">{{ curUnit ? curUnit.disc : '' }}</div>
+          </div>
         </div>
       </div>
     </div>
@@ -162,9 +163,7 @@ onMounted(() => {
         <div class="list-item" v-for="(item, index) in 21" :key="index"
           @click="curUnit = store.dataAll.welfareList[startItem + item - 1], isShowInfoBox = true"
           :style="{ boxShadow: startItem + item - 1 < store.dataAll.welfareList.length ? '' : 'none' }"
-          @mouseout="handleMouseOut"
-          @mouseover="curUnit = store.dataAll.welfareList[startItem + item - 1], hoverIndex = item, console.log('悬浮单位是', item)"
-          @mousemove="handleMouseMove">
+          @mouseover="hoverIndex = item">
           <div class="list-item-con" v-if="startItem + item - 1 < store.dataAll.welfareList.length">
             <!-- 默认图片--无logo情况下显示 -->
             <div
@@ -218,117 +217,133 @@ onMounted(() => {
   z-index: 2;
   overflow: hidden;
 
-  .info-box {
-    position: absolute;
-    // top: 10%;
-    // left: 10%;
-    width: 25%;
-    height: 45%;
-    z-index: 2;
-    box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
-    border-radius: 15px 15px 0 0;
-
+  .info-shade {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.349);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-    .close-icon {
+    .info-box {
       position: absolute;
-      right: 3%;
-      top: 4%;
-      cursor: pointer;
-    }
-
-    &-top {
-      width: 100%;
-      height: 20%;
-      background: url(@/assets/images/home/info-top.png);
-      background-size: 100% 100%;
-
-
-    }
-
-    &-bottom {
-      width: 100%;
-      height: 80%;
-      background: url(@/assets/images/home/info-bottom.png);
-      background-size: 110% 110%;
-      background-position: center center;
-      padding: 20px;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-around;
-
-      .bottom-left {
-        width: 90%;
+      // top: 10%;
+      // left: 10%;
+      width: 45%;
+      height: 60%;
+      z-index: 2;
+      // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
+      border-radius: 25px 25px 0 0;
+
+      .close-icon {
+        width: 40px;
+        position: absolute;
+        right: 3%;
+        top: 4%;
+        cursor: pointer;
+      }
 
-        .left-disc {
-          font-size: 14px;
-          text-indent: 2em;
-          text-align: justify;
-          margin-top: 10px;
-          max-height: 22vh;
-          overflow: auto;
+      &-top {
+        width: 100%;
+        height: 20%;
+        background: url(@/assets/images/home/info-top.png);
+        background-size: cover;
+        background-position: center;
+        border-radius: 20px 20px 0 0;
+      }
 
-          &::-webkit-scrollbar {
-            width: 0;
+      &-bottom {
+        width: 100%;
+        height: 70%;
+        background: url(@/assets/images/home/info-bottom.png);
+        background-size: 110% 110%;
+        background-position: center center;
+        padding: 30px 20px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-around;
+
+        .bottom-left {
+          width: 90%;
+
+          .left-disc {
+            font-size: 16px;
+            text-indent: 2em;
+            text-align: justify;
+            margin-top: 10px;
+            max-height: 26vh;
+            overflow: auto;
+            line-height: 24px;
+
+            &::-webkit-scrollbar {
+              width: 0;
+            }
           }
         }
-      }
-
-      .bottom-right {
-        width: 60%;
-        height: 100%;
 
-        .swiper-vertical {
-          touch-action: none !important;
-        }
+        .bottom-right {
+          width: 60%;
+          height: 100%;
 
-        .swiper-horizontal {
-          touch-action: none !important;
-        }
+          .swiper-vertical {
+            touch-action: none !important;
+          }
 
+          .swiper-horizontal {
+            touch-action: none !important;
+          }
 
-        .swiper {
-          width: 100%;
-          height: 50%;
 
-          .swiper-wrapper {
+          .swiper {
             width: 100%;
-            height: 100%;
+            height: 50%;
 
-            .swiper-slide {
+            .swiper-wrapper {
               width: 100%;
               height: 100%;
 
-              img {
+              .swiper-slide {
                 width: 100%;
                 height: 100%;
-                object-fit: contain;
-                cursor: pointer;
-                object-fit: cover;
+
+                img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: contain;
+                  cursor: pointer;
+                  object-fit: cover;
+                }
               }
             }
-          }
 
-          .swiper-pagination {
-            width: 100%;
-            height: .2rem;
-            text-align: center;
-            position: absolute;
-            bottom: 0 !important;
-            line-height: .2rem;
-            box-sizing: border-box;
-            padding: 0 .3rem;
-            font-size: 0;
-            z-index: 1;
+            .swiper-pagination {
+              width: 100%;
+              height: .2rem;
+              text-align: center;
+              position: absolute;
+              bottom: 0 !important;
+              line-height: .2rem;
+              box-sizing: border-box;
+              padding: 0 .3rem;
+              font-size: 0;
+              z-index: 1;
+            }
           }
         }
       }
+
     }
 
   }
 
+
   .content {
     width: 96%;
-    height: 100%;
+    // height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -338,6 +353,7 @@ onMounted(() => {
     backdrop-filter: blur(10px);
     // padding: 10% 5%;
     box-sizing: border-box;
+    padding: 4% 0;
 
     .arrows-left {
       cursor: pointer;
@@ -350,7 +366,7 @@ onMounted(() => {
 
     .content-list {
       width: 80%;
-      height: 80%;
+      // height: 80%;
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
       grid-template-rows: 1fr 1fr 1fr;
@@ -358,7 +374,7 @@ onMounted(() => {
 
       .list-item {
         width: 100%;
-        height: 20vh;
+        height: 100%;
         position: relative;
         cursor: pointer;
         box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.6);
@@ -399,7 +415,7 @@ onMounted(() => {
   .line-down {
     position: absolute;
     width: 70%;
-    bottom: 15px;
+    bottom: 1%;
     cursor: pointer;
   }