baodeng_xcx/page_user/pingzhuo/index.vue

<template>
	<view class="page">
		<u-navbar title="拼桌" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <view class="tab">
        	<view class="top">
        		<view class="">
        			<image src="https://api.ccttiot.com/smartmeter/img/static/uGaLZEBgL84ajaRfZ3Ja" mode=""></image>深度酒吧
        		</view>
				<view class="" style="color: #B8B8B8;text-decoration: underline;" @click="btnjilu">
					我的记录
				</view>
        	</view>
			<view class="bot">
				<view :class="tabindex == 1 ? 'active' : ''" @click="btntab(1)">
					现场拼桌
					<view class="" v-if="tabindex == 1"></view>
				</view>
				<view :class="tabindex == 2 ? 'active' : ''" @click="btntab(2)">
					预约拼桌
					<view class="" v-if="tabindex == 2"></view>
				</view>
			</view>
        </view>
		<view class="bd" v-if="dateflag" @click="btnchaxun">
			<view class="bdtop">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uFfH3gMS0VJVIvFPFzRR" class="bj" mode=""></image>
				<view class="fabu">
					发布拼桌，找人一起玩
				</view>
				<view class="myxx">
					<view class="myimg">
						<template v-if="!teamobj.sponsorAvatar">
							<view class="tx" style="background: #ccc;"></view>
						</template>
						<template v-else>
							<image class="tx" :src="teamobj.sponsorAvatar" mode=""></image>
						</template>
						<image class="xb" src="https://api.ccttiot.com/smartmeter/img/static/urkC56KUGEuJxuV58Foa" mode=""></image>
						<image class="xb" src="https://api.ccttiot.com/smartmeter/img/static/uK5bsCu9k1JFbVfIINRV" mode=""></image>
					</view>
					<view class="myname">
						<view class="wo">
							<text v-if="teamtwoobj.userId == teamobj.sponsorId">我</text> {{teamobj.name}}
						</view>
						<view class="zhuohao">
							当前桌号：{{teamobj.boothName}}
						</view>
					</view>
				</view>
			</view>
			<view class="bdbot">
				<view class="lt">
					<template v-if="teamobj.currentNum == teamobj.limitNum">
						已满
					</template>
					<template v-else>
						正在拼 : {{ dots }}
					</template>
				  </view>
				<view class="cen">
				  （ <text>{{teamobj.currentNum}}</text> / {{teamobj.limitNum == null ? 0 : teamobj.limitNum}} · <text>拼桌成功</text> ）
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uYtfNn24hW5c7V1upB2T" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="yuyue" v-else @click="btnfabu">
			<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uKUaflogbDvZoaRlGXhL" mode=""></image>
			<view class="wenzi">
				<view class="top">
					发布拼桌，找人一起玩
				</view>
				<view class="duoshao">
					<view class="img">
						<image v-for="(img, index) in randomImages" :key="index" :src="img" mode=""></image>
					</view>
					<text style="margin-left: 30rpx;">快来一起发起拼桌吧</text>
				</view>
			</view>
		</view>
		
		<view class="xzname">
			{{tabindex == 1 ? '现场拼桌池' : '预约拼桌池'}}
		</view>
		<view class="list">
			<view class="item_list" v-for="(item,index) in pinzhuolist" :key="index" @click="showDetailModal(item)">
				<view class="top">
					{{item.name}}
				</view>
				<view class="myxx">
					<view class="myimg">
						<template v-if="!item.sponsorAvatar">
							<view class="tx" style="background: #ccc;"></view>
						</template>
						<template v-else>
							<image class="tx" :src="item.sponsorAvatar" mode=""></image>
						</template>
						<image v-if="item.sponsorSex == 1" class="xb" src="https://api.ccttiot.com/smartmeter/img/static/urkC56KUGEuJxuV58Foa" mode=""></image>
						<image v-if="item.sponsorSex == 0" class="xb" src="https://api.ccttiot.com/smartmeter/img/static/uK5bsCu9k1JFbVfIINRV" mode=""></image>
					</view>
					<view class="myname">
						<view class="wo" v-if="user.userId == item.sponsorId">
							<text>我</text> {{item.sponsorName}}
						</view>
						<view class="zhuohao">
							桌号：{{item.boothName}}
						</view>
					</view>
				</view>
				<view class="jairu">
					<image :src="i" mode=""></image> 
					已加{{item.currentNum == null ? '0' : item.currentNum}}人 | 剩余<text style="color: #FF8998;">{{Number(item.limitNum == null ? 0 : item.limitNum) - Number(item.currentNum == null ? 0 : item.currentNum)}}</text>人
				</view>
				<view class="jairu">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uQJLuuCQzeAGrFQ995Nm" mode=""></image> 
					{{item.prefer == 1 ? '偏好男性' : item.prefer == 2 ? '偏好女性' : '男女不限'}}
				</view>
				<view class="anniu" style="background-color: #FF8998;color: #fff;">
					查看
				</view>
			</view>
			<view class="wu" style="width: 480rpx;height: 370rpx;margin: auto;margin-top: 80rpx;" v-if="pinzhuolist.length == 0">
				<image style="width: 480rpx;height: 370rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uQziwcKvCYhaHoaw5u93" mode=""></image>
			</view>
		</view>
 
		<!-- 拼桌详情弹窗 -->
		<view v-if="showModal" class="modal-overlay" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-close" @click="closeModal">×</view>
				<view class="modal-header">
					<view class="modal-title">{{currentItem.name}}</view>
					<view class="modal-sub">桌号：{{currentItem.boothName}}</view>
				</view>
						<view class="modal-body">
			<view class="info-item">
				<view class="info-label">🎭 主题</view>
				<view class="info-value">{{currentItem.topic || '暂无主题'}}</view>
			</view>
			<view class="info-item">
				<view class="info-label">👤 发起人</view>
				<view class="info-value">{{currentItem.sponsorName}}</view>
			</view>
			<view class="info-item">
				<view class="info-label">👥 人数</view>
				<view class="info-value">{{currentItem.currentNum}} / {{currentItem.limitNum}}</view>
			</view>
			<view class="info-item">
				<view class="info-label">💕 性别偏好</view>
				<view class="info-value">{{currentItem.prefer == 1 ? '偏好男性' : currentItem.prefer == 2 ? '偏好女性' : '男女不限'}}</view>
			</view>
		</view>
				<view class="modal-footer">
					<button class="modal-btn-cancel" @click="closeModal">取消</button>
					<button class="modal-btn-confirm" @click="joinTeam">确认加入</button>
				</view>
			</view>
		</view>
 

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#010000",
                },
				tabindex:1,
				pinzhuolist:[],
				user:'',
				teamobj:{},
				teamtwoobj:{},
				dateflag:false,
				dots: '.',
				timer: null,
				// 添加所有可选的图片数组
				allImages: [
					'https://api.ccttiot.com/smartmeter/img/static/uW6Nsdsbk3cm0JZcYdZ3',
					'https://api.ccttiot.com/smartmeter/img/static/u7ZMnMLrVfVloU1aQqlk',
					'https://api.ccttiot.com/smartmeter/img/static/uL3sR8uy6FQGX1WJlcuc',
					'https://api.ccttiot.com/smartmeter/img/static/uXnB3jfIGCwoAIGcNPsC',
					'https://api.ccttiot.com/smartmeter/img/static/uMo03QdTdngUdZXCXZLx',
					'https://api.ccttiot.com/smartmeter/img/static/uVbSWjNqRhZPiho4AIiJ',
					'https://api.ccttiot.com/smartmeter/img/static/uac9z9s7LPIMjidGwEUU',
					'https://api.ccttiot.com/smartmeter/img/static/uJPWutuFYeOejOAXn8FI',
					'https://api.ccttiot.com/smartmeter/img/static/uc95pV4gpCPfacUT56Sb',
					'https://api.ccttiot.com/smartmeter/img/static/uw3LumlMvIFxoR46Nk2M',
					'https://api.ccttiot.com/smartmeter/img/static/uWWUYfXUOpWsDGKO2cXT',
					'https://api.ccttiot.com/smartmeter/img/static/uuMZ9EM9dNIxvJJQ8PyG',
					'https://api.ccttiot.com/smartmeter/img/static/uAgBadpkh4G5w2ICo3Ri',
					'https://api.ccttiot.com/smartmeter/img/static/uQbjOPxJQsghlY79wutq',
					'https://api.ccttiot.com/smartmeter/img/static/u2ZFV9n4icW2oQr3rXPj',
					'https://api.ccttiot.com/smartmeter/img/static/ulR8mk1SEOghBK40NV6a',
					'https://api.ccttiot.com/smartmeter/img/static/uJpyxbAjX1iI0qRfXxHj',
					'https://api.ccttiot.com/smartmeter/img/static/uoxy6mhPIFyO2ojpEPNW',
				],
				// 随机选择的4张图片
				randomImages: [],
				showModal: false,
				currentItem: {},
			}
		},
		onLoad() {

		},
		onShow() {
			this.getdangqian()
			this.getinfo()
			this.getlist()
			this.getRandomImages() // 添加获取随机图片的调用
		},
		mounted() {
		    this.timer = setInterval(() => {
		      this.dots = this.dots.length >= 3 ? '.' : this.dots + '.'
		    }, 500)
		},
		beforeDestroy() {
		  clearInterval(this.timer)
		},
		methods: {
			// 查询是否有拼桌
			getdangqian(){
				this.$u.get(`/app/team/myTeam`).then(res => {
				    if (res.code == 200) {
						this.teamtwoobj = res.data
						if (res.data) {
						    this.teamobj = res.data.team
						    this.dateflag = true
						}else{
							this.dateflag = false
						}
				    }
				})
			},
			// 获取个人信息
			getinfo(){
				this.$u.get(`/getInfo`).then(res => {
				    if (res.code == 200) {
						this.user = res.user
				    }
				})
			},
			// 点击跳转到发布拼桌
			btnfabu(){
				uni.navigateTo({
					url:'/page_user/pingzhuo/cjpinzhuo?type=' + this.tabindex
				})
			},
			// 请求拼桌列表
			getlist(){
				this.$u.get(`/app/team/getTeamList?pageNum=1&pageSize=99&type=${this.tabindex}`).then(res =>{
					if(res.code == 200){
						this.pinzhuolist = res.rows
					}
				})
			},
			// 点击切换tab
			btntab(num){
				this.tabindex = num
				this.getlist()
			},
			// 点击我的记录
			btnjilu(){
				uni.navigateTo({
					url:'/page_user/pingzhuo/jilu?userid=' + this.user.userId
				})
			},
			// 点击进入我的拼桌详情
			btnchaxun(){
				uni.navigateTo({
					url:'/page_user/pingzhuo/zhuozixq?teamId=' + this.teamobj.id
				})
			},
			// 点击加入拼桌
			btnjrpz(item){
				this.$u.post(`/app/team/joinTeam?teamId=${item.id}`).then(res =>{
					if(res.code == 200){
						uni.navigateTo({
							url:'/page_user/pingzhuo/zhuozixq?teamId=' + item.id
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:2000
						})
					}
				})
			},
			// 获取随机图片
			getRandomImages() {
				// 复制原数组
				let tempArray = [...this.allImages]
				// 随机选择4张图片
				this.randomImages = []
				for(let i = 0; i < 4; i++) {
					if(tempArray.length > 0) {
						const randomIndex = Math.floor(Math.random() * tempArray.length)
						this.randomImages.push(tempArray[randomIndex])
						tempArray.splice(randomIndex, 1)
					}
				}
			},
			showDetailModal(item) {
				this.currentItem = item;
				this.showModal = true;
			},
			closeModal() {
				this.showModal = false;
				this.currentItem = {};
			},
			joinTeam() {
				this.$u.post(`/app/team/joinTeam?teamId=${this.currentItem.id}`).then(res =>{
					if(res.code == 200){
						uni.navigateTo({
							url:'/page_user/pingzhuo/zhuozixq?teamId=' + this.currentItem.id
						})
						this.closeModal();
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:2000
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #010000;
		padding-bottom: 50rpx;
		box-sizing: border-box;
	}
	.active{
		font-weight: 600;
		font-size: 32rpx !important;
		color: #FFFFFF !important;
	}
	.yuyue{
		width: 700rpx;
		height: 202rpx;
		position: relative;
		margin: auto;
		margin-top: 42rpx;
		.wenzi{
			position: absolute;
			top: 0;
			left: 0;
			padding: 36rpx 32rpx;
			box-sizing: border-box;
			.top{
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.duoshao{
				display: flex;
				align-items: center;
				margin-top: 44rpx;
				.img{
					display: flex;
					align-items: center;
					image{
						width: 34rpx;
						height: 34rpx;
						border-radius: 50%;
						margin-left: -10rpx;
						filter: blur(10px);
						-webkit-filter: blur(1px);
					}
				}
			}
		}
		.bj{
			position: absolute;
			top: 0;
			left: 0;
			width: 700rpx;
			height: 202rpx;
		}
	}
	.list{
		width: 100%;
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.item_list{
			width: 340rpx;
			height: 344rpx;
			background: #1C1C1E;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			padding: 26rpx 22rpx;
			box-sizing: border-box;
			margin-top: 22rpx;
			.anniu{
				width: 296rpx;
				height: 56rpx;
				background: #322C2D;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #FF8998;
				text-align: center;
				line-height: 56rpx;
				margin-top: 18rpx;
			}
			.top{
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.jairu{
				margin-top: 22rpx;
				display: flex;
				align-items: center;
				image{
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
				font-size: 22rpx;
				color: #FFFFFF;
			}
			.myxx{
				display: flex;
				align-items: center;
				margin-top: 26rpx;
				.myname{
					.zhuohao{
						font-weight: 600;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.wo{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #FFFFFF;
						text{
							width: 24rpx;
							height: 24rpx;
							background: linear-gradient( 135deg, #76FF8E 0%, #BAFFE5 100%);
							border-radius: 6rpx 6rpx 6rpx 6rpx;
							font-size: 16rpx;
							color: #1D5013;
							text-align: center;
							line-height: 24rpx;
							margin-right: 8rpx;
						}
					}
				}
				.myimg{
					width: 62rpx;
					height: 62rpx;
					position: relative;
					margin-right: 30rpx;
					.tx{
						width: 62rpx;
						height: 62rpx;
						border-radius: 50%;
					}
					.xb{
						width: 26rpx;
						height: 26rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}
		}
	}
	.xzname{
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		width: 700rpx;	
		margin: auto;
		margin-top: 42rpx;
	}
	.bd{
		width: 700rpx;
		height: 284rpx;
		margin: auto;
		margin-top: 42rpx;
		position: relative;
		.bdbot{
			position: absolute;
			bottom:0;
			left: 0;
			width: 700rpx;
			height: 82rpx;
			background: #1C1C1E;
			display: flex;
			justify-content: space-between;
			align-items:center;
			padding: 26rpx 40rpx;
			box-sizing: border-box;
			border-radius:  0 0 24rpx 24rpx;
			.lt{
				font-size: 24rpx;
				color: #FFFFFF;
				width: 200rpx;
			}
			.cen{
				font-size: 24rpx;
				color: #FFFFFF;
				text{
					color: #FF8998;
				}
			}
			.rt{
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.bdtop{
			position: absolute;
			top: 0;
			left: 0;
			padding: 36rpx 32rpx;
			box-sizing: border-box;
			.myxx{
				display: flex;
				align-items: center;
				margin-top: 26rpx;
				.myname{
					.zhuohao{
						font-weight: 600;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.wo{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #FFFFFF;
						text{
							width: 24rpx;
							height: 24rpx;
							background: linear-gradient( 135deg, #76FF8E 0%, #BAFFE5 100%);
							border-radius: 6rpx 6rpx 6rpx 6rpx;
							font-size: 16rpx;
							color: #1D5013;
							text-align: center;
							line-height: 24rpx;
							margin-right: 8rpx;
						}
					}
				}
				.myimg{	
					width: 62rpx;
					height: 62rpx;
					position: relative;
					margin-right: 30rpx;
					.tx{
						width: 62rpx;
						height: 62rpx;
						border-radius: 50%;
					}
					.xb{
						width: 16rpx;
						height: 16rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}
			.fabu{
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.bj{
				width: 700rpx;
				height: 202rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}
	}
	.tab{
		width: 750rpx;
		height: 180rpx;
		background: #1C1C1E;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding-top: 24rpx;
		padding-left: 52rpx;
		padding-right: 52rpx;
		padding-bottom: 28rpx;
		margin-top: 28rpx;
		box-sizing: border-box;
		color: #fff;
		font-size: 28rpx;
		.bot{
			display: flex;
			justify-content: space-between;
			padding: 0 140rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			color: #808080;
			margin-top: 38rpx;
			view{
				view{
					width: 40rpx;
					height: 6rpx;
					background: #FF8998;
					border-radius: 5rpx 5rpx 5rpx 5rpx;
					margin: auto;
					margin-top: 10rpx;
				}
			}
		}
		.top{
			display: flex;
			justify-content: space-between;
			view{
				display: flex;
				align-items: center;
				image{
					width: 26rpx;
					height: 26rpx;
					margin-right: 14rpx;
				}
			}
		}
	}
	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 100%);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		backdrop-filter: blur(10rpx);
		animation: fadeIn 0.3s ease-out;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.modal-content {
		background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 50%, #2A2A2C 100%);
		border-radius: 24rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5), 0 0 0 1rpx rgba(255, 255, 255, 0.1);
		width: 650rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx 40rpx;
		box-sizing: border-box;
		animation: slideUp 0.3s ease-out;
		overflow: hidden;
		border: 1rpx solid rgba(255, 137, 152, 0.2);
	}

	@keyframes slideUp {
		from {
			transform: translateY(50rpx);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.modal-content::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4rpx;
		background: linear-gradient(90deg, #FF8998 0%, #FFB199 50%, #FF8998 100%);
	}

	.modal-close {
		position: absolute;
		top: 25rpx;
		right: 25rpx;
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #FFFFFF;
		z-index: 1;
		backdrop-filter: blur(10rpx);
		transition: all 0.3s ease;
	}

	.modal-close:active {
		background: rgba(255, 255, 255, 0.2);
		transform: scale(0.95);
	}

	.modal-header {
		text-align: center;
		margin-bottom: 40rpx;
		width: 100%;
	}

	.modal-title {
		font-size: 42rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 15rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		background: linear-gradient(135deg, #FF8998 0%, #FFB199 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.modal-sub {
		font-size: 26rpx;
		color: #B8B8B8;
		background: linear-gradient(135deg, rgba(255, 137, 152, 0.15) 0%, rgba(255, 177, 153, 0.15) 100%);
		padding: 12rpx 24rpx;
		border-radius: 25rpx;
		display: inline-block;
		border: 1rpx solid rgba(255, 137, 152, 0.4);
		backdrop-filter: blur(10rpx);
		box-shadow: 0 4rpx 12rpx rgba(255, 137, 152, 0.2);
	}

	.modal-body {
		width: 100%;
		margin-bottom: 40rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
		position: relative;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-item:first-child {
		padding-top: 0;
	}

	.info-item::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 2rpx;
		background: linear-gradient(90deg, #FF8998, #FFB199);
		transition: width 0.3s ease;
	}

	.info-item:hover::after {
		width: 100%;
	}

	.info-label {
		font-size: 28rpx;
		color: #B8B8B8;
		font-weight: 500;
	}

	.info-value {
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 600;
		text-align: right;
		max-width: 60%;
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
		width: 100%;
		gap: 20rpx;
	}

	.modal-btn-cancel, .modal-btn-confirm {
		flex: 1;
		padding: 14rpx 0;
		border: none;
		border-radius: 16rpx;
		font-size: 30rpx;
		font-weight: 600;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.modal-btn-cancel {
		background: linear-gradient(135deg, #333333 0%, #444444 100%);
		color: #fff;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}

	.modal-btn-cancel:active {
		transform: scale(0.98);
		background: linear-gradient(135deg, #444444 0%, #555555 100%);
	}

	.modal-btn-confirm {
		background: linear-gradient(135deg, #FF8998 0%, #FFB199 100%);
		color: #fff;
		box-shadow: 0 8rpx 20rpx rgba(255, 137, 152, 0.3);
		border: 1rpx solid rgba(255, 137, 152, 0.3);
	}

	.modal-btn-confirm:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 10rpx rgba(255, 137, 152, 0.3);
	}

	.modal-btn-confirm::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s;
	}

	.modal-btn-confirm:active::before {
		left: 100%;
	}
</style>