301 lines
9.9 KiB
Vue
301 lines
9.9 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="" style="width: 100%; height: 386rpx; background-color: antiquewhite;">
|
||
<swiper class="img-swiper" :indicator-dots="false" circular autoplay interval="3000">
|
||
<swiper-item v-for="(item, index) in imgList" :key="index">
|
||
<image :src="item" mode="widthFix" class="slide-img"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<view class="" style="display: flex; align-items: right; width: 100%; margin-top: 10rpx;">
|
||
<view class="row center" style="margin-left: auto; margin-right: 20rpx;">
|
||
<image src="/static/refresh.png" style="width: 30rpx; height: 30rpx;" mode=""></image>
|
||
<text style="margin-left: 20rpx;">刷新</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="" style="width: 95%; padding: 0 auto 0; margin-top: 10rpx; overflow: auto;flex: 1">
|
||
|
||
<view class="grid-container">
|
||
<view class="grid-item" v-for="(item, index) in 8" :key="index" @click="openPop()">
|
||
<view class="item-content column">
|
||
|
||
<view class="center"
|
||
style="width: 100%; height: 400rpx; background-color: #D4D4D4; border-radius: 10rpx 10rpx 0 0; position: relative;">
|
||
|
||
<text
|
||
style="position: absolute; left: 15rpx; top: 15rpx; font-size: 16rpx; color: black;">组局中</text>
|
||
|
||
<image src="/static/9.png" style="width: 100rpx; height: 100rpx; position: absolute;"
|
||
mode=""></image>
|
||
|
||
<view class=""
|
||
style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; top: 50rpx; border-radius: 50%;">
|
||
<image src=""
|
||
style="width: 100%; height: 100%; background-color: aqua; border-radius: 50%;">
|
||
</image>
|
||
</view>
|
||
|
||
<view class=""
|
||
style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; left: 30rpx; border-radius: 50%;">
|
||
<image src=""
|
||
style="width: 100%; height: 100%; background-color: aqua; border-radius: 50%;">
|
||
</image>
|
||
</view>
|
||
|
||
<view class=""
|
||
style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; right: 30rpx; border-radius: 50%;">
|
||
<image src=""
|
||
style="width: 100%; height: 100%; background-color: aqua; border-radius: 50%;">
|
||
</image>
|
||
</view>
|
||
|
||
<view class="center"
|
||
style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; bottom: 50rpx; border-radius: 50%;">
|
||
<!-- <image src="" style="width: 100%; height: 100%; border-radius: 50%;"></image> -->
|
||
<text style="color: black;">+</text>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
<text
|
||
style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">休闲局，随便来</text>
|
||
<text style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">20：00 ~
|
||
04：30 共8小时30分钟</text>
|
||
<text
|
||
style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">304包厢-大包，4人</text>
|
||
<text
|
||
style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">不可吸烟、性别不限、信誉≧4.0</text>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<uni-popup ref="cardInfo" type="center">
|
||
|
||
<view class="column center"
|
||
style="width: 680rpx; background-color: white; border-radius: 10rpx; padding: 20rpx;">
|
||
|
||
<text style="">预约信息</text>
|
||
|
||
<view class="column"
|
||
style="width: 100%; height: 180rpx; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx;">
|
||
<view class="row" style="margin-top: 20rpx; align-items: center; margin-left: 20rpx;">
|
||
<text style="font-size: 22rpx;">发起者</text>
|
||
<image src=""
|
||
style="width: 50rpx; height: 50rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 20rpx;"
|
||
mode=""></image>
|
||
<text style="font-size: 20rpx; margin-left: 15rpx;">苏家辉</text>
|
||
</view>
|
||
<view class="row" style="margin-top: 30rpx; align-items: center; margin-left: 20rpx;">
|
||
<text style="font-size: 22rpx;">参与者</text>
|
||
|
||
<view class="row" v-for="(item,index) in 3" style="align-items: center;">
|
||
|
||
<view class="" style="position: relative; width: 50rpx; height: 50rpx; display: flex;">
|
||
<image src="" @click="openUserPop()"
|
||
style="width: 50rpx; height: 50rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 20rpx; position: absolute;"
|
||
mode=""></image>
|
||
|
||
<view class="center"
|
||
style="width: 50rpx; height: 20rpx; background-color: #FFB7B7; position: absolute; left: 40%; top: -10rpx;">
|
||
<text style="font-size: 10rpx;">黑名单</text>
|
||
</view>
|
||
</view>
|
||
|
||
<text
|
||
style="font-size: 20rpx; margin-left: 30rpx; width: 100rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">树下的胖子</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<view class="column"
|
||
style="width: 100%; height: 180rpx; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx;font-size: 22rpx;">
|
||
|
||
<view class="row" style="justify-content: space-between; margin: 20rpx;">
|
||
<text>开始时间</text>
|
||
<text>2025/08/27 15：30</text>
|
||
</view>
|
||
<view class="row" style="justify-content: space-between; margin: 0 20rpx; 0">
|
||
<text>结束时间</text>
|
||
<text>2025/08/27 17：30</text>
|
||
</view>
|
||
|
||
<text style="margin: 30rpx 20rpx; 0">合计：2小时</text>
|
||
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
|
||
<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">房间号：304号-大包，30元/小时</text>
|
||
<text style="margin: 10rpx 20rpx;">人数：3人</text>
|
||
<text style="margin: 10rpx 20rpx;">玩法类型：扑克</text>
|
||
<text style="margin: 10rpx 20rpx;">具体规则：斗地主</text>
|
||
<text style="margin: 10rpx 20rpx 20rpx;">补充信息：无</text>
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
|
||
<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">是否禁烟：禁烟</text>
|
||
<text style="margin: 10rpx 20rpx;">性别：不限</text>
|
||
<text style="margin: 10rpx 20rpx 20rpx;">信誉：≧4.0</text>
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
|
||
<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">鸽子费：0元</text>
|
||
<text
|
||
style="margin: 10rpx 20rpx 20rpx; color: #9F9F9F;">组局成功后若有牌友未赴约，其鸽子费平均分给其他牌友。组局成功或失败后鸽子费将全额返还。</text>
|
||
</view>
|
||
|
||
<view class="row" style="width: 100%; margin-top: 30rpx;">
|
||
<view class="center" @click="clasePop()"
|
||
style="height: 80rpx; flex: 1; background-color: #9F9F9F; border-radius: 10rpx;">
|
||
<text style="font-size: 24rpx; font-weight: 600; color: white;">关闭</text>
|
||
</view>
|
||
<view class="center"
|
||
style="height: 80rpx; flex: 3; background-color: #1989FA; border-radius: 10rpx; margin-left: 20rpx;">
|
||
<text style="font-size: 24rpx; font-weight: 600; color: white;">参与组局</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
|
||
<uni-popup ref="userInfo" type="center">
|
||
|
||
<view class="column" style="width: 500rpx; background-color: white; padding: 20rpx;">
|
||
|
||
<image @click="closeUserPop()" src="/static/ic_close.png"
|
||
style="width: 20rpx; height: 20rpx; margin-left: auto;" mode="">
|
||
</image>
|
||
|
||
<view class="row" style="align-items: center;">
|
||
|
||
<image src="" style="width: 80rpx; height: 80rpx; background-color: aquamarine; border-radius: 50%;"
|
||
mode="">
|
||
</image>
|
||
|
||
<view class="column" style="font-size: 24rpx; margin-left: 20rpx;">
|
||
|
||
<text>树下的胖子</text>
|
||
<text style="margin-top: 10rpx;">男，30岁，已参与20次，信誉5.0</text>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="row" style="align-items: center; margin-top: 20rpx;">
|
||
<text style="font-size: 24rpx;">Ta的评分 </text>
|
||
<text style="font-size: 40rpx; color: #ED3535; margin-left: 10rpx;">4.6</text>
|
||
</view>
|
||
|
||
<view class="row" style="align-items: center; margin-top: 20rpx;">
|
||
<text style="font-size: 24rpx;">牌品</text>
|
||
<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="rateValue" @change="onChange" />
|
||
</view>
|
||
|
||
<view class="row" style="align-items: center; margin-top: 20rpx;">
|
||
<text style="font-size: 24rpx;">牌技</text>
|
||
<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="rateValue" @change="onChange" />
|
||
</view>
|
||
|
||
<text style="font-size: 24rpx; margin-top: 20rpx;">鸽子数 0次</text>
|
||
|
||
|
||
</view>
|
||
|
||
</uni-popup>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: 'Hello',
|
||
imgList: [1, 2, 3, 4, 5],
|
||
dataList: [1, 2, 3, 4, 5, 6, 7, 8],
|
||
rateValue: 3.5
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
|
||
openPop() {
|
||
this.$refs.cardInfo.open();
|
||
},
|
||
|
||
clasePop() {
|
||
this.$refs.cardInfo.close();
|
||
},
|
||
|
||
openUserPop() {
|
||
this.$refs.userInfo.open();
|
||
},
|
||
closeUserPop() {
|
||
this.$refs.userInfo.close();
|
||
},
|
||
|
||
onChange(e) {
|
||
console.log('rate发生改变:' + JSON.stringify(e))
|
||
// console.log(this.rateValue);
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.img-swiper {
|
||
width: 100%;
|
||
height: 386rpx;
|
||
}
|
||
|
||
.slide-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
background-color: aqua;
|
||
}
|
||
|
||
/* 网格容器 - 4列布局 */
|
||
.grid-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
/* 4列，每列宽度相等 */
|
||
gap: 20rpx;
|
||
/* 网格间距（行列间距相同） */
|
||
}
|
||
|
||
/* 网格项内容 */
|
||
.item-content {
|
||
height: 630rpx;
|
||
background-color: #E6E6E6;
|
||
color: white;
|
||
border-radius: 10rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
</style> |