436 lines
18 KiB
Plaintext
436 lines
18 KiB
Plaintext
<template>
|
|
<view class="admin-main">
|
|
<!-- 头部操作区 -->
|
|
<view class="page-header border-shadow">
|
|
<view class="header-left">
|
|
<text class="page-title">主题风格</text>
|
|
</view>
|
|
<view class="header-right">
|
|
<button class="save-btn" type="primary" size="mini" @click="handleSave">保存</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 主要内容区 -->
|
|
<view class="main-content anim-fade-in">
|
|
<view class="main-card border-shadow">
|
|
<!-- 选项配置: 1:1 复刻参考图 -->
|
|
<view class="selection-area">
|
|
<view class="theme-list">
|
|
<view
|
|
v-for="(item, index) in themeOptions"
|
|
:key="index"
|
|
class="theme-item"
|
|
:class="{ active: selectedThemeId === item.id }"
|
|
@click="selectedThemeId = item.id"
|
|
>
|
|
<view class="color-preview" :style="{ backgroundColor: item.color }"></view>
|
|
<text class="theme-name">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预览区: 1:1 复刻参考图 -->
|
|
<view class="preview-section">
|
|
<!-- 预览 1: 个人中心 -->
|
|
<view class="preview-card-item">
|
|
<text class="p-title">个人中心</text>
|
|
<view class="mock-phone">
|
|
<view class="mock-inner">
|
|
<view class="mock-status-bar"></view>
|
|
<view class="mock-content user-center">
|
|
<view class="header-bg" :style="{ backgroundColor: currentThemeColor }">
|
|
<view class="user-info-row">
|
|
<view class="mock-avatar"></view>
|
|
<view class="user-meta">
|
|
<view class="name-line">
|
|
<text class="name">我的名字我的名字</text>
|
|
<view class="vip-badge">SVIP</view>
|
|
</view>
|
|
<text class="user-id">ID: 3659884 ></text>
|
|
</view>
|
|
<view class="settings-icons">
|
|
<text class="ic">🔔</text>
|
|
<text class="ic">⚙️</text>
|
|
</view>
|
|
</view>
|
|
<view class="stats-row">
|
|
<view class="stat-item"><text class="val">0.00</text><text class="lab">余额</text></view>
|
|
<view class="stat-item"><text class="val">20</text><text class="lab">积分</text></view>
|
|
<view class="stat-item"><text class="val">25</text><text class="lab">优惠券</text></view>
|
|
</view>
|
|
</view>
|
|
<view class="vip-card-banner">
|
|
<view class="vip-left">
|
|
<text class="vip-l-t1">会员可享多项权益</text>
|
|
<text class="vip-l-t2">会员剩余434天</text>
|
|
</view>
|
|
<view class="btn-vip">立即续费</view>
|
|
</view>
|
|
|
|
<view class="order-section">
|
|
<view class="o-title"><text>订单中心</text><text class="more">查看全部 ></text></view>
|
|
<view class="o-icons">
|
|
<view class="o-item">📦<text>待付款</text></view>
|
|
<view class="o-item">🚚<text>待发货</text></view>
|
|
<view class="o-item">🎁<text>待收货</text></view>
|
|
<view class="o-item">⭐<text>待评价</text></view>
|
|
<view class="o-item">🔄<text>售后/退款</text></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="invite-banner">
|
|
<text class="i-t1">邀请好友赚佣金</text>
|
|
<text class="i-t2">推广好友注册</text>
|
|
</view>
|
|
|
|
<view class="service-section">
|
|
<view class="s-title">我的服务</view>
|
|
<view class="s-grid">
|
|
<view class="s-item">👤<text>会员中心</text></view>
|
|
<view class="s-item">📢<text>我的推广</text></view>
|
|
<view class="s-item">📅<text>签到</text></view>
|
|
<view class="s-item">🎫<text>优惠券</text></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mock-tabbar">
|
|
<view class="t-item">🏠<text>首页</text></view>
|
|
<view class="t-item">🔍<text>分类</text></view>
|
|
<view class="t-item">🛒<text>购物车</text></view>
|
|
<view class="t-item active" :style="{ color: currentThemeColor }">👤<text>我的</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预览 2: 商品详情 -->
|
|
<view class="preview-card-item">
|
|
<text class="p-title">商品详情</text>
|
|
<view class="mock-phone">
|
|
<view class="mock-inner">
|
|
<view class="mock-status-bar"></view>
|
|
<view class="mock-content product-detail">
|
|
<view class="p-gallery">
|
|
<text class="p-page">1/5</text>
|
|
</view>
|
|
<view class="p-main-info">
|
|
<view class="p-price-row">
|
|
<text class="p-symbol" :style="{ color: currentThemeColor }">¥</text>
|
|
<text class="p-price" :style="{ color: currentThemeColor }">199.00</text>
|
|
<text class="p-old-price">¥ 100.00</text>
|
|
<view class="p-tag-svip">SVIP</view>
|
|
</view>
|
|
<text class="p-name">企鹅针织条纹四件套新款上市性价比高</text>
|
|
<view class="p-stats">
|
|
<text class="ps-t">原价: ¥ 234.00</text>
|
|
<text class="ps-t">累计销量: 2999999件</text>
|
|
<text class="ps-t">库存: 1452件</text>
|
|
</view>
|
|
</view>
|
|
<view class="p-options">
|
|
<view class="opt-row">
|
|
<text class="opt-lab">优惠券:</text>
|
|
<view class="tags-row"><text class="tag-outline">满100减30</text><text class="tag-outline">满100减30</text></view>
|
|
<text class="more">></text>
|
|
</view>
|
|
<view class="opt-row">
|
|
<text class="opt-lab">活动:</text>
|
|
<view class="tags-row"><text class="tag-fill" :style="{ backgroundColor: currentThemeColor }">参与拼团</text><text class="tag-fill" :style="{ backgroundColor: currentThemeColor }">参与秒杀</text></view>
|
|
<text class="more">></text>
|
|
</view>
|
|
</view>
|
|
<view class="p-footer">
|
|
<view class="f-icons">
|
|
<view class="fi"><text>💬</text><text class="fi-t">客服</text></view>
|
|
<view class="fi"><text>⭐</text><text class="fi-t">收藏</text></view>
|
|
<view class="fi"><text>🛒</text><text class="fi-t">购物车</text></view>
|
|
</view>
|
|
<view class="f-btns">
|
|
<view class="f-btn cart" :style="{ backgroundColor: currentThemeColor, opacity: 0.7 }">加入购物车</view>
|
|
<view class="f-btn buy" :style="{ backgroundColor: currentThemeColor }">立即购买</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预览 3: 拼团列表 -->
|
|
<view class="preview-card-item">
|
|
<text class="p-title">拼团列表</text>
|
|
<view class="mock-phone">
|
|
<view class="mock-inner">
|
|
<view class="mock-status-bar"></view>
|
|
<view class="mock-content group-list">
|
|
<view class="g-header" :style="{ backgroundColor: currentThemeColor }">
|
|
<text class="g-h-title">拼团列表</text>
|
|
<view class="g-participation">
|
|
<text class="g-p-txt">9999人参与</text>
|
|
</view>
|
|
</view>
|
|
<view class="g-item" v-for="i in 3" :key="i">
|
|
<view class="g-img"></view>
|
|
<view class="g-info">
|
|
<text class="g-name-v2">2021年新款吊灯简约现代大气家用客厅灯北欧风格...</text>
|
|
<view class="g-bottom-v2">
|
|
<view class="g-prices-v2">
|
|
<text class="g-p-old-v2">¥ 199.00</text>
|
|
<view class="p-now-row">
|
|
<text class="ps">¥</text>
|
|
<text class="pv" :style="{ color: currentThemeColor }">124.00</text>
|
|
</view>
|
|
</view>
|
|
<view class="g-btn-v2" :style="{ backgroundColor: currentThemeColor }">{{ i % 2 === 0 ? '去拼团' : '已售罄' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, computed } from 'vue'
|
|
|
|
interface ThemeOption {
|
|
id: string
|
|
name: string
|
|
color: string
|
|
}
|
|
|
|
const themeOptions = ref<ThemeOption[]>([
|
|
{ id: 'blue', name: '天空蓝', color: '#1890ff' },
|
|
{ id: 'green', name: '生鲜绿', color: '#52c41a' },
|
|
{ id: 'red', name: '热情红', color: '#e93323' },
|
|
{ id: 'pink', name: '魅力粉', color: '#ff4d9f' },
|
|
{ id: 'orange', name: '活力橙', color: '#ff8c00' }
|
|
])
|
|
|
|
const selectedThemeId = ref('red')
|
|
|
|
const currentThemeColor = computed(() : string => {
|
|
const theme = themeOptions.value.find(t => t.id === selectedThemeId.value)
|
|
return theme ? theme.color : '#e93323'
|
|
})
|
|
|
|
const handleSave = () => {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.admin-main {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
min-height: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.border-shadow {
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.page-header {
|
|
height: 60px;
|
|
padding: 0 24px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 100;
|
|
}
|
|
|
|
.page-title { font-size: 16px; font-weight: bold; color: #333; }
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 0;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.main-card {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
min-height: 800px;
|
|
padding: 30px 40px;
|
|
}
|
|
|
|
/* 1:1 复刻参考图：颜色选择区 */
|
|
.selection-area {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.theme-list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 15px;
|
|
}
|
|
|
|
.theme-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.theme-item.active {
|
|
border-color: #2d8cf0;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.color-preview { width: 14px; height: 14px; border-radius: 2px; margin-right: 10px; }
|
|
.theme-name { font-size: 14px; color: #333; }
|
|
|
|
/* 预览区布局 */
|
|
.preview-section {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 30px;
|
|
padding-bottom: 40px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.preview-card-item {
|
|
width: 300px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.p-title {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.mock-phone {
|
|
width: 280px;
|
|
height: 580px;
|
|
border: 1px solid #eeeeee;
|
|
border-radius: 4px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
background-color: #f5f5f5;
|
|
padding: 8px; /* 模拟边框 */
|
|
}
|
|
|
|
.mock-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f5f5;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mock-status-bar { height: 20px; }
|
|
.mock-content { height: calc(100% - 20px); overflow-y: auto; }
|
|
|
|
/* 个人中心 Mock */
|
|
.user-center .header-bg { padding: 25px 15px 45px; color: #fff; }
|
|
.user-info-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
|
|
.mock-avatar { width: 50px; height: 50px; background-color: #eee; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8); margin-right: 12px; }
|
|
.user-meta { flex: 1; }
|
|
.name-line { display: flex; flex-direction: row; align-items: center; margin-bottom: 4px; }
|
|
.name { font-size: 14px; font-weight: bold; }
|
|
.vip-badge { font-size: 10px; background-color: #333; color: #fadb14; padding: 0 4px; border-radius: 2px; margin-left: 6px; }
|
|
.user-id { font-size: 10px; opacity: 0.9; }
|
|
.settings-icons { display: flex; flex-direction: row; gap: 10px; }
|
|
|
|
.stats-row { display: flex; flex-direction: row; justify-content: space-around; }
|
|
.stat-item { display: flex; flex-direction: column; align-items: center; }
|
|
.stat-item .val { font-weight: bold; font-size: 15px; margin-bottom: 4px; }
|
|
.stat-item .lab { font-size: 11px; opacity: 0.8; }
|
|
|
|
.vip-card-banner {
|
|
margin: -25px 12px 12px;
|
|
background: linear-gradient(90deg, #fceabb 0%, #f8b500 100%);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.vip-l-t1 { font-size: 11px; color: #845506; font-weight: bold; }
|
|
.vip-l-t2 { font-size: 9px; color: #845506; opacity: 0.8; }
|
|
.btn-vip { font-size: 9px; background: #333; color: #fff; padding: 3px 10px; border-radius: 10px; }
|
|
|
|
.order-section { background: #fff; margin: 0 12px 12px; border-radius: 8px; padding: 12px; }
|
|
.o-title { display: flex; flex-direction: row; justify-content: space-between; font-size: 11px; margin-bottom: 15px; color: #333; }
|
|
.o-icons { display: flex; flex-direction: row; justify-content: space-between; }
|
|
.o-item { display: flex; flex-direction: column; align-items: center; font-size: 10px; gap: 5px; color: #666; }
|
|
|
|
.invite-banner { margin: 0 12px 12px; height: 50px; background: #fff1f0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; border: 1px dashed #ffa39e; }
|
|
.i-t1 { font-size: 11px; color: #cf1322; font-weight: bold; margin-bottom: 2px; }
|
|
.i-t2 { font-size: 9px; color: #cf1322; opacity: 0.7; }
|
|
|
|
.service-section { background: #fff; margin: 0 12px; border-radius: 8px; padding: 12px; }
|
|
.s-title { font-size: 11px; font-weight: bold; margin-bottom: 12px; }
|
|
.s-grid { display: flex; flex-direction: row; flex-wrap: wrap; }
|
|
.s-item { width: 25%; display: flex; flex-direction: column; align-items: center; font-size: 9px; gap: 6px; margin-bottom: 10px; color: #666; }
|
|
|
|
.mock-tabbar { position: absolute; bottom: 0; width: 100%; height: 50px; background: #fff; border-top: 1px solid #eee; display: flex; flex-direction: row; }
|
|
.t-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 9px; color: #999; }
|
|
|
|
/* 商品详情 Mock */
|
|
.product-detail .p-gallery { height: 180px; background-color: #eee; background-image: url('/static/logo.png'); background-size: cover; position: relative; }
|
|
.p-page { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 10px; padding: 2px 6px; font-size: 9px; }
|
|
.p-main-info { background: #fff; padding: 12px; margin-bottom: 8px; }
|
|
.p-price-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 6px; }
|
|
.p-symbol { font-size: 12px; font-weight: bold; }
|
|
.p-price { font-size: 18px; font-weight: bold; margin: 0 5px; }
|
|
.p-old-price { font-size: 10px; color: #999; text-decoration: line-through; margin-right: 8px; }
|
|
.p-tag-svip { background-color: #333; color: #fadb14; font-size: 9px; padding: 1px 4px; border-radius: 2px; }
|
|
.p-name { font-size: 13px; font-weight: bold; color: #333; display: block; margin-bottom: 8px; }
|
|
.p-stats { display: flex; flex-direction: column; gap: 4px; }
|
|
.ps-t { font-size: 10px; color: #999; }
|
|
|
|
.p-options { background: #fff; padding: 12px; margin-bottom: 8px; }
|
|
.opt-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; }
|
|
.opt-lab { width: 45px; font-size: 11px; color: #999; }
|
|
.tags-row { flex: 1; display: flex; flex-direction: row; gap: 5px; }
|
|
.tag-outline { border: 1px solid #ff4d4f; color: #ff4d4f; font-size: 9px; padding: 1px 4px; border-radius: 2px; }
|
|
.tag-fill { color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 2px; }
|
|
.p-options .more { color: #ccc; font-size: 12px; }
|
|
|
|
.p-footer { position: absolute; bottom: 0; width: 100%; height: 50px; background: #fff; border-top: 1px solid #eee; display: flex; flex-direction: row; padding: 5px 10px; align-items: center; }
|
|
.f-icons { display: flex; flex-direction: row; gap: 10px; margin-right: 5px; }
|
|
.fi { display: flex; flex-direction: column; align-items: center; font-size: 14px; gap: 2px; }
|
|
.fi-t { font-size: 9px; color: #666; }
|
|
.f-btns { flex: 1; display: flex; flex-direction: row; height: 32px; border-radius: 16px; overflow: hidden; }
|
|
.f-btn { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
|
|
|
|
/* 拼团列表 Mock */
|
|
.group-list .g-header { padding: 15px; position: relative; }
|
|
.g-h-title { color: #fff; font-size: 14px; font-weight: bold; display: block; margin-bottom: 10px; text-align: center; }
|
|
.g-p-txt { color: #fff; font-size: 10px; opacity: 0.9; text-align: center; display: block; }
|
|
.g-item { background: #fff; border-radius: 8px; margin: 10px; padding: 10px; display: flex; flex-direction: row; }
|
|
.g-img { width: 80px; height: 80px; background: #eee; border-radius: 4px; margin-right: 12px; }
|
|
.g-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
|
|
.g-name-v2 { font-size: 12px; color: #333; line-height: 1.4; height: 34px; overflow: hidden; }
|
|
.g-bottom-v2 { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; }
|
|
.g-p-old-v2 { font-size: 9px; color: #999; text-decoration: line-through; }
|
|
.p-now-row { display: flex; flex-direction: row; align-items: baseline; }
|
|
.ps { font-size: 10px; font-weight: bold; margin-right: 2px; }
|
|
.pv { font-size: 15px; font-weight: bold; }
|
|
.g-btn-v2 { padding: 4px 12px; border-radius: 15px; color: #fff; font-size: 10px; }
|
|
|
|
.anim-fade-in { animation: fadeIn 0.4s ease-out; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
</style> |