feat(app): 初始化喝酒了么小程序基础架构
- 添加项目配置文件(.editorconfig, .gitignore) - 创建App.vue主应用文件，包含启动时Mock数据初始化 - 添加index.html和main.js应用入口文件 - 配置manifest.json应用基本信息和权限设置 - 设置pages.json页面路由和全局样式 - 添加uni.promisify.adaptor.js适配器文件 - 创建uni.scss设计令牌系统，定义琥珀夜光主题色彩 - 新增constants.js常量定义，包含酒类分类和品牌数据
This commit is contained in:
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view
|
||||
class="badge"
|
||||
:class="{ 'badge-unlocked': achievement.unlocked, 'badge-locked': !achievement.unlocked }"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<view class="badge-icon-wrap">
|
||||
<text class="badge-icon">{{ achievement.icon }}</text>
|
||||
<view v-if="!achievement.unlocked" class="badge-lock">
|
||||
<text class="badge-lock-icon">🔒</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="badge-name">{{ achievement.name }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
achievement: { type: Object, required: true }
|
||||
},
|
||||
emits: ['click']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.badge {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $sp-sm;
|
||||
padding: $sp-lg $sp-sm;
|
||||
background: $bg-card;
|
||||
border-radius: $radius-lg;
|
||||
transition: all $duration-fast $ease-out;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&.badge-unlocked {
|
||||
.badge-icon-wrap {
|
||||
box-shadow: 0 0 24rpx rgba(232,168,56,0.3);
|
||||
border-color: rgba(232,168,56,0.3);
|
||||
}
|
||||
|
||||
.badge-name {
|
||||
color: $text-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.badge-locked {
|
||||
opacity: 0.5;
|
||||
|
||||
.badge-icon {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-icon-wrap {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: $bg-elevated;
|
||||
border-radius: $radius-full;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3rpx solid rgba(255,255,255,0.06);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.badge-icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.badge-lock {
|
||||
position: absolute;
|
||||
bottom: -4rpx;
|
||||
right: -4rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background: $bg-base;
|
||||
border-radius: $radius-full;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.badge-lock-icon {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.badge-name {
|
||||
font-size: $fs-xs;
|
||||
color: $text-secondary;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<view class="calendar">
|
||||
<!-- 月份导航 -->
|
||||
<view class="cal-header">
|
||||
<view class="cal-nav" @click="prevMonth">
|
||||
<text class="cal-nav-arrow">‹</text>
|
||||
</view>
|
||||
<text class="cal-title">{{ year }}年{{ month }}月</text>
|
||||
<view class="cal-nav" @click="nextMonth">
|
||||
<text class="cal-nav-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 星期头 -->
|
||||
<view class="cal-weekdays">
|
||||
<text v-for="day in weekLabels" :key="day" class="cal-weekday">{{ day }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 日期网格 -->
|
||||
<view class="cal-grid">
|
||||
<view
|
||||
v-for="(cell, index) in calendarDays"
|
||||
:key="index"
|
||||
class="cal-cell"
|
||||
:class="{
|
||||
'cal-cell-empty': !cell.day,
|
||||
'cal-cell-today': cell.isToday,
|
||||
'cal-cell-drank': getRecordMode(cell.date) === 'drank',
|
||||
'cal-cell-abstain': getRecordMode(cell.date) === 'abstain'
|
||||
}"
|
||||
@click="cell.day && onSelectDate(cell.date)"
|
||||
>
|
||||
<text v-if="cell.day" class="cal-day-num">{{ cell.day }}</text>
|
||||
<view v-if="getRecordMode(cell.date) === 'drank'" class="cal-dot cal-dot-drank"></view>
|
||||
<view v-if="getRecordMode(cell.date) === 'abstain'" class="cal-dot cal-dot-abstain"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCalendarDays } from '../common/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
year: Number,
|
||||
month: Number,
|
||||
records: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
weekLabels: ['一', '二', '三', '四', '五', '六', '日']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calendarDays() {
|
||||
return getCalendarDays(this.year, this.month)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRecordMode(date) {
|
||||
if (!date) return null
|
||||
const record = this.records.find(r => r.date === date)
|
||||
return record ? record.mode : null
|
||||
},
|
||||
prevMonth() {
|
||||
let y = this.year
|
||||
let m = this.month - 1
|
||||
if (m < 1) { y--; m = 12 }
|
||||
this.$emit('change-month', { year: y, month: m })
|
||||
},
|
||||
nextMonth() {
|
||||
let y = this.year
|
||||
let m = this.month + 1
|
||||
if (m > 12) { y++; m = 1 }
|
||||
this.$emit('change-month', { year: y, month: m })
|
||||
},
|
||||
onSelectDate(date) {
|
||||
this.$emit('select-date', date)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.calendar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $sp-lg;
|
||||
}
|
||||
|
||||
.cal-nav {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $radius-full;
|
||||
background: $bg-elevated;
|
||||
}
|
||||
|
||||
.cal-nav-arrow {
|
||||
font-size: $fs-xl;
|
||||
color: $text-secondary;
|
||||
font-weight: $fw-bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cal-title {
|
||||
font-size: $fs-lg;
|
||||
font-weight: $fw-bold;
|
||||
font-family: $font-num;
|
||||
}
|
||||
|
||||
.cal-weekdays {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
margin-bottom: $sp-sm;
|
||||
}
|
||||
|
||||
.cal-weekday {
|
||||
text-align: center;
|
||||
font-size: $fs-xs;
|
||||
color: $text-tertiary;
|
||||
padding: $sp-xs 0;
|
||||
}
|
||||
|
||||
.cal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: $sp-xs;
|
||||
}
|
||||
|
||||
.cal-cell {
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $radius-md;
|
||||
position: relative;
|
||||
transition: all $duration-fast $ease-out;
|
||||
|
||||
&.cal-cell-empty {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.cal-cell-today {
|
||||
border: 2rpx solid $amber;
|
||||
}
|
||||
|
||||
&:active:not(.cal-cell-empty) {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
}
|
||||
|
||||
.cal-day-num {
|
||||
font-size: $fs-sm;
|
||||
font-weight: $fw-medium;
|
||||
color: $text-primary;
|
||||
font-family: $font-num;
|
||||
}
|
||||
|
||||
.cal-dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: $radius-full;
|
||||
margin-top: $sp-xs;
|
||||
|
||||
&.cal-dot-drank {
|
||||
background: $amber;
|
||||
box-shadow: 0 0 12rpx rgba(232, 168, 56, 0.5);
|
||||
}
|
||||
|
||||
&.cal-dot-abstain {
|
||||
background: $mint;
|
||||
box-shadow: 0 0 12rpx rgba(94, 198, 160, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* 饮酒日高亮背景 */
|
||||
.cal-cell-drank {
|
||||
background: rgba(232, 168, 56, 0.08);
|
||||
}
|
||||
|
||||
.cal-cell-abstain {
|
||||
background: rgba(94, 198, 160, 0.06);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,767 @@
|
||||
<template>
|
||||
<view class="card-root" :class="['tpl-' + template, 'photos-' + photoLayout]">
|
||||
<!-- 装饰背景层 -->
|
||||
<view class="card-bg-deco">
|
||||
<view class="bg-circle bg-circle-1"></view>
|
||||
<view class="bg-circle bg-circle-2"></view>
|
||||
</view>
|
||||
|
||||
<!-- ====== 无照片: 纯文字排版 ====== -->
|
||||
<view v-if="photos.length === 0" class="card-no-photo">
|
||||
<view class="no-photo-header">
|
||||
<view class="date-badge">
|
||||
<text class="date-text">{{ record.date }}</text>
|
||||
</view>
|
||||
<view class="feeling-tag" v-if="record.feeling">
|
||||
<text>{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="no-photo-hero">
|
||||
<view class="hero-drink-list">
|
||||
<view v-for="(drink, i) in record.drinks" :key="i" class="hero-drink-item">
|
||||
<text class="hero-emoji">{{ getCatEmoji(drink.category) }}</text>
|
||||
<view class="hero-drink-info">
|
||||
<text class="hero-brand">{{ drink.brand }}</text>
|
||||
<text class="hero-product">{{ drink.product }} · {{ drink.amount }}{{ drink.unit }}</text>
|
||||
</view>
|
||||
<text class="hero-cups">{{ drink.standardCups }}杯</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="no-photo-stats">
|
||||
<view class="stat-pill">
|
||||
<text class="stat-num">{{ record.standardCupsTotal }}</text>
|
||||
<text class="stat-label">标准杯</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-pill" v-if="record.food">
|
||||
<text class="stat-icon">🍲</text>
|
||||
<text class="stat-label">{{ getFoodName() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="no-photo-quote">
|
||||
<text class="quote-mark">"</text>
|
||||
<text class="quote-text">{{ quote }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ====== 1张照片: 全屏沉浸式 ====== -->
|
||||
<view v-else-if="photos.length === 1" class="card-one-photo">
|
||||
<image class="one-photo-bg" :src="photos[0]" mode="aspectFill"></image>
|
||||
<view class="one-photo-overlay"></view>
|
||||
|
||||
<view class="one-photo-top">
|
||||
<view class="date-badge light">
|
||||
<text class="date-text">{{ record.date }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="one-photo-bottom">
|
||||
<view class="photo-drink-chips">
|
||||
<view v-for="(drink, i) in record.drinks" :key="i" class="drink-chip">
|
||||
<text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} {{ drink.standardCups }}杯</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="photo-stats-row">
|
||||
<text class="photo-total-cups">{{ record.standardCupsTotal }} 标准杯</text>
|
||||
<text v-if="record.feeling" class="photo-feeling">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
||||
</view>
|
||||
|
||||
<view class="photo-quote-line">
|
||||
<text class="quote-mark light">"</text>
|
||||
<text class="quote-text light">{{ quote }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ====== 多张照片: 拼贴布局 ====== -->
|
||||
<view v-else class="card-multi-photo">
|
||||
<!-- 顶部信息条 -->
|
||||
<view class="multi-top">
|
||||
<view class="date-badge">
|
||||
<text class="date-text">{{ record.date }}</text>
|
||||
</view>
|
||||
<view class="multi-cups-badge">
|
||||
<text class="cups-badge-num">{{ record.standardCupsTotal }}</text>
|
||||
<text class="cups-badge-label">标准杯</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 照片拼贴区域 -->
|
||||
<view class="photo-collage" :class="'collage-' + photoLayout">
|
||||
<!-- 2张: 左大右小 -->
|
||||
<template v-if="photos.length === 2">
|
||||
<view class="collage-item collage-large">
|
||||
<image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
|
||||
</view>
|
||||
<view class="collage-item collage-small">
|
||||
<image :src="photos[1]" mode="aspectFill" class="collage-img"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 3张: 左大右两小 -->
|
||||
<template v-else-if="photos.length === 3">
|
||||
<view class="collage-item c3-left">
|
||||
<image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
|
||||
</view>
|
||||
<view class="c3-right">
|
||||
<view class="collage-item c3-right-top">
|
||||
<image :src="photos[1]" mode="aspectFill" class="collage-img"></image>
|
||||
</view>
|
||||
<view class="collage-item c3-right-bottom">
|
||||
<image :src="photos[2]" mode="aspectFill" class="collage-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 4张: 田字格 -->
|
||||
<template v-else-if="photos.length === 4">
|
||||
<view v-for="(p, i) in photos.slice(0, 4)" :key="i" class="collage-item collage-quarter">
|
||||
<image :src="p" mode="aspectFill" class="collage-img"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 5+张: 瀑布流 -->
|
||||
<template v-else>
|
||||
<view class="collage-item collage-hero">
|
||||
<image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
|
||||
</view>
|
||||
<view class="collage-strip">
|
||||
<view v-for="(p, i) in photos.slice(1, 5)" :key="i" class="collage-item collage-strip-item">
|
||||
<image :src="p" mode="aspectFill" class="collage-img"></image>
|
||||
</view>
|
||||
<view v-if="photos.length > 5" class="collage-more">
|
||||
<text>+{{ photos.length - 5 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 底部酒水+感受 -->
|
||||
<view class="multi-bottom">
|
||||
<view class="multi-drinks-row">
|
||||
<view v-for="(drink, i) in record.drinks" :key="i" class="multi-drink-tag">
|
||||
<text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} · {{ drink.standardCups }}杯</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="multi-meta-row">
|
||||
<text v-if="record.food" class="multi-meta-item">🍲 {{ getFoodName() }}</text>
|
||||
<text v-if="record.feeling" class="multi-meta-item">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
|
||||
</view>
|
||||
|
||||
<view class="multi-quote">
|
||||
<text class="quote-mark">"</text>
|
||||
<text class="quote-text">{{ quote }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 统一底部品牌 -->
|
||||
<view class="card-brand-bar">
|
||||
<text class="brand-name">🍻 喝酒了么</text>
|
||||
<view class="brand-dot"></view>
|
||||
<text class="brand-slogan">记录每一杯的故事</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DRINK_CATEGORIES, FOOD_CATEGORIES, FEELINGS, DRINK_QUOTES } from '../common/constants'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
record: { type: Object, required: true },
|
||||
template: { type: String, default: 'amber' }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
quote: DRINK_QUOTES[Math.floor(Math.random() * DRINK_QUOTES.length)]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
photos() {
|
||||
return (this.record && this.record.photos) || []
|
||||
},
|
||||
photoLayout() {
|
||||
const len = this.photos.length
|
||||
if (len === 0) return 'none'
|
||||
if (len === 1) return 'one'
|
||||
if (len === 2) return 'two'
|
||||
if (len === 3) return 'three'
|
||||
if (len === 4) return 'four'
|
||||
return 'many'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCatEmoji(catId) {
|
||||
const cat = DRINK_CATEGORIES.find(c => c.id === catId)
|
||||
return cat ? cat.emoji : '🥃'
|
||||
},
|
||||
getFoodName() {
|
||||
const food = FOOD_CATEGORIES.find(f => f.id === this.record.food?.category)
|
||||
if (!food) return ''
|
||||
return this.record.food.name ? `${food.name}·${this.record.food.name}` : food.name
|
||||
},
|
||||
getFeelingEmoji() {
|
||||
const f = FEELINGS.find(f => f.id === this.record.feeling)
|
||||
return f ? f.emoji : ''
|
||||
},
|
||||
getFeelingName() {
|
||||
const f = FEELINGS.find(f => f.id === this.record.feeling)
|
||||
return f ? f.name : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* ========== 根容器 ========== */
|
||||
.card-root {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: $radius-xl;
|
||||
overflow: hidden;
|
||||
padding: $sp-lg;
|
||||
min-height: 700rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* --- 模板: 琥珀流光 --- */
|
||||
.tpl-amber {
|
||||
background: linear-gradient(160deg, #1A1308 0%, #0F0B06 40%, #1A1308 100%);
|
||||
border: 2rpx solid rgba(232, 168, 56, 0.25);
|
||||
}
|
||||
.tpl-amber .bg-circle-1 {
|
||||
background: radial-gradient(circle, rgba(232, 168, 56, 0.12), transparent 70%);
|
||||
}
|
||||
.tpl-amber .bg-circle-2 {
|
||||
background: radial-gradient(circle, rgba(245, 197, 99, 0.08), transparent 70%);
|
||||
}
|
||||
|
||||
/* --- 模板: 暗夜极光 --- */
|
||||
.tpl-aurora {
|
||||
background: linear-gradient(160deg, #0A0E1A 0%, #0B0B14 40%, #0E0A1A 100%);
|
||||
border: 2rpx solid rgba(139, 133, 184, 0.2);
|
||||
}
|
||||
.tpl-aurora .bg-circle-1 {
|
||||
background: radial-gradient(circle, rgba(94, 198, 160, 0.1), transparent 70%);
|
||||
}
|
||||
.tpl-aurora .bg-circle-2 {
|
||||
background: radial-gradient(circle, rgba(139, 133, 184, 0.1), transparent 70%);
|
||||
}
|
||||
.tpl-aurora .date-badge {
|
||||
background: rgba(139, 133, 184, 0.15);
|
||||
border-color: rgba(139, 133, 184, 0.2);
|
||||
}
|
||||
.tpl-aurora .stat-pill .stat-num,
|
||||
.tpl-aurora .cups-badge-num,
|
||||
.tpl-aurora .hero-cups,
|
||||
.tpl-aurora .photo-total-cups {
|
||||
color: $mint;
|
||||
}
|
||||
|
||||
/* --- 模板: 胶片记忆 --- */
|
||||
.tpl-film {
|
||||
background: linear-gradient(160deg, #141210 0%, #0D0C0A 40%, #141210 100%);
|
||||
border: 2rpx solid rgba(200, 180, 140, 0.15);
|
||||
}
|
||||
.tpl-film .bg-circle-1 {
|
||||
background: radial-gradient(circle, rgba(200, 180, 140, 0.08), transparent 70%);
|
||||
}
|
||||
.tpl-film .bg-circle-2 {
|
||||
background: radial-gradient(circle, rgba(180, 160, 120, 0.06), transparent 70%);
|
||||
}
|
||||
.tpl-film .date-badge {
|
||||
background: rgba(200, 180, 140, 0.1);
|
||||
border-color: rgba(200, 180, 140, 0.15);
|
||||
}
|
||||
|
||||
/* 装饰背景 */
|
||||
.card-bg-deco {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.bg-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.bg-circle-1 {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
top: -100rpx;
|
||||
right: -100rpx;
|
||||
}
|
||||
.bg-circle-2 {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
bottom: 100rpx;
|
||||
left: -80rpx;
|
||||
}
|
||||
|
||||
/* ========== 公共元素 ========== */
|
||||
.date-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: $sp-xs $sp-md;
|
||||
background: rgba(232, 168, 56, 0.1);
|
||||
border: 1rpx solid rgba(232, 168, 56, 0.15);
|
||||
border-radius: $radius-full;
|
||||
}
|
||||
.date-badge.light {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.date-text {
|
||||
font-size: $fs-xs;
|
||||
color: $text-secondary;
|
||||
font-family: $font-num;
|
||||
}
|
||||
.date-badge.light .date-text {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.feeling-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: $sp-xs $sp-md;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: $radius-full;
|
||||
font-size: $fs-xs;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.quote-mark {
|
||||
font-size: $fs-3xl;
|
||||
color: $amber;
|
||||
opacity: 0.3;
|
||||
line-height: 1;
|
||||
margin-right: $sp-xs;
|
||||
}
|
||||
.quote-mark.light {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.quote-text {
|
||||
font-size: $fs-sm;
|
||||
color: $text-secondary;
|
||||
font-style: italic;
|
||||
flex: 1;
|
||||
line-height: $lh-loose;
|
||||
}
|
||||
.quote-text.light {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* 品牌底栏 */
|
||||
.card-brand-bar {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $sp-sm;
|
||||
padding-top: $sp-lg;
|
||||
margin-top: auto;
|
||||
}
|
||||
.brand-name {
|
||||
font-size: $fs-xs;
|
||||
color: $text-tertiary;
|
||||
}
|
||||
.brand-dot {
|
||||
width: 4rpx;
|
||||
height: 4rpx;
|
||||
border-radius: $radius-full;
|
||||
background: $text-tertiary;
|
||||
}
|
||||
.brand-slogan {
|
||||
font-size: $fs-xs;
|
||||
color: $text-tertiary;
|
||||
}
|
||||
|
||||
/* ========== 无照片布局 ========== */
|
||||
.card-no-photo {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $sp-lg;
|
||||
}
|
||||
|
||||
.no-photo-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.no-photo-hero {
|
||||
padding: $sp-md 0;
|
||||
}
|
||||
|
||||
.hero-drink-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $sp-md;
|
||||
}
|
||||
|
||||
.hero-drink-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $sp-md;
|
||||
padding: $sp-md;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: $radius-lg;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.hero-emoji {
|
||||
font-size: 56rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hero-drink-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hero-brand {
|
||||
display: block;
|
||||
font-size: $fs-base;
|
||||
font-weight: $fw-bold;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.hero-product {
|
||||
display: block;
|
||||
font-size: $fs-xs;
|
||||
color: $text-secondary;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.hero-cups {
|
||||
font-size: $fs-lg;
|
||||
font-weight: $fw-black;
|
||||
color: $amber;
|
||||
font-family: $font-num;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.no-photo-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $sp-lg;
|
||||
padding: $sp-md;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: $radius-lg;
|
||||
}
|
||||
|
||||
.stat-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $sp-xs;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: $fs-2xl;
|
||||
font-weight: $fw-black;
|
||||
color: $amber;
|
||||
font-family: $font-num;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: $fs-xs;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: $fs-base;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 2rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.no-photo-quote {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: $sp-sm 0;
|
||||
}
|
||||
|
||||
/* ========== 1张照片布局 ========== */
|
||||
.card-one-photo {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
min-height: 600rpx;
|
||||
border-radius: $radius-lg;
|
||||
overflow: hidden;
|
||||
margin: -#{$sp-lg};
|
||||
/* 把 padding 加回来让品牌栏有空间 */
|
||||
padding: $sp-lg;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.one-photo-bg {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.one-photo-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.3) 0%,
|
||||
transparent 30%,
|
||||
transparent 50%,
|
||||
rgba(0, 0, 0, 0.75) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.one-photo-top {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding-top: $sp-sm;
|
||||
}
|
||||
|
||||
.one-photo-bottom {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $sp-md;
|
||||
padding-bottom: $sp-md;
|
||||
}
|
||||
|
||||
.photo-drink-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $sp-sm;
|
||||
}
|
||||
|
||||
.drink-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: $sp-xs $sp-md;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: $radius-full;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||
font-size: $fs-xs;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.photo-stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $sp-lg;
|
||||
}
|
||||
|
||||
.photo-total-cups {
|
||||
font-size: $fs-xl;
|
||||
font-weight: $fw-black;
|
||||
color: $amber-light;
|
||||
font-family: $font-num;
|
||||
}
|
||||
|
||||
.photo-feeling {
|
||||
font-size: $fs-sm;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.photo-quote-line {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* ========== 多张照片布局 ========== */
|
||||
.card-multi-photo {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $sp-lg;
|
||||
}
|
||||
|
||||
.multi-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.multi-cups-badge {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: $sp-xs;
|
||||
padding: $sp-xs $sp-md;
|
||||
background: rgba(232, 168, 56, 0.1);
|
||||
border: 1rpx solid rgba(232, 168, 56, 0.2);
|
||||
border-radius: $radius-full;
|
||||
}
|
||||
|
||||
.cups-badge-num {
|
||||
font-size: $fs-lg;
|
||||
font-weight: $fw-black;
|
||||
color: $amber;
|
||||
font-family: $font-num;
|
||||
}
|
||||
|
||||
.cups-badge-label {
|
||||
font-size: $fs-xs;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
/* 照片拼贴 */
|
||||
.photo-collage {
|
||||
border-radius: $radius-lg;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 2张: 左大右小 */
|
||||
.collage-two {
|
||||
display: flex;
|
||||
gap: 6rpx;
|
||||
height: 420rpx;
|
||||
}
|
||||
.collage-two .collage-large {
|
||||
flex: 3;
|
||||
}
|
||||
.collage-two .collage-small {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
/* 3张: 左大右两小 */
|
||||
.collage-three {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
height: 440rpx;
|
||||
}
|
||||
.collage-three .c3-left {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border-radius: $radius-md;
|
||||
}
|
||||
.collage-three .c3-right {
|
||||
width: 45%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
.collage-three .c3-right-top,
|
||||
.collage-three .c3-right-bottom {
|
||||
flex: 1;
|
||||
border-radius: $radius-md;
|
||||
}
|
||||
|
||||
/* 4张: 田字格 */
|
||||
.collage-four {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6rpx;
|
||||
height: 460rpx;
|
||||
}
|
||||
.collage-four .collage-quarter {
|
||||
width: calc(50% - 3rpx);
|
||||
height: calc(50% - 3rpx);
|
||||
}
|
||||
|
||||
/* 5+张: 瀑布流 */
|
||||
.collage-many {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
.collage-many .collage-hero {
|
||||
height: 320rpx;
|
||||
border-radius: $radius-md;
|
||||
overflow: hidden;
|
||||
}
|
||||
.collage-strip {
|
||||
display: flex;
|
||||
gap: 6rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
.collage-strip-item {
|
||||
flex: 1;
|
||||
border-radius: $radius-sm;
|
||||
overflow: hidden;
|
||||
}
|
||||
.collage-more {
|
||||
width: 100rpx;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: $radius-sm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $fs-sm;
|
||||
color: $text-secondary;
|
||||
font-weight: $fw-bold;
|
||||
}
|
||||
|
||||
.collage-item {
|
||||
overflow: hidden;
|
||||
border-radius: $radius-sm;
|
||||
}
|
||||
|
||||
.collage-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 底部信息 */
|
||||
.multi-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $sp-md;
|
||||
}
|
||||
|
||||
.multi-drinks-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $sp-sm;
|
||||
}
|
||||
|
||||
.multi-drink-tag {
|
||||
display: inline-flex;
|
||||
padding: $sp-xs $sp-md;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: $radius-full;
|
||||
font-size: $fs-xs;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.multi-meta-row {
|
||||
display: flex;
|
||||
gap: $sp-lg;
|
||||
}
|
||||
|
||||
.multi-meta-item {
|
||||
font-size: $fs-sm;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.multi-quote {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user