baiyuApp/pages/course/components/answerFloatBox.vue

<template>
	<view class="complaintViewClass">
		<image src="/static/image/hall/baoxiang_icon.png" mode="aspectFill"></image>
		<view class="complaintViewTextClass">
			<view v-if="~~typeNum === 1" class="pointsOkTextClass">
				已得<text class="pointsNumTextClass">{{pointsNum}}</text>积分
			</view>
			<view v-if="~~typeNum === 2" class="pointsOkTowTextClass" @tap="handleShowTomorrowTip">
				<text>未答对\n明天再来</text>
			</view>
			<view v-if="~~typeNum === 3" class="pointsOkTowTextClass">
				<text>未答对\n继续答题</text>
				<view class="answerBtnClass" @tap="handleShowAnswerMethods">答题</view>
			</view>
			<view v-if="~~typeNum === 4" class="pointsOkTowTextClass">
				<text>
					<text>再观看2:20</text>\n答题得奖励
				</text>
				<view class="answerBtnClass" @tap="handleShowAnswerMethods">答题</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			typeNum: {
				type: Number,
				default: 1, //悬浮框类型：1、已得积分，2、未答对明天再来，3、未答对继续答题，4、答题得奖励
			},
			pointsNum: {
				type: Number,
				default: 20, //已得积分数量
			}
		},
		methods: {
			handleShowAnswerMethods() {
				this.$emit('handleShowAnswer')
			},
			handleShowTomorrowTip() {
				this.$emit('showTomorrowTipMethods')
			}
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.complaintViewClass {
		@include u-flex(column, center, center);
		position: fixed;
		right: 34rpx;
		bottom: 400rpx;

		image {
			width: 210rpx;
			height: 90rpx;
		}

		.complaintViewTextClass {
			@include u-flex(column, center, center);
			margin-top: -15rpx;
			z-index: 10;
			width: 210rpx;
			min-height: 120rpx;
			background: linear-gradient(180deg, #FFF9DC 0%, #FFDC97 100%);
			border-radius: 20rpx;
			border: 2rpx solid linear-gradient(180deg, rgba(255, 228, 105, 1), rgba(255, 178, 30, 1));
			padding: 10rpx 10rpx 20rpx;
			box-sizing: border-box;
			text-align: center;
			overflow: hidden;
		}
	}

	.pointsOkTextClass {
		font-weight: 400;
		font-size: 28rpx;
		color: #FF2E3F;
		line-height: 40rpx;
	}

	.pointsNumTextClass {
		font-weight: 600;
		font-size: 56rpx;
		color: #FF2E3F;
	}

	.pointsOkTowTextClass {
		font-weight: 600;
		font-size: 32rpx;
		color: #FF2E3F;
	}

	.answerBtnClass {
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(135deg, #FF515F 0%, #F72234 100%);
		border-radius: 30rpx;
		margin-top: 10rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFF2C3;
		line-height: 55rpx;
		text-align: center;
	}
</style>