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-06 16:18:04 +08:00
parent d00f0b7412
commit 57846534bc
86 changed files with 2751 additions and 3074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
pages/mall/admin/design/templates.uvue
View File

@@ -1,9 +1,9 @@
<template>
<template>
<AdminLayout :currentPage="currentPage">
<view class="design-container">
<view class="module-header">
<text class="module-title">妯℃澘搴?/text>
<text class="module-desc">浠庝赴瀵岀殑妯℃澘涓揩閫熷垱寤洪〉闈?/text>
<text class="module-title">模板库</text>
<text class="module-desc">从丰富的模板中快速创建页面</text>
</view>
<view class="templates-grid">
<view v-for="template in templateLibrary" :key="template.id" class="template-card">
@@ -12,7 +12,7 @@
</view>
<view class="template-body">
<text class="template-desc">{{ template.description }}</text>
<button class="btn-use" @click="handleUseTemplate(template.id)">浣跨敤妯℃澘</button>
<button class="btn-use" @click="handleUseTemplate(template.id)">使用模板</button>
</view>
</view>
</view>
@@ -29,30 +29,30 @@ const currentPage = ref<string>('design-templates')
const templateLibrary = ref<any[]>([
{
id: 1,
name: '棣栭〉妯℃澘A',
description: '缁忓吀鐢靛晢棣栭〉甯冨眬'
name: '首页模板A',
description: '经典电商首页布局'
},
{
id: 2,
name: '棣栭〉妯℃澘B',
description: '绠€绾﹂鏍肩殑鍟嗗煄椤甸潰'
name: '首页模板B',
description: '简约风格的商城页面'
},
{
id: 3,
name: '娲诲姩妯℃澘',
description: '娲诲姩淇冮攢椤甸潰甯冨眬'
name: '活动模板',
description: '活动促销页面布局'
},
{
id: 4,
name: '鍟嗗搧妯℃澘',
description: '鍟嗗搧灞曠ず椤甸潰甯冨眬'
name: '商品模板',
description: '商品展示页面布局'
}
])
const handleUseTemplate = (templateId: number) => {
console.log('浣跨敤妯℃澘', templateId)
console.log('使用模板', templateId)
uni.showToast({
title: '浣跨敤妯℃澘鎴愬姛',
title: '使用模板成功',
icon: 'none'
})
}
@@ -62,7 +62,7 @@ const handleUseTemplate = (templateId: number) => {
@import '@/uni.scss';
.design-container {
min-height: 100vh;
background: $background-secondary;
padding: $space-lg;
}
@@ -160,4 +160,3 @@ const handleUseTemplate = (templateId: number) => {
</style>

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

@@ -1,12 +1,12 @@
<template>
<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>
<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
@@ -22,11 +22,11 @@
</view>
</view>
<!-- 棰勮鍖?-->
<!-- 预览区 -->
<view class="preview-section">
<!-- 棰勮 1: 涓汉涓績 -->
<!-- 预览 1: 个人中心 -->
<view class="preview-card">
<text class="p-title">涓汉涓績</text>
<text class="p-title">个人中心</text>
<view class="mock-phone">
<view class="mock-status-bar"></view>
<view class="mock-content user-center">
@@ -35,69 +35,69 @@
<view class="mock-avatar"></view>
<view class="user-meta">
<view class="name-line">
<text class="name">鎴戠殑鍚嶅瓧鎴戠殑鍚嶅瓧</text>
<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>
<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 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>
<text class="vip-l-t1">会员可享多项权益</text>
<text class="vip-l-t2">会员剩余434天</text>
</view>
<view class="btn-vip">绔嬪嵆缁垂</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-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 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>
<text class="i-t1">邀请好友赚佣金</text>
<text class="i-t2">推广好友注册</text>
</view>
<view class="service-section">
<view class="s-title">鎴戠殑鏈嶅姟</view>
<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 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 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: 鍟嗗搧璇︽儏 -->
<!-- 预览 2: 商品详情 -->
<view class="preview-card">
<text class="p-title">鍟嗗搧璇︽儏</text>
<text class="p-title">商品详情</text>
<view class="mock-phone">
<view class="mock-status-bar"></view>
<view class="mock-content product-detail">
@@ -106,60 +106,60 @@
</view>
<view class="p-main-info">
<view class="p-price-row">
<text class="p-symbol" :style="{ color: currentThemeColor }">楼</text>
<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>
<text class="p-old-price">¥ 100.00</text>
<view class="p-tag-svip">SVIP</view>
</view>
<text class="p-name">浼侀箙閽堢粐鏉＄汗鍥涗欢濂楁柊娆句笂甯傛€т环姣旈珮</text>
<text class="p-name">企鹅针织条纹四件套新款上市性价比高</text>
<view class="p-stats">
<text>鍘熶环: 楼 234.00</text>
<text>绱閿€閲? 2999999浠?/text>
<text>搴撳瓨: 1452浠?/text>
<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 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 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 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: 鎷煎洟鍒楄〃 -->
<!-- 预览 3: 拼团列表 -->
<view class="preview-card">
<text class="p-title">鎷煎洟鍒楄〃</text>
<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>
<text class="g-h-title">拼团列表</text>
<view class="g-participation">
<view class="g-avatars"></view>
<text>9999浜哄弬涓?/text>
<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>
<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>
<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 class="g-btn" :style="{ backgroundColor: currentThemeColor }">{{ i % 2 === 0 ? '去拼团' : '已售罄' }}</view>
</view>
</view>
</view>
@@ -180,11 +180,11 @@ interface ThemeOption {
}
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' }
{ 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')
@@ -196,7 +196,7 @@ const currentThemeColor = computed(() : string => {
const handleSave = () => {
uni.showToast({
title: '淇濆瓨鎴愬姛',
title: '保存成功',
icon: 'success'
})
}
@@ -212,7 +212,7 @@ const handleSave = () => {
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 10px 20px;
border-bottom: 1px solid #f0f0f0;
}
@@ -390,4 +390,4 @@ const handleSave = () => {
.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>
</style>