Merge branch 'master' of http://git.ycjcjy.com/H5/wenhua818

src/components/PopUp.vue

@@ -1,20 +1,11 @@
 <template>
-  <div
-    v-if="show"
-    class="overlay"
-    @touchmove.prevent
-    @mousewheel.prevent
-    @click="onClose"
-  >
-    <div class="warp">
-      <img :src="info.image" @click.stop class="image" alt="" />
-      <div class="text" @click.stop>
+  <div v-if="show" class="overlay" @click="onClose">
+    <div class="warp" @click.stop>
+      <img :src="info.image" class="image" alt="" />
+      <div class="text" @scroll.passive="() => {}">
         {{ info.content }}
       </div>
     </div>
-
-    <!-- <div class="loader-section section-top"></div>
-    <div class="loader-section section-bottom"></div>     -->
   </div>
 </template>
 
@@ -26,31 +17,13 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
-  // onClose:()=>{}
 });
 
-// const elRef = ref();
-// const maskRef = ref();
-// const progressStyle = computed(() => ({ width: `${props.percent}%` }));
-// const visibleStyle = ref({  })
-// const onEnd = () => {
-//   visibleStyle.value = { display: 'none' }
-// }
-
-const onTouchMove = (e) => {
-  // 禁止滚动
-  e.preventDefault();
-};
 
-// watch(() => props.loading, (newVal, oldVal) => {
-//   window.console.log(show,'showshow')
-// })
 </script>
 
 <style lang="less" scoped>
-// @bg-color: #D7DDD3;
-// @tip-color: #933D33;
-// @text-color: #fff;
+
 
 .overlay {
   position: fixed;
@@ -61,23 +34,48 @@ const onTouchMove = (e) => {
   z-index: 100;
   overflow: hidden;
   background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   .warp {
     margin: 0 auto;
     width: 80%;
-    height: 100%;
+    height: 80%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
     // background: fff;
     .image {
       width: 100%;
-      margin-top: 100px;
     }
     .text {
       line-height: 1.6em;
       padding: 0 20px;
       font-size: 20px;
-      text-indent: 32.4px;
+      text-indent: 42px;
       margin-top: 50px;
       color: #fff;
+      overflow-y: auto;
+    }
+
+    .text::-webkit-scrollbar {
+      display: none;
     }
   }
+
+  animation: fade-in; /*动画名称*/
+  animation-duration: 0.7s; /*动画持续时间*/
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  } /*初始状态 透明度为0*/
+  // 40% {
+  //   opacity: 0.3;
+  // } /*过渡状态 透明度为0*/
+  100% {
+    opacity: 1;
+  } /*结束状态 透明度为1*/
 }
 </style>