css

assets/css/mine/userAddress.scss

+.page-userAddress {
+    padding: 104rpx 24rpx 0 24rpx;
+    .tip {
+        margin-top: 16rpx;
+        margin-bottom: 40rpx;
+        padding-left: 24rpx;
+        height: 60rpx;
+        background: #fff8f2;
+        border-radius: 0px 30rpx 30rpx 30rpx;
+        .iconfont {
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #f98119;
+            margin-right: 16rpx;
+        }
+        .t1 {
+            font-size: 22rpx;
+            color: #f98119;
+        }
+        .t2 {
+            font-size: 22rpx;
+            color: #1969f9;
+        }
+    }
+    .list {
+        .box {
+            padding: 24rpx;
+            margin-bottom: 16rpx;
+            background: #ffffff;
+            border-radius: 10rpx;
+            .p1 {
+                margin-bottom: 16rpx;
+                .t1 {
+                    font-size: 28rpx;
+                    color: #292b33;
+                    font-weight: bold;
+                    margin-right: 24rpx;
+                }
+                .t2 {
+                    font-weight: bold;
+                    font-size: 28rpx;
+                    color: #292b33;
+                }
+            }
+            .p2 {
+                height: 66rpx;
+                font-size: 24rpx;
+                color: #919399;
+            }
+            .operate {
+                .edit {
+                    margin-right: 32rpx;
+                    .iconfont {
+                        font-size: 32rpx;
+                        color: #919399;
+                        margin-right: 4px;
+                    }
+                    .tt {
+                        font-size: 24rpx;
+                        color: #919399;
+                    }
+                }
+                .delete {
+                    .iconfont {
+                        font-size: 32rpx;
+                        color: #919399;
+                        margin-right: 4px;
+                    }
+                    .tt {
+                        font-size: 24rpx;
+                        color: #919399;
+                    }
+                }
+            }
+        }
+    }
+}

pages/mine/userAddress.vue

+<template>
+    <view class="page-userAddress">
+        <navElement title="地址管理"></navElement>
+        <view class="tip row verCenter">
+            <text class="iconfont icon-ts"></text>
+            <text class="t1">已创建</text>
+            <text class="t2">2</text>
+            <text class="t1">个收货地址，最多</text>
+            <text class="t2">20</text>
+            <text class="t1">个</text>
+        </view>
+        <view class="list">
+            <view class="box">
+                <view class="p1 row verCenter">
+                    <text class="t1">蔡先生</text>
+                    <text class="t2">13800138000</text>
+                </view>
+                <view class="p2">广东省深圳市龙岗区坂田清丽路1号宝能科技园南区12栋11楼</view>
+                <view class="operate row bothSide verCenter">
+                    <view>
+                        <view class="default"></view>
+                        <text class="default-text"></text>
+                    </view>
+                    <view class="row verCenter">
+                        <view class="edit row verCenter">
+                            <text class="iconfont icon-bjt"></text>
+                            <text class="tt">编辑</text>
+                        </view>
+                        <view class="delete row verCenter">
+                            <text class="iconfont icon-del"></text>
+                            <text class="tt">删除</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { Api_Url } from '@/util/api.js';
+import navElement from '@/components/nav.vue';
+
+export default {
+    components: {
+        navElement
+    },
+    data() {
+        return {
+            curr: 0,
+            text_arr: ['未使用', '已使用', '已过期']
+        };
+    },
+    onLoad() {},
+    methods: {
+        tab(index) {
+            this.curr = index;
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+@import '@/assets/css/mine/userAddress.scss';
+</style>