弹窗设计实现

弹窗实现：

	<view class="box">
<view @click="toRich( richIndex ,richItem.keyVal,richItem.name)" v-for="(richItem,richIndex) in richList" :key='richIndex'
				 class="opt-item">
					<view class="name">
						{{richItem.name}}
					</view>
					<image class="right" :src="richItem.img" mode=""></image>
				</view>	
<view class="object" v-show="isSj">
			<!-- <view class="left">
				<image @click="onclickSreen" src="../../static/icon/close.png"></image>
			</view> -->
			<view v-show='screen' class="top">
				<view class="find">
					发现新版本
				</view>
				<view class="title">
					1.21.1版本最新发布：
					<p class="font">1、生日推送祝福消息优化，每天给生日 学生和老师送祝福~</p>
					<p class="font">2、新增加学费自动扣款功能。</p>
					<p class="font">3、新增加校园聊天功能，方便各位同学</p>
				</view>
				<!-- v-show='btn' -->
				<view class="login-out">
					<view @click="onclicktnbtn" class="btn">
						立即升级
					</view>
				</view>
			</view>
			<view v-show="btn" class="next">
				升级中
				<view class="login-out">
					<view class="btn" @click="cancel">
						取消升级
					</view>
				</view>
			</view>
		</view>
</view>

<script>
	export default {
data(){
return {
				//wifiShow: false,
				// 总缓存数
				cacheData: '',
				screen: false,//弹窗开始为隐藏状态
				btn: false,
				isSj:false,
	richList: [{
						name: '版本功能介绍',
						keyVal: 'version',
						img: '/static/icon/right.png'
					},
					{
						name: '隐私条款',
						keyVal: 'privacy',
						img: '/static/icon/right.png'
					},
					{
						name: '关于我们',
						keyVal: 'about_us',
						img: '/static/icon/right.png'
					},
					{
						name: '最新版本',
						keyVal: 'new_version',
						img: '/static/icon/right.png'
					},
				]
};
methods: {
			//点击弹框
			onclickSreen() {
				this.screen = !this.screen//点击时弹窗显示
			},
			//点击按钮弹窗
			onclicktnbtn() {
				this.btn = !this.btn//弹窗内容改变
				this.screen = false//点击按钮时弹窗关闭
			},
			cancel(){
				this.screen = false
				this.isSj = false//弹窗和内容都消失
			},
toRich(index, keyVal, name) {
				//最新版本
				if (index === 3) {//下标等于3
					this.screen = !this.screen //点击显示弹窗
					this.isSj = true  //显示弹窗内容
				} else {
					uni.navigateTo({//下标不等于3
						url: `../edition/edition?keyVal=${keyVal}&name=${name}`
					})
				}

			},

}

.container {
.object {
			@extend %flex;
			@extend %flex-align-center;
			@extend %flex-column;
			width: 662upx;
			height: 600upx;
			background-color: #232323;
			color: #FFFFFF;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);//弹窗居中

			.top,
			.next {
				// @extend %flex;
				// @extend %flex-align-center;
				// @extend %flex-column;//字体居中按1，2，3列排
				margin-top: 64upx;
				position: absolute;
				transform: 50%;
				
			}

			.title {
				@extend %flex;
				// @extend %flex-align-center;
				@extend %flex-column;
				overflow-y: scroll;//y轴上的进度条
				height: 220upx;
				width: 592upx;
				font-size: 28upx;
				line-height: 48upx;
				margin-top: 48upx;

				.font {
					@extend %flex;
					@extend %inline-block;

				}

				.btn {
					margin-top: 72upx;
				}
			}
}