style(管理员中心): 商品赠送页

src/views/ItemDistribution.vue

@@ -70,22 +70,7 @@
 
       <!-- 弹窗 -->
       <!-- 遮罩层 -->
-      <div
-        style="
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          z-index: 9999;
-          background-color: #00000080;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        "
-        v-show="dialogshow"
-        @click="closedPopup"
-      >
+      <maskLayer :maskLayerShow="dialogshow" @click="closedPopup">
         <div
           style="
             padding: 20px;
@@ -94,6 +79,7 @@
             flex-direction: column;
             align-items: center;
             border-radius: 20px;
+            margin: 20% 5%;
           "
           @click.stop
         >
@@ -137,13 +123,14 @@
             </button>
           </div>
         </div>
-      </div>
+      </maskLayer>
     </div>
   </div>
 </template>
 
 <script setup>
 import MobileHeader from '../components/MobileHeader.vue'
+import maskLayer from '../components/MaskLayer.vue'
 import { onMounted, ref, computed } from 'vue'
 import { getAdminCenterList, giveProps, hasSendGiftsPermission } from '@/api/itemDistribution'
 import { searchUser } from '@/api/userInfo'