866 lines
21 KiB
Vue
866 lines
21 KiB
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> |