uniapp弹出框

最新推荐文章于 2024-08-13 12:05:00 发布

前端开发小吴

最新推荐文章于 2024-08-13 12:05:00 发布

阅读量1.2k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/ssorth/article/details/108994363

版权

<view class="isaddress" v-if="addressisfo">
			<view class="zhe" @click="addflase"></view>
			<view class="address-add">
				<view class="addradd-tit">{{$t('index.tjiaxinlxr')}}</view>
				<view class="addradd-close" @click="addflase">
					<image class="img" src="../../../static/img/sot/close_icon.png" mode=""></image>
				</view>
				<view class="addradd-item">
					<view class="additem-title">{{$t('index.shouhren')}}</view>
					<view class="additem-txt"><input type="text" maxlength="20" v-model="data.resgoods" :placeholder="$t('index.shouhourname')" /></view>
				</view>
				<view class="addradd-item">
					<view class="additem-title">{{$t('index.sjhphone')}}</view>
					<view class="additem-txt"><input type="number" v-model="data.resphone" maxlength="11" :placeholder="$t('index.shouhrsphoen')" /></view>
				</view>
				<view class="addradd-item">
					<view class="additem-title">{{$t('index.diqusak')}}</view>
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<view class="reg-item">
							<view class="reg-item-input">
								<input class="veibns" v-model="regionName" :placeholder="$t('index.qingxuanzediqu')" placeholder-style=""
								 disabled />
							</view>
						</view>
					</pick-regions>
					<!-- 	<view class="additem-txt">点击选择</view>
					<view class="additem-right"><image src="../../../../static/img/sot/right_icon.png" mode=""></image></view> -->
				</view>
				<view class="addradd-item">
					<view class="additem-title">{{$t('index.xxdeatlisadress')}}</view>
					<view class="additem-txt"><input type="text" v-model="data.detaliaddress" :placeholder="$t('index.rhsajdnskax')" /></view>
				</view>
				<view class="addradd-btn" @click="addaddress">
					<button type="default">{{$t('index.tradebaocun')}}</button>
				</view>
			</view>
		</view>

	.zhe {
		width: 100%;
		height: 100%;
		background-color: #0e0e12;
		opacity: 0.8;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
	}
	
	.address-add {
		position: relative;
		width: 80%;
		height: auto;
		position: fixed;
		z-index: 1;
		top: 19%;
		left: 10%;
		background-color: #31364c;
		border-radius: 10rpx;
	}
	
	.additem-right image {
		width: 14rpx;
		height: 26rpx;
	}
	
	.addradd-tit {
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		padding: 40rpx 0;
	}
	
	.addradd-close {
		width: 50rpx;
		height: 50rpx;
		position: fixed;
		top: 20%;
		right: calc(10% + 10rpx);
	}
	
	.addradd-item {
		display: flex;
		align-items: center;
		padding: 20rpx 40rpx;
	}
	
	.additem-title {
		font-size: 30rpx;
		color: #FFFFFF;
		width: 150rpx;
		letter-spacing: 2rpx;
	}
	
	.additem-txt {
		font-size: 26rpx;
		flex: 1;
		color: #a2a5b4;
	}
	
	.additem-txt input {
		font-size: 30rpx;
		color: #fff;
	}
	
	.additem-txt input::-webkit-input-placeholder {
		font-size: 24rpx;
		color: #a2a5b4;
	}
	
	.addradd-btn {
		padding: 80rpx;
	}
	
	.addradd-btn button {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fec11a;
		font-size: 36rpx;
		color: #000000;
		border-radius: 80rpx;
		letter-spacing: 10rpx;
		font-weight: bold;
	}