This commit is contained in:
Mrx
2026-05-23 12:14:40 +08:00
parent ae6dce5546
commit 00ed30acb1
3 changed files with 66 additions and 55 deletions

View File

@@ -32,18 +32,18 @@ const caseList = ref<CaseItem[]>([
const vehicleItems = computed(() => getInquireCategoryConfig('vehicle')?.items ?? [])
/** 首页热门工具 2×3 网格 */
/** 首页热门工具 2×5 网格 */
const hotTools = computed(() =>
['tianqishiju', 'jieqi', 'blood', 'zodiac', 'saylove', 'nethot']
['tianqishiju', 'jieqi', 'blood', 'zodiac', 'saylove', 'nethot', 'jixiong', 'naowan', 'joke', 'dujitang']
.map(key => getToolboxItem(key))
.filter(Boolean),
)
/** 每日推荐候选池 */
const dailyPool = [
'jixiong', 'naowan', 'joke', 'dujitang', 'dream', 'oilprice',
'dream', 'oilprice',
'caihongpi', 'riddle', 'decide', 'caipu', 'godreply', 'tiangou',
'story', 'targa', 'hsjz', 'zimi',
'story', 'targa', 'hsjz', 'zimi', 'weather', 'calendar', 'constellation', 'goldprice'
]
/** 随机从候选池中抽取 n 个 */
@@ -52,14 +52,14 @@ function pickRandom(pool: string[], n: number): string[] {
return shuffled.slice(0, n)
}
const dailyKeys = ref<string[]>(pickRandom(dailyPool, 8))
const dailyKeys = ref<string[]>(pickRandom(dailyPool, 10))
const dailyPicks = computed(() =>
dailyKeys.value.map(key => getToolboxItem(key)).filter(Boolean),
)
function refreshDaily() {
dailyKeys.value = pickRandom(dailyPool, 8)
dailyKeys.value = pickRandom(dailyPool, 10)
}
const reviewList = ref<ReviewItem[]>([
@@ -337,19 +337,19 @@ page {
padding: 0 4rpx 6rpx;
}
/* 热门工具 2×3 网格 */
/* 热门工具 2×5 网格 */
.hot-tools-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
grid-template-columns: repeat(5, 1fr);
gap: 12rpx;
}
.hot-tool-card {
position: relative;
padding: 0;
border-radius: 20rpx;
border-radius: 16rpx;
background: #f7f8fa;
transition: background 0.2s;
height: 200rpx;
height: 140rpx;
overflow: hidden;
}
.hot-tool-card:active {
@@ -359,7 +359,7 @@ page {
position: relative;
width: 100%;
height: 100%;
border-radius: 20rpx;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
@@ -379,7 +379,7 @@ page {
background: linear-gradient(135deg, #f3e5f5, #e1bee7);
}
.hot-tool-icon {
font-size: 100rpx;
font-size: 60rpx;
opacity: 0.15;
flex: 1;
display: flex;
@@ -401,14 +401,14 @@ page {
}
.hot-tool-name {
flex: 0 0 auto;
font-size: 22rpx;
font-size: 20rpx;
color: #333;
text-align: center;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4rpx 8rpx;
padding: 0 4rpx 6rpx;
}
/* 每日推荐 */
@@ -445,15 +445,15 @@ page {
}
.daily-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14rpx;
grid-template-columns: repeat(5, 1fr);
gap: 12rpx;
}
.daily-card {
position: relative;
padding: 0;
border-radius: 16rpx;
background: #f7f8fa;
height: 180rpx;
height: 140rpx;
overflow: hidden;
}
.daily-card:active {
@@ -483,7 +483,7 @@ page {
background: linear-gradient(135deg, #f3e5f5, #e1bee7);
}
.daily-icon {
font-size: 90rpx;
font-size: 60rpx;
opacity: 0.15;
flex: 1;
display: flex;
@@ -516,7 +516,7 @@ page {
display: flex;
align-items: center;
justify-content: center;
padding: 0 4rpx 8rpx;
padding: 0 4rpx 6rpx;
}
/* 案例 */

View File

@@ -702,23 +702,25 @@ async function onConfirmPay() {
<text class="agree-link" @tap.stop="goLegalAuthorization">授权书</text>
</view>
</view>
<view class="submit-row">
<!-- 提交按钮独立不动 -->
<view class="submit-btn" :class="{ disabled: submitting }" @tap="onSubmit">
<text class="submit-text">{{ submitting ? '提交中…' : '立即查询' }}</text>
<text v-if="featureData.sell_price != null && !submitting" class="submit-price">¥{{ featureData.sell_price }}</text>
</view>
<view class="submit-row">
<view class="submit-btn" :class="{ disabled: submitting }" @tap="onSubmit">
<text>{{ submitting ? '提交中…' : '立即查询' }}</text>
<text v-if="featureData.sell_price != null && !submitting" class="submit-price">¥{{ featureData.sell_price }}</text>
<!-- 用户须知 + 查询须知 放在按钮 -->
<view class="notice-icons" style="margin-top: 20rpx; justify-content: center;">
<view class="notice-icon-item" @tap="goUserNotice">
<image class="notice-icon-img" src="/static/inquire/slbg_inquire_icon.png" mode="aspectFit" />
<text class="notice-icon-label">用户须知</text>
</view>
<view class="notice-icons">
<view class="notice-icon-item" @tap="goUserNotice">
<image class="notice-icon-img" src="/static/inquire/slbg_inquire_icon.png" mode="aspectFit" />
<text class="notice-icon-label">用户须知</text>
</view>
<view class="notice-icon-item" @tap="goQueryNotice">
<image class="notice-icon-img" src="/static/inquire/slbg_inquire_icon.png" mode="aspectFit" />
<text class="notice-icon-label">查询须知</text>
</view>
<view class="notice-icon-item" @tap="goQueryNotice">
<image class="notice-icon-img" src="/static/inquire/slbg_inquire_icon.png" mode="aspectFit" />
<text class="notice-icon-label">查询须知</text>
</view>
</view>
</view>
<view class="footer-hint">
为保证用户的隐私及数据安全查询结果生成30天后将自动删除
</view>
@@ -1118,7 +1120,7 @@ async function onConfirmPay() {
}
.agree-link {
font-size: 24rpx;
font-size: 20rpx;
color: #1768ff;
line-height: 1.45;
}
@@ -1139,65 +1141,74 @@ async function onConfirmPay() {
}
.agree-text {
font-size: 24rpx;
font-size: 20rpx;
color: #86909c;
line-height: 1.45;
}
/* 外层容器:垂直居中,控制整体间距 */
.submit-row {
margin-top: 40rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
gap: 24rpx; /* 按钮和须知之间的间距 */
padding: 20rpx 0;
}
.submit-btn {
flex: 1;
height: 96rpx;
padding: 0 32rpx;
/* 优化后的按钮样式 */
.submit-btn{
width: 420rpx;
height: 100rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 16rpx;
border-radius: 48rpx;
font-size: 32rpx;
gap: 8rpx;
padding: 0 40rpx;
border-radius: 50rpx;
background: linear-gradient(90deg, #1768ff 0%, #4d94ff 100%);
box-shadow: 0 4rpx 12rpx rgba(23, 104, 255, 0.2); /* 加个轻微阴影,更有质感 */
}
.submit-text {
font-size: 34rpx;
font-weight: 600;
color: #fff;
background: linear-gradient(90deg, #1768ff 0%, #4d94ff 100%);
}
.submit-price {
font-size: 30rpx;
font-weight: 500;
color: #fff;
opacity: 0.95;
}
.notice-icons {
display: flex;
flex-direction: column;
flex-direction: row; /* 横向并排 */
align-items: center;
gap: 12rpx;
gap: 30rpx;
flex-shrink: 0;
}
/* 这个保持不变 */
.notice-icon-item {
display: flex;
align-items: center;
gap: 8rpx;
padding: 6rpx 0;
}
.notice-icon-img {
width: 32rpx;
height: 32rpx;
flex-shrink: 0;
}
.notice-icon-label {
font-size: 22rpx;
color: #4e5969;
white-space: nowrap;
}
.submit-price {
font-size: 32rpx;
font-weight: 600;
}
.submit-btn.disabled {
opacity: 0.6;
}

View File

@@ -407,7 +407,7 @@ function goTool(key: string) {
.tool-cell-icon {
font-size: 100rpx;
opacity: 0.15;
opacity: 1;
flex: 1;
display: flex;
align-items: center;