样式:
源码:
<template> <view class="address"> <view class="lists"> <view class="item" v-for="(item,index) in 5" :key="index"> <view class="tit"> <text>赵先生</text> <text>139********37</text> <text class="tag">家</text> </view> <view class="detailAddress"> <text>陕西省 xxx市 xxx区 xxx街道 xxx门</text> </view> <view class="setbox"> <view class="default"> <label> <checkbox :value="1" /><text>设为默认</text> </label> </view> <view class="set"> <view class="setBtn"> 删除 </view> <view class="setBtn"> 复制 </view> <view class="setBtn"> 修改 </view> </view> </view> </view> </view> <view class="addBtn"> <button class="btn" type="default">新增地址</button> </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style scoped> .address { padding: 20rpx; box-sizing: border-box; background-color: #f5f5f5; min-height: calc(100vh - 88rpx); } .addBtn { width: 100%; height: 200rpx; background-color: #fff; position: fixed; bottom: 0; left: 0%; display: flex; justify-content: center; align-items: center; padding: 0 10rpx; box-sizing: border-box; } .btn { width: 100%; background-color: #00aaff; color: #fff; border-radius: 40rpx; } .lists { margin-bottom: 240rpx; } .item { padding: 30rpx; box-sizing: border-box; border-radius: 15rpx; background-color: #fff; margin-bottom: 20rpx; } .tit { font-size: 34rpx; font-weight: 700; color: #333; } .detailAddress { margin: 15rpx 0 30rpx; font-size: 30rpx; color: #333; } .setbox { display: flex; justify-content: space-between; align-items: center; } .set { width: 40%; display: flex; justify-content: space-between; align-items: center; } .setBtn { font-size: 24rpx; color: #333; background-color: #f1f1f1; border-radius: 10rpx; padding: 5rpx 15rpx; box-sizing: border-box; } /deep/uni-checkbox .uni-checkbox-input { width: 18px; height: 18px; } .default text { font-size: 26rpx; } .tag { font-size: 20rpx; margin-left: 15rpx; padding: 0rpx 10rpx; box-sizing: border-box; border-radius: 4rpx; border: 1px solid #00aaff; color: #00aaff; } </style>
评论
暂无评论
请登录或注册后发表评论。