feat: unify lottery detail page style
This commit is contained in:
hajimi
@@ -18,17 +18,33 @@
|
||||
<view v-if="!loading && drawData" class="dd-body">
|
||||
<!-- 彩种+期号信息 -->
|
||||
<view class="dd-info">
|
||||
<text class="dd-info__name">{{ drawData.category?.name || '' }}</text>
|
||||
<text class="dd-info__period">第 {{ drawData.period }} 期</text>
|
||||
<view class="dd-info__badge" :class="{ 'dd-info__badge--pending': drawData.status === 0 }">
|
||||
<text>{{ drawData.status === 1 ? '已开奖' : '待开奖' }}</text>
|
||||
<view class="dd-info__identity">
|
||||
<view class="dd-info__logo">
|
||||
<image v-if="drawData.category?.icon" class="dd-info__logo-img" :src="drawData.category.icon"
|
||||
mode="aspectFit" />
|
||||
<text v-else class="dd-info__logo-text">{{ (drawData.category?.name || '彩种').substring(0, 1) }}</text>
|
||||
</view>
|
||||
<view class="dd-info__meta">
|
||||
<text class="dd-info__name">{{ drawData.category?.name || '' }}</text>
|
||||
<view class="dd-info__sub">
|
||||
<text class="dd-info__period">第 {{ drawData.period }} 期</text>
|
||||
<text class="dd-info__date">{{ drawData.draw_date || '开奖日期待定' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dd-info__status">
|
||||
<view class="dd-info__badge" :class="{ 'dd-info__badge--pending': drawData.status === 0 }">
|
||||
<text>{{ drawData.status === 1 ? '已开奖' : '待开奖' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="dd-date">开奖日期：{{ drawData.draw_date }}</text>
|
||||
|
||||
<!-- 开奖号码 -->
|
||||
<view v-if="drawData.status === 1" class="dd-result">
|
||||
<text class="dd-result__label">开奖号码</text>
|
||||
<view class="dd-result__header">
|
||||
<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)">
|
||||
@@ -268,7 +284,7 @@ onLoad((options: any) => {
|
||||
}
|
||||
|
||||
.dd-nav {
|
||||
background: var(--color-primary, #4a90d9);
|
||||
background: linear-gradient(135deg, #185dff, #ff6b6b);
|
||||
|
||||
&__content {
|
||||
height: 44px;
|
||||
@@ -305,27 +321,92 @@ onLoad((options: any) => {
|
||||
}
|
||||
|
||||
.dd-body {
|
||||
padding: 24rpx;
|
||||
padding: 20rpx 24rpx 40rpx;
|
||||
}
|
||||
|
||||
.dd-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background: #fff;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 6rpx 20rpx rgba(24, 93, 255, 0.04);
|
||||
|
||||
&__identity {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
flex: 0 0 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(135deg, #185dff, #ff6b6b);
|
||||
}
|
||||
|
||||
&__logo-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__logo-text {
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 34rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
&__sub {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
&__period {
|
||||
font-size: 26rpx;
|
||||
font-size: 24rpx;
|
||||
color: #185dff;
|
||||
background: #E5EDFF;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__date {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&__status {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
@@ -342,46 +423,52 @@ onLoad((options: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
.dd-date {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.dd-result {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
box-shadow: 0 6rpx 20rpx rgba(24, 93, 255, 0.04);
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&__balls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
gap: 10rpx;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 号码球 */
|
||||
.ball {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&--red {
|
||||
background: linear-gradient(135deg, #ef4444, #f87171);
|
||||
background: linear-gradient(135deg, #185dff, #ff6b6b);
|
||||
}
|
||||
|
||||
&--blue {
|
||||
@@ -393,17 +480,17 @@ onLoad((options: any) => {
|
||||
}
|
||||
|
||||
&--special {
|
||||
border: 4rpx solid #fbbf24;
|
||||
border: 3rpx solid #fbbf24;
|
||||
}
|
||||
|
||||
&__num {
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__plus {
|
||||
font-size: 36rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -414,11 +501,11 @@ onLoad((options: any) => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.ball-zodiac {
|
||||
font-size: 22rpx;
|
||||
font-size: 20rpx;
|
||||
color: #666;
|
||||
|
||||
&--special {
|
||||
@@ -428,14 +515,14 @@ onLoad((options: any) => {
|
||||
}
|
||||
|
||||
.dd-extra {
|
||||
margin-top: 24rpx;
|
||||
padding-top: 24rpx;
|
||||
margin-top: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
|
||||
&__label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
&__tags {
|
||||
@@ -484,18 +571,20 @@ onLoad((options: any) => {
|
||||
.dd-pending {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 80rpx 30rpx;
|
||||
padding: 48rpx 24rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
box-shadow: 0 6rpx 20rpx rgba(24, 93, 255, 0.04);
|
||||
|
||||
&__icon {
|
||||
font-size: 80rpx;
|
||||
font-size: 64rpx;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 32rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
@@ -511,8 +600,10 @@ onLoad((options: any) => {
|
||||
.dd-rule {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
box-shadow: 0 6rpx 20rpx rgba(24, 93, 255, 0.04);
|
||||
|
||||
&__title {
|
||||
font-size: 28rpx;
|
||||
@@ -547,8 +638,10 @@ onLoad((options: any) => {
|
||||
.ai-section {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
box-shadow: 0 6rpx 20rpx rgba(24, 93, 255, 0.04);
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user