yichael_zhongchuang_front_2/components/home/teacher/msg.vue

<template>
	<view class="">
		<view class="m_body">

		</view>
		<view class="m_msg">
			<view class="m_title">
				{{title}}
			</view>
			<view :class="btnArr.length>1?'m_btn':'m_btn_sing'">
				<text selectable="true"class="m_btn_option" :class="'m_btn_'+index" v-for="(item,index) in btnArr" @click="determine(index)" :key="index">{{item}}</text>
			</view>
		</view>
	</view>



</template>

<script>
	export default {
		props: ['title', 'btnArr'],
		data() {
			return {

			}
		},
		created() {

		},
		methods: {
			determine(index) {
				this.$emit("determine", index);
			}
		}
	}
</script>

<style scoped lang="scss">
	.m_body {
		position: fixed;
		z-index: 99;
		background-color: #000000;
		opacity: 0.4;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.m_msg {
		width: 500rpx;
		// height: 400rpx;
		padding: 0rpx 0 40rpx 0;
		position: fixed;
		top: 50%;
		left: 50%;
		border-radius: 10rpx;
		transform: translate(-50%, -50%);
		z-index: 100;
		background-color: #fff;
		opacity: 1;

		.m_title {
			margin-top: 40rpx;
			padding: 20rpx 0 60rpx;
			text-align: center;
			color: red;
		}

		.m_btn {
			display: flex;
			padding: 0 50rpx;
			justify-content: space-between;
		}

		.m_btn_sing {
			display: flex;
			padding: 0 50rpx;
			justify-content: center;
		}

		.m_btn_option {
			padding: 0rpx 60rpx;
			border-radius: 10rpx;
			font-size: 25rpx;
			line-height: 50rpx;
		}

		.m_btn_0 {
			background-color: #EA252C;
			color: #fff;
		}

		.m_btn_1 {
			background-color: #c3c0c0;
			color: #fff;
		}
	}
</style>