feat(Style): add van-safe-area-bottom util class (#9205)

* feat(Style): add van-safe-area-bottom class

* chore: update test cases

src/address-list/AddressList.tsx

@@ -86,7 +86,7 @@ export default defineComponent({
     };
 
     const renderBottom = () => (
-      <div class={bem('bottom')}>
+      <div class={[bem('bottom'), 'van-safe-area-bottom']}>
         <Button
           round
           block

src/address-list/index.less

@@ -1,5 +1,4 @@
 @import './var.less';
-@import '../style/mixins/safe-area.less';
 
 :root {
   --van-address-list-padding: @address-list-padding;
@@ -29,9 +28,9 @@
     z-index: var(--van-address-list-add-button-z-index);
     box-sizing: border-box;
     width: 100%;
-    padding: 0 var(--van-padding-md);
+    padding-left: var(--van-padding-md);
+    padding-right: var(--van-padding-md);
     background-color: var(--van-white);
-    .safe-area-inset-bottom();
   }
 
   &__add {

src/address-list/test/__snapshots__/demo.spec.ts.snap

@@ -85,7 +85,7 @@ exports[`should render demo and match snapshot 1`] = `
         </i>
       </div>
     </div>
-    <div class="van-address-list__bottom">
+    <div class="van-address-list__bottom van-safe-area-bottom">
       <button type="button"
               class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"
       >

src/address-list/test/__snapshots__/index.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`should render tag slot correctly 1`] = `
        role="radiogroup"
   >
   </div>
-  <div class="van-address-list__bottom">
+  <div class="van-address-list__bottom van-safe-area-bottom">
     <button type="button"
             class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"
     >