huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大致完成页面

Browse Source
This commit is contained in:
huangzhenbao
2026-02-05 09:01:16 +08:00
parent c411c23b9c
commit d51e6a8f72
40 changed files with 11023 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
pages/mall/admin/design/link-management.uvue
View File

@@ -1,38 +1,213 @@
<template>
<AdminLayout current-page="design-link">
<view class="admin-main">
<view class="header">
<text class="title">链接管理</text>
<view class="admin-main">
<view class="main-content">
<!-- 左侧分类 -->
<view class="category-sidebar">
<view class="add-cat-btn">
<text class="plus">+</text>
<text>添加分类</text>
</view>
<scroll-view class="cat-list" scroll-y="true">
<view v-for="group in linkGroups" :key="group.title" class="group-wrap">
<view class="group-title">
<text class="arrow">▼</text>
<text class="folder">📁</text>
<text>{{ group.title }}</text>
<text class="more">...</text>
</view>
<view
v-for="sub in group.children"
:key="sub.id"
class="sub-item"
:class="{ active: selectedSubId === sub.id }"
@click="selectedSubId = sub.id"
>
<text>{{ sub.name }}</text>
<text class="more">...</text>
</view>
</view>
</scroll-view>
</view>
<view class="content">
<text>商城链接管理（建设中）</text>
<!-- 右侧列表 -->
<view class="list-area">
<view class="toolbar">
<button class="add-btn" type="primary" size="mini">添加链接</button>
</view>
<view class="table-container">
<view class="table-header">
<text class="col id">ID</text>
<text class="col name">名称</text>
<text class="col url">H5链接</text>
<text class="col mini">小程序链接</text>
<text class="col time">添加时间</text>
<text class="col op">操作</text>
</view>
<scroll-view class="table-body" scroll-y="true">
<view v-for="link in links" :key="link.id" class="table-row">
<text class="col id">{{ link.id }}</text>
<text class="col name">{{ link.name }}</text>
<text class="col url">{{ link.h5 }}</text>
<text class="col mini">{{ link.mini }}</text>
<text class="col time">{{ link.time }}</text>
<view class="col op">
<text class="btn-text">编辑</text>
<text class="btn-text del">删除</text>
</view>
</view>
</scroll-view>
</view>
<!-- 分页 -->
<view class="pagination">
<text class="total">共 4 条</text>
<view class="page-size-wrap">
<text>15条/页</text>
<text class="arrow">▼</text>
</view>
<text class="page-btn"><</text>
<text class="page-num active">1</text>
<text class="page-btn">></text>
<view class="jump">
<text>前往</text>
<input type="number" value="1" />
<text>页</text>
</view>
</view>
</view>
</view>
</AdminLayout>
</view>
</template>
<script setup lang="uts">
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
import { ref } from 'vue'
const selectedSubId = ref(1)
const linkGroups = ref([
{
title: '商城链接',
children: [
{ id: 1, name: '基础链接' },
{ id: 2, name: '个人中心链接' }
]
},
{
title: '营销链接',
children: [
{ id: 3, name: '秒杀链接' },
{ id: 4, name: '砍价链接' },
{ id: 5, name: '积分链接' },
{ id: 6, name: '抽奖链接' },
{ id: 7, name: '优惠券链接' }
]
}
])
const links = ref([
{ id: 5, name: '商品列表', h5: 'https://v5.crmeb.net/pages/goods/goods_list/index', mini: '/pages/goods/goods_list/index', time: '2024-12-25 15:45:26' },
{ id: 6, name: '我的订单', h5: 'https://v5.crmeb.net/pages/order_list/index', mini: '/pages/order_list/index', time: '2024-12-25 15:45:48' },
{ id: 7, name: '文章列表', h5: 'https://v5.crmeb.net/pages/extension/news_list/index', mini: '/pages/extension/news_list/index', time: '2024-12-25 15:46:07' },
{ id: 8, name: '退款订单', h5: 'https://v5.crmeb.net/pages/users/user_return_list/index', mini: '/pages/users/user_return_list/index', time: '2024-12-25 15:46:30' }
])
</script>
<style scoped>
.admin-main {
padding: 20px;
height: 100vh;
background-color: #f5f7f9;
}
.header {
margin-bottom: 20px;
}
.title {
font-size: 20px;
font-weight: bold;
}
.content {
background-color: #fff;
padding: 20px;
border-radius: 4px;
min-height: 400px;
.main-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100%;
}
.category-sidebar {
width: 220px;
background-color: #fff;
border-right: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
}
.add-cat-btn {
padding: 15px;
display: flex;
flex-direction: row;
align-items: center;
color: #1890ff;
font-size: 14px;
}
.plus { font-size: 20px; margin-right: 8px; }
.cat-list { flex: 1; }
.group-wrap { margin-bottom: 5px; }
.group-title {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 15px;
background-color: #fafafa;
font-size: 13px;
color: #333;
}
.group-title .arrow { font-size: 10px; margin-right: 8px; color: #999; }
.group-title .folder { margin-right: 8px; color: #fadb14; }
.group-title .more { flex: 1; text-align: right; color: #ccc; }
.sub-item {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px 15px 10px 45px;
font-size: 13px;
color: #606266;
cursor: pointer;
}
.sub-item.active { background-color: #e6f7ff; color: #1890ff; }
.sub-item .more { color: #ccc; }
.list-area { flex: 1; display: flex; flex-direction: column; background-color: #fff; margin: 15px; border-radius: 4px; overflow: hidden; }
.toolbar { padding: 15px; border-bottom: 1px solid #f0f0f0; }
.table-container { flex: 1; display: flex; flex-direction: column; }
.table-header { display: flex; flex-direction: row; background-color: #fafafa; border-bottom: 1px solid #f0f0f0; padding: 10px 0; }
.col { padding: 0 10px; font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id { width: 60px; text-align: center; }
.name { width: 120px; }
.url { flex: 1; }
.mini { flex: 1; }
.time { width: 160px; }
.op { width: 100px; text-align: center; }
.table-row { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; padding: 12px 0; align-items: center; }
.table-row .col { color: #606266; }
.btn-text { color: #1890ff; cursor: pointer; margin: 0 5px; }
.btn-text.del { color: #ff4d4f; }
.pagination {
padding: 15px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 10px;
font-size: 13px;
color: #606266;
}
.page-size-wrap { border: 1px solid #dcdfe6; padding: 4px 8px; border-radius: 4px; display: flex; align-items: center; gap: 5px; }
.page-btn { border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
.page-num { border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; }
.page-num.active { background-color: #1890ff; color: #fff; border-color: #1890ff; }
.jump { display: flex; flex-direction: row; align-items: center; gap: 5px; }
.jump input { width: 30px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 2px; text-align: center; }
</style>

296
pages/mall/admin/design/material.uvue
View File

@@ -1,38 +1,286 @@
<template>
<AdminLayout current-page="design-material">
<view class="admin-main">
<view class="header">
<text class="title">素材管理</text>
<view class="admin-main">
<!-- 顶部标签页 -->
<view class="top-tabs">
<view
class="tab-item"
:class="{ active: activeTab === 'image' }"
@click="activeTab = 'image'"
>
<text>图片管理</text>
</view>
<view class="content">
<text>商城素材管理（建设中）</text>
<view
class="tab-item"
:class="{ active: activeTab === 'video' }"
@click="activeTab = 'video'"
>
<text>视频管理</text>
</view>
</view>
</AdminLayout>
<view class="main-content">
<!-- 左侧分类树 -->
<view class="category-sidebar">
<view class="add-cat-btn">
<text class="plus">+</text>
<text>添加分类</text>
</view>
<scroll-view class="cat-list" scroll-y="true">
<view
v-for="cat in categories"
:key="cat.id"
class="cat-item"
:class="{ active: selectedCatId === cat.id }"
@click="selectedCatId = cat.id"
>
<text class="folder">📁</text>
<text class="name">{{ cat.name }}</text>
<text class="more">...</text>
</view>
</scroll-view>
</view>
<!-- 右侧素材区 -->
<view class="material-area">
<!-- 工具栏 -->
<view class="toolbar">
<view class="left-btns">
<button class="tool-btn primary" type="primary" size="mini">上传图片</button>
<button class="tool-btn outline" size="mini">删除图片</button>
<view class="dropdown">
<text>图片移动至</text>
<text class="arrow">▼</text>
</view>
</view>
<view class="right-tools">
<view class="search-box">
<input type="text" placeholder="请输入图片名" />
<text class="search-ic">🔍</text>
</view>
<view class="view-toggle">
<text class="vt active">▦</text>
<text class="vt">☰</text>
</view>
</view>
</view>
<!-- 素材网格 -->
<scroll-view class="grid-scroll" scroll-y="true">
<view class="material-grid">
<view class="material-item" v-for="(item, index) in materials" :key="index">
<view class="img-wrapper">
<view class="placeholder-img">{{ item.name.charAt(0) }}</view>
<view class="check-box"></view>
</view>
<text class="material-name">{{ item.name }}</text>
</view>
</view>
<!-- 分页 -->
<view class="pagination">
<text class="total">共 270 条</text>
<text class="page-btn"><</text>
<text class="page-num active">1</text>
<text class="page-num">2</text>
<text class="page-num">3</text>
<text class="page-num">4</text>
<text class="page-num">...</text>
<text class="page-num">13</text>
<text class="page-btn">></text>
<view class="page-size">
<text>15条/页</text>
<text class="arrow">▼</text>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
import { ref } from 'vue'
const activeTab = ref('image')
const selectedCatId = ref(1)
const categories = ref([
{ id: 1, name: '全部图片' },
{ id: 2, name: '系统图片' },
{ id: 3, name: '节日图标' },
{ id: 4, name: '首页装修' },
{ id: 5, name: 'banner' },
{ id: 6, name: '金刚区图标' },
{ id: 7, name: '底部菜单' }
])
const materials = ref([
{ name: 'Scre...s.jpg' },
{ name: 'IMG_....jpeg' },
{ name: '10.png' },
{ name: '9.png' },
{ name: '8.png' },
{ name: '7.png' },
{ name: '6.png' },
{ name: '5.png' },
{ name: '4.png' },
{ name: '3.png' },
{ name: '2.png' },
{ name: '1.png' },
{ name: '我的-选中.png' },
{ name: '我的-未选中.png' },
{ name: '首页-选中.png' },
{ name: '首页-未选中.png' },
{ name: '门店-选中.png' },
{ name: '门店-未选中.png' }
])
</script>
<style scoped>
.admin-main {
padding: 20px;
}
.header {
margin-bottom: 20px;
}
.title {
font-size: 20px;
font-weight: bold;
}
.content {
background-color: #fff;
padding: 20px;
border-radius: 4px;
min-height: 400px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #f5f7f9;
}
.top-tabs {
display: flex;
flex-direction: row;
background-color: #fff;
padding: 0 20px;
border-bottom: 1px solid #f0f0f0;
}
.tab-item {
padding: 15px 25px;
cursor: pointer;
font-size: 14px;
color: #666;
border-bottom: 2px solid transparent;
}
.tab-item.active {
color: #1890ff;
border-bottom-color: #1890ff;
}
.main-content {
flex: 1;
display: flex;
flex-direction: row;
overflow: hidden;
}
.category-sidebar {
width: 200px;
background-color: #fff;
border-right: 1px solid #f0f0f0;
display: flex;
flex-direction: column;
}
.add-cat-btn {
padding: 15px;
display: flex;
flex-direction: row;
align-items: center;
color: #1890ff;
font-size: 14px;
cursor: pointer;
border-bottom: 1px solid #f5f5f5;
}
.plus { font-size: 20px; margin-right: 8px; }
.cat-list { flex: 1; }
.cat-item {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 15px;
font-size: 13px;
color: #606266;
cursor: pointer;
}
.cat-item.active { background-color: #e6f7ff; color: #1890ff; border-right: 2px solid #1890ff; }
.folder { margin-right: 8px; font-size: 14px; }
.name { flex: 1; }
.more { color: #999; }
.material-area { flex: 1; display: flex; flex-direction: column; background-color: #fff; margin: 15px; border-radius: 4px; }
.toolbar {
padding: 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #f0f0f0;
}
.left-btns { display: flex; flex-direction: row; gap: 10px; align-items: center; }
.tool-btn { margin: 0; }
.dropdown { border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; font-size: 12px; display: flex; align-items: center; gap: 5px; color: #606266; }
.arrow { font-size: 10px; color: #ccc; }
.right-tools { display: flex; flex-direction: row; gap: 15px; align-items: center; }
.search-box { position: relative; width: 220px; }
.search-box input { width: 100%; border: 1px solid #dcdfe6; border-radius: 4px; padding: 4px 30px 4px 10px; font-size: 12px; }
.search-ic { position: absolute; right: 10px; top: 6px; color: #999; }
.view-toggle { display: flex; border: 1px solid #dcdfe6; border-radius: 4px; overflow: hidden; }
.vt { padding: 4px 10px; font-size: 14px; color: #666; cursor: pointer; }
.vt.active { background-color: #1890ff; color: #fff; }
.grid-scroll { flex: 1; padding: 15px; }
.material-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 15px;
}
.material-item {
width: 120px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 15px;
}
.img-wrapper {
width: 120px;
height: 120px;
background-color: #f5f5f5;
border: 1px solid #f0f0f0;
border-radius: 4px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.placeholder-img { font-size: 40px; color: #ccc; }
.check-box { position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; border: 1px solid #dcdfe6; background: #fff; border-radius: 2px; }
.material-name { font-size: 12px; color: #606266; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pagination {
padding: 20px 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 10px;
}
.total { font-size: 13px; color: #606266; margin-right: 10px; }
.page-btn { border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; color: #666; cursor: pointer; }
.page-num { border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; color: #606266; }
.page-num.active { background-color: #1890ff; color: #fff; border-color: #1890ff; }
.page-size { border: 1px solid #dcdfe6; padding: 4px 10px; border-radius: 4px; font-size: 13px; color: #606266; display: flex; align-items: center; gap: 5px; }
</style>

391
pages/mall/admin/design/theme-style.uvue
View File

@@ -1,38 +1,393 @@
<template>
<AdminLayout current-page="design-theme">
<view class="admin-main">
<view class="header">
<text class="title">主题风格</text>
</view>
<view class="content">
<text>商城主题风格设置（建设中）</text>
<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>
</AdminLayout>
<!-- 预览区 -->
<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">满100减30</text><text class="t-red">满100减30</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 AdminLayout from '@/layouts/admin/AdminLayout.uvue'
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: 20px;
padding: 0;
}
.header {
margin-bottom: 20px;
.header-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 10px 20px;
border-bottom: 1px solid #f0f0f0;
}
.title {
font-size: 20px;
.page-title {
font-size: 16px;
font-weight: bold;
color: #333;
}
.content {
.selection-area {
background-color: #fff;
padding: 20px;
margin: 15px;
border-radius: 4px;
min-height: 400px;
}
.theme-list {
display: flex;
justify-content: center;
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;
}
</style>
.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>