<template> <view class="toastConfirm" v-if="show"> <view class="toastBody"> <view class="icon"> <view class="star star1"></view> <view class="star star2"></view> <view class="star star3"></view> <view class="iconImg"></view> </view> <view class="title">{{ title }}</view> <view class="content">{{ content }}</view> <view class="confirmBtns"> <view class="btn cancel" @click="confirm(false)">取消</view> <view class="btn confirm" @click="confirm(true)">确定</view> </view> </view> </view> </template> <script> export default { props: { show: { type: Boolean, default: false }, title: { type: String, default: '温馨提醒' }, content: { type: String, default: '请确认内容信息' } }, methods:{ confirm(flag) { this.$emit('confirm', flag) } } } </script> <style scoped lang="scss"> .toastConfirm { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; z-index: 99; .toastBody { width: calc(100% - 130rpx); padding: 40rpx; padding-top: 100rpx; box-sizing: border-box; background-color: #FFFFFF; position: relative; border-radius: 26rpx; .icon { width: 126rpx; height: 126rpx; border-radius: 50%; background: linear-gradient(180deg, #F97C55 0%, #F44545 100%); display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); .iconImg { width: 70rpx; height: 70rpx; background-position: center; background-repeat: no-repeat; background-size: 100%; background-image: url(../static/gift/6.png); } .star { position: absolute; &::before, &:after { content: ""; display: block; width: 16rpx; height: 16rpx; transform: rotateZ(45deg) skew(30deg, 30deg); background: linear-gradient(180deg, #F97C55 0%, #F44545 100%); position: absolute; } &:after { transform: rotate(90deg) rotateZ(45deg) skew(30deg, 30deg); } &.star1 { right: 0rpx; top: -10rpx; } &.star2 { left: -16rpx; bottom: 16rpx; transform: scale(0.5); } &.star3 { right: -30rpx; top: 18rpx; transform: scale(0.5); } } } .title { color: #333333; font-size: 36rpx; line-height: 50rpx; text-align: center; margin-bottom: 20rpx; font-weight: bold; } .content { color: #333333; font-size: 32rpx; line-height: 44rpx; text-align: center; margin-bottom: 40rpx; } .confirmBtns{ width: 100%; padding: 0 10rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; .btn { width: 242rpx; height: 88rpx; text-align: center; line-height: 88rpx; border-radius: 88rpx; font-size: 32rpx; &.cancel { color: #999999; background-color: #E9E9E9; } &.confirm { color: #FFFFFF; background: linear-gradient(93deg, #F97C55 0%, #F44545 100%); } } } } } </style>