请添加图片描述

<uni-popup ref="popupPrint" background-color="rgba(0,0,0,0)" type="bottom" :safe-area="false" ="PrintPoupChange">
	<view class="radius">
		<view v-if="tempDeviceList.length" class="popup_title">请选择打印设备</view>
		<view class="reSignBtn" ="gotoSignClick">重新签名</view>
		<scroll-view scroll-y="true" style="height: 40vh;">
			<view v-for="(item, index) in tempDeviceList" :key="index">
				<view class="hospitalNameBtn" ="select_deviceId(item)">{{ item.name }}</view>
			</view>
			<view v-if="!tempDeviceList.length" class="searchBlue">
				<image style="width: 400rpx;height: 400rpx;margin: auto;" :src="imageUrl + 'loading.gif'" mode="widthFix"></image>
			</view>
			<view class="bottomSafe"></view>
		</scroll-view>
	</view>
</uni-popup>

css

.radius {
	height: 50vh;
	background: #fff;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	border: 1rpx solid #fff;
	position: relative;
	.popup_title {
		margin-top: 48rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #222222;
	}
	.hospitalNameBtn {
		width: 690rpx;
		height: 84rpx;
		border: 1px solid #ebebeb;
		border-radius: 10rpx;
		margin: 40rpx auto;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 84rpx;
	}
	.reSignBtn {
		font-size: 26rpx;
		position: absolute;
		top: 10rpx;
		right: 23rpx;
		color: #1296db;
		z-index: 999;
	}
}

将弹出层背景设为透明,然后在里面元素设白色背景并添加圆角

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐