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

161
pages/mall/admin/decoration/home.uvue
View File

@@ -1,23 +1,23 @@
<template>
<template>
<view class="admin-decoration-home">
<view class="content-container">
<!-- 宸︿晶锛氭墜鏈洪瑙堝尯 -->
<!-- 左侧：手机预览区 -->
<view class="preview-section border-shadow">
<view class="phone-mock">
<view class="phone-inner">
<view class="phone-header-img">
<view class="status-bar-mock"></view>
<view class="search-bar-mock">
<text class="search-ic">馃攳</text>
<text class="search-ph">璇疯緭鍏ユ悳绱㈣瘝</text>
<text class="search-ic">🔍</text>
<text class="search-ph">请输入搜索词</text>
</view>
<view class="tabs-mock">
<text class="tab-item active">棣栭〉</text>
<text class="tab-item">鐢熸椿瀹跺眳</text>
<text class="tab-item">杩愬姩涓撳尯</text>
<text class="tab-item">鐢靛瓙浜у搧</text>
<text class="tab-item">瀹剁敤鐢靛櫒</text>
<text class="tab-more">鈮?/text>
<text class="tab-item active">首页</text>
<text class="tab-item">生活家居</text>
<text class="tab-item">运动专区</text>
<text class="tab-item">电子产品</text>
<text class="tab-item">家用电器</text>
<text class="tab-more">≡</text>
</view>
</view>
@@ -43,8 +43,8 @@
<!-- Announcement -->
<view class="notice-mock">
<view class="notice-ic">馃摙</view>
<text class="notice-txt">CRMEB 骞翠腑618娲诲姩寮€鍚繘琛屼腑锛?/text>
<view class="notice-ic">📢</view>
<text class="notice-txt">CRMEB 年中618活动开启进行中！</text>
<text class="notice-arr">></text>
</view>
@@ -52,11 +52,11 @@
<view class="checkin-mock">
<view class="checkin-days">
<view class="day-dot" v-for="i in 7" :key="i">
<view class="dot-circle">猸?/view>
<text class="dot-text">鍛▄{ weekDays[i-1] }}</text>
<view class="dot-circle">⭐</view>
<text class="dot-text">周{{ weekDays[i-1] }}</text>
</view>
</view>
<view class="btn-checkin"><text class="check-txt">绛惧埌</text></view>
<view class="btn-checkin"><text class="check-txt">签到</text></view>
</view>
<!-- Bottom Space -->
@@ -66,54 +66,54 @@
<!-- Bottom TabBar -->
<view class="tabbar-mock">
<view class="tb-item active">
<text class="tb-ic">馃彔</text>
<text class="tb-txt">棣栭〉</text>
<text class="tb-ic">🏠</text>
<text class="tb-txt">首页</text>
</view>
<view class="tb-item">
<text class="tb-ic">馃搨</text>
<text class="tb-txt">鍒嗙被</text>
<text class="tb-ic">📂</text>
<text class="tb-txt">分类</text>
</view>
<view class="tb-item">
<text class="tb-ic">馃洅</text>
<text class="tb-txt">璐墿杞?/text>
<text class="tb-ic">🛒</text>
<text class="tb-txt">购物车</text>
</view>
<view class="tb-item">
<text class="tb-ic">馃懁</text>
<text class="tb-txt">鎴戠殑</text>
<text class="tb-ic">👤</text>
<text class="tb-txt">我的</text>
</view>
</view>
</view>
</view>
</view>
<!-- 鍙充晶锛氬垪琛ㄧ鐞嗗尯 -->
<!-- 右侧：列表管理区 -->
<view class="list-section">
<view class="manage-card border-shadow">
<view class="action-bar">
<view class="btn-primary-blue mr-10" @click="handleAdd">
<text class="btn-txt">娣诲姞椤甸潰</text>
<text class="btn-txt">添加页面</text>
</view>
<view class="btn-import-blue" @click="handleImport">
<text class="btn-txt">瀵煎叆妯℃澘</text>
<text class="btn-txt">导入模板</text>
</view>
</view>
<!-- 琛ㄦ牸 -->
<!-- 表格 -->
<view class="table-container">
<view class="table-header-row">
<view class="th" style="width: 80px;">椤甸潰ID</view>
<view class="th" style="flex: 2;">妯℃澘鍚嶇О</view>
<view class="th" style="flex: 1;">妯℃澘绫诲瀷</view>
<view class="th" style="flex: 2;">娣诲姞鏃堕棿</view>
<view class="th" style="flex: 2;">鏇存柊鏃堕棿</view>
<view class="th" style="width: 280px;">鎿嶄綔</view>
<view class="th" style="width: 80px;">页面ID</view>
<view class="th" style="flex: 2;">模板名称</view>
<view class="th" style="flex: 1;">模板类型</view>
<view class="th" style="flex: 2;">添加时间</view>
<view class="th" style="flex: 2;">更新时间</view>
<view class="th" style="width: 280px;">操作</view>
</view>
<view v-for="(item, index) in tableData" :key="index" class="table-body-row">
<view class="td" style="width: 80px;">{{ item.id }}</view>
<view class="td" style="flex: 2;">{{ item.name }}</view>
<view class="td" style="flex: 1;">
<view :class="['type-tag', item.type === '棣栭〉' ? 'type-home' : 'type-topic']">
<view :class="['type-tag', item.type === '首页' ? 'type-home' : 'type-topic']">
<text class="tag-label">{{ item.type }}</text>
</view>
</view>
@@ -121,27 +121,27 @@
<view class="td" style="flex: 2;">{{ item.updateTime }}</view>
<view class="td" style="width: 280px;">
<view class="op-links">
<text class="op-link" @click="handleEdit(item)">缂栬緫</text>
<text class="op-link" @click="handleEdit(item)">编辑</text>
<text class="op-split">|</text>
<text class="op-link text-danger">鍒犻櫎</text>
<text class="op-link text-danger">删除</text>
<text class="op-split">|</text>
<text class="op-link">棰勮</text>
<text class="op-link">预览</text>
<text class="op-split">|</text>
<text class="op-link" v-if="item.type !== '棣栭〉'">璁句负棣栭〉</text>
<text class="op-split" v-if="item.type !== '棣栭〉'">|</text>
<text class="op-link">瀵煎嚭妯℃澘</text>
<text class="op-link" v-if="item.type !== '首页'">设为首页</text>
<text class="op-split" v-if="item.type !== '首页'">|</text>
<text class="op-link">导出模板</text>
</view>
</view>
</view>
</view>
<!-- 鍒嗛〉鍣?-->
<!-- 分页器 -->
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">鍏?{{ total }} 鏉?/text>
<text class="total-txt">共 {{ total }} 条</text>
</view>
<view class="page-select">
<text class="page-val">15鏉?椤?鈻?/text>
<text class="page-val">15条/页 ▼</text>
</view>
<view class="page-btns">
<text class="p-btn disabled"><</text>
@@ -149,64 +149,64 @@
<text class="p-btn">></text>
</view>
<view class="page-jump">
<text class="jump-txt">鍓嶅線</text>
<text class="jump-txt">前往</text>
<input class="jump-input" value="1" />
<text class="jump-txt">椤?/text>
<text class="jump-txt">页</text>
</view>
</view>
</view>
</view>
</view>
<!-- 娣诲姞椤甸潰渚ц竟鏍?-->
<!-- 添加页面侧边栏 -->
<view v-if="showDrawer" :class="['drawer-mask', isClosing ? 'mask-fade-out' : '']" @click="closeDrawer">
<view :class="['drawer-content', isClosing ? 'slide-out' : '']" @click.stop="">
<view class="drawer-header">
<text class="title-txt">娣诲姞椤甸潰</text>
<text class="close-btn" @click="closeDrawer">脳</text>
<text class="title-txt">添加页面</text>
<text class="close-btn" @click="closeDrawer">×</text>
</view>
<scroll-view class="drawer-body" :scroll-y="true">
<view class="form-item-v">
<text class="v-label">椤甸潰鍚嶇О</text>
<input class="v-input" v-model="formName" placeholder="璇峰～鍐欓〉闈㈠悕绉? />
<text class="v-label">页面名称</text>
<input class="v-input" v-model="formName" placeholder="请填写页面名称" />
</view>
<view class="form-item-v">
<text class="v-label">椤甸潰绫诲瀷</text>
<text class="v-label">页面类型</text>
<view class="radio-group">
<view class="radio-item" @click="formType = '棣栭〉'">
<view :class="['radio-dot', formType === '棣栭〉' ? 'active' : '']"></view>
<text class="radio-txt">棣栭〉</text>
<view class="radio-item" @click="formType = '首页'">
<view :class="['radio-dot', formType === '首页' ? 'active' : '']"></view>
<text class="radio-txt">首页</text>
</view>
<view class="radio-item" @click="formType = '涓撻椤?">
<view :class="['radio-dot', formType === '涓撻椤? ? 'active' : '']"></view>
<text class="radio-txt">涓撻椤?/text>
<view class="radio-item" @click="formType = '专题页'">
<view :class="['radio-dot', formType === '专题页' ? 'active' : '']"></view>
<text class="radio-txt">专题页</text>
</view>
</view>
</view>
<view class="template-select-title">
<text class="t-title">閫夋嫨妯℃澘</text>
<text class="t-sub">璇烽€夋嫨瑕佸紩鐢ㄧ殑妯℃澘</text>
<text class="t-title">选择模板</text>
<text class="t-sub">请选择要引用的模板</text>
</view>
<view class="template-grid">
<view class="tpl-item" v-for="i in 4" :key="i">
<view class="tpl-thumb">
<text class="tpl-ic">馃搫</text>
<text class="tpl-ic">📄</text>
</view>
<text class="tpl-name">閫氱敤妯℃澘 {{ i }}</text>
<text class="tpl-name">通用模板 {{ i }}</text>
</view>
</view>
</scroll-view>
<view class="drawer-footer">
<view class="btn-cancel" @click="closeDrawer">
<text class="btn-cancel-txt">鍙栨秷</text>
<text class="btn-cancel-txt">取消</text>
</view>
<view class="btn-save" @click="handleSavePage">
<text class="btn-save-txt">鎻愪氦</text>
<text class="btn-save-txt">提交</text>
</view>
</view>
</view>
@@ -217,28 +217,28 @@
<script setup lang="uts">
import { ref } from 'vue'
const menuNames = ['绉掓潃娲诲姩', '鍟嗗搧鍒嗙被', '鎷煎洟娲诲姩', '绉垎鍟嗗煄', '鐮嶄环涓績', '琛屼笟璧勮', '鎴戠殑鍦板潃', '绉垎鎶藉', '鎴戠殑璐︽埛', '璁㈠崟鍒楄〃']
const weekDays = ['涓€', '浜?, '涓?, '鍥?, '浜?, '鍏?, '鏃?]
const menuNames = ['秒杀活动', '商品分类', '拼团活动', '积分商城', '砍价中心', '行业资讯', '我的地址', '积分抽奖', '我的账户', '订单列表']
const weekDays = ['一', '二', '三', '四', '五', '六', '日']
const total = ref(11)
const tableData = ref([
{ id: 497, name: 'DIY瀵煎叆鏁版嵁', type: '涓撻椤?, addTime: '2025-03-20 15:18:01', updateTime: '2025-05-21 10:17:45' },
{ id: 496, name: 'DIY瀵煎叆鏁版嵁', type: '涓撻椤?, addTime: '2025-03-20 15:12:58', updateTime: '2025-03-20 15:12:58' },
{ id: 494, name: '鍥句功绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-27 15:42:08', updateTime: '2025-03-19 10:40:13' },
{ id: 493, name: '鍋ュ悍绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-27 15:40:55', updateTime: '2025-03-07 09:46:14' },
{ id: 492, name: '婕斿嚭绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-27 15:33:09', updateTime: '2025-03-07 09:49:43' },
{ id: 491, name: '娼帺绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-27 15:31:28', updateTime: '2025-03-07 09:55:53' },
{ id: 490, name: '瀹跺眳绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-27 15:30:21', updateTime: '2025-03-07 09:57:59' },
{ id: 482, name: '鏂囧叿绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-26 11:32:07', updateTime: '2025-03-07 09:59:25' },
{ id: 481, name: '妯℃澘', type: '涓撻椤?, addTime: '2025-02-26 09:21:04', updateTime: '2025-03-12 14:55:46' },
{ id: 480, name: '妯℃澘', type: '涓撻椤?, addTime: '2025-02-26 09:19:24', updateTime: '2026-02-02 17:11:45' },
{ id: 479, name: '棣栭〉妯℃澘锛屽嬁鍔紒锛?, type: '棣栭〉', addTime: '2025-02-25 20:59:59', updateTime: '2026-01-20 11:16:20' }
{ id: 497, name: 'DIY导入数据', type: '专题页', addTime: '2025-03-20 15:18:01', updateTime: '2025-05-21 10:17:45' },
{ id: 496, name: 'DIY导入数据', type: '专题页', addTime: '2025-03-20 15:12:58', updateTime: '2025-03-20 15:12:58' },
{ id: 494, name: '图书类模板，勿动！！', type: '专题页', addTime: '2025-02-27 15:42:08', updateTime: '2025-03-19 10:40:13' },
{ id: 493, name: '健康类模板，勿动！！', type: '专题页', addTime: '2025-02-27 15:40:55', updateTime: '2025-03-07 09:46:14' },
{ id: 492, name: '演出类模板，勿动！！', type: '专题页', addTime: '2025-02-27 15:33:09', updateTime: '2025-03-07 09:49:43' },
{ id: 491, name: '潮玩类模板，勿动！！', type: '专题页', addTime: '2025-02-27 15:31:28', updateTime: '2025-03-07 09:55:53' },
{ id: 490, name: '家居类模板，勿动！！', type: '专题页', addTime: '2025-02-27 15:30:21', updateTime: '2025-03-07 09:57:59' },
{ id: 482, name: '文具类模板，勿动！！', type: '专题页', addTime: '2025-02-26 11:32:07', updateTime: '2025-03-07 09:59:25' },
{ id: 481, name: '模板', type: '专题页', addTime: '2025-02-26 09:21:04', updateTime: '2025-03-12 14:55:46' },
{ id: 480, name: '模板', type: '专题页', addTime: '2025-02-26 09:19:24', updateTime: '2026-02-02 17:11:45' },
{ id: 479, name: '首页模板，勿动！！', type: '首页', addTime: '2025-02-25 20:59:59', updateTime: '2026-01-20 11:16:20' }
])
const showDrawer = ref(false)
const isClosing = ref(false)
const formName = ref('')
const formType = ref('棣栭〉')
const formType = ref('首页')
const viewState = ref('list') // 'list' | 'design'
const editingName = ref('')
@@ -293,7 +293,7 @@ const handleSaveDesign = () => {
gap: 20px;
}
/* 宸︿晶鎵嬫満棰勮鍖?*/
/* 左侧手机预览区 */
.preview-section {
width: 380px;
height: 800px;
@@ -455,7 +455,7 @@ const handleSaveDesign = () => {
.tb-txt { font-size: 11px; color: #999; }
.tb-item.active .tb-txt { color: #f2270c; }
/* 鍙充晶鍒楄〃绠＄悊鍖?*/
/* 右侧列表管理区 */
.list-section { flex: 1; }
.manage-card { display: flex; flex-direction: column; min-height: 800px; }
@@ -614,7 +614,7 @@ const handleSaveDesign = () => {
.drawer-content {
width: 450px;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
animation: slideIn 0.3s ease-out;
@@ -723,4 +723,3 @@ const handleSaveDesign = () => {
}
</style>