feat: 全面重构首页UI，新增侧边栏、动态游戏列表及路单展示，并更新相关API。
This commit is contained in:
li
+540
-245
@@ -1,264 +1,559 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="index">
|
<view class="page-container">
|
||||||
<u-navbar title="" bgColor="#000" :placeholder="true" :fixed="true" leftIcon="" height="60">
|
<!-- Top Header Area -->
|
||||||
<view slot="center">
|
<view class="top-header">
|
||||||
<u--image :showLoading="false" :src="titlePng" width="350px" height="45px" mode="scaleToFill"
|
<image class="header-bg" src="/static/images/login_bg.png" mode="aspectFill"></image>
|
||||||
class="ezlogo"></u--image>
|
<view class="status-bar"></view>
|
||||||
<u--image :showLoading="false" :src="require('static/images/service_icon.png')" width="100%"
|
<!-- User Info Row -->
|
||||||
height="auto" mode="widthFix" class="service_icon" @click="goRouter()"></u--image>
|
<view class="user-bar">
|
||||||
</view>
|
<view class="left-info" @click="goPage('/pages/user/index')">
|
||||||
</u-navbar>
|
<u-icon name="arrow-left" color="#f4c46f" size="20" v-if="false"></u-icon>
|
||||||
<u-swiper class="swiper" :list="list" bgColor="#000" radius="0" imgMode="scaleToFill" height="39vw"
|
<view class="user-avatar">
|
||||||
interval="4000" @tap="goPaht"></u-swiper>
|
<u-icon name="account-fill" color="#fff" size="24"></u-icon>
|
||||||
<view style="min-height: 38px">
|
</view>
|
||||||
<u-notice-bar v-if="showNotice" :text="text" bgColor="#252627" color="#eee" speed="40"></u-notice-bar>
|
<text class="username">{{ userInfo.username || 'Guest' }}</text>
|
||||||
</view>
|
<view class="balance-pill">
|
||||||
<!-- <u--image :showLoading="false" :src="
|
<u-icon name="rmb-circle-fill" color="#f4c46f" size="16"></u-icon>
|
||||||
require(`static/images/${
|
<text class="balance-text">{{ userInfo.money || '0.00' }}</text>
|
||||||
language == 'tw' ? 'tw' : 'en'
|
</view>
|
||||||
}_advertisement_v2.jpg`)
|
</view>
|
||||||
" width="100%" height="auto" mode="widthFix" @tap="goPaht('baccarat')"></u--image>
|
<view class="right-actions">
|
||||||
<view style="margin-top: 5px; margin-bottom: 5px">
|
<u-icon name="server-fill" color="#fff" size="24" @click="goService" style="margin-right: 15px;"></u-icon>
|
||||||
<u--image :showLoading="false" :src="require('static/images/title-ez.png')" width="100%" height="auto"
|
<u-icon name="grid-fill" color="#fff" size="24" @click="goPage('/pages/user/index')"></u-icon>
|
||||||
mode="widthFix"></u--image>
|
</view>
|
||||||
</view> -->
|
|
||||||
|
|
||||||
|
|
||||||
<view class="triple">
|
|
||||||
<view class="triple-item">
|
|
||||||
<img :src="require(`static/images/click.png`)" @click="goPaht('other')" alt="">
|
|
||||||
<p>{{ $lang.flagshipHall }}</p>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="triple-item">
|
|
||||||
<img :src="require(`static/images/triple.png`)" @click="goPaht('other')" alt="">
|
<!-- Banner Area -->
|
||||||
<p>{{ $lang.liveHall }}</p>
|
<view class="banner-area">
|
||||||
</view>
|
<u-swiper :list="bannerList" height="140" radius="8" indicator indicatorMode="line" circular></u-swiper>
|
||||||
<!--
|
|
||||||
<view class="triple-item">
|
|
||||||
<img :src="require(`static/images/triple.png`)" @click="goPaht('triple')" alt="">
|
|
||||||
<p>{{ $lang.liveHall }}</p>
|
|
||||||
</view>
|
</view>
|
||||||
-->
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<view class="list">
|
<!-- Main Content Layout -->
|
||||||
<u--image :showLoading="false" :src="require('static/images/game_1.png')" width="100%" height="auto"
|
<view class="main-body">
|
||||||
mode="widthFix"></u--image>
|
<!-- Left Sidebar -->
|
||||||
<view class="box">
|
<scroll-view scroll-y class="sidebar">
|
||||||
<view class="text">{{ $lang.baccarat }}</view>
|
<view
|
||||||
<view class="text">{{ $lang.niuniu }}</view>
|
class="sidebar-item"
|
||||||
</view>
|
v-for="(cat, index) in categories"
|
||||||
<view class="left link" @tap="goPaht('baccarat')"></view>
|
:key="index"
|
||||||
<view class="right link" @tap="goPaht('nn')"></view>
|
:class="{ active: currentCategory === cat.id }"
|
||||||
</view>
|
@click="switchCategory(cat.id)"
|
||||||
<view class="list">
|
>
|
||||||
<u--image :showLoading="false" :src="require('static/images/game_3.png')" width="100%" height="auto"
|
<view class="icon-box">
|
||||||
mode="widthFix"></u--image>
|
<!-- Use local images or u-icons based on category -->
|
||||||
<view class="box">
|
<image :src="cat.icon" mode="widthFix" style="width: 24px; height: 24px;" v-if="cat.icon" />
|
||||||
<view class="text">{{ $lang.longhu }}</view>
|
<u-icon :name="cat.uIcon" color="#ccc" size="28" v-else></u-icon>
|
||||||
<view class="text">{{ $lang.sedie }}</view>
|
</view>
|
||||||
</view>
|
<text class="cat-name">{{ cat.name }}</text>
|
||||||
<view class="left link" @tap="goPaht('longhu')"></view>
|
<text class="cat-count">({{ getCategoryCount(cat.id) }})</text>
|
||||||
<view class="right link" @tap="goPaht('toning')"></view>
|
</view>
|
||||||
</view>
|
|
||||||
<view class="list">
|
<!-- Online Count Bottom -->
|
||||||
<u--image :showLoading="false" :src="require('static/images/game_2.png')" width="100%" height="auto"
|
<view class="online-count-box">
|
||||||
mode="widthFix"></u--image>
|
<text class="label">在线人数</text>
|
||||||
<view class="box">
|
<text class="count">2506</text>
|
||||||
<view class="text">{{ $lang.sicbo }}</view>
|
</view>
|
||||||
<view class="text">{{ $lang.threecard }}</view>
|
</scroll-view>
|
||||||
</view>
|
|
||||||
<view class="left link" @tap="goPaht('dice')"></view>
|
|
||||||
<view class="right link" @tap="goPaht('threecard')"></view>
|
|
||||||
</view>
|
|
||||||
<view class="mb10"></view>
|
|
||||||
<!--
|
|
||||||
<view class="list" @tap="goPaht('other')">
|
|
||||||
<u--image
|
|
||||||
:showLoading="false"
|
|
||||||
:src="require('static/images/game_4.png')"
|
|
||||||
width="100%"
|
|
||||||
height="auto"
|
|
||||||
mode="widthFix"
|
|
||||||
></u--image>
|
|
||||||
<view class="box">
|
|
||||||
<view class="text">{{ $lang.buyu }}</view>
|
|
||||||
<view class="text">{{ $lang.qipai }}</view>
|
|
||||||
</view>
|
|
||||||
</view>-->
|
|
||||||
<!--<view class="mb60"></view>-->
|
|
||||||
|
|
||||||
<!-- <u--image :showLoading="false" :src="
|
<!-- Right Content Area -->
|
||||||
require(`static/images/${language == 'tw' ? 'tw' : 'en'}_slots-ez.png`)
|
<scroll-view scroll-y class="content-area">
|
||||||
" width="100%" height="auto" mode="widthFix" @tap="goPaht('other')"></u--image> -->
|
<view class="table-list">
|
||||||
<view class="mb80"></view>
|
<view class="loading-state" v-if="loading">
|
||||||
</view>
|
<u-loading-icon color="#f4c46f" vertical text="Loading..."></u-loading-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="game-card"
|
||||||
|
v-for="(item, index) in filteredTables"
|
||||||
|
:key="index"
|
||||||
|
@click="enterGame(item)"
|
||||||
|
>
|
||||||
|
<!-- Card Header -->
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="header-left">
|
||||||
|
<text class="table-name">{{ item.table_name }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="header-right">
|
||||||
|
<text class="limit-info">上限:50000 下限:20</text>
|
||||||
|
<view class="status-dot" :class="{ 'is-live': item.status===1 }"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Roadmap Visualization (Body) -->
|
||||||
|
<view class="card-body">
|
||||||
|
<!-- Roadmap Grid (Zhupan / Bead Plate) -->
|
||||||
|
<!-- Assuming 6 rows x N columns -->
|
||||||
|
<view class="roadmap-grid">
|
||||||
|
<!-- Render grid cells -->
|
||||||
|
<view
|
||||||
|
v-for="(cell, cIdx) in item.beadRoad"
|
||||||
|
:key="cIdx"
|
||||||
|
class="road-cell"
|
||||||
|
:style="{
|
||||||
|
left: ((cell.show_x - 1) * cellWidth) + 'px',
|
||||||
|
top: ((cell.show_y - 1) * cellHeight) + 'px'
|
||||||
|
}"
|
||||||
|
:class="getCellClass(cell.result)"
|
||||||
|
>
|
||||||
|
<text class="cell-text" v-if="item.game_id !== 4 && item.game_id !== 5">{{ getResultText(cell.result) }}</text>
|
||||||
|
<!-- NN/ThreeCard specialized display could go here -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Center Overlay Status -->
|
||||||
|
<view class="center-overlay" v-if="true">
|
||||||
|
|
||||||
|
<view class="status-badge-lg" :class="getStatusClass(item.bet_status)">
|
||||||
|
<u-icon name="hourglass" size="20" color="#fff" v-if="item.bet_status == 1"></u-icon>
|
||||||
|
<u-icon name="lock" size="20" color="#fff" v-else-if="item.bet_status == 2"></u-icon>
|
||||||
|
<u-icon name="play-circle" size="20" color="#fff" v-else></u-icon>
|
||||||
|
|
||||||
|
<text class="status-text-lg">
|
||||||
|
{{ getStatusText(item.bet_status) }}
|
||||||
|
</text>
|
||||||
|
<text class="countdown-text" v-if="item.countdown > 0">{{ item.countdown }}s</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="height: 60px;"></view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { mapState } from "vuex";
|
||||||
mapState
|
|
||||||
} from "vuex";
|
export default {
|
||||||
export default {
|
data() {
|
||||||
data() {
|
return {
|
||||||
return {
|
userInfo: {},
|
||||||
showNotice: true,
|
bannerList: [
|
||||||
};
|
// Using placeholders or static assets
|
||||||
},
|
// '/static/images/banner_cn.png',
|
||||||
computed: {
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||||
...mapState({
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||||
language: (state) => state.app.language,
|
],
|
||||||
$lang: (state) => state.app.lang[state.app.language],
|
currentCategory: 0, // 0 = All or default category
|
||||||
titlePng: (state) => state.app.titlePng,
|
categories: [
|
||||||
userInfo: (state) => state.app.userInfo,
|
/*
|
||||||
loginType: (state) => state.app.loginType,
|
{ id: 0, name: '国际厅', uIcon: 'grid', gameIds: [1,2,3,4,5] },
|
||||||
customServiceUrl: (state) => state.app.customServiceUrl,
|
{ id: 1, name: '旗舰厅', uIcon: 'star', gameIds: [1] },
|
||||||
showAd: (state) => {
|
*/
|
||||||
const userInfo = state.app.userInfo;
|
// Mapping based on common IDs: 1=Baccarat, 2=DT, 4=Bull, 5=ThreeCard
|
||||||
let show = false;
|
{ id: 1, name: '百家乐', uIcon: 'chrome-circle-fill', gameIds: [1] },
|
||||||
if (userInfo.pay_channel) {
|
{ id: 2, name: '龙虎', uIcon: 'heart-fill', gameIds: [2] },
|
||||||
show = true;
|
{ id: 4, name: '牛牛', uIcon: 'thumb-up-fill', gameIds: [4] },
|
||||||
}
|
// { id: 5, name: '金花/其他', uIcon: 'plus-circle-fill', gameIds: [5] }, // Grouping others
|
||||||
return show;
|
],
|
||||||
},
|
allTables: [],
|
||||||
text: (state) => {
|
loading: false,
|
||||||
let text = "";
|
timer: null,
|
||||||
const language = state.app.language;
|
|
||||||
if (language == "cn") {
|
// Roadmap config
|
||||||
text =
|
cellWidth: 16.5, // slightly adjusted for mobile fit
|
||||||
"首储活动（真人视讯）🔥 新人首存赠【10%】 五倍流水上限【1688】 回存送【5%】 两倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5网页版 正式上线了 欢迎来爆庄哦......首储活动（真人视讯）🔥 新人首存赠【10%】 五倍流水上限【1688】 回存送【5%】 两倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5网页版 正式上线了 欢迎来爆庄哦...";
|
cellHeight: 17,
|
||||||
} else if (language == "tw") {
|
};
|
||||||
text =
|
},
|
||||||
"首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦......首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦...";
|
computed: {
|
||||||
} else if (language == "en") {
|
...mapState({
|
||||||
text =
|
storeUserInfo: (state) => state.app.userInfo,
|
||||||
"首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦......首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦...";
|
language: (state) => state.app.language,
|
||||||
} else if (language == "kr") {
|
}),
|
||||||
text =
|
filteredTables() {
|
||||||
"존귀한 고객님, ONLINE GAMING 에 오신 것을 환영합니다. 만약 당신이 새로운 게이머라면 애플 자체 브라우저나 구글 브라우저로 우리의 웹 주소를 열고 데스크톱 생성 아이콘을 클릭하면 더 편리한 조작 체험과 시각 효과를 가져다 줄 수 있습니다......귀한 고객🔥 ONLINE GAMING 🔥 H5 웹버전이 정식으로 오픈되었습니다. 폭장에 오신 것을 환영합니다......";
|
if (!this.allTables.length) return [];
|
||||||
} else if (language == "yn") {
|
const currentCatParams = this.categories.find(c => c.id === this.currentCategory);
|
||||||
text =
|
if (!currentCatParams) return this.allTables;
|
||||||
"Chào mừng bạn đến ONLINE GAMING, nếu bạn là người chơi mới, xin vui lòng sử dụng trình duyệt của Apple hoặc Google Explorer để mở địa chỉ web của chúng tôi bằng cách nhấp vào để tạo biểu tượng máy tính để bàn sẽ mang lại cho bạn một kinh nghiệm hoạt động thuận tiện hơn và hiệu ứng hình ảnh.... Quý khách hàng 🔥 ONLINE GAMING 🔥 Trang web H5 chính thức lên mạng, chào mừng đến với trang web bùng nổ......";
|
|
||||||
}
|
return this.allTables.filter(t => currentCatParams.gameIds.includes(t.game_id));
|
||||||
return text;
|
}
|
||||||
},
|
},
|
||||||
list: (state) => {
|
onShow() {
|
||||||
const language = state.app.language;
|
// Sync userInfo
|
||||||
const lang = (language == "tw" || language == 'cn') ? "tw" : "en";
|
this.userInfo = this.storeUserInfo || {};
|
||||||
let list = [
|
this.startPolling();
|
||||||
`/static/images/${lang}_banner_ac1.png`,
|
},
|
||||||
`/static/images/${lang}_banner_2-ez-v3.png`,
|
onHide() {
|
||||||
];
|
this.stopPolling();
|
||||||
return list;
|
},
|
||||||
},
|
methods: {
|
||||||
}),
|
goPage(url) {
|
||||||
},
|
uni.navigateTo({ url });
|
||||||
onShow() {
|
},
|
||||||
this.showNotice = false;
|
goService() {
|
||||||
if (this.$route.query.logout && this.$route.query.logout == '1') {
|
// Mock service
|
||||||
localStorage.removeItem("userInfo");
|
const url = this.$store.state.app.customServiceUrl;
|
||||||
this.$router.replace({
|
if(url) window.open(url, '_blank');
|
||||||
path: "/"
|
},
|
||||||
});
|
switchCategory(id) {
|
||||||
}
|
this.currentCategory = id;
|
||||||
setTimeout(() => {
|
},
|
||||||
this.showNotice = true;
|
getCategoryCount(id) {
|
||||||
}, 100);
|
if (!this.allTables) return 0;
|
||||||
},
|
const cat = this.categories.find(c => c.id === id);
|
||||||
methods: {
|
if (!cat) return 0;
|
||||||
// this.baseApi
|
return this.allTables.filter(t => cat.gameIds.includes(t.game_id)).length;
|
||||||
goPaht(type) {
|
},
|
||||||
if (type == "other") {
|
startPolling() {
|
||||||
window.location.href =
|
this.loadData();
|
||||||
`${this.$baseApi.gameUrl}/?token=${this.userInfo.api_token}&language=${this.language}#/${type}`;
|
this.timer = setInterval(() => {
|
||||||
} else if(type == 'triple'){
|
this.loadData();
|
||||||
window.location.href =
|
}, 3000);
|
||||||
`${this.$baseApi.tripleUrl}/?token=${this.userInfo.api_token}`;
|
},
|
||||||
|
stopPolling() {
|
||||||
|
if(this.timer) clearInterval(this.timer);
|
||||||
|
},
|
||||||
|
async loadData() {
|
||||||
|
if(!this.userInfo.id) return;
|
||||||
|
try {
|
||||||
|
const res = await this.$api.getAllTable({
|
||||||
|
user_id: this.userInfo.id,
|
||||||
|
api_token: this.userInfo.api_token
|
||||||
|
});
|
||||||
|
if (res.Success && res.Data) {
|
||||||
|
this.processData(res.Data);
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
console.error(e);
|
||||||
}
|
}
|
||||||
else {
|
},
|
||||||
window.location.href =
|
processData(data) {
|
||||||
`${this.$baseApi.gameUrl}/?token=${this.userInfo.api_token}&language=${this.language}#/${type}`;
|
// Transform data for UI
|
||||||
}
|
this.allTables = data.map(item => {
|
||||||
},
|
// Extract Bead Road (showRoad usually)
|
||||||
goRouter() {
|
// Note: In helper.php, waybill() returns { showRoad, bigRoad ... }
|
||||||
let url = this.customServiceUrl + '&visiter_id=' + this.userInfo.username + '&visiter_name=' + this
|
let beadRoad = [];
|
||||||
.userInfo.username;
|
if (item.ludan && item.ludan.waybill && item.ludan.waybill.showRoad) {
|
||||||
window.open(url, '_blank');
|
beadRoad = item.ludan.waybill.showRoad;
|
||||||
}
|
}
|
||||||
},
|
|
||||||
};
|
// Adjust roadmap to keep latest on screen (simple truncation logic for demo)
|
||||||
|
// Real logic might need scrolling or windowing
|
||||||
|
// For card display, we usually show last X columns
|
||||||
|
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
beadRoad: beadRoad,
|
||||||
|
// Mock countdown if not provided
|
||||||
|
countdown: item.countdown || 15
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// Visual Helpers
|
||||||
|
getCellClass(result) {
|
||||||
|
// 1=Banker(Red), 2=Player(Blue), 3=Tie(Green)
|
||||||
|
if (result === 1) return 'cell-red';
|
||||||
|
if (result === 2) return 'cell-blue';
|
||||||
|
if (result === 3) return 'cell-green';
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
getResultText(result) {
|
||||||
|
if (result === 1) return '庄';
|
||||||
|
if (result === 2) return '闲';
|
||||||
|
if (result === 3) return '和';
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
getStatusClass(status) {
|
||||||
|
// 1: betting, 2: dealing/disabled
|
||||||
|
if (status === 1) return 'status-betting';
|
||||||
|
return 'status-dealing';
|
||||||
|
},
|
||||||
|
getStatusText(status) {
|
||||||
|
if (status === 1) return '下注中';
|
||||||
|
if (status === 2) return '发牌中';
|
||||||
|
return '准备中';
|
||||||
|
},
|
||||||
|
enterGame(item) {
|
||||||
|
let type = 'baccarat';
|
||||||
|
if (item.game_id == 2) type = 'longhu';
|
||||||
|
if (item.game_id == 4) type = 'nn';
|
||||||
|
if (item.game_id == 5) type = 'threecard';
|
||||||
|
|
||||||
|
window.location.href = `${this.$baseApi.gameUrl}/?token=${this.userInfo.api_token}&language=${this.language}#/${type}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.index {
|
/* Global Layout */
|
||||||
.ezlogo {
|
.page-container {
|
||||||
margin-left: -25px;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #0c0c0d;
|
||||||
|
color: #fff;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
.service_icon {
|
/* Header */
|
||||||
width: 26px;
|
.top-header {
|
||||||
position: absolute;
|
flex-shrink: 0;
|
||||||
right: 0;
|
position: relative;
|
||||||
top: 2px;
|
/* background-image removed, using image tag instead */
|
||||||
margin: 15px 8px;
|
padding-bottom: 5px;
|
||||||
}
|
overflow: hidden;
|
||||||
|
|
||||||
.list {
|
.header-bg {
|
||||||
padding: 5px 5px;
|
position: absolute;
|
||||||
position: relative;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
&:last-child {
|
width: 100%;
|
||||||
margin-bottom: 30px;
|
height: 100%;
|
||||||
}
|
z-index: 0;
|
||||||
|
}
|
||||||
.link {
|
|
||||||
position: absolute;
|
.status-bar {
|
||||||
width: 50%;
|
height: var(--status-bar-height);
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
color: #f4c46f;
|
|
||||||
font-size: medium;
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-top: 5px;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.triple{
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
&-item{
|
position: relative;
|
||||||
width: 50%;
|
z-index: 1;
|
||||||
padding: 2%;
|
}
|
||||||
img{
|
|
||||||
width: 100%;
|
.user-bar {
|
||||||
// height: 110px;
|
position: relative;
|
||||||
}
|
z-index: 1;
|
||||||
p{
|
display: flex;
|
||||||
color: #fff;
|
justify-content: space-between;
|
||||||
font-weight: bold;
|
align-items: center;
|
||||||
}
|
padding: 10px 15px;
|
||||||
|
|
||||||
|
.left-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.balance-pill {
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
border: 1px solid #f4c46f;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
.balance-text {
|
||||||
|
color: #f4c46f;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.banner-area {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Body Layout */
|
||||||
|
.main-body {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* Sidebar styles */
|
||||||
|
.sidebar {
|
||||||
|
width: 80px;
|
||||||
|
background-color: #161618;
|
||||||
|
border-right: 1px solid #1f1f1f;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.sidebar-item {
|
||||||
|
padding: 15px 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-bottom: 1px solid #222;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: #f4c46f;
|
||||||
|
|
||||||
|
.cat-name, .cat-count {
|
||||||
|
color: #000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Could change icon color via filter if using svg
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-box {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cat-name {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.cat-count {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.online-count-box {
|
||||||
|
margin-top: auto;
|
||||||
|
padding: 20px 5px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.label { font-size: 10px; color: #666; display: block; }
|
||||||
|
.count { font-size: 14px; color: #f4c46f; font-weight: bold; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content styles */
|
||||||
|
.content-area {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #0c0c0d;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.game-card {
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: #252627;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
height: 30px;
|
||||||
|
|
||||||
|
.table-name {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.limit-info {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #666;
|
||||||
|
&.is-live { background-color: #0f0; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
position: relative;
|
||||||
|
height: 110px; // Fixed height for roadmap
|
||||||
|
background: #fff; // White background for roadmap grid
|
||||||
|
|
||||||
|
.roadmap-grid {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
// Grid background lines
|
||||||
|
background-size: 16.5px 17px;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(to right, #ccc 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, #ccc 1px, transparent 1px);
|
||||||
|
|
||||||
|
.road-cell {
|
||||||
|
position: absolute;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
&.cell-red {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 2px solid #d0021b;
|
||||||
|
color: #d0021b;
|
||||||
|
}
|
||||||
|
&.cell-blue {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 2px solid #4a90e2;
|
||||||
|
color: #4a90e2;
|
||||||
|
}
|
||||||
|
&.cell-green {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 2px solid #7ed321;
|
||||||
|
color: #7ed321;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-text {
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
.status-badge-lg {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: rgba(0,0,0,0.7);
|
||||||
|
border-radius: 8px;
|
||||||
|
// Backdrop gradient
|
||||||
|
background: radial-gradient(circle, rgba(169,134,60,0.95) 0%, rgba(0,0,0,0.8) 100%);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
|
||||||
|
width: 100px;
|
||||||
|
|
||||||
|
&.status-dealing {
|
||||||
|
// background: radial-gradient(circle, rgba(200,50,50,0.9) 0%, rgba(0,0,0,0.8) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text-lg {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 5px;
|
||||||
|
text-shadow: 1px 1px 2px #000;
|
||||||
|
}
|
||||||
|
.countdown-text {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 2px;
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
+5
-1
@@ -14,7 +14,7 @@ let api = {
|
|||||||
},
|
},
|
||||||
// 注册
|
// 注册
|
||||||
register: async (params) => {
|
register: async (params) => {
|
||||||
console.log(params)
|
console.log(params)
|
||||||
return await ajax.post("/doregister", params);
|
return await ajax.post("/doregister", params);
|
||||||
},
|
},
|
||||||
// usdt申请提现
|
// usdt申请提现
|
||||||
@@ -62,6 +62,10 @@ let api = {
|
|||||||
return await ajax.post("/user_money", params);
|
return await ajax.post("/user_money", params);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getAllTable: async (params) => {
|
||||||
|
return await ajax.post("/all_table", params);
|
||||||
|
},
|
||||||
|
|
||||||
// --------------- https://qpapi.ez888.net/api/game -------------------
|
// --------------- https://qpapi.ez888.net/api/game -------------------
|
||||||
//第三方上分
|
//第三方上分
|
||||||
gameUpper: async (params) => {
|
gameUpper: async (params) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user