Fdily/roll-room
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
Fdily
2026-04-24 15:10:17 +08:00
parent c1e3c3524c
commit e6b2e8e3f5
6 changed files with 946 additions and 1245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
odcs2.com/src/App.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div id="app" class="app"> <div id="app" class="app">
<div class="content"> <div class="content">
<headerTop id="headerTop"></headerTop> <headerTop id="headerTop" v-if="!$route.meta.hideHeader && $route.name !== 'home'"></headerTop>
<!-- animate__animated animate__fadeInLeft --> <!-- animate__animated animate__fadeInLeft -->
<router-view class="appview" v-if="!$route.meta.iskeep"></router-view> <router-view class="appview" v-if="!$route.meta.iskeep"></router-view>
<keep-alive> <keep-alive>
@@ -12,7 +12,7 @@
<!-- <slider v-if="slider" class="App_slider"></slider> --> <!-- <slider v-if="slider" class="App_slider"></slider> -->
<illustrate v-if="isillustrate" class></illustrate> <illustrate v-if="isillustrate" class></illustrate>
<bottomUser id="bottomUser"></bottomUser> <bottomUser id="bottomUser" v-if="false"></bottomUser>
<!-- 广告 --> <!-- 广告 -->
<advert :img="advertisementImg" v-if="advertStatus"></advert> <advert :img="advertisementImg" v-if="advertStatus"></advert>
</div> </div>
@@ -77,8 +77,8 @@ export default {
window.history.back(); window.history.back();
} }
} }
let aa = document.getElementById("headerTop").offsetHeight; let aa = document.getElementById("headerTop") ? document.getElementById("headerTop").offsetHeight : 0;
let bb = document.getElementById("bottomUser").offsetHeight; let bb = document.getElementById("bottomUser") ? document.getElementById("bottomUser").offsetHeight : 0;
this.he = aa + bb; this.he = aa + bb;
this.getToken(); this.getToken();
@@ -215,9 +215,8 @@ export default {
.appview { .appview {
overflow-y: scroll; overflow-y: scroll;
position: relative; position: relative;
height: calc(100vh - 8rem); height: 100vh;
padding-bottom: 4rem !important; padding-bottom: 0 !important;
// padding-bottom: 200px;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
.appview { .appview {

2
odcs2.com/src/components/headerTop.vue
View File

@@ -73,7 +73,7 @@
</modalCurrency> --> </modalCurrency> -->
</div> </div>
<!-- 占位元素，防止内容被固定定位的header遮挡 --> <!-- 占位元素，防止内容被固定定位的header遮挡 -->
<div class="header-placeholder"></div> <div class="header-placeholder" v-show="!$route.meta.hideHeader"></div>
</div> </div>
</template> </template>

1
odcs2.com/src/router/index.js
View File

@@ -149,6 +149,7 @@ const routes = [
path: "/rolldetial", path: "/rolldetial",
name: "rolldetial", name: "rolldetial",
component: () => import("../views/rollHome/common/rolldetial.vue"), component: () => import("../views/rollHome/common/rolldetial.vue"),
meta: { hideHeader: true },
}, },
{ {
path: "/index2", path: "/index2",

4
odcs2.com/src/views/Home/common/login.vue
View File

@@ -13,10 +13,10 @@
<div class="main_center" v-if="status == 'dl'"> <div class="main_center" v-if="status == 'dl'">
<div class="main_top">登录</div> <div class="main_top">登录</div>
<div class="main_input"> <div class="main_input">
<input type="text" v-model="form.phoneNumber" placeholder="请输入账号" /> <input type="text" v-model="form.phoneNumber" placeholder="请输入账号" autocomplete="off" />
</div> </div>
<div class="main_input"> <div class="main_input">
<input type="password" placeholder="请输入密码" v-model="form.password" @keyup.enter="handleLogin" /> <input type="password" placeholder="请输入密码" v-model="form.password" @keyup.enter="handleLogin" autocomplete="new-password" />
</div> </div>
<div class="main_pwd" v-if="false"> <div class="main_pwd" v-if="false">
<div class="main_input_right" @click=" <div class="main_input_right" @click="

1360
odcs2.com/src/views/rollHome/common/rolldetial.vue
View File

File diff suppressed because it is too large Load Diff

815
odcs2.com/src/views/rollHome/index.vue
View File

@@ -1,249 +1,118 @@
<template> <template>
<div class="home"> <div class="home">
<!-- <div>{{list}}</div> --> <!-- <div>{{list}}</div> -->
<div class="header_top"> <!-- 第一行：头像 + 昵称，无背景卡片，融入深蓝背景 -->
<div style="width:4.5rem"></div> <div class="page_header_user">
<div @click="playAudio()">ROLL房</div> <div class="page_avatar_wrap">
<div <img :src="loginAvatar" @error="$event.target.src = defaultAvatar" alt class="page_avatar_img" />
@click="
handleilltate();
playAudio();
"
>
玩法说明
</div> </div>
<span class="page_nickname">{{ (USER_INFO && USER_INFO.nickName) || '' }}</span>
<div class="page_logout_btn" @click="handleLogout">退出</div>
</div> </div>
<div class="roll_status "> <!-- 第二行：ROLL房标题 + 玩法说明 -->
<div <div class="page_title_row">
@click=" <div style="width:60px"></div>
handleChange(0); <div class="page_title">ROLL房</div>
playAudio(); <div class="page_rule_btn" @click="handleilltate(); playAudio();">玩法说明</div>
" </div>
:class="type == 0 ? 'active' : ''" <!-- 第三行：Tab栏 -->
class="status_btn center" <div class="roll_status">
> <div @click="handleChange(0); playAudio();" :class="type == 0 ? 'active' : ''" class="status_btn center">进行中</div>
进行中 <div @click="handleChange(1); playAudio();" :class="type == 1 ? 'active' : ''" class="status_btn center">已结束</div>
</div> <div @click="handlemy(2); playAudio();" :class="type == 2 ? 'active' : ''" class="status_btn center">我参与的</div>
<div
@click="
handleChange(1);
playAudio();
"
:class="type == 1 ? 'active' : ''"
class="status_btn center"
>
已结束
</div>
<div
@click="
handlemy(2);
playAudio();
"
:class="type == 2 ? 'active' : ''"
class="status_btn center"
>
我参与的
</div>
</div> </div>
<div class="roll_type_serch space_between">
<!-- 官方/主播筛选已隐藏
<div class="roll_type space_around">
<div
@click="
handletype(0);
playAudio();
"
class="type_btn center"
:class="queryParams.rollType === 0 ? 'active' : ''"
>
官方
</div>
<div
@click="
handletype(1);
playAudio();
"
class="type_btn center"
:class="queryParams.rollType === 1 ? 'active' : ''"
>
主播
</div>
</div>
-->
<div class="roll_serch roll_serch_full">
<input
type="text"
v-model="queryParams.rollName"
name
id
style="serch"
placeholder="请输入ROLL房名称"
/>
<div @click="handleserch"
class="icon"></div>
</div>
</div>
<div class="roll_room_list" @scroll="scroll"> <div class="roll_room_list" @scroll="scroll">
<div <div class="roll_room_grid">
:class="{ <div
'roll_room animate__animated finish': item.rollStatus == 1, :class="[
'roll_room animate__animated anchor': 'roll_room',
item.rollStatus != 1 && item.rollType == 1, item.rollStatus == 1 ? 'finish' : (item.rollType == 1 ? 'anchor' : 'official')
'roll_room animate__animated official': ]"
item.rollStatus != 1 && item.rollType == 0, v-for="(item, index) in rolllist"
}" :key="index"
v-for="(item, index) in rolllist" >
:key="index" <!-- 标题行 -->
@click=" <div class="room_card_header">
handleGo(item.id); <div class="room_card_name">{{ item.rollName }}</div>
playAudio(); <div class="room_card_time">
" <span class="time_icon">&#9201;</span> {{ item.endTime }}
> </div>
<div class="room_type center">{{ item.rollTypeName }}</div> </div>
<div class="room_title left"> <!-- 奖品图片区：第一行2个大格，第二行1个小格+剩余数 -->
<div class="room_card_weapons">
<div class="room_name left">{{ item.rollName }}</div> <!-- 第一行：前2个 -->
</div> <div class="weapons_row weapons_row_top">
<div class="room_weapon"> <div
<div class="room_weapon_back left"> class="card_weapon_item"
v-for="(weapon, wi) in JSON.parse(item.ornamentsList).slice(0, 2)"
:key="wi"
>
<div class="card_price">
<span class="price_diamond">&#9830;</span> {{ weapon.price }}
</div>
<img :src="getPrizeImg(weapon)" alt />
</div>
</div>
<!-- 第二行：第3个 + +N -->
<div class="weapons_row weapons_row_bot" v-if="JSON.parse(item.ornamentsList).length > 2">
<div class="card_weapon_item card_weapon_item_sm">
<div class="card_price">
<span class="price_diamond">&#9830;</span> {{ JSON.parse(item.ornamentsList)[2].price }}
</div>
<img :src="getPrizeImg(JSON.parse(item.ornamentsList)[2])" alt />
</div>
<div
class="card_weapon_more"
v-if="JSON.parse(item.ornamentsList).length > 3"
>
+{{ JSON.parse(item.ornamentsList).length - 3 }}
</div>
</div>
</div>
<!-- 底部信息行 -->
<div class="room_card_footer">
<div class="card_footer_info">
<span class="price_diamond">&#9830;</span>
<span class="total_price">{{ item.totalOrnamentsPrice }}</span>
<span class="people_icon" style="margin-left:8px">&#128100;</span>
<span>{{ item.currentPeopleNum }}</span>
</div>
</div>
<!-- 按钮区 -->
<div class="room_card_btns">
<div <div
class="weapon_bg center" v-if="item.rollStatus === '1'"
v-for="(weapon, weaponindex) in JSON.parse(item.ornamentsList)" class="card_btn_ended center"
:key="weaponindex" @click.stop="handleGo(item.id); playAudio();"
:style="{ >查看结果</div>
background: `url(${weapon.ornamentsLevelImg}) center no-repeat`, <template v-if="item.rollStatus === '0'">
'background-size': '60px 60px', <div
}" class="card_btn_join center"
> @click.stop="handleJoinDirect(item); playAudio();"
<img :src="getPrizeImg(weapon)" alt width="60px" /> >立即加入</div>
</div> <div
</div> class="card_btn_view center"
</div> @click.stop="handleGo(item.id); playAudio();"
<div class="room_detial space_around"> >前往查看</div>
<div class="detial_public center"> </template>
<svg
t="1706769767743"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
p-id="3482"
>
<path
d="M650.24 230.4H921.6c43.52 0 76.8 33.28 76.8 76.8s-33.28 76.8-76.8 76.8H102.4c-43.52 0-76.8-33.28-76.8-76.8s33.28-76.8 76.8-76.8h271.36l-102.4-58.88C235.52 151.04 222.72 102.4 243.2 66.56s69.12-48.64 104.96-28.16L512 133.12l163.84-94.72c35.84-20.48 84.48-7.68 104.96 28.16 20.48 35.84 7.68 84.48-28.16 104.96l-102.4 58.88zM153.6 435.2h716.8c43.52 0 76.8 33.28 76.8 76.8v409.6c0 43.52-33.28 76.8-76.8 76.8H153.6c-43.52 0-76.8-33.28-76.8-76.8V512c0-43.52 33.28-76.8 76.8-76.8z"
fill="#3A97E4"
p-id="3483"
/>
</svg>
{{ item.ornamentsNum }}
</div>
<div class="detial_public center">
<svg
t="1706770215849"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
p-id="3627"
>
<path
d="M164.445091 330.984727c0-95.604364 79.080727-173.102545 176.64-173.102545 97.605818 0 176.686545 77.498182 176.686545 173.102545s-79.127273 173.102545-176.686545 173.102546-176.64-77.498182-176.64-173.102546zM407.272727 808.354909v-11.962182c0-88.250182 45.986909-165.794909 115.339637-211.502545a230.958545 230.958545 0 0 0-100.491637-23.086546H274.850909c-126.045091 0-228.212364 100.072727-228.212364 223.557819v14.42909c0 50.501818 102.167273 50.501818 228.212364 50.501819H415.650909a101.841455 101.841455 0 0 1-8.378182-41.937455z m313.623273-532.852364c-80.942545 0-146.618182 64.325818-146.618182 143.685819s65.675636 143.685818 146.618182 143.685818c80.989091 0 146.618182-64.325818 146.618182-143.685818s-65.582545-143.685818-146.618182-143.685819z m0 0c-80.942545 0-146.618182 64.325818-146.618182 143.685819s65.675636 143.685818 146.618182 143.685818c80.989091 0 146.618182-64.325818 146.618182-143.685818s-65.582545-143.685818-146.618182-143.685819z m-54.923636 335.313455c-104.634182 0-189.44 83.083636-189.44 185.576727v11.962182c0 41.890909 84.805818 41.890909 189.44 41.890909h122.228363c104.587636 0 189.346909-1.536 189.346909-41.890909v-11.962182c0-102.493091-84.759273-185.576727-189.346909-185.576727h-122.228363z m0 0"
fill="#727477"
p-id="3628"
/>
</svg>
{{ item.currentPeopleNum }} / {{ item.peopleNum }}
</div>
<div
class="detial_public center"
style="color: rgba(37, 244, 132, 1)"
>
<svg
t="1706770289544"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="3776"
>
<path
d="M955.733333 511.931733q0 10.922667-0.546133 21.777067-0.512 10.888533-1.604267 21.7088-1.024 10.8544-2.6624 21.640533-1.604267 10.752-3.720533 21.435734t-4.778667 21.265066q-2.628267 10.581333-5.802666 20.957867-3.140267 10.4448-6.826667 20.6848-3.652267 10.24-7.850667 20.343467-4.164267 10.0352-8.8064 19.899733-4.676267 9.8304-9.796266 19.456-5.12 9.591467-10.717867 18.944-5.632 9.3184-11.6736 18.397867-6.0416 9.045333-12.526933 17.783466-6.485333 8.772267-13.4144 17.169067-6.894933 8.430933-14.2336 16.4864-7.304533 8.0896-15.018667 15.7696-7.68 7.714133-15.7696 15.018667-8.055467 7.338667-16.4864 14.2336-8.430933 6.929067-17.169067 13.4144t-17.8176 12.526933q-9.045333 6.0416-18.397866 11.639467-9.3184 5.597867-18.944 10.752-9.591467 5.12-19.456 9.796266-9.8304 4.642133-19.899734 8.8064t-20.309333 7.850667q-10.24 3.652267-20.6848 6.826667-10.4448 3.1744-20.992 5.802666-10.581333 2.6624-21.265067 4.778667-10.683733 2.116267-21.469866 3.720533-10.752 1.604267-21.6064 2.6624-10.820267 1.058133-21.7088 1.604267t-21.777067 0.546133q-10.922667 0-21.777067-0.546133-10.888533-0.546133-21.7088-1.604267-10.8544-1.058133-21.640533-2.6624-10.752-1.604267-21.435733-3.754666-10.683733-2.082133-21.265067-4.744534-10.581333-2.628267-20.992-5.802666-10.410667-3.1744-20.6848-6.826667-10.24-3.6864-20.309333-7.850667-10.069333-4.164267-19.899734-8.8064-9.864533-4.676267-19.456-9.796266-9.6256-5.12-18.944-10.752-9.352533-5.597867-18.432-11.605334-9.045333-6.075733-17.783466-12.561066t-17.169067-13.4144q-8.430933-6.894933-16.4864-14.199467-8.0896-7.338667-15.7696-15.018667-7.714133-7.714133-15.018667-15.803733-7.338667-8.055467-14.2336-16.4864-6.929067-8.3968-13.4144-17.169067-6.485333-8.738133-12.526933-17.783466t-11.639467-18.432q-5.632-9.3184-10.752-18.909867-5.12-9.6256-9.796266-19.456-4.642133-9.864533-8.8064-19.899733-4.1984-10.069333-7.850667-20.343467-3.6864-10.24-6.826667-20.650667-3.1744-10.4448-5.802666-20.992-2.6624-10.581333-4.778667-21.265066-2.116267-10.683733-3.754667-21.435734-1.570133-10.786133-2.628266-21.640533-1.092267-10.820267-1.604267-21.7088Q68.266667 522.820267 68.266667 511.931733t0.546133-21.742933q0.512-10.922667 1.604267-21.742933 1.024-10.820267 2.6624-21.6064 1.604267-10.786133 3.720533-21.435734 2.116267-10.683733 4.778667-21.265066 2.628267-10.581333 5.802666-20.992 3.140267-10.410667 6.826667-20.6848 3.652267-10.24 7.850667-20.309334 4.164267-10.069333 8.8064-19.899733 4.676267-9.864533 9.796266-19.456 5.12-9.591467 10.752-18.944 5.597867-9.352533 11.605334-18.432 6.075733-9.0112 12.561066-17.749333 6.485333-8.772267 13.4144-17.2032 6.894933-8.3968 14.2336-16.4864 7.304533-8.055467 15.018667-15.7696 7.68-7.714133 15.7696-15.018667 8.055467-7.304533 16.4864-14.2336 8.430933-6.894933 17.169067-13.380267t17.8176-12.526933q9.045333-6.075733 18.397866-11.6736 9.3184-5.597867 18.944-10.717867 9.591467-5.12 19.456-9.796266 9.8304-4.642133 19.899734-8.840534 10.069333-4.164267 20.309333-7.850666 10.24-3.652267 20.6848-6.826667 10.4448-3.140267 20.992-5.802667 10.581333-2.628267 21.265067-4.778666 10.683733-2.082133 21.435733-3.6864 10.786133-1.604267 21.640533-2.6624 10.820267-1.092267 21.7088-1.604267Q501.111467 68.266667 512 68.266667q10.922667 0 21.777067 0.546133 10.888533 0.512 21.7088 1.604267 10.8544 1.024 21.6064 2.6624 10.786133 1.604267 21.504 3.720533 10.6496 2.116267 21.230933 4.778667 10.581333 2.628267 20.992 5.802666 10.410667 3.140267 20.6848 6.826667 10.24 3.652267 20.309333 7.850667 10.069333 4.164267 19.899734 8.8064 9.864533 4.642133 19.456 9.796266 9.6256 5.12 18.944 10.717867 9.352533 5.597867 18.432 11.6736 9.045333 6.0416 17.783466 12.526933t17.169067 13.380267q8.430933 6.929067 16.4864 14.2336 8.0896 7.304533 15.7696 15.018667 7.714133 7.714133 15.018667 15.7696 7.338667 8.0896 14.2336 16.4864 6.929067 8.430933 13.4144 17.169066 6.485333 8.772267 12.526933 17.8176t11.639467 18.397867q5.632 9.352533 10.752 18.944t9.796266 19.456q4.642133 9.8304 8.8064 19.899733 4.1984 10.069333 7.850667 20.309334 3.6864 10.24 6.826667 20.6848 3.1744 10.410667 5.802666 20.992 2.6624 10.581333 4.778667 21.265066 2.1504 10.6496 3.754667 21.435734 1.570133 10.786133 2.628266 21.6064 1.092267 10.8544 1.604267 21.7088 0.546133 10.922667 0.546133 21.777066z"
fill="#3fa2c7"
fill-opacity="0.1"
p-id="3777"
/>
<path
d="M71.68 325.973333Q34.133333 414.72 34.133333 511.8976q0 97.211733 37.546667 186.026667 36.283733 85.742933 102.4 151.8592 66.1504 66.116267 151.893333 102.4 88.814933 37.546667 186.026667 37.546666 97.211733 0 186.026667-37.546666 85.742933-36.283733 151.893333-102.4 66.116267-66.116267 102.4-151.893334 37.546667-88.7808 37.546667-185.992533 0-97.1776-37.546667-185.992533-36.283733-85.742933-102.4-151.8592-66.1504-66.116267-151.893333-102.4Q609.211733 34.133333 512 34.133333q-97.211733 0-186.026667 37.546667-85.742933 36.283733-151.893333 102.4-66.116267 66.116267-102.4 151.893333z m62.907733 345.361067Q102.4 595.285333 102.4 511.931733q0-83.319467 32.187733-159.402666 31.061333-73.489067 87.790934-130.184534 56.695467-56.661333 130.184533-87.790933Q428.6464 102.4 512 102.4t159.402667 32.1536q73.5232 31.095467 130.218666 87.790933 56.7296 56.695467 87.790934 130.184534 32.187733 76.0832 32.187733 159.402666 0 83.3536-32.187733 159.402667-31.061333 73.489067-87.790934 130.184533-56.695467 56.7296-130.184533 87.790934-76.0832 32.187733-159.4368 32.187733t-159.402667-32.187733q-73.5232-31.061333-130.218666-87.790934-56.7296-56.661333-87.790934-130.184533z"
fill="#3fa2c7"
p-id="3778"
/>
<path
d="M584.2944 657.2032H785.066667l-37.7856-16.657067v-248.081066L785.066667 375.466667h-127.931734l-145.646933 145.3056L363.178667 375.466667H238.933333l36.078934 16.9984v248.081066L238.933333 657.2032h199.0656l-35.7376-16.657067v-93.252266l104.106667 138.171733h10.581333l102.741334-138.171733v92.910933l-35.396267 16.9984z"
fill="#3fa2c7"
p-id="3779"
/>
</svg>
{{ item.totalOrnamentsPrice }}
</div>
<div
class="roll_time"
v-if="item.rollStatus === '0'"
style="color: rgba(194, 61, 212, 1)"
>
{{ item.endTime }}
</div>
<div
class="roll_time"
v-if="item.rollStatus === '1'"
style="color: rgba(78, 78, 78, 1)"
>
{{ item.endTime }}
</div>
</div>
<div class="room_btn_bg" >
<!-- && item.rollType === '0'" -->
<div v-if="item.rollStatus === '1'" class="center">
<div class="room_btn_yjs center">
<!-- rollType -->
<div style="position: absolute;">已结束</div>
</div>
</div>
<!-- && item.rollType === '0' -->
<div v-if="item.rollStatus === '0' && item.rollType === '0'">
<div class="room_btn_yjs center">
<div style="position: absolute; margin-left: 15px">查看房间</div>
</div>
</div>
<div v-if="item.rollStatus === '0' && item.rollType === '1'">
<div class="room_btn_yjs center">
<div style="position: absolute; margin-left: 60px">加入房间</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="center isnull"> <div class="center isnull">{{ rolllength }}</div>
{{ rolllength }}
<!-- <div class="loader" v-if="isloading">
<div class="orbe" style="--index: 0"></div>
<div class="orbe" style="--index: 1"></div>
<div class="orbe" style="--index: 2"></div>
<div class="orbe" style="--index: 3"></div>
<div class="orbe" style="--index: 4"></div>
</div>-->
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getRollList, getUserInfo } from "@/api/index"; import { getRollList, getUserInfo, logOut } from "@/api/index";
import { removeToken } from "@/api/cookie";
import { mapState } from 'vuex';
export default { export default {
data() { data() {
return { return {
defaultAvatar: require('@/assets/images/default-header.png'),
type: 0, type: 0,
queryParams: { queryParams: {
rollType: 0, rollType: 0,
@@ -272,9 +141,43 @@ export default {
}, },
mounted() { mounted() {
this.getlist(); this.getlist();
// 刷新时 Vuex USER_INFO 为空，主动拉取用户信息
if (!this.USER_INFO || !this.USER_INFO.avatar) {
getUserInfo().then((res) => {
if (res && res.data && res.data.data) {
this.$store.commit('USER_INFO', res.data.data);
}
}).catch(() => {});
}
},
computed: {
...mapState(['USER_INFO']),
loginAvatar() {
const avatar = this.USER_INFO && this.USER_INFO.avatar;
if (!avatar || !avatar.trim()) return this.defaultAvatar;
const baseUrl = 'http://95.40.65.4:8081';
const oldHost = 'http://154.12.94.229:8080';
const trimmed = avatar.trim();
if (trimmed.startsWith(oldHost)) return baseUrl + trimmed.slice(oldHost.length);
if (/^(http|https):\/\//i.test(trimmed)) return trimmed;
return baseUrl + trimmed;
},
}, },
computed: {},
methods: { methods: {
handleLogout() {
this.playAudio();
logOut().then((res) => {
if (res && res.data && res.data.code == 200) {
removeToken();
this.$store.commit('USER_INFO', '');
this.$router.push('/login');
}
}).catch(() => {
removeToken();
this.$store.commit('USER_INFO', '');
this.$router.push('/login');
});
},
scroll(e) { scroll(e) {
if ( if (
e.srcElement.scrollTop + e.srcElement.clientHeight >= e.srcElement.scrollTop + e.srcElement.clientHeight >=
@@ -302,11 +205,14 @@ export default {
localStorage.setItem("rollid", res); localStorage.setItem("rollid", res);
this.$router.push({ this.$router.push({
name: "rolldetial", name: "rolldetial",
// query:{
// obj:JSON.stringify(item)
// }
}); });
}, },
handleJoinDirect(item) {
// 直接跳转到详情页并触发加入
localStorage.setItem("rollid", item.id);
localStorage.setItem("autoJoin", "1");
this.$router.push({ name: "rolldetial" });
},
handletype(res) { handletype(res) {
this.queryParams.rollType = res; this.queryParams.rollType = res;
this.queryParams.page = 1; this.queryParams.page = 1;
@@ -376,6 +282,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.roll_type_serch { .roll_type_serch {
width: 100%; width: 100%;
padding: 0 12px;
margin-bottom: 8px;
box-sizing: border-box;
} }
.roll_type { .roll_type {
width: 34%; width: 34%;
@@ -385,46 +294,39 @@ export default {
color: rgba(114, 116, 119, 1); color: rgba(114, 116, 119, 1);
@media (max-width: 550px) { @media (max-width: 550px) {
height: 30px; height: 30px;
font-size: 10px; font-size: 10px;
} }
.type_btn { .type_btn {
width: 49%; width: 49%;
height: 35px; height: 35px;
// border-radius: 70px;
@media (max-width: 550px) { @media (max-width: 550px) {
// border-radius: 50px;
height: 25px; height: 25px;
} }
} }
.active { .active {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
background: url("../../assets/pinxiangBottom_text_bg.png") no-repeat center background: url("../../assets/pinxiangBottom_text_bg.png") no-repeat center center;
center;
background-size: cover; background-size: cover;
} }
} }
.roll_serch { .roll_serch {
width: 64%; width: 100%;
height: 42px; height: 42px;
padding: 0 2% 0 5%; padding: 0 12px;
background: url('../../assets/roll_serch.png') no-repeat center center; background: rgba(255,255,255,0.08);
background-size: 100% 100%; border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px; border-radius: 8px;
// border: 1px solid #40649e;
// border-radius: 70px 70px 70px 70px;
opacity: 1; opacity: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box;
.icon{ .icon{
height: 100%; height: 100%;
width: 50px; width: 50px;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
height: 30px; height: 30px;
font-size: 11px; font-size: 11px;
} }
input { input {
@@ -437,262 +339,271 @@ export default {
background-color: transparent; background-color: transparent;
text-indent: 10px; text-indent: 10px;
outline: none; outline: none;
@media (max-width: 550px) { @media (max-width: 550px) {
font-size: 11px; font-size: 11px;
} }
} }
} }
.roll_serch_full { .roll_serch_full {
width: 96% !important; width: 100% !important;
margin: 0 auto; margin: 0;
} }
.roll_status { .roll_status {
width: 100%; width: 100%;
background: url('../../assets/roll_status.png') no-repeat center center; background: rgba(255,255,255,0.05);
background-size: 100% 100%; border-radius: 10px;
height: 52px; height: 48px;
padding: 0 20px; padding: 0 12px;
display: flex; display: flex;
margin-bottom:20px; align-items: center;
margin-bottom: 8px;
gap: 16px;
.status_btn { .status_btn {
margin-top: 3%;
overflow: hidden; overflow: hidden;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 20%; height: 32px;
height: 35px; padding: 0 14px;
margin-right: 2%;
opacity: 1; opacity: 1;
font-size: 18px; font-size: 15px;
color: #fff; color: rgba(255,255,255,0.75);
cursor: pointer;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
@media (max-width: 550px) { @media (max-width: 550px) {
font-size: 13px; font-size: 13px;
height: 25px; height: 28px;
padding: 0 10px;
} }
} }
.active { .active {
background: url('../../assets/status_btn_active.png') no-repeat center; background: transparent;
background-size: 100% 100%; color: #f0a030;
color: #3a97e4; border: 2px solid #f0a030;
width: 80px; font-weight: bold;
height: 30px;
line-height: 30px;
text-align: center;
} }
} }
.roll_room_list { .roll_room_list {
width: 100%; width: 100%;
height: 570px; height: calc(100vh - 140px);
overflow-y: auto; overflow-y: auto;
// border: #c23dd4 1px solid; padding: 0 12px;
&::-webkit-scrollbar { box-sizing: border-box;
width: 2px; &::-webkit-scrollbar { width: 2px; }
} &::-webkit-scrollbar-thumb { background: #3fa2c7; border-radius: 5px; }
}
&::-webkit-scrollbar-thumb { .roll_room_grid {
background: #3fa2c7; display: grid;
border-radius: 5px; grid-template-columns: 1fr 1fr;
} gap: 10px;
}
@media (max-width: 550px) { .roll_room {
&::-webkit-scrollbar { border-radius: 12px;
width: 2px; overflow: hidden;
} background: rgba(255,255,255,0.06);
} border: 1px solid rgba(255,255,255,0.10);
.finish { display: flex;
border: 2px solid #4e4e4e; flex-direction: column;
} padding: 10px 8px 8px;
.anchor { box-sizing: border-box;
border: 2px solid #3fa2c7; transition: transform 0.2s;
} &:hover { transform: translateY(-3px); }
.official { &.finish { border-color: #4e4e4e; opacity: 0.75; }
// border: 2px solid #c23dd4; &.anchor { border-color: #3fa2c7; }
} &.official { border-color: rgba(194,61,212,0.5); }
.roll_room { }
width: 100%; .room_card_header {
margin: 0 auto; margin-bottom: 6px;
height: 300px; .room_card_name {
margin-top: 2%; font-size: 13px;
box-sizing: border-box; font-weight: bold;
color: #fff;
white-space: nowrap;
overflow: hidden; overflow: hidden;
// border-radius: 15px; text-overflow: ellipsis;
position: relative; margin-bottom: 3px;
background:url('../../assets/roll-official-bg-DRp1UF5D.png') no-repeat top center; }
background-size: 100% 100%; .room_card_time {
transition: all 0.2s linear; font-size: 10px;
&:hover { color: rgba(200,180,255,0.8);
transform: translateY(-5px); display: flex;
align-items: center;
gap: 3px;
.time_icon { font-size: 11px; }
}
}
.room_card_weapons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
margin-bottom: 6px;
.card_weapon_item {
background: rgba(255,255,255,0.06);
border-radius: 8px;
padding: 4px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 70px;
justify-content: center;
.card_price {
font-size: 10px;
color: #f0c040;
margin-bottom: 3px;
.price_diamond { color: #f0c040; }
} }
img {
@media (max-width: 550px) { width: 52px;
height: 220px; height: 38px;
object-fit: contain;
} }
} }
.room_type{ .card_weapon_more {
position: absolute; background: rgba(255,255,255,0.06);
top: -2px; border-radius: 8px;
left: 50%; display: flex;
transform: translateX(-50%); align-items: center;
justify-content: center;
font-size: 18px;
color: rgba(255,255,255,0.5);
min-height: 70px;
} }
.room_weapon { }
width: 70%; .room_card_footer {
margin:0 auto; margin-bottom: 8px;
margin-top: 3%; .card_footer_info {
.room_weapon_back { font-size: 11px;
width: 100%; color: #f0c040;
height: 69px; display: flex;
overflow: hidden; align-items: center;
overflow-x: scroll; gap: 3px;
@media (max-width: 550px) { .total_price { color: #f0c040; }
height: 41px; .people_icon { color: #aaa; }
}
.weapon_bg {
margin-right: 2%;
width: 60px;
height: 60px;
background: #323436;
border-radius: 10px 10px 10px 10px;
@media (max-width: 550px) {
width: 60px;
height: 60px;
}
img {
margin: 0 auto;
@media (max-width: 550px) {
width: 35px;
height: 21px;
}
}
}
}
.room_weapon_back::-webkit-scrollbar {
background: none;
height: 5px;
}
.room_weapon_back::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #323436;
}
} }
.room_title { }
padding: 0 2%; .room_card_btns {
height: 70px; display: flex;
background: rgba(50, 52, 54, 0.2); gap: 6px;
margin-top: 30px; margin-top: auto;
@media (max-width: 550px) { .card_btn_join {
height: 50px; flex: 1;
} height: 32px;
border-radius: 16px;
.room_type { background: linear-gradient(90deg, #f0a030 0%, #e06010 100%);
width: 70px; color: #fff;
height: 35px; font-size: 12px;
background: #323436; font-weight: bold;
border-radius: 70px; cursor: pointer;
margin-right: 7px; user-select: none;
} display: flex;
align-items: center;
.room_name { justify-content: center;
// width: 137px;
max-width: 200px;
@media (max-width: 550px) {
max-width: 250px;
}
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
.room_btn_bg { .card_btn_view {
position: absolute; flex: 1;
left: 50%; height: 32px;
bottom: 2px; border-radius: 16px;
font-size: 21px; background: rgba(255,255,255,0.1);
line-height: 70px; border: 1px solid rgba(255,255,255,0.25);
transform: translateX(-50%); color: #fff;
@media (max-width: 550px) { font-size: 12px;
font-size: 15px; cursor: pointer;
bottom: 2px; user-select: none;
} display: flex;
.room_btn_yjs { align-items: center;
position: relative; justify-content: center;
width: 128px;
height: 48px;
background: url('../../assets/room_btn_yjs.png') no-repeat center center;
background-size: contain;
// bottom: 10px;
.icon {
width: 190px;
height: 70px;
@media (max-width: 550px) {
width: 185px;
height: 50px;
}
}
}
.room_btnn_yjs {
position: absolute;
left: 50%;
top: 50%;
}
} }
.room_detial { .card_btn_ended {
margin-top: 3%; flex: 1;
.roll_time { height: 32px;
font-size: 13px; border-radius: 16px;
@media (max-width: 550px) { background: #333;
font-size: 11px; color: #888;
} font-size: 12px;
} display: flex;
.detial_public { align-items: center;
@media (max-width: 550px) { justify-content: center;
font-size: 10px;
}
svg {
margin-right: 5px;
}
.icon {
width: 20px;
height: 20px;
@media (max-width: 550px) {
width: 14px;
height: 14px;
}
}
}
} }
} }
.isnull { .isnull {
width: 100%; width: 100%;
height: 250px; height: 60px;
font-size: 12px; font-size: 12px;
color: #878787; color: #878787;
display: flex;
align-items: center;
justify-content: center;
} }
.home { .home {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
height: 100vh; height: 100vh;
// background: #0e1227c4; padding: 0;
padding: 0 2%; background: #0e1227;
} }
.header_top { /* 第一行：头像+昵称，融入深蓝背景 */
width: 100%; .page_header_user {
height: 56px;
border-radius: 0px 0px 0px 0px;
opacity: 1;
display: flex; display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 10px 12px 6px;
}
.page_logout_btn {
margin-left: auto;
font-size: 12px;
color: rgba(255,255,255,0.6);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 12px;
padding: 3px 10px;
cursor: pointer;
flex-shrink: 0;
&:active { opacity: 0.7; }
}
.page_avatar_wrap {
width: 52px;
height: 52px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255,255,255,0.25);
flex-shrink: 0;
.page_avatar_img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.page_nickname {
font-size: 14px;
font-weight: bold;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 第二行：ROLL房标题 + 玩法说明 */
.page_title_row {
display: flex;
flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
div:first-child { padding: 4px 12px 4px;
} }
div:last-child { .page_title {
color: #fff; font-size: 17px;
font-size: 12px; font-weight: bold;
text-decoration: underline; color: #fff;
line-height: 1.5; flex: 1;
} text-align: center;
}
.page_rule_btn {
color: #fff;
font-size: 12px;
text-decoration: underline;
cursor: pointer;
flex-shrink: 0;
width: 60px;
text-align: right;
} }
</style> </style>