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
docs/业务进度管理.md
+1
View File
@@ -68,6 +68,7 @@
- 根据验收反馈统一收紧页面字号，标题、导航、彩种、开奖卡片、倒计时、号码和 AI 弹窗文字均降低一档，保持信息层级和可读性。
- 开奖详情页同步开奖记录列表的渐变导航、白色圆角卡片、状态标签和号码球视觉，补充彩种图标、期号日期信息及统一卡片间距。
- 开奖详情进一步按开奖记录列表的颜色、字号和卡片规格统一；页面底部动态读取“彩票资讯”分类的最新 5 条文章，支持进入现有资讯详情页，避免详情页内容过短留白。
- 开奖详情页视觉改为贴近彩票中心首页：白底品牌导航、浅蓝风险提示、彩种头像与状态主卡、首页同款实色号码球及圆角规格，资讯区保持同一套卡片层级。
涉及模块：
docs/设计稿映射.md
+1 -1
View File
@@ -28,7 +28,7 @@
| 赛事详情页 | `uniapp/src/pages/match_detail/match_detail.vue` | 🚧 部分完成 | 2026-05-29 优化顶部赛事摘要头部，补充联赛、对阵、状态与直播入口信息；2026-08-03 顶部改为设计稿的沉浸式直播大图与比分区，详情接口可按已绑定关系或直播标题中的主客队名称匹配房间，多房间可横向切换 |
| 世界杯专题页（排名导航） | `uniapp/src/packages_match/pages/worldcup.vue` | 🚧 部分完成 | 2026-05-20 已按设计稿拆分排名导航、积分榜、球员榜组件；2026-08-03 赛程卡会按赛事 ID、主客队名和直播标题匹配直播列表，命中后显示“看直播”入口；后续可继续细化表格视觉与新闻页样式 |
| 首页 | `uniapp/src/pages/index/index.vue` | 🚧 部分完成 | 2026-07-31 已按当前设计图重构为“今日焦点赛程、主推大图、最新资讯”三段式首页；2026-08-02 频道栏改为可横向滑动，频道项固定宽度并统一间距；频道仍复用后台配置分类，待实际 H5 页面验收后确认最终状态 |
| 彩票中心 | `uniapp/src/pages/lottery_analysis/lottery_analysis.vue`、`uniapp/src/packages_lottery/pages/detail.vue` | 🚧 部分完成 | 2026-08-03 按彩票中心设计稿重构顶部品牌导航、开奖大厅/关注/日历导航、横向彩种胶囊、风险提示及最新开奖卡片；保留开奖结果、倒计时、详情与历史开奖入口。开奖详情已同步开奖记录列表的视觉规格，并动态展示彩票资讯，待 H5 页面验收 |
| 彩票中心 | `uniapp/src/pages/lottery_analysis/lottery_analysis.vue`、`uniapp/src/packages_lottery/pages/detail.vue` | 🚧 部分完成 | 2026-08-03 按彩票中心设计稿重构顶部品牌导航、开奖大厅/关注/日历导航、横向彩种胶囊、风险提示及最新开奖卡片；保留开奖结果、倒计时、详情与历史开奖入口。开奖详情已改为复用首页品牌导航、风险提示、彩种主卡和号码球视觉，并动态展示彩票资讯，待 H5 页面验收 |
| 社区广场 | `uniapp/src/pages/community/community.vue` | 🚧 部分完成 | 2026-08-02 已按优化设计稿重构为社区信息流；入口路径调整为 `/pages/community/community`，旧 `/pages/empty/empty` 与旧分包入口会自动跳转；顶部积分入口已在频道导航栏内上下居中；付费帖子未解锁区域已调整为上深下浅纵向渐变面板和底部居中描边按钮；锁定付费卡片的付费提示与积分状态改为顶部左右同排，免费及积分状态均固定右上角顶对齐；帖子卡片互动栏仅保留浏览、评论、点赞并按三等分排列，计数支持去除 `.0` 及 `k / 万 / 亿` 紧凑显示，待 H5 发布后验收实际效果 |
| 社区帖子详情 | `uniapp/src/packages_community/pages/post_detail.vue` | 🚧 部分完成 | 2026-08-03 解锁卡已按设计稿优化为浅蓝渐变、同心圆实心锁、积分信息区、渐变解锁按钮与居中提示；“积分规则”复用通用富文本协议页，并由管理端协议设置配置内容；页面主体、解锁卡、互动评论与输入栏已压缩字号及间距；互动统计与评论区改为连续卡片层级，评论点赞置于正文右侧并统一使用紧凑计数；未解锁帖子始终显示免费预览“展开”按钮，折叠态按钮位于摘要末行右侧；已有译文的帖子按标点短语进行原文/译文一对一交错显示；430px H5 页面已复核，App/小程序与正式构建待验收 |
| 新闻详情 | `uniapp/src/pages/news_detail/news_detail.vue` | 待核对 | 富文本与图片渲染已存在相关实现 |
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;
}
}