394 lines
15 KiB
Plaintext
394 lines
15 KiB
Plaintext
<template>
|
||
<view class="admin-main">
|
||
<!-- 澶撮儴鎿嶄綔鍖?-->
|
||
<view class="header-container">
|
||
<text class="page-title">涓婚椋庢牸</text>
|
||
<button class="save-btn" type="primary" size="mini" @click="handleSave">淇濆瓨</button>
|
||
</view>
|
||
|
||
<!-- 閫夐」鍗?鍗＄墖瀹瑰櫒 -->
|
||
<view class="card-container 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>
|
||
|
||
<!-- 棰勮鍖?-->
|
||
<view class="preview-section">
|
||
<!-- 棰勮 1: 涓汉涓績 -->
|
||
<view class="preview-card">
|
||
<text class="p-title">涓汉涓績</text>
|
||
<view class="mock-phone">
|
||
<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>
|
||
|
||
<!-- 棰勮 2: 鍟嗗搧璇︽儏 -->
|
||
<view class="preview-card">
|
||
<text class="p-title">鍟嗗搧璇︽儏</text>
|
||
<view class="mock-phone">
|
||
<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>鍘熶环: 楼 234.00</text>
|
||
<text>绱閿€閲? 2999999浠?/text>
|
||
<text>搴撳瓨: 1452浠?/text>
|
||
</view>
|
||
</view>
|
||
<view class="p-options">
|
||
<view class="opt-row"><text class="opt-lab">浼樻儬鍒?</text><view class="tags"><text class="t-red">婊?00鍑?0</text><text class="t-red">婊?00鍑?0</text></view><text class="more">></text></view>
|
||
<view class="opt-row"><text class="opt-lab">娲诲姩:</text><view class="tags"><text class="t-action" :style="{ backgroundColor: currentThemeColor }">鍙備笌鎷煎洟</text><text class="t-action" :style="{ backgroundColor: currentThemeColor }">鍙備笌鐮嶄环</text><text class="t-action" :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>瀹㈡湇</text></view>
|
||
<view class="fi"><text>猸?/text><text>鏀惰棌</text></view>
|
||
<view class="fi"><text>馃洅</text><text>璐墿杞?/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>
|
||
|
||
<!-- 棰勮 3: 鎷煎洟鍒楄〃 -->
|
||
<view class="preview-card">
|
||
<text class="p-title">鎷煎洟鍒楄〃</text>
|
||
<view class="mock-phone">
|
||
<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">
|
||
<view class="g-avatars"></view>
|
||
<text>9999浜哄弬涓?/text>
|
||
</view>
|
||
</view>
|
||
<view class="g-item" v-for="i in 4" :key="i">
|
||
<view class="g-img"></view>
|
||
<view class="g-info">
|
||
<text class="g-name">2021骞存柊娆惧悐鐏畝绾︾幇浠ｅぇ姘斿鐢ㄥ鍘呯伅鍖楁椋庢牸椁愬巺鍗?..</text>
|
||
<view class="g-bottom">
|
||
<view class="g-prices">
|
||
<text class="g-p-old">楼 199.00</text>
|
||
<text class="g-p-now" :style="{ color: currentThemeColor }">楼 124.00</text>
|
||
</view>
|
||
<view class="g-btn" :style="{ backgroundColor: currentThemeColor }">{{ i % 2 === 0 ? '鍘绘嫾鍥? : '宸插敭缃? }}</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>
|
||
.admin-main {
|
||
padding: 0;
|
||
}
|
||
|
||
.header-container {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
padding: 10px 20px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.selection-area {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
margin: 15px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.theme-list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 20px;
|
||
}
|
||
|
||
.theme-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 8px 16px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.theme-item.active {
|
||
border-color: #1890ff;
|
||
background-color: #e6f7ff;
|
||
}
|
||
|
||
.color-preview {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 2px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.theme-name {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
|
||
.preview-section {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 20px;
|
||
padding: 0 15px 20px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.preview-card {
|
||
background-color: #fff;
|
||
padding: 16px;
|
||
border-radius: 4px;
|
||
width: 292px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.p-title {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 12px;
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
|
||
.mock-phone {
|
||
width: 260px;
|
||
height: 540px;
|
||
border: 1px solid #eee;
|
||
border-radius: 2px;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
background-color: #f8f8f8;
|
||
position: relative;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.mock-status-bar {
|
||
height: 20px;
|
||
}
|
||
|
||
.mock-content {
|
||
height: calc(100% - 20px);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* User Center Mock */
|
||
.user-center .header-bg {
|
||
padding: 20px 15px 40px;
|
||
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%; 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: 16px; margin-bottom: 4px; }
|
||
.stat-item .lab { font-size: 12px; opacity: 0.9; }
|
||
|
||
.vip-card-banner {
|
||
margin: -30px 15px 15px;
|
||
background: linear-gradient(90deg, #fceabb 0%, #f8b500 100%);
|
||
border-radius: 8px;
|
||
padding: 12px 15px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.vip-left { display: flex; flex-direction: column; }
|
||
.vip-l-t1 { font-size: 12px; color: #845506; font-weight: bold; }
|
||
.vip-l-t2 { font-size: 10px; color: #845506; opacity: 0.8; }
|
||
.btn-vip { font-size: 10px; background: #333; color: #fff; padding: 4px 10px; border-radius: 12px; }
|
||
|
||
.order-section { background: #fff; margin: 0 15px 15px; border-radius: 8px; padding: 15px; }
|
||
.o-title { display: flex; flex-direction: row; justify-content: space-between; font-size: 12px; margin-bottom: 15px; }
|
||
.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: 6px; }
|
||
|
||
.invite-banner { margin: 0 15px 15px; height: 60px; background: #fff1f0; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; border: 1px dashed #ffa39e; }
|
||
.i-t1 { font-size: 12px; color: #cf1322; font-weight: bold; margin-bottom: 4px; }
|
||
.i-t2 { font-size: 10px; color: #cf1322; opacity: 0.7; }
|
||
|
||
.service-section { background: #fff; margin: 0 15px; border-radius: 8px; padding: 15px; }
|
||
.s-title { font-size: 12px; font-weight: bold; margin-bottom: 15px; }
|
||
.s-grid { display: flex; flex-direction: row; flex-wrap: wrap; }
|
||
.s-item { width: 25%; display: flex; flex-direction: column; align-items: center; font-size: 10px; gap: 8px; margin-bottom: 10px; }
|
||
|
||
.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: 10px; color: #999; }
|
||
.t-item.active { color: #e93323; }
|
||
|
||
/* Product Mock */
|
||
.product-detail .p-gallery { height: 260px; background-color: #eee; position: relative; }
|
||
.p-page { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 10px; padding: 2px 8px; font-size: 10px; }
|
||
.p-main-info { background: #fff; padding: 15px; margin-bottom: 10px; }
|
||
.p-price-row { display: flex; flex-direction: row; align-items: baseline; margin-bottom: 8px; }
|
||
.p-symbol { font-size: 14px; font-weight: bold; }
|
||
.p-price { font-size: 24px; font-weight: bold; margin: 0 8px; }
|
||
.p-old-price { font-size: 12px; color: #999; text-decoration: line-through; margin-right: 8px; }
|
||
|
||
.p-options { background: #fff; padding: 15px; margin-bottom: 10px; }
|
||
.opt-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 12px; }
|
||
.opt-lab { width: 50px; font-size: 12px; color: #999; }
|
||
.p-footer { position: absolute; bottom: 0; width: 100%; height: 60px; background: #fff; border-top: 1px solid #eee; display: flex; flex-direction: row; padding: 8px 15px; align-items: center; }
|
||
.f-icons { display: flex; flex-direction: row; gap: 15px; margin-right: 10px; }
|
||
.f-btns { flex: 1; display: flex; flex-direction: row; height: 36px; border-radius: 18px; overflow: hidden; }
|
||
.f-btn { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
|
||
|
||
/* Group List Mock */
|
||
.group-list .g-header { padding: 15px; }
|
||
.g-h-title { color: #fff; font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px; }
|
||
.g-item { background: #fff; border-radius: 8px; margin: 12px; padding: 12px; display: flex; flex-direction: row; }
|
||
.g-img { width: 90px; height: 90px; background: #eee; border-radius: 4px; margin-right: 12px; }
|
||
</style>
|