简述
地址列表页面,用于展示用户的收货信息。
平台支持
App(nvue) | App(vue) | 小程序 | H5 |
---|---|---|---|
√ | √ | √ | √ |
地址列表页面,用于展示用户的收货信息。
App(nvue) | App(vue) | 小程序 | H5 |
---|---|---|---|
√ | √ | √ | √ |
<template> <view> <view class="address_con"> <view class="con"> <view class="face"> 陈 </view> <view class="imp"> <view>陈某某<label>18900000000</label></view> <view>福建省 福州市 鼓楼区 五凤街道丞相坊小区X座0001室</view> </view> <yile-icons icon="edit" size="45rpx"></yile-icons> </view> <view class="con"> <view class="face"> 赵 </view> <view class="imp"> <view>赵三<label>13955556666</label></view> <view>福建省 厦门市 思明区 某某街道XX小区X座1111室</view> </view> <yile-icons icon="edit" size="45rpx"></yile-icons> </view> <view class="con"> <view class="face"> 李 </view> <view class="imp"> <view>李晓峰<label>13453331111</label></view> <view>湖北省 XX市 XX区 某某路小区X座2222室</view> </view> <yile-icons icon="edit" size="45rpx"></yile-icons> </view> <view class="con"> <view class="face"> 石 </view> <view class="imp"> <view>石某某<label>15611112222</label></view> <view>福建省 福州市 晋安区 鼓山苑小区</view> </view> <yile-icons icon="edit" size="45rpx"></yile-icons> </view> <view class="con"> <view class="face"> 陈 </view> <view class="imp"> <view>陈某某<label>18900000000</label></view> <view>福建省 福州市 鼓楼区 五凤街道丞相坊小区X座0001室</view> </view> <yile-icons icon="edit" size="45rpx"></yile-icons> </view> <view class="con"> <view class="face"> 赵 </view> <view class="imp"> <view>赵三<label>13955556666</label></view> <view>福建省 厦门市 思明区 某某街道XX小区X座1111室</view> </view> <yile-icons icon="edit" size="45rpx"></yile-icons> </view> <view class="con"> <view class="face"> 李 </view> <view class="imp"> <view>李晓峰<label>13453331111</label></view> <view>湖北省 XX市 XX区 某某路小区X座2222室</view> </view> <yile-icons icon="edit" size="45rpx"></yile-icons> </view> <view class="con"> <view class="face"> 石 </view> <view class="imp"> <view>石某某<label>15611112222</label></view> <view>福建省 福州市 晋安区 鼓山苑小区</view> </view> <yile-icons icon="edit" size="45rpx"></yile-icons> </view> </view> <view class="btn"> <button>添加收货地址</button> </view> </view> </template> <script> export default { data() { return { } }, onLoad() { }, methods: { } } </script> <style> page { background-color: #f8f8f8; padding-bottom: 150rpx; } .address_con { width: 96%; margin: 10rpx 2% 0; background-color: #fff; border-radius: 15rpx; .con { display: flex; flex-direction: row; align-items: center; box-sizing: border-box; padding: 20rpx 3%; .face { width: 70rpx; height: 70rpx; line-height: 70rpx; text-align: center; font-size: 30rpx; background: linear-gradient(to right, #00FFD5, #008CFF); color: #fff; border-radius: 50%; font-weight: bold; margin-right: 20rpx; } .imp { flex: 1; view:nth-child(1) { font-size: 32rpx; display: flex; align-items: center; font-weight: bold; label { color: #999; font-size: 28rpx; margin-left: 15rpx; font-weight: normal; } } view:nth-child(2) { margin-top: 10rpx; font-size: 28rpx; color: #333; } } .yile-icons { margin-left: 35rpx; } } } .btn { position: fixed; bottom: 0; background-color: #fff; padding: 20rpx 3%; width: 94%; button { background: linear-gradient(to right, #00FFD5, #008CFF); color: #fff; border-radius: 15rpx; font-size: 32rpx; line-height: 90rpx; } button::after { border: 0; } } </style>