686 lines
19 KiB
Vue
686 lines
19 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 顶部导航栏 (搜索) -->
|
||
<view class="nav-header">
|
||
<view class="brand-logo">
|
||
<text class="brand-text">奇盒潮玩</text>
|
||
<view class="brand-star">✨</view>
|
||
</view>
|
||
<view class="search-bar">
|
||
<text class="search-icon">🔍</text>
|
||
<text class="search-placeholder">搜索商品</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 滚动区域 -->
|
||
<scroll-view class="main-content" scroll-y>
|
||
<!-- Banner 区域 -->
|
||
<view class="banner-box">
|
||
<swiper class="banner-swiper" circular autoplay interval="4000" duration="500">
|
||
<swiper-item v-for="b in displayBanners" :key="b.id">
|
||
<image v-if="b.image" class="banner-image" :src="b.image" mode="aspectFill" @tap="onBannerTap(b)" />
|
||
<view v-else class="banner-fallback">
|
||
<text class="banner-fallback-text">{{ b.title || '奇盒潮玩 V6.0' }}</text>
|
||
<text class="banner-tag">功能更新UI优化全面来袭</text>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 通知栏 -->
|
||
<view class="notice-bar" @tap="onNoticeTap">
|
||
<view class="notice-tag">通知</view>
|
||
<swiper class="notice-swiper" vertical circular autoplay interval="3000" duration="300">
|
||
<swiper-item v-for="n in displayNotices" :key="n.id">
|
||
<view class="notice-item">{{ n.text }}</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="notice-more">查看详情</view>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 玩法分类专区 -->
|
||
<view class="gameplay-section">
|
||
<view class="section-header">
|
||
<text class="section-title">玩法分类</text>
|
||
</view>
|
||
<view class="gameplay-grid-v2">
|
||
<!-- 上排：两大核心 -->
|
||
<view class="grid-row-top">
|
||
<view class="game-card-large card-yifan" @tap="navigateTo('/pages/activity/list/index?category=一番赏')">
|
||
<view class="card-bg-decoration"></view>
|
||
<view class="card-content-large">
|
||
<text class="card-title-large">一番赏</text>
|
||
<view class="card-tag-large">欧皇擂台</view>
|
||
<image class="card-mascot-large" src="https://via.placeholder.com/150/90EE90/000000?text=YI" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<view class="game-card-large card-wuxian" @tap="navigateTo('/pages/activity/list/index?category=无限赏')">
|
||
<view class="card-content-large">
|
||
<text class="card-title-large">无限赏</text>
|
||
<view class="card-tag-large yellow">一发入魂</view>
|
||
<image class="card-mascot-large" src="https://via.placeholder.com/150/FFD700/000000?text=WU" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 下排：三小功能 -->
|
||
<view class="grid-row-bottom">
|
||
<view class="game-card-small card-match" @tap="navigateTo('/pages/activity/list/index?category=对对碰')">
|
||
<text class="card-title-small">对对碰</text>
|
||
<text class="card-subtitle-small">碰一碰消除</text>
|
||
<image class="card-icon-small" src="https://via.placeholder.com/80/FFB6C1/000000?text=Match" mode="aspectFit" />
|
||
</view>
|
||
|
||
<view class="game-card-small card-tower" @tap="navigateTo('/pages/activity/list/index?category=爬塔')">
|
||
<text class="card-title-small">爬塔</text>
|
||
<text class="card-subtitle-small">层层挑战</text>
|
||
<image class="card-icon-small" src="https://via.placeholder.com/80/9370DB/000000?text=Tower" mode="aspectFit" />
|
||
</view>
|
||
|
||
<view class="game-card-small card-more" @tap="navigateTo('#')">
|
||
<text class="card-title-small">更多</text>
|
||
<text class="card-subtitle-small">敬请期待</text>
|
||
<image class="card-icon-small" src="https://via.placeholder.com/80/E0E0E0/000000?text=More" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 推荐活动列表 -->
|
||
<view class="activity-section">
|
||
<view class="section-header">
|
||
<text class="section-title">推荐活动</text>
|
||
</view>
|
||
|
||
<view v-if="activeGroupItems.length" class="activity-grid-list">
|
||
<view class="activity-item" v-for="a in activeGroupItems" :key="a.id" @tap="onActivityTap(a)">
|
||
<view class="activity-thumb-box">
|
||
<image v-if="a.image" class="activity-thumb" :src="a.image" mode="aspectFill" />
|
||
<view v-else class="banner-fallback mini">
|
||
<text class="banner-fallback-text mini">{{ a.title }}</text>
|
||
</view>
|
||
<!-- 热门标签 -->
|
||
<view class="activity-tag-hot">HOT</view>
|
||
</view>
|
||
<view class="activity-info">
|
||
<text class="activity-name">{{ a.title }}</text>
|
||
<view class="activity-row">
|
||
<text class="activity-desc" v-if="a.subtitle">{{ a.subtitle }}</text>
|
||
<view class="activity-btn-go">GO</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="activity-empty">暂无更多活动</view>
|
||
</view>
|
||
|
||
<!-- 底部垫高 -->
|
||
<view style="height: 40rpx"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { authRequest, request } from '../../utils/request.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
notices: [],
|
||
banners: [],
|
||
activities: [],
|
||
selectedGroupName: ''
|
||
}
|
||
},
|
||
computed: {
|
||
displayNotices() {
|
||
if (Array.isArray(this.notices) && this.notices.length) return this.notices
|
||
return [
|
||
{ id: 'n1', text: '欢迎光临' },
|
||
{ id: 'n2', text: '最新活动敬请期待' }
|
||
]
|
||
},
|
||
displayBanners() {
|
||
if (Array.isArray(this.banners) && this.banners.length) return this.banners
|
||
return [
|
||
{ id: 'ph-1', title: '精彩内容即将上线', image: '' },
|
||
{ id: 'ph-2', title: '敬请期待', image: '' },
|
||
{ id: 'ph-3', title: '更多活动请关注', image: '' }
|
||
]
|
||
},
|
||
activityGroups() {
|
||
const list = Array.isArray(this.activities) ? this.activities : []
|
||
const map = new Map()
|
||
list.forEach(a => {
|
||
const key = (a.category_name || '').trim() || '其他'
|
||
if (!map.has(key)) map.set(key, [])
|
||
map.get(key).push(a)
|
||
})
|
||
return Array.from(map.entries()).map(([name, items]) => ({ name, items }))
|
||
},
|
||
activeGroupItems() {
|
||
// Return ALL activities without filtering by group
|
||
return Array.isArray(this.activities) ? this.activities : []
|
||
}
|
||
},
|
||
onShow() {
|
||
const token = uni.getStorageSync('token')
|
||
const phoneBound = !!uni.getStorageSync('phone_bound')
|
||
if (!token || !phoneBound) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先登录并绑定手机号',
|
||
confirmText: '去登录',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: '/pages/login/index' })
|
||
}
|
||
}
|
||
})
|
||
}
|
||
try { console.log('home onShow', { token: !!token, phoneBound }) } catch (_) {}
|
||
this.loadHomeData()
|
||
},
|
||
methods: {
|
||
onSelectGroup(name) {
|
||
this.selectedGroupName = String(name || '')
|
||
},
|
||
updateSelectedGroup() {
|
||
// No-op as we now show all
|
||
},
|
||
toArray(x) { return Array.isArray(x) ? x : [] },
|
||
unwrap(list) {
|
||
if (Array.isArray(list)) return list
|
||
const obj = list || {}
|
||
const arr = obj.list || obj.items || obj.data || []
|
||
return Array.isArray(arr) ? arr : []
|
||
},
|
||
cleanUrl(u) {
|
||
const s = String(u || '').trim()
|
||
const m = s.match(/https?:\/\/[^\s'"`]+/)
|
||
if (m && m[0]) return m[0]
|
||
return s.replace(/[`'\"]/g, '').trim()
|
||
},
|
||
apiGet(url) {
|
||
const token = uni.getStorageSync('token')
|
||
const fn = token ? authRequest : request
|
||
return fn({ url })
|
||
},
|
||
normalizeNotices(list) {
|
||
const arr = this.unwrap(list)
|
||
return arr.map((i, idx) => ({
|
||
id: i.id ?? String(idx),
|
||
text: i.content ?? i.text ?? i.title ?? ''
|
||
})).filter(i => i.text)
|
||
},
|
||
normalizeBanners(list) {
|
||
const arr = this.unwrap(list)
|
||
const mapped = arr.map((i, idx) => ({
|
||
id: i.id ?? String(idx),
|
||
title: i.title ?? '',
|
||
image: this.cleanUrl(i.imageUrl ?? i.image_url ?? i.image ?? i.img ?? i.pic ?? ''),
|
||
link: this.cleanUrl(i.linkUrl ?? i.link_url ?? i.link ?? i.url ?? ''),
|
||
sort: typeof i.sort === 'number' ? i.sort : 0
|
||
})).filter(i => i.image)
|
||
mapped.sort((a, b) => a.sort - b.sort)
|
||
return mapped
|
||
},
|
||
normalizeActivities(list) {
|
||
const arr = this.unwrap(list)
|
||
const mapped = arr.map((i, idx) => ({
|
||
id: i.id ?? String(idx),
|
||
image: this.cleanUrl(i.image ?? i.banner ?? i.coverUrl ?? i.cover_url ?? i.img ?? i.pic ?? ''),
|
||
title: i.title ?? i.name ?? '',
|
||
subtitle: this.buildActivitySubtitle(i),
|
||
link: this.cleanUrl(i.linkUrl ?? i.link_url ?? i.link ?? i.url ?? ''),
|
||
category_name: (i.category_name ?? i.categoryName ?? '').trim(),
|
||
category_id: i.activity_category_id ?? i.category_id ?? i.categoryId ?? null
|
||
})).filter(i => i.image || i.title)
|
||
return mapped
|
||
},
|
||
buildActivitySubtitle(i) {
|
||
const base = i.subTitle ?? i.sub_title ?? i.subtitle ?? i.desc ?? i.description ?? ''
|
||
if (base) return base
|
||
const cat = i.category_name ?? i.categoryName ?? ''
|
||
const price = (i.price_draw !== undefined && i.price_draw !== null) ? `￥${(Number(i.price_draw || 0) / 100).toFixed(2)}` : ''
|
||
const parts = [cat, price].filter(Boolean)
|
||
return parts.join(' · ')
|
||
},
|
||
async loadHomeData() {
|
||
// Notices
|
||
try {
|
||
const nData = await this.apiGet('/api/app/notices')
|
||
this.notices = this.normalizeNotices(nData)
|
||
} catch (e) {
|
||
this.notices = []
|
||
}
|
||
|
||
// Banners
|
||
try {
|
||
const bData = await this.apiGet('/api/app/banners')
|
||
this.banners = this.normalizeBanners(bData)
|
||
} catch (e) {
|
||
this.banners = []
|
||
}
|
||
|
||
// Activities
|
||
try {
|
||
const acData = await this.apiGet('/api/app/activities')
|
||
this.activities = this.normalizeActivities(acData)
|
||
} catch (e) {
|
||
this.activities = []
|
||
}
|
||
},
|
||
onBannerTap(b) {
|
||
const imgs = (Array.isArray(this.banners) ? this.banners : []).map(x => x.image).filter(Boolean)
|
||
const current = b && b.image
|
||
if (current) {
|
||
uni.previewImage({ urls: imgs.length ? imgs : [current], current })
|
||
return
|
||
}
|
||
if (b.link && /^\/.+/.test(b.link)) {
|
||
uni.navigateTo({ url: b.link })
|
||
}
|
||
},
|
||
onActivityTap(a) {
|
||
const name = (a.category_name || a.categoryName || '').trim()
|
||
const id = a.id
|
||
let path = ''
|
||
if (name.includes('一番赏')) path = '/pages/activity/yifanshang/index'
|
||
else if (name.includes('无限赏')) path = '/pages/activity/wuxianshang/index'
|
||
else if (name.includes('对对碰')) path = '/pages/activity/duiduipeng/index'
|
||
else if (name.includes('爬塔')) path = '/pages/activity/pata/index'
|
||
|
||
if (path && id) {
|
||
uni.navigateTo({ url: `${path}?id=${id}` })
|
||
return
|
||
}
|
||
if (a.link && /^\/.+/.test(a.link)) {
|
||
uni.navigateTo({ url: a.link })
|
||
}
|
||
},
|
||
navigateTo(url) {
|
||
if(url === '#') return
|
||
uni.navigateTo({ url })
|
||
},
|
||
onNoticeTap() {
|
||
const content = this.displayNotices.map(n => n.text).join('\n')
|
||
uni.showModal({
|
||
title: '系统通知',
|
||
content: content || '暂无通知',
|
||
showCancel: false,
|
||
confirmText: '知道了'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* ============================================
|
||
奇盒潮玩 - 首页样式 (V6.0 新版)
|
||
============================================ */
|
||
|
||
.page {
|
||
padding: 0;
|
||
background: #FFFFFF;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* ========== 顶部导航栏 ========== */
|
||
.nav-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 24rpx;
|
||
background: #FFF8F3;
|
||
padding-top: calc(20rpx + env(safe-area-inset-top));
|
||
gap: 24rpx;
|
||
}
|
||
.brand-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.brand-text {
|
||
font-size: 36rpx;
|
||
font-weight: 900;
|
||
color: #1A1A1A;
|
||
font-style: italic;
|
||
letter-spacing: -1rpx;
|
||
}
|
||
.brand-star {
|
||
font-size: 24rpx;
|
||
margin-left: 4rpx;
|
||
margin-top: -12rpx;
|
||
}
|
||
.search-bar {
|
||
flex: 1;
|
||
height: 64rpx;
|
||
background: white;
|
||
border-radius: 999rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 24rpx;
|
||
border: 1rpx solid #F0F0F0;
|
||
}
|
||
.search-icon { margin-right: 12rpx; font-size: 28rpx; }
|
||
.search-placeholder { color: #999; font-size: 28rpx; }
|
||
|
||
|
||
/* ========== 滚动主内容区 ========== */
|
||
.main-content {
|
||
flex: 1;
|
||
background: linear-gradient(180deg, #FFF8F3 0%, #FFFFFF 600rpx);
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
/* Logo Banner */
|
||
.banner-box {
|
||
margin: 0 24rpx 24rpx;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
|
||
}
|
||
.banner-swiper, .banner-image, .banner-fallback {
|
||
width: 100%;
|
||
height: 320rpx;
|
||
}
|
||
.banner-fallback {
|
||
background: #FFFBE8;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2rpx dashed #FFE58F;
|
||
}
|
||
.banner-fallback-text { font-size: 48rpx; font-weight: 900; color: #1A1A1A; font-style: italic; margin-bottom: 12rpx; }
|
||
.banner-tag { background: #CCFF00; padding: 4rpx 16rpx; border-radius: 999rpx; font-size: 24rpx; font-weight: 700; color: #1A1A1A; }
|
||
|
||
/* 通知栏 */
|
||
.notice-bar {
|
||
margin: 0 24rpx 32rpx;
|
||
background: #F9F9F9;
|
||
border-radius: 12rpx;
|
||
padding: 16rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
.notice-tag {
|
||
background: #333;
|
||
color: #fff;
|
||
font-size: 22rpx;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 6rpx;
|
||
font-weight: 700;
|
||
}
|
||
.notice-swiper { flex: 1; height: 36rpx; }
|
||
.notice-item { font-size: 24rpx; color: #333; line-height: 36rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||
.notice-more { font-size: 24rpx; color: #999; }
|
||
|
||
|
||
|
||
/* 玩法专区 - 方案B：2+3 杂志风布局 */
|
||
.gameplay-section {
|
||
padding: 0 24rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
.section-header {
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.section-title {
|
||
font-size: 34rpx;
|
||
font-weight: 900;
|
||
color: #1A1A1A;
|
||
position: relative;
|
||
z-index: 1;
|
||
padding-bottom: 4rpx;
|
||
font-style: italic;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
/* 黄色高光底线效果 */
|
||
.section-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 16rpx;
|
||
background: #FFD700;
|
||
z-index: -1;
|
||
border-radius: 4rpx;
|
||
transform: skewX(-10deg);
|
||
}
|
||
|
||
.gameplay-grid-v2 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
/* 上排 */
|
||
.grid-row-top {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
height: 180rpx; /* 大卡片高度 */
|
||
}
|
||
.game-card-large {
|
||
flex: 1;
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding: 24rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* 下排 */
|
||
.grid-row-bottom {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
height: 140rpx; /* 小卡片高度 */
|
||
}
|
||
.game-card-small {
|
||
flex: 1;
|
||
border-radius: 16rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
padding: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
|
||
background: white; /* 默认底色 */
|
||
}
|
||
|
||
/* 内容样式 - 大卡片 */
|
||
.card-content-large {
|
||
position: relative;
|
||
z-index: 2;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
}
|
||
.card-title-large {
|
||
font-size: 36rpx;
|
||
font-weight: 900;
|
||
color: #FFF;
|
||
font-style: italic;
|
||
margin-bottom: 12rpx;
|
||
text-shadow: 2rpx 2rpx 0 rgba(0,0,0,0.1);
|
||
}
|
||
.card-tag-large {
|
||
font-size: 20rpx;
|
||
background: #FFF;
|
||
color: #333;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 700;
|
||
box-shadow: 2rpx 2rpx 0 rgba(0,0,0,0.1);
|
||
transform: skewX(-10deg);
|
||
}
|
||
.card-tag-large.yellow { color: #875700; }
|
||
|
||
.card-mascot-large {
|
||
position: absolute;
|
||
right: -10rpx;
|
||
bottom: -20rpx;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
transform: rotate(5deg);
|
||
}
|
||
|
||
/* 内容样式 - 小卡片 */
|
||
.card-title-small {
|
||
font-size: 28rpx;
|
||
font-weight: 800;
|
||
color: #333;
|
||
margin-bottom: 4rpx;
|
||
z-index: 2;
|
||
}
|
||
.card-subtitle-small {
|
||
font-size: 20rpx;
|
||
color: #888;
|
||
z-index: 2;
|
||
}
|
||
.card-icon-small {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 背景配色 - 仿参考图Pop风格 */
|
||
.card-yifan {
|
||
background: linear-gradient(135deg, #FF9C6E 0%, #FF7875 100%); /* 粉红/橘色 */
|
||
}
|
||
.card-wuxian {
|
||
background: linear-gradient(135deg, #FFD666 0%, #FFA940 100%); /* 黄色/橙色 */
|
||
}
|
||
.card-match {
|
||
background: linear-gradient(135deg, #FFADD2 0%, #FF85C0 100%); /* 粉色 */
|
||
}
|
||
.card-tower {
|
||
background: linear-gradient(135deg, #B37FEB 0%, #9254DE 100%); /* 紫色 */
|
||
}
|
||
.card-more {
|
||
background: linear-gradient(135deg, #E0E0E0 0%, #F5F5F5 100%); /* 灰色 */
|
||
}
|
||
/* 对对碰文字颜色适配 */
|
||
.card-match .card-title-small { color: #FFF; }
|
||
.card-match .card-subtitle-small { color: rgba(255,255,255,0.8); }
|
||
.card-tower .card-title-small { color: #FFF; }
|
||
.card-tower .card-subtitle-small { color: rgba(255,255,255,0.8); }
|
||
|
||
/* 推荐活动列表 */
|
||
.activity-section {
|
||
padding: 0 24rpx;
|
||
}
|
||
.activity-grid-list {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20rpx;
|
||
}
|
||
.activity-item {
|
||
background: white;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.activity-thumb-box {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-bottom: 100%; /* 1:1 正方形图片 */
|
||
}
|
||
.activity-thumb {
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #EEE;
|
||
}
|
||
.banner-fallback.mini {
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #F5F5F5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.activity-tag-hot {
|
||
position: absolute;
|
||
top: 12rpx;
|
||
left: 12rpx;
|
||
background: rgba(0,0,0,0.6);
|
||
color: #FFD700;
|
||
font-size: 20rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 700;
|
||
backdrop-filter: blur(4rpx);
|
||
}
|
||
|
||
.activity-info {
|
||
padding: 20rpx;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.activity-name {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #1A1A1A;
|
||
margin-bottom: 16rpx;
|
||
line-height: 1.4;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
.activity-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.activity-desc {
|
||
font-size: 24rpx;
|
||
color: #FF4D4F; /* 价格/品类突出颜色 */
|
||
font-weight: 600;
|
||
max-width: 70%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.activity-btn-go {
|
||
background: #1A1A1A;
|
||
color: #FFD700;
|
||
font-size: 20rpx;
|
||
font-weight: 900;
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* 空状态 */
|
||
.activity-empty {
|
||
text-align: center;
|
||
padding: 60rpx 0;
|
||
color: #9CA3AF;
|
||
font-size: 28rpx;
|
||
}
|
||
</style>
|