手机端项目整体UI调整修改
This commit is contained in:
黎小北
+572
-296
@@ -2,31 +2,60 @@
|
||||
<view class="page-container">
|
||||
<!-- Top Header Area -->
|
||||
<view class="top-header">
|
||||
<image class="header-bg" src="/static/images/login_bg.png" mode="aspectFill"></image>
|
||||
<image
|
||||
class="header-bg"
|
||||
src="/static/images/login_bg.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="header-overlay"></view>
|
||||
<view class="status-bar"></view>
|
||||
<!-- User Info Row -->
|
||||
<view class="user-bar">
|
||||
<view class="left-info" @click="goPage('/pages/user/index')">
|
||||
<u-icon name="arrow-left" color="#f4c46f" size="20" v-if="false"></u-icon>
|
||||
<view class="user-avatar">
|
||||
<u-icon name="account-fill" color="#fff" size="24"></u-icon>
|
||||
<view class="header-content">
|
||||
<!-- User Info Row -->
|
||||
<view class="user-bar">
|
||||
<view class="brand-side">
|
||||
<view class="brand-logo-shell">
|
||||
<image
|
||||
class="brand-logo"
|
||||
src="/static/logo.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<text class="username">{{ userInfo.username || $lang.guest }}</text>
|
||||
<view class="balance-pill">
|
||||
<text class="currency-symbol">₫</text>
|
||||
<text class="balance-text">{{ $fk(userInfo.money) || '0.00' }}</text>
|
||||
|
||||
<view class="header-right">
|
||||
<view class="user-summary" @click="goPage('/pages/user/index')">
|
||||
<text class="username">{{ userInfo.username || $lang.guest }}</text>
|
||||
<view class="balance-pill">
|
||||
<text class="currency-symbol">₫</text>
|
||||
<text class="balance-text">{{
|
||||
$fk(userInfo.money) || "0.00"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="right-actions">
|
||||
<view class="action-btn" @click="goService">
|
||||
<u-icon name="server-fill" color="#f6e7bf" size="20"></u-icon>
|
||||
</view>
|
||||
<view class="action-btn" @click="goPage('/pages/user/index')">
|
||||
<u-icon name="grid-fill" color="#f6e7bf" size="20"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-actions">
|
||||
<u-icon name="server-fill" color="#fff" size="24" @click="goService" style="margin-right: 15px;"></u-icon>
|
||||
<u-icon name="grid-fill" color="#fff" size="24" @click="goPage('/pages/user/index')"></u-icon>
|
||||
|
||||
<!-- Banner Area -->
|
||||
<view class="banner-area">
|
||||
<u-swiper
|
||||
:list="bannerList"
|
||||
height="150"
|
||||
radius="14"
|
||||
indicator
|
||||
indicatorMode="line"
|
||||
circular
|
||||
></u-swiper>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Banner Area -->
|
||||
<view class="banner-area">
|
||||
<u-swiper :list="bannerList" height="140" radius="8" indicator indicatorMode="line" circular></u-swiper>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Main Content Layout -->
|
||||
@@ -40,13 +69,20 @@
|
||||
:class="{ active: currentCategory === cat.id }"
|
||||
@click="switchCategory(cat.id)"
|
||||
>
|
||||
<view class="item-marker"></view>
|
||||
<view class="icon-box">
|
||||
<!-- Use local images or u-icons based on category -->
|
||||
<image :src="cat.icon" mode="widthFix" style="width: 24px; height: 24px;" v-if="cat.icon" />
|
||||
<u-icon :name="cat.uIcon" color="#ccc" size="28" v-else></u-icon>
|
||||
<image :src="cat.icon" mode="widthFix" style="width: 22px; height: 22px;" v-if="cat.icon" />
|
||||
<u-icon
|
||||
:name="cat.uIcon"
|
||||
:color="currentCategory === cat.id ? '#f1d392' : '#d1c6aa'"
|
||||
size="24"
|
||||
v-else
|
||||
></u-icon>
|
||||
</view>
|
||||
<view class="cat-texts">
|
||||
<text class="cat-name">{{ $lang[cat.nameKey] }}</text>
|
||||
<text class="cat-count">{{ getCategoryCount(cat.id) }}</text>
|
||||
</view>
|
||||
<text class="cat-name">{{ $lang[cat.nameKey] }}</text>
|
||||
<text class="cat-count">({{ getCategoryCount(cat.id) }})</text>
|
||||
</view>
|
||||
|
||||
<!-- Online Count Bottom -->
|
||||
@@ -76,12 +112,15 @@
|
||||
</view>
|
||||
<view class="header-right">
|
||||
<text class="limit-info">{{ $lang.maxLimit }}:{{ $fk((item.game_id == 4 || item.game_id == 5) && userInfo.limit_high_nn > 0 ? userInfo.limit_high_nn : (userInfo.limit_high || 0)) }} {{ $lang.minLimit }}:{{ (item.game_id == 4 || item.game_id == 5) && userInfo.limit_low_nn > 0 ? userInfo.limit_low_nn : (userInfo.limit_low || 0) }}</text>
|
||||
<view class="status-dot" :class="{ 'is-live': item.status===1 }"></view>
|
||||
<view class="status-live">
|
||||
<view class="status-dot" :class="{ 'is-live': item.status===1 }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Roadmap Visualization (Body) -->
|
||||
<view class="card-body">
|
||||
<view class="card-body-overlay"></view>
|
||||
<!-- 百家乐/龙虎: 珠盘路圆圈 -->
|
||||
<view class="roadmap-grid" v-if="item.game_id !== 4 && item.game_id !== 5">
|
||||
<view
|
||||
@@ -121,7 +160,6 @@
|
||||
|
||||
<!-- 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>
|
||||
@@ -330,8 +368,8 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #0c0c0d;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, #060505 0%, #0d0b09 100%);
|
||||
color: #fff6e1;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
@@ -339,9 +377,8 @@ export default {
|
||||
.top-header {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
/* background-image removed, using image tag instead */
|
||||
padding-bottom: 5px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 14px;
|
||||
overflow: hidden;
|
||||
|
||||
.header-bg {
|
||||
position: absolute;
|
||||
@@ -350,61 +387,157 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
opacity: 0.42;
|
||||
}
|
||||
|
||||
.header-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(5, 4, 4, 0.86) 0%,
|
||||
rgba(11, 9, 8, 0.66) 54%,
|
||||
rgba(13, 11, 9, 0.96) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 8px 12px 0;
|
||||
}
|
||||
|
||||
.user-bar {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
|
||||
.left-info {
|
||||
gap: 14px;
|
||||
padding: 6px 4px 14px;
|
||||
|
||||
.brand-side {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.brand-logo-shell {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-summary {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.username {
|
||||
max-width: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fbf3e0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.balance-pill {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border-radius: 999px;
|
||||
background: rgba(10, 9, 8, 0.72);
|
||||
border: 1px solid rgba(223, 189, 120, 0.24);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 243, 219, 0.04);
|
||||
|
||||
.currency-symbol {
|
||||
color: #f1cc84;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.currency-symbol {
|
||||
color: #f4c46f;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.balance-text {
|
||||
color: #f4c46f;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.balance-text {
|
||||
color: #f6e1b2;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.right-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.action-btn {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(12, 11, 10, 0.72);
|
||||
border: 1px solid rgba(223, 189, 120, 0.16);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-area {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0 2px;
|
||||
|
||||
::v-deep .u-swiper {
|
||||
border-radius: 18px !important;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(223, 189, 120, 0.14);
|
||||
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
::v-deep .u-swiper__wrapper__item__wrapper {
|
||||
border-radius: 18px !important;
|
||||
}
|
||||
|
||||
::v-deep .u-swiper-indicator {
|
||||
bottom: 10px !important;
|
||||
}
|
||||
|
||||
::v-deep .u-swiper-indicator__wrapper__item {
|
||||
background-color: rgba(255, 244, 220, 0.28) !important;
|
||||
}
|
||||
|
||||
::v-deep .u-swiper-indicator__wrapper__item--active {
|
||||
background-color: #dfbd78 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -413,271 +546,414 @@ export default {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
gap: 10px;
|
||||
padding: 0 12px 12px;
|
||||
|
||||
/* Sidebar styles */
|
||||
.sidebar {
|
||||
width: 80px;
|
||||
background-color: #161618;
|
||||
border-right: 1px solid #1f1f1f;
|
||||
width: 86px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(18, 15, 13, 0.98) 0%,
|
||||
rgba(10, 9, 8, 0.98) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.14);
|
||||
border-radius: 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
|
||||
|
||||
.sidebar-item {
|
||||
padding: 15px 5px;
|
||||
position: relative;
|
||||
margin: 6px;
|
||||
padding: 14px 6px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #222;
|
||||
transition: all 0.3s;
|
||||
|
||||
border-radius: 18px;
|
||||
transition: all 0.25s ease;
|
||||
|
||||
.item-marker {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
transform: translateX(-50%);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #f4c46f;
|
||||
|
||||
.cat-name, .cat-count {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(59, 43, 19, 0.24) 0%,
|
||||
rgba(27, 20, 12, 0.08) 100%
|
||||
);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 239, 203, 0.06);
|
||||
|
||||
.item-marker {
|
||||
background: linear-gradient(90deg, #f2ddb3 0%, #dbaf57 100%);
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
background: rgba(223, 189, 120, 0.08);
|
||||
border-color: rgba(223, 189, 120, 0.18);
|
||||
}
|
||||
|
||||
.cat-name,
|
||||
.cat-count {
|
||||
color: #f1d392;
|
||||
}
|
||||
|
||||
// Could change icon color via filter if using svg
|
||||
}
|
||||
|
||||
|
||||
.icon-box {
|
||||
margin-bottom: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(14, 13, 12, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
|
||||
.cat-texts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.cat-name {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-bottom: 2px;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
line-height: 1.2;
|
||||
max-width: 70px;
|
||||
font-size: 11px;
|
||||
color: #cdc2a3;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
line-height: 1.25;
|
||||
max-width: 70px;
|
||||
}
|
||||
.cat-count {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
min-width: 32px;
|
||||
height: 22px;
|
||||
padding: 0 9px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #e3c27a;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.2px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(29, 24, 19, 0.96) 0%,
|
||||
rgba(16, 13, 11, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 245, 223, 0.04);
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
|
||||
.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; }
|
||||
margin: auto 6px 6px;
|
||||
padding: 14px 6px calc(14px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid rgba(223, 189, 120, 0.1);
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
font-size: 10px;
|
||||
color: #8d7a55;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.count {
|
||||
margin-top: 6px;
|
||||
font-size: 15px;
|
||||
color: #f1cc84;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
flex: 1;
|
||||
background: rgba(8, 7, 6, 0.52);
|
||||
border: 1px solid rgba(223, 189, 120, 0.1);
|
||||
border-radius: 22px;
|
||||
padding: 12px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03);
|
||||
|
||||
.nn-roadmap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
.table-list {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.nn-row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
.loading-state {
|
||||
min-height: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
.game-card {
|
||||
margin-bottom: 14px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(21, 18, 15, 0.98) 0%,
|
||||
rgba(14, 12, 10, 0.98) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.14);
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
|
||||
|
||||
.nn-label {
|
||||
width: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
min-height: 44px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(30, 25, 20, 0.88) 0%,
|
||||
rgba(19, 17, 14, 0.88) 100%
|
||||
);
|
||||
border-bottom: 1px solid rgba(223, 189, 120, 0.1);
|
||||
|
||||
&.nn-label-banker { background: #c0392b; }
|
||||
&.nn-label-player { background: #2c5fa1; }
|
||||
}
|
||||
.table-name {
|
||||
font-size: 14px;
|
||||
color: #f9f1de;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nn-cells {
|
||||
flex: 1;
|
||||
}
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nn-cells-inner {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
.limit-info {
|
||||
font-size: 10px;
|
||||
color: #bca987;
|
||||
text-align: right;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.nn-cell {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
padding: 1px 0;
|
||||
}
|
||||
.status-live {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.nn-text {
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
&.nn-text-red { color: #c0392b; }
|
||||
&.nn-text-blue { color: #2c5fa1; }
|
||||
}
|
||||
.status-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: #6f6658;
|
||||
|
||||
.nn-win-tag {
|
||||
font-size: 7px;
|
||||
color: #fff;
|
||||
background: #2c5fa1;
|
||||
padding: 0 3px;
|
||||
border-radius: 2px;
|
||||
line-height: 1.4;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.nn-cell.nn-win-banker .nn-win-tag {
|
||||
background: #c0392b;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-live {
|
||||
background-color: #53c57b;
|
||||
box-shadow: 0 0 10px rgba(83, 197, 123, 0.28);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
position: relative;
|
||||
height: 114px;
|
||||
background: linear-gradient(180deg, #fbf9f3 0%, #f0ece3 100%);
|
||||
}
|
||||
|
||||
.card-body-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.02) 0%,
|
||||
rgba(0, 0, 0, 0.02) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.roadmap-grid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-size: 16.5px 17px;
|
||||
background-image: linear-gradient(to right, #dad3c7 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #dad3c7 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.08);
|
||||
background-color: #fff;
|
||||
|
||||
&.cell-red {
|
||||
border: 2px solid #cf4444;
|
||||
color: #cf4444;
|
||||
}
|
||||
&.cell-blue {
|
||||
border: 2px solid #467ed7;
|
||||
color: #467ed7;
|
||||
}
|
||||
&.cell-green {
|
||||
border: 2px solid #4ba96f;
|
||||
color: #4ba96f;
|
||||
}
|
||||
|
||||
.cell-text {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nn-roadmap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #fbf9f3 0%, #f0ece3 100%);
|
||||
|
||||
.nn-row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid #ddd4c8;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nn-label {
|
||||
width: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.nn-label-banker {
|
||||
background: #a84237;
|
||||
}
|
||||
&.nn-label-player {
|
||||
background: #3c6399;
|
||||
}
|
||||
}
|
||||
|
||||
.nn-cells {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nn-cells-inner {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nn-cell {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #ddd4c8;
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.nn-text {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
|
||||
&.nn-text-red {
|
||||
color: #a84237;
|
||||
}
|
||||
&.nn-text-blue {
|
||||
color: #3c6399;
|
||||
}
|
||||
}
|
||||
|
||||
.nn-win-tag {
|
||||
font-size: 7px;
|
||||
color: #fff;
|
||||
background: #3c6399;
|
||||
padding: 0 3px;
|
||||
border-radius: 2px;
|
||||
line-height: 1.4;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.nn-cell.nn-win-banker .nn-win-tag {
|
||||
background: #a84237;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
min-width: 110px;
|
||||
padding: 10px 18px;
|
||||
border-radius: 16px;
|
||||
color: #fff;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(47, 39, 28, 0.92) 0%,
|
||||
rgba(17, 14, 11, 0.92) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.18);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
|
||||
|
||||
&.status-betting {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(88, 67, 33, 0.92) 0%,
|
||||
rgba(24, 18, 11, 0.94) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.status-text-lg {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.countdown-text {
|
||||
font-size: 15px;
|
||||
color: #fff5dc;
|
||||
margin-top: 2px;
|
||||
font-family: monospace;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user