1. up

src/views/pages/service-management/address-management/adding-address.vue

 <template>
-    <el-dialog :visible.sync="value" :modal="false" :width="dialogWidth">
+    <div v-if="value" class="address-selector-dialog">
         <div class="address-selector-container">
             <div class="header">
                 <div class="title">设置地址</div>
@@ -91,7 +91,8 @@
                 </el-button>
             </div>
         </div>
-    </el-dialog>
+        <div class="mask"></div>
+    </div>
 </template>
 
 <script lang="ts">
@@ -228,71 +229,92 @@
 </script>
 
 <style lang="less" scoped>
-    .address-selector-container {
-        width: 492px;
-        background: #ffffff;
-        // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-        border-radius: 6px;
-        z-index: 1;
-        // padding-top: 38px;
-        // padding-left: 30px;
-        // padding-right: 30px;
-        // padding-bottom: 30px;
-        // height: 580px;
+    .address-selector-dialog {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+        left: 0px;
+        right: 0px;
+        z-index: 1111;
 
-        .header {
-            margin-bottom: 25px;
-            border-bottom: 1px solid #f1f1f1;
-            padding-bottom: 10px;
+        .mask {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+        .address-selector-container {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translateX(-50%) translateY(-50%);
+            width: 492px;
+            background: #ffffff;
+            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+            border-radius: 6px;
+            z-index: 1;
+            padding-top: 38px;
+            padding-left: 30px;
+            padding-right: 30px;
+            padding-bottom: 30px;
+            // height: 580px;
 
-            font-size: 18px;
-            color: #333333;
-            line-height: 25px;
+            .header {
+                margin-bottom: 25px;
+                border-bottom: 1px solid #f1f1f1;
+                padding-bottom: 10px;
 
-            i {
-                position: absolute;
                 font-size: 18px;
-                top: 20px;
-                right: 20px;
-                color: rgba(153, 153, 153, 1);
-                cursor: pointer;
+                color: #333333;
+                line-height: 25px;
+
+                i {
+                    position: absolute;
+                    font-size: 18px;
+                    top: 20px;
+                    right: 20px;
+                    color: rgba(153, 153, 153, 1);
+                    cursor: pointer;
+                }
             }
-        }
 
-        .form-item {
-            margin-bottom: 25px;
+            .form-item {
+                margin-bottom: 25px;
 
-            .item-label {
-                font-size: 14px;
-                color: #333333;
-                line-height: 20px;
-                margin-bottom: 10px;
-            }
+                .item-label {
+                    font-size: 14px;
+                    color: #333333;
+                    line-height: 20px;
+                    margin-bottom: 10px;
+                }
 
-            .item-value {
-                /deep/ input {
-                    height: 38px;
+                .item-value {
+                    /deep/ input {
+                        height: 38px;
+                    }
                 }
             }
-        }
 
-        .default-box {
-            cursor: pointer;
+            .default-box {
+                cursor: pointer;
 
-            .default-tip {
-                margin-left: 8px;
-                user-select: none;
-                position: relative;
-                top: -1px;
+                .default-tip {
+                    margin-left: 8px;
+                    user-select: none;
+                    position: relative;
+                    top: -1px;
+                }
             }
-        }
 
-        .footer {
-            margin-top: 48px;
+            .footer {
+                margin-top: 48px;
 
-            /deep/ button {
-                min-width: 96px;
-                font-size: 14px;
+                /deep/ button {
+                    min-width: 96px;
+                    font-size: 14px;
+                }
             }
         }
     }