uniapp-qxk/packages/address/address.vue

<template>
	<view style="flex-direction: column;">
		<scroll-view>
			<view class="addressItem">
				<view class="addressItemTop">
					<text class="addrName">名字</text>
					<text class="addrTel">18688888888</text>
				</view>
				<text class="addr">地址地址</text>
				<view class="line"></view>
				<view class="optionsPanel">
					<view>
						<image class="checkBtn" src="../../static/勾选.png"></image>
						<text>设置为默认地址</text>
					</view>
					<view class="rightPanel">
						<image class="optionsBtn" src="../../static/删除.png"></image>
						<image class="optionsBtnEdit" src="../../static/编辑.png"></image>
					</view>
				</view>
				<view style="height: 30rpx;background-color: #F6F6F6;"></view>
			</view>
			<view class="addressItem">
				<view class="addressItemTop">
					<text class="addrName">名字</text>
					<text class="addrTel">18688888888</text>
				</view>
				<text class="addr">地址地址</text>
				<view class="line"></view>
				<view class="optionsPanel">
					<view>
						<image class="checkBtn" src="../../static/勾选.png"></image>
						<text>设置为默认地址</text>
					</view>
					<view class="rightPanel">
						<image class="optionsBtn" src="../../static/删除.png"></image>
						<image class="optionsBtnEdit" src="../../static/编辑.png"></image>
					</view>
				</view>
				<view style="height: 30rpx;background-color: #F6F6F6;"></view>
			</view>
			<view class="addressItem">
				<view class="addressItemTop">
					<text class="addrName">名字</text>
					<text class="addrTel">18688888888</text>
				</view>
				<text class="addr">地址地址</text>
				<view class="line"></view>
				<view class="optionsPanel">
					<view>
						<image class="checkBtn" src="../../static/勾选.png"></image>
						<text>设置为默认地址</text>
					</view>
					<view class="rightPanel">
						<image class="optionsBtn" src="../../static/删除.png"></image>
						<image class="optionsBtnEdit" src="../../static/编辑.png"></image>
					</view>
				</view>
				<view style="height: 30rpx;background-color: #F6F6F6;"></view>
			</view>
		</scroll-view>
		<view class="addNewAddr" @click="toNewAddr">
			<view></view>
			<text>新增地址</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toNewAddr(){
				uni.navigateTo({
					url:"../addAddress/addAddress"
				})
			}
		}
	}
</script>

<style>
.checkBtn{
		width: 44rpx;
		height: 44rpx;
		margin-right: 14rpx;
	}
	.addressItemTop{
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.addressItem{
		flex-direction: column;
	}
	.line{
		height: 1rpx;
		background-color: #D8D8D8;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.addrName{
		margin-left: 32rpx;
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 40rpx;
	}
	.addr{
		margin-left: 32rpx;
	}
	.optionsPanel{
		margin-left: 32rpx;
		margin-bottom: 40rpx;
		align-items: center;
		justify-content: space-between;
	}
	.rightPanel{
		align-items: center;
		justify-content: center;
		margin-right: 32rpx;
	}
	.optionsBtn{
		width: 44rpx;
		height: 44rpx;
		margin-right: 50rpx;
	}
	.optionsBtnEdit{
		width: 38rpx;
		height: 38rpx;
	}
	.addNewAddr{
		height: 96rpx;
		width: 90%;
		border: #E7A23F 1rpx solid;
		border-radius: 8rpx;
		position: fixed;
		bottom: 200rpx;
		justify-content: center;
		align-items: center;
		align-self: center;
	}
	
</style>