shop-app/pages/account/address/create.vue

<!--
 * @Author: ch
 * @Date: 2022-03-22 14:12:18
 * @LastEditors: ch
 * @LastEditTime: 2022-03-29 16:27:03
 * @Description: file content
-->
<template>
	<view class="container">
		<view class="form">
			<UiCell class="form--item" title="收货人" :rightIcon="false">
				<template slot="value">
					<input class="form--itemInput" placeholder="请输入收货人姓名"/>
				</template>
			</UiCell>
			<UiCell class="form--item" title="手机号码" :rightIcon="false">
				<template slot="value">
					<input class="form--itemInput" placeholder="请输入收货手机号码"/>
				</template>
			</UiCell>
			<BsSelectCity class="form--item form--city"></BsSelectCity>
			<UiCell class="form--item form--item__last" title="详细地址" :rightIcon="false">
				<template slot="value">
					<input class="form--itemInput" placeholder="请输入详细地址"/>
				</template>
			</UiCell>
		</view>
		<UiCell class="form--item form--item__last" title="设为默认地址" >
			<template slot="right-icon">
				<u-switch space="2" :value="true" activeColor="#FF875B" inactiveColor="#F3F3F3" />
			</template>
		</UiCell>
		<UiButton class="saveBtn" type="solid" size="max">保存</UiButton>
		
	</view>
</template>

<script>
import BsSelectCity from '../../../components/BsSelectCity.vue';
import UiButton from '../../../components/UiButton.vue';
import UiCell from '../../../components/UiCell.vue';
export default {
	components: { UiCell, UiButton, BsSelectCity }
};
</script>

<style lang="scss" scoped>
page {
	background: #f8f8f8;
}
.form{
	background: #fff;
	margin-bottom: 20rpx;
	&--item{
		padding: 0 40rpx;
		&__last{
			border: 0;
		}
	}
	&--city{
		padding:0 ;
	}
	&--itemInput{
		flex: 1;
		font-size: 28rpx;
		padding-left: 40rpx;
	}
}
.saveBtn{
	position: fixed;
	bottom: 89rpx;
	left: 30rpx;
}
/deep/ {
	.form--city .uiCell{
		padding: 0 40rpx;
	}
}
</style>