haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: align lottery detail with home style

Browse Source
This commit is contained in:
hajimi
2026-08-03 16:13:35 +08:00
parent acc994d16c
commit d86b1b2cad
3 changed files with 245 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/packages_lottery/pages/detail.vue
+243 -154
View File
@@ -4,77 +4,87 @@
<view class="dd-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="dd-nav__content">
<view class="dd-nav__back" @tap="goBack">
<u-icon name="arrow-left" size="36" color="#fff" />
<u-icon name="arrow-left" size="36" color="#0053d8" />
</view>
<image v-if="websiteLogo" class="dd-nav__logo" :src="websiteLogo" mode="aspectFit" />
<text class="dd-nav__title">开奖详情</text>
<view class="dd-nav__placeholder" />
</view>
</view>
<view class="dd-notice">
<text>开奖信息仅供参考，请理性参与</text>
</view>
<view v-if="loading" class="dd-loading">
<text>加载中...</text>
</view>
<view v-if="!loading && drawData" class="dd-body">
<!-- 彩种+期号信息 -->
<view class="dd-info">
<view class="dd-info__header">
<text class="dd-info__name">{{ drawData.category?.name || '' }}</text>
<text class="dd-info__period">第 {{ drawData.period }} 期</text>
<text class="dd-info__date">{{ drawData.draw_date || '开奖日期待定' }}</text>
<view class="dd-info__badge" :class="{ 'dd-info__badge--pending': drawData.status === 0 }">
<text>{{ drawData.status === 1 ? '已开奖' : '待开奖' }}</text>
<!-- 开奖主卡片 -->
<view class="dd-draw-card">
<view class="dd-draw-card__header">
<view class="dd-draw-card__logo">
<image v-if="drawData.category?.icon" class="dd-draw-card__logo-img" :src="drawData.category.icon"
mode="aspectFit" />
<text v-else class="dd-draw-card__logo-text">{{ (drawData.category?.name || '彩').substring(0, 1) }}</text>
</view>
<view class="dd-draw-card__meta">
<text class="dd-draw-card__name">{{ drawData.category?.name || '' }}</text>
<view class="dd-draw-card__sub">
<text class="dd-draw-card__period">第 {{ drawData.period }} 期</text>
<view class="dd-draw-card__badge"
:class="{ 'dd-draw-card__badge--pending': drawData.status === 0 }">
<text>{{ drawData.status === 1 ? '已开奖' : '待开奖' }}</text>
</view>
</view>
<text class="dd-draw-card__date">开奖时间 {{ drawData.draw_date || '待定' }}</text>
</view>
</view>
</view>
<!-- 开奖号码 -->
<view v-if="drawData.status === 1" class="dd-result">
<view class="dd-result__header">
<!-- 开奖号码 -->
<view v-if="drawData.status === 1" class="dd-result">
<view class="dd-draw-card__divider" />
<text class="dd-result__label">开奖号码</text>
<text class="dd-result__hint">本期开奖结果</text>
</view>
<view class="dd-result__balls">
<view v-for="(num, i) in drawData.numbers" :key="i" class="ball-wrap">
<view class="ball" :class="'ball--' + getBallColor(i)">
<text class="ball__num">{{ formatNum(num) }}</text>
<view class="dd-result__balls">
<view v-for="(num, i) in drawData.numbers" :key="i" class="ball-wrap">
<view class="ball" :class="'ball--' + getBallColor(i)">
<text class="ball__num">{{ formatNum(num) }}</text>
</view>
<text class="ball-zodiac">{{ drawData.zodiac?.[i] || '' }}</text>
</view>
<text class="ball-zodiac">{{ drawData.zodiac?.[i] || '' }}</text>
<text v-if="drawData.special_number" class="ball__plus">+</text>
<view v-if="drawData.special_number" class="ball-wrap">
<view class="ball ball--special" :class="'ball--' + specialColor">
<text class="ball__num">{{ formatNum(drawData.special_number) }}</text>
</view>
<text class="ball-zodiac ball-zodiac--special">{{ specialZodiac }}</text>
</view>
</view>
<text v-if="drawData.special_number" class="ball__plus">+</text>
<view v-if="drawData.special_number" class="ball-wrap">
<view class="ball ball--special" :class="'ball--' + specialColor">
<text class="ball__num">{{ formatNum(drawData.special_number) }}</text>
<!-- 五行 -->
<view v-if="drawData.elements?.length" class="dd-extra">
<text class="dd-extra__label">五行</text>
<view class="dd-extra__tags">
<text v-for="(e, i) in drawData.elements" :key="i" class="dd-tag dd-tag--element">{{ e }}</text>
</view>
</view>
<!-- 波色 -->
<view v-if="drawData.color?.length" class="dd-extra">
<text class="dd-extra__label">波色</text>
<view class="dd-extra__tags">
<view v-for="(c, i) in drawData.color" :key="i" class="dd-color-dot"
:class="'dd-color-dot--' + c" />
</view>
<text class="ball-zodiac ball-zodiac--special">{{ specialZodiac }}</text>
</view>
</view>
<!-- 五行 -->
<view v-if="drawData.elements?.length" class="dd-extra">
<text class="dd-extra__label">五行</text>
<view class="dd-extra__tags">
<text v-for="(e, i) in drawData.elements" :key="i" class="dd-tag dd-tag--element">{{ e }}</text>
</view>
<!-- 待开奖 -->
<view v-else class="dd-pending">
<text class="dd-pending__text">等待开奖...</text>
<text class="dd-pending__hint">
开奖时间：{{ drawData.category?.draw_time || '请关注官方公告' }}
</text>
</view>
<!-- 波色 -->
<view v-if="drawData.color?.length" class="dd-extra">
<text class="dd-extra__label">波色</text>
<view class="dd-extra__tags">
<view v-for="(c, i) in drawData.color" :key="i" class="dd-color-dot"
:class="'dd-color-dot--' + c" />
</view>
</view>
</view>
<!-- 待开奖 -->
<view v-else class="dd-pending">
<text class="dd-pending__icon">🎱</text>
<text class="dd-pending__text">等待开奖</text>
<text class="dd-pending__hint">
开奖时间：{{ drawData.category?.draw_time || '请关注官方公告' }}
</text>
</view>
<!-- 开奖规则 -->
@@ -201,7 +211,10 @@ import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getLotteryDrawDetail } from '@/api/lottery'
import { getArticleCate, getArticleList } from '@/api/news'
import { useAppStore } from '@/stores/app'
const appStore = useAppStore()
const websiteLogo = computed(() => appStore.getWebsiteConfig.shop_logo || '')
const statusBarHeight = ref(0)
const loading = ref(true)
const drawData = ref<any>(null)
@@ -320,33 +333,48 @@ onLoad((options: any) => {
}
.dd-nav {
background: linear-gradient(135deg, #185dff, #ff6b6b);
display: flex;
align-items: center;
background: #fff;
border-bottom: 1rpx solid #eee;
&__content {
height: 44px;
height: 54px;
display: flex;
align-items: center;
padding: 0 24rpx;
flex: 1;
padding: 0 30rpx;
gap: 12rpx;
}
&__back {
width: 60rpx;
height: 44px;
width: 44rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: flex-start;
flex-shrink: 0;
}
&__logo {
width: 68rpx;
height: 68rpx;
border-radius: 12rpx;
flex-shrink: 0;
}
&__title {
flex: 1;
text-align: center;
font-size: 34rpx;
font-size: 36rpx;
font-weight: bold;
color: #fff;
color: #0053d8;
}
}
&__placeholder {
width: 60rpx;
}
.dd-notice {
padding: 16rpx 30rpx;
background: #f0f4ff;
color: #808080;
font-size: 24rpx;
}
.dd-loading {
@@ -360,114 +388,140 @@ onLoad((options: any) => {
padding: 0 0 40rpx;
}
.dd-info {
.dd-draw-card {
display: flex;
align-items: center;
margin: 20rpx 24rpx 0;
padding: 24rpx;
flex-direction: column;
margin: 20rpx 30rpx 0;
padding: 24rpx 28rpx;
background: #fff;
border-radius: 16rpx;
border-radius: 24rpx;
&__header {
width: 100%;
display: flex;
align-items: center;
gap: 12rpx;
width: 100%;
}
&__logo {
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
border-radius: 50%;
background: #f0f0f0;
}
&__logo-img {
width: 100%;
height: 100%;
}
&__logo-text {
color: #999;
font-size: 28rpx;
font-weight: bold;
}
&__meta {
min-width: 0;
display: flex;
flex: 1;
flex-direction: column;
gap: 4rpx;
}
&__name {
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 28rpx;
font-weight: bold;
color: #222;
color: #000;
}
&__sub {
display: flex;
align-items: center;
gap: 16rpx;
}
&__period {
font-size: 24rpx;
color: #999;
color: #185dff;
white-space: nowrap;
}
&__date {
min-width: 0;
margin-left: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24rpx;
color: #999;
color: #808080;
}
&__badge {
flex-shrink: 0;
padding: 2rpx 16rpx;
border-radius: 16rpx;
font-size: 22rpx;
color: #22c55e;
background: #f0fdf4;
padding: 4rpx 16rpx;
border-radius: 8rpx;
color: #185dff;
background: #e5edff;
&--pending {
color: #f59e0b;
background: #fffbeb;
color: #ee3835;
background: #fff0f0;
}
}
&__divider {
width: 100%;
height: 1rpx;
margin: 20rpx 0;
background: #e6e6e6;
}
}
.dd-result {
margin: 20rpx 24rpx 0;
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
width: 100%;
&__label {
font-size: 28rpx;
display: block;
margin-bottom: 16rpx;
font-size: 24rpx;
font-weight: bold;
color: #333;
}
&__hint {
font-size: 22rpx;
color: #999;
color: #808080;
}
&__balls {
display: flex;
align-items: center;
justify-content: center;
gap: 10rpx;
align-items: flex-start;
gap: 16rpx;
flex-wrap: wrap;
}
}
/* 号码球 */
.ball {
width: 72rpx;
height: 72rpx;
width: 66rpx;
height: 66rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
&--red {
background: linear-gradient(135deg, #185dff, #ff6b6b);
background: #c80030;
}
&--blue {
background: linear-gradient(135deg, #3b82f6, #60a5fa);
background: #024ddf;
}
&--green {
background: linear-gradient(135deg, #22c55e, #4ade80);
background: #04b900;
}
&--special {
@@ -481,8 +535,11 @@ onLoad((options: any) => {
}
&__plus {
font-size: 28rpx;
color: #999;
display: flex;
align-items: center;
height: 66rpx;
font-size: 32rpx;
color: #171a20;
font-weight: bold;
}
}
@@ -492,12 +549,12 @@ onLoad((options: any) => {
display: flex;
flex-direction: column;
align-items: center;
gap: 4rpx;
gap: 6rpx;
}
.ball-zodiac {
font-size: 20rpx;
color: #666;
font-size: 22rpx;
color: #000;
&--special {
color: #185dff;
@@ -505,6 +562,46 @@ onLoad((options: any) => {
}
}
/* 波色号码与彩票主页、历史开奖页统一为白底描边样式 */
.dd-result .ball {
box-sizing: border-box;
background: #fff;
border: 2rpx solid #185dff;
box-shadow: none;
}
.dd-result .ball--red {
border-color: #ff3b30;
}
.dd-result .ball--blue {
border-color: #185dff;
}
.dd-result .ball--green {
border-color: #19a957;
}
.dd-result .ball--special {
border-width: 2rpx;
}
.dd-result .ball--special.ball--red {
border-color: #ff3b30;
}
.dd-result .ball--special.ball--blue {
border-color: #185dff;
}
.dd-result .ball--special.ball--green {
border-color: #19a957;
}
.dd-result .ball__num {
color: #111827;
}
.dd-extra {
margin-top: 20rpx;
padding-top: 20rpx;
@@ -512,7 +609,7 @@ onLoad((options: any) => {
&__label {
font-size: 24rpx;
color: #999;
color: #808080;
margin-bottom: 12rpx;
}
@@ -560,24 +657,16 @@ onLoad((options: any) => {
}
.dd-pending {
margin: 20rpx 24rpx 0;
background: #fff;
border-radius: 16rpx;
padding: 32rpx 24rpx;
text-align: center;
&__icon {
font-size: 64rpx;
display: block;
margin-bottom: 16rpx;
}
width: 100%;
padding: 4rpx 0;
text-align: left;
&__text {
font-size: 30rpx;
font-weight: bold;
color: #333;
font-size: 24rpx;
font-weight: normal;
color: #808080;
display: block;
margin-bottom: 12rpx;
margin-bottom: 8rpx;
}
&__hint {
@@ -587,10 +676,10 @@ onLoad((options: any) => {
}
.dd-rule {
margin: 20rpx 24rpx 0;
margin: 20rpx 30rpx 0;
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
border-radius: 24rpx;
padding: 24rpx 28rpx;
&__title {
font-size: 28rpx;
@@ -607,10 +696,10 @@ onLoad((options: any) => {
}
.dd-news {
margin: 20rpx 24rpx 0;
padding: 24rpx;
margin: 20rpx 30rpx 0;
padding: 24rpx 28rpx;
background: #fff;
border-radius: 16rpx;
border-radius: 24rpx;
&__header {
display: flex;
@@ -681,7 +770,7 @@ onLoad((options: any) => {
}
.dd-disclaimer {
padding: 30rpx 24rpx 0;
padding: 30rpx 30rpx 0;
text-align: center;
font-size: 22rpx;
color: #ccc;
@@ -697,10 +786,10 @@ onLoad((options: any) => {
/* AI预测区块 */
.ai-section {
margin: 20rpx 24rpx 0;
margin: 20rpx 30rpx 0;
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
border-radius: 24rpx;
padding: 24rpx 28rpx;
&__header {
display: flex;
@@ -746,32 +835,32 @@ onLoad((options: any) => {
.ai-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10rpx;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
padding: 16rpx 36rpx;
border-radius: 36rpx;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
width: 100%;
padding: 14rpx 0;
border-radius: 12rpx;
background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
box-shadow: none;
&__icon {
padding: 4rpx 14rpx;
padding: 2rpx 10rpx;
color: #fff;
background: rgba(255, 255, 255, 0.3);
border-radius: 10rpx;
font-size: 24rpx;
font-weight: 900;
letter-spacing: 2rpx;
background: linear-gradient(135deg, #6366f1, #4f46e5);
border-radius: 6rpx;
font-size: 20rpx;
font-weight: bold;
}
&__text {
color: #fff;
font-size: 28rpx;
font-weight: bold;
letter-spacing: 2rpx;
color: #4f46e5;
font-size: 24rpx;
font-weight: 500;
}
&__arrow {
color: rgba(255, 255, 255, 0.8);
font-size: 36rpx;
color: #4f46e5;
font-size: 28rpx;
font-weight: bold;
}
}