样式集 - 自适应居中弹窗

ゝ一纸荒年。 2022-11-15 11:19 111阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1][]

弹窗1代码

<block v-if="answer_true_show">
    			<view class="answer_true_bg"></view>
    			<view class="answer_true">
    				<img class="true_bg_img" :src="qualifyingAnswerIng_true_bg" />
    				<view class="answer_true_centent">
    					<view class="tips">
    						问题解析
    					</view>
    					<view class="detail">
    						错题分析错题分析错题分析错题分析 错题分析错题分析错题分析错题分析 错题分析错题分析错题分析
    					</view>
    					<view class="answer_true_btn">
    						结束游戏
    					</view>
    					<view class="ttt">
    						上滑跳转下一题
    					</view>
    				</view>
    			</view>
    		</block>

css  
<style lang="scss" scoped>

.answer_true_bg {
    		position: absolute;
    		width: 100vw;
    		height: 100vh;
    		z-index: 98;
    		background: #000;
    	}
    
    	.answer_true {
    		position: absolute;
    		width: 80vw;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		align-items: center;
    		display: -webkit-flex;
    		z-index: 100;
    
    		.true_bg_img {
    			z-index: 100;
    			position: absolute;
    			width: 100%;
    		}
    
    		.answer_true_centent {
    			// background-color: red;
    			z-index: 100;
    			position: absolute;
    			width: 90%;
    			left: 5%;
    			text-align: center;
    
    			.tips {
    				margin-top: 320rpx;
    				font-size: 28rpx;
    				text-align: center;
    			}
    
    			.detail {
    				// position: relative;
    				// top: 100rpx;
    				background-color: #fff;
    				line-height: 44rpx;
    				border-radius: 10rpx;
    				padding: 10rpx 20rpx 30rpx 20rpx;
    				margin: 10rpx 40rpx 20rpx 40rpx;
    				font-size: 26rpx;
    				color: #333;
    			}
    
    			.answer_true_btn {
    				width: 164rpx;
    				height: 58rpx;
    				line-height: 58rpx;
    				background: #102841;
    				border-radius: 14rpx;
    				margin: auto;
    				margin-top: 40rpx;
    				color: #fff;
    				font-size: 30rpx;
    			}
    
    			.ttt {
    				margin-top: 10rpx;
    				font-size: 28rpx;
    			}
    		}
    	}

弹窗2代码

<block v-if="answer_over_show">
    			<view class="answer_over_bg"></view>
    			<view class="answer_over">
    				<img class="over_bg_img" :src="qualifyingAnswerIng_over_bg" />
    				<view class="answer_over_centent">
    					<view class="over_tips tips1 p_r">
    						您一共答题：<view class="num">212</view>题
    					</view>
    					<view class="over_tips tips2 p_r">
    						共答对问题：<view class="num">210</view>题
    					</view>
    					<view class="over_tips tips3 p_r">
    						共答错问题：<view class="num">2</view>题
    					</view>
    					<view class="p_r over_btns">
    						<view class="answer_over_btn1">
    							结束游戏
    						</view>
    						<view class="answer_over_btn2">
    							返回首页
    						</view>
    					</view>
    					<view class="tips4">
    						本次排名提升了5位
    					</view>
    				</view>
    			</view>
    		</block>

css

// 挑战结束
    	.answer_over_bg {
    		position: absolute;
    		width: 100vw;
    		height: 100vh;
    		z-index: 98;
    		background: #000;
    	}
    
    	.answer_over {
    		position: absolute;
    		width: 80vw;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		align-items: center;
    		display: -webkit-flex;
    		z-index: 100;
    
    		.over_bg_img {
    			z-index: 100;
    			position: absolute;
    			width: 100%;
    		}
    
    		.answer_over_centent {
    			// background-color: red;
    			z-index: 100;
    			position: absolute;
    			width: 90%;
    			left: 5%;
    			text-align: center;
    			margin-top: 340rpx;
    			
    			.over_tips {
    				font-size: 28rpx;
    				width: 60%;
    				margin-left: 20%;
    				margin-bottom: 10rpx;
    				
    				color: #333;
    				text-align: center;
    			}
    
    			.tips1 .num,
    			.tips2 .num {
    				color: #317a8c;
    				font-size: 40rpx;
    				font-weight: 500rpx;
    				width: 120rpx;
    				line-height: 30rpx;
    			}
    
    			.tips3 .num {
    				color: red;
    				font-size: 40rpx;
    				font-weight: 500rpx;
    				width: 120rpx;
    				line-height: 30rpx;
    			}
    
    			.tips4 {
    				// position: relative;
    				// top: 100rpx;
    				background-color: #fff;
    				line-height: 34rpx;
    				border-radius: 10rpx;
    				padding: 10rpx 20rpx 10rpx 20rpx;
    				margin: 30rpx 110rpx 20rpx 110rpx;
    				font-size: 26rpx;
    				color: #333;
    			}
    
    			.over_btns {
    				width: 76%;
    				margin-left: 12%;
    					margin-top: 30rpx;
    
    				.answer_over_btn1 {
    					width: 164rpx;
    					height: 58rpx;
    					line-height: 58rpx;
    					background: #102841;
    					border-radius: 14rpx;
    					margin: auto;
    					color: #fff;
    					font-size: 30rpx;
    				}
    
    				.answer_over_btn2 {
    					width: 164rpx;
    					height: 58rpx;
    					line-height: 58rpx;
    					background: #6b7823;
    					border-radius: 14rpx;
    					margin: auto;
    					color: #fff;
    					font-size: 30rpx;
    				}
    			}
    
    		}
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210331150522687.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70 1]: /images/20221022/7b96716e0fef453281e363f619c8abce.png