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

完善页面细节4

Browse Source
This commit is contained in:
huangzhenbao
2026-02-25 15:54:21 +08:00
parent 4bb876e60e
commit 6d7cad25ea
2 changed files with 282 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

527
pages/mall/admin/decoration/category.uvue
View File

@@ -1,6 +1,6 @@
<template>
<view class="admin-decoration-category">
<!-- 顶部标题与按钮 -->
<!-- 顶部标题与按钮 (PageHeader 标准模式) -->
<view class="page-header border-shadow">
<view class="header-left">
<text class="page-title">商品分类</text>
@@ -15,176 +15,173 @@
</view>
</view>
<!-- 分类展示区域 -->
<!-- 分类展示区域 (Reason 26: 统一白卡模式) -->
<view class="content-container anim-fade-in">
<view class="main-card border-shadow">
<view class="style-list">
<!-- 样式1 -->
<view class="style-card-wrapper">
<view :class="['style-card', selectedStyle === 1 ? 'active' : '']" @click="selectedStyle = 1">
<view class="phone-mock">
<view class="phone-header">
<text class="p-title">产品分类</text>
<text class="p-dots">••• Ⓞ</text>
</view>
<view class="phone-body">
<view class="search-bar">
<text class="ic-search">🔍</text>
<text class="search-ph">点击搜索商品信息</text>
<view class="style-grid">
<!-- 样式 1 -->
<view class="style-item" @click="selectedStyle = 1">
<view :class="['mock-phone', selectedStyle === 1 ? 'active' : '']">
<view class="phone-inner">
<!-- 顶部栏 -->
<view class="p-header">
<text class="p-title">产品分类</text>
<text class="p-dots">••• Ⓞ</text>
</view>
<view class="style1-content">
<view class="sidebar-mock">
<text class="sb-item active">精选水果</text>
<text class="sb-item" v-for="name in ['肉制品','水产海鲜','米面粮油','厨房主食','新鲜蛋品','调味品','日配冷藏','豆制品']" :key="name">{{name}}</text>
<!-- 搜索栏 -->
<view class="p-search">
<text class="p-search-ic">🔍</text>
<text class="p-search-txt">点击搜索商品信息</text>
</view>
<!-- 内容区 -->
<view class="p-content-row">
<view class="p-side">
<text class="p-side-item active">精选水果</text>
<text class="p-side-item" v-for="name in ['肉制品','水产海鲜','米面粮油','厨房主食','新鲜蛋品','调味品','日配冷藏','豆制品']" :key="name">{{name}}</text>
</view>
<view class="main-mock">
<view class="category-section">
<view class="section-title"><text class="st-txt">精选水果</text></view>
<view class="grid-container">
<view class="grid-item" v-for="i in 6" :key="i">
<view class="item-img-box"><text class="item-placeholder">🍐</text></view>
<text class="item-txt">{{ ['精品香蕉','坚果优选','猕猴桃','大肉块','五花肉','鸡腿'][i-1] }}</text>
</view>
<view class="p-main">
<view class="p-section-title">精选水果</view>
<view class="p-item-grid">
<view class="p-grid-item" v-for="i in 6" :key="'s1-1-'+i">
<view class="p-item-img-box"><text class="p-emoji">🍐</text></view>
<text class="p-item-name">{{ ['精品香蕉','坚果优选','猕猴桃','精品香蕉','坚果优选','猕猴桃'][i-1] }}</text>
</view>
</view>
<view class="category-section">
<view class="section-title"><text class="st-txt">肉制品</text></view>
<view class="grid-container">
<view class="grid-item" v-for="i in 3" :key="i">
<view class="item-img-box"><text class="item-placeholder">🥩</text></view>
<text class="item-txt">{{ ['大肉块','五花肉','鸡腿'][i-1] }}</text>
</view>
<view class="p-section-title">肉制品</view>
<view class="p-item-grid">
<view class="p-grid-item" v-for="i in 3" :key="'s1-2-'+i">
<view class="p-item-img-box"><text class="p-emoji">🥩</text></view>
<text class="p-item-name">{{ ['大肉块','五花肉','鸡腿'][i-1] }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="phone-tabbar">
<view class="tb-item"><text class="tb-ic">🏠</text></view>
<view class="tb-item active"><text class="tb-ic">📂</text></view>
<view class="tb-item"><text class="tb-ic">🛒</text></view>
<view class="tb-item"><text class="tb-ic">👤</text></view>
<!-- 底部栏 -->
<view class="p-tabbar">
<view class="p-tab-item"><text class="p-tab-ic">🏠</text><text class="p-tab-txt">首页</text></view>
<view class="p-tab-item active"><text class="p-tab-ic">📂</text><text class="p-tab-txt">分类</text></view>
<view class="p-tab-item"><text class="p-tab-ic">🛒</text><text class="p-tab-txt">购物车</text></view>
<view class="p-tab-item"><text class="p-tab-ic">👤</text><text class="p-tab-txt">我的</text></view>
</view>
</view>
</view>
<text :class="['style-label', selectedStyle === 1 ? 'active' : '']">样式1</text>
</view>
<text class="style-name" :style="{color: selectedStyle === 1 ? '#2d8cf0' : '#666'}">样式1</text>
</view>
<!-- 样式2 -->
<view class="style-card-wrapper">
<view :class="['style-card', selectedStyle === 2 ? 'active' : '']" @click="selectedStyle = 2">
<view class="phone-mock">
<view class="phone-header-img"></view>
<view class="phone-header-v2">
<text class="p2-title">分类</text>
<view class="home-ic">🏠</view>
</view>
<view class="phone-body p2-body">
<view class="search-bar-v2">
<text class="ic-search">🔍</text>
<text class="search-ph">点击搜索商品信息</text>
</view>
<view class="tabs-v2">
<text class="t2-item active">水果</text>
<text class="t2-item">全部</text>
<text class="t2-item">热带水果</text>
<text class="t2-item">西瓜葡萄</text>
<text class="t2-arrow">▼</text>
</view>
<view class="style2-content">
<view class="sidebar-v2">
<text class="s2-item active">乳品</text>
<text class="s2-item">午间零食</text>
<text class="s2-item">新鲜蔬菜</text>
<text class="s2-item">美妆护肤</text>
<text class="s2-item">宠物用品</text>
<text class="s2-item">户外玩具</text>
</view>
<view class="main-v2">
<view class="banner-mock-v2">
<text class="b-txt">深层 V8 高清直屏\n双镜头/VR科技体验</text>
</view>
<view class="prod-v2" v-for="i in 2" :key="i">
<text class="p-name">Haier/海尔 BCD-216STPT 时尚静音冰箱 三门出门租家用小型电冰箱</text>
<view class="p-price-row">
<text class="p-price">¥999.00</text>
<text class="p-sales">已售 92</text>
<view class="btn-buy"><text class="buy-txt">立即购买</text></view>
</view>
</view>
</view>
</view>
</view>
<view class="cart-badge">🛒<text class="badge-num">7</text></view>
<view class="footer-p2">
<text class="f2-total">¥999.00</text>
<view class="btn-settle"><text class="settle-txt">去结算</text></view>
</view>
</view>
</view>
<text class="style-name" :style="{color: selectedStyle === 2 ? '#2d8cf0' : '#666'}">样式2</text>
</view>
<!-- 样式3 -->
<view class="style-card-wrapper">
<view :class="['style-card', selectedStyle === 3 ? 'active' : '']" @click="selectedStyle = 3">
<view class="phone-mock">
<view class="phone-header">
<text class="p-title">产品分类</text>
</view>
<view class="phone-body">
<view class="search-bar-v3">
<view class="home-btn">🏠</view>
<view class="search-input-v3">
<text class="ic-search">🔍</text>
<text class="search-ph">搜索商品</text>
</view>
<!-- 样式 2 -->
<view class="style-item" @click="selectedStyle = 2">
<view :class="['mock-phone', selectedStyle === 2 ? 'active' : '']">
<view class="phone-inner">
<!-- 状态栏 -->
<view class="p-stat-bar">
<text class="p-time">9:41 AM</text>
<text class="p-bat">100% 🔋</text>
</view>
<view class="tabs-v3">
<text class="t3-item active">水果</text>
<text class="t3-item specialty">时时生鲜</text>
<text class="t3-item">休闲零食</text>
<text class="t3-item">坚果蜜饯</text>
<text class="t3-arrow">∨</text>
<!-- 顶部导航 -->
<view class="p-header-v2">
<view class="p-back">🏠</view>
<view class="p-search-box-v2">
<text class="p-search-ic">🔍</text>
<text class="p-search-txt">点击搜索商品信息</text>
</view>
</view>
<view class="style3-content">
<view class="sidebar-v3">
<text class="s3-item active">乳品</text>
<text class="s3-item">午间零食</text>
<text class="s3-item">新鲜蔬菜</text>
<text class="s3-item">特惠专区</text>
<text class="s3-item">大闸蟹</text>
<text class="s3-item">精选礼盒</text>
<!-- 分类选项卡 -->
<view class="p-tab-row-v2">
<text class="p-tab-v2 active">水果</text>
<text class="p-tab-v2">全部</text>
<text class="p-tab-v2">热带水果</text>
<text class="p-tab-v2">西瓜葡萄</text>
<text class="p-arrow-v2">▼</text>
</view>
<!-- 内容区 -->
<view class="p-content-row">
<view class="p-side-v2">
<text class="p-side-item-v2 active">乳品</text>
<text class="p-side-item-v2" v-for="name in ['休闲零食','新鲜蔬菜','美妆护肤','宠物用品','图书玩具']" :key="name">{{name}}</text>
</view>
<view class="main-v3">
<view class="prod-v3" v-for="i in 5" :key="i">
<view class="pv-img"></view>
<view class="pv-info">
<text class="pv-name">【橙中爱马仕】果际新骑士晚季甜橙10个单装</text>
<text class="pv-price">¥25.99</text>
</view>
<view class="pv-add-box">
<text class="pv-add">🛒</text>
</view>
<view class="p-main">
<view class="p-banner-v2">
<text class="p-banner-txt">深层 V8 高清直屏\n双镜头/VR科技体验</text>
</view>
<view class="p-prod-list-v2">
<view class="p-prod-v2" v-for="i in 2" :key="'s2-'+i">
<text class="p-prod-title">Haier/海尔 BCD-216STPT 时尚静音冰箱 三门出口租家用小型电冰箱</text>
<view class="p-prod-footer-v2">
<text class="p-price">¥999.00</text>
<text class="p-sales">已售 92</text>
<view class="p-buy-btn">立即购买</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="cart-v3">
<view class="c3-ic-box">🛒<text class="c3-badge">7</text></view>
<text class="c3-price">¥999.00</text>
<view class="btn-settle-v3"><text class="settle-txt">去结算</text></view>
<!-- 蓝色底部条 -->
<view class="p-cart-bar">
<view class="p-cart-icon-box">🛒<text class="p-cart-badge">7</text></view>
<text class="p-cart-total">¥999.00</text>
<view class="p-settle-btn">去结算</view>
</view>
</view>
</view>
<text :class="['style-label', selectedStyle === 2 ? 'active' : '']">样式2</text>
</view>
<text class="style-name" :style="{color: selectedStyle === 3 ? '#2d8cf0' : '#666'}">样式3</text>
</view>
<!-- 样式 3 -->
<view class="style-item" @click="selectedStyle = 3">
<view :class="['mock-phone', selectedStyle === 3 ? 'active' : '']">
<view class="phone-inner">
<!-- 顶部导航 -->
<view class="p-header">
<text class="p-title">产品分类</text>
</view>
<view class="p-header-v3">
<view class="p-back">🏠</view>
<view class="p-search-box-v3">
<text class="p-search-ic">🔍</text>
<text class="p-search-txt">搜索商品</text>
</view>
</view>
<!-- 分类项 -->
<view class="p-tab-row-v3">
<text class="p-tab-item-v3">水果</text>
<text class="p-tab-item-v3 active">时令生鲜</text>
<text class="p-tab-item-v3">休闲零食</text>
<text class="p-tab-item-v3">坚果蜜饯</text>
<text class="p-arrow-v3">∨</text>
</view>
<!-- 内容区 -->
<view class="p-content-row">
<view class="p-side-v3">
<text class="p-side-item-v3 active">乳品</text>
<text class="p-side-item-v3" v-for="name in ['休闲零食','新鲜蔬菜','特惠专区','大闸蟹','精选礼盒']" :key="name">{{name}}</text>
</view>
<view class="p-main-v3">
<view class="p-prod-row-v3" v-for="i in 5" :key="'s3-'+i">
<view class="p-prod-img-v3"></view>
<view class="p-prod-info-v3">
<text class="p-prod-name-v3">【橙中爱马仕】果际新骑士晚季甜橙10个单装</text>
<text class="p-prod-price-v3">¥25.99</text>
</view>
<view class="p-prod-action-v3">🛒</view>
</view>
</view>
</view>
<!-- 红色底部条 -->
<view class="p-cart-bar-v3">
<view class="p-cart-icon-box-v3">🛒<text class="p-cart-badge">7</text></view>
<text class="p-cart-total-v3">¥999.00</text>
<view class="p-settle-btn-v3">去结算</view>
</view>
</view>
</view>
<text :class="['style-label', selectedStyle === 3 ? 'active' : '']">样式3</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
@@ -193,7 +190,6 @@ import { ref } from 'vue'
const selectedStyle = ref(1)
const handleSave = () => {
console.log('Saving classification style:', selectedStyle.value)
uni.showToast({ title: '保存成功', icon: 'success' })
}
@@ -204,11 +200,9 @@ const handleReset = () => {
<style scoped lang="scss">
.admin-decoration-category {
padding: 0;
background-color: transparent;
min-height: auto;
display: flex;
flex-direction: column;
background-color: transparent;
}
.border-shadow {
@@ -216,6 +210,7 @@ const handleReset = () => {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
/* PageHeader */
.page-header {
height: 60px;
padding: 0 24px;
@@ -223,11 +218,8 @@ const handleReset = () => {
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 10;
}
.page-title { font-size: 16px; font-weight: 600; color: #303133; }
.header-right { display: flex; flex-direction: row; gap: 12px; }
.btn-primary, .btn-ghost {
@@ -239,17 +231,15 @@ const handleReset = () => {
justify-content: center;
cursor: pointer;
}
.btn-primary { background-color: #2d8cf0; }
.btn-ghost { border: 1px solid #dcdfe6; position: relative; }
.btn-ghost { border: 1px solid #dcdfe6; }
.btn-txt { color: #fff; font-size: 14px; }
.ghost-txt { color: #606266; font-size: 14px; }
/* Content Container */
.content-container {
flex: 1;
padding: 0;
margin-top: 20px;
flex: 1;
}
.main-card {
@@ -259,138 +249,161 @@ const handleReset = () => {
min-height: 800px;
}
.style-list {
display: flex;
flex-direction: row;
gap: 30px;
flex-wrap: wrap;
/* Responsive Grid (1250px -> 3, 700px -> 1) */
.style-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.style-card-wrapper {
@media (max-width: 1250px) {
.style-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.style-grid {
grid-template-columns: 1fr;
}
}
.style-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.style-card {
width: 320px;
height: 640px;
background-color: #fff;
border: 2px solid transparent;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
gap: 16px;
cursor: pointer;
}
/* Mock Phone Structure */
.mock-phone {
width: 300px;
height: 620px;
border: 1px solid #eeeeee;
border-radius: 12px;
padding: 8px;
background-color: #fff;
transition: all 0.3s;
box-shadow: 0 2px 15px rgba(0,0,0,0.05);
position: relative;
}
.style-card.active {
.mock-phone.active {
border-color: #2d8cf0;
box-shadow: 0 4px 20px rgba(45, 140, 240, 0.2);
box-shadow: 0 4px 25px rgba(45, 140, 240, 0.15);
}
.style-name { font-size: 14px; font-weight: bold; }
.phone-inner {
width: 100%;
height: 100%;
background-color: #f8f8f8;
display: flex;
flex-direction: column;
border: 1px solid #f0f0f0;
border-radius: 4px;
overflow: hidden;
position: relative;
}
/* Phone Mockup Common */
.phone-mock { width: 100%; height: 100%; display: flex; flex-direction: column; background-color: #fff; }
.phone-header { height: 44px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 15px; border-bottom: 1px solid #eee; }
.style-label {
font-size: 14px;
color: #333;
}
.style-label.active {
color: #2d8cf0;
font-weight: bold;
}
/* Style 1 Specific */
.p-header { height: 44px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 12px; background-color: #fff; border-bottom: 1px solid #f0f0f0; }
.p-title { font-size: 15px; font-weight: bold; color: #333; }
.p-dots { font-size: 12px; color: #333; }
.phone-body { flex: 1; background-color: #f8f8f8; display: flex; flex-direction: column; overflow: hidden; }
.p-search { margin: 8px; height: 32px; background-color: #fff; border-radius: 16px; border: 1px solid #eee; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
.p-search-ic { font-size: 10px; margin-right: 6px; color: #999; }
.p-search-txt { font-size: 11px; color: #999; }
/* Style 1 Specific */
.search-bar { height: 32px; background-color: #f2f2f2; margin: 10px; border-radius: 16px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
.ic-search { font-size: 12px; margin-right: 6px; color: #999; }
.search-ph { font-size: 11px; color: #999; }
.p-content-row { flex: 1; display: flex; flex-direction: row; overflow: hidden; }
.p-side { width: 80px; background-color: #f7f7f7; display: flex; flex-direction: column; }
.p-side-item { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
.p-side-item.active { background-color: #fff; color: #f2270c; font-weight: bold; position: relative; }
.p-side-item.active::before { content: ''; position: absolute; left: 0; top: 15px; height: 14px; width: 3px; background-color: #f2270c; }
.style1-content { flex: 1; display: flex; flex-direction: row; }
.sidebar-mock { width: 80px; background-color: #f7f7f7; display: flex; flex-direction: column; }
.sb-item { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
.sb-item.active { background-color: #fff; color: #f2270c; font-weight: bold; position: relative; }
.sb-item.active::before { content: ''; position: absolute; left: 0; top: 15px; height: 14px; width: 3px; background-color: #f2270c; }
.p-main { flex: 1; background-color: #fff; padding: 12px; overflow-y: auto; }
.p-section-title { font-size: 12px; font-weight: bold; color: #333; margin-bottom: 12px; }
.p-item-grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.p-grid-item { width: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.p-item-img-box { width: 50px; height: 50px; background-color: #f9f9f9; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.p-emoji { font-size: 24px; }
.p-item-name { font-size: 10px; color: #666; text-align: center; }
.main-mock { flex: 1; background-color: #fff; padding: 10px; }
.section-title { margin-bottom: 10px; }
.st-txt { font-size: 12px; font-weight: bold; color: #333; }
.grid-container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.grid-item { width: 68px; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.item-img-box { width: 50px; height: 50px; background-color: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.item-placeholder { font-size: 24px; }
.item-txt { font-size: 10px; color: #666; }
.phone-tabbar { height: 48px; display: flex; flex-direction: row; border-top: 1px solid #eee; }
.tb-item { flex: 1; display: flex; align-items: center; justify-content: center; }
.tb-ic { font-size: 20px; color: #999; }
.tb-item.active .tb-ic { color: #f2270c; }
.p-tabbar { height: 50px; background-color: #fff; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; }
.p-tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.p-tab-ic { font-size: 18px; color: #999; }
.p-tab-txt { font-size: 9px; color: #999; }
.p-tab-item.active .p-tab-ic, .p-tab-item.active .p-tab-txt { color: #f2270c; }
/* Style 2 Specific */
.phone-header-img { height: 20px; background-color: #fff; }
.phone-header-v2 { height: 34px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 12px; }
.p2-title { font-size: 14px; font-weight: bold; flex: 1; text-align: center; }
.home-ic { font-size: 16px; margin-right: 20px;}
.p-stat-bar { height: 24px; padding: 0 12px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #fff; }
.p-time { font-size: 10px; font-weight: bold; }
.p-bat { font-size: 10px; }
.search-bar-v2 { height: 30px; background-color: #fff; margin: 8px 12px; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; border: 1px solid #eee; }
.tabs-v2 { height: 40px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 15px; }
.t2-item { font-size: 12px; color: #333; }
.t2-item.active { color: #f2270c; font-weight: bold; border-bottom: 2px solid #f2270c; }
.t2-arrow { font-size: 10px; color: #999; }
.p-header-v2 { height: 44px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 10px; }
.p-back { font-size: 16px; }
.p-search-box-v2 { flex: 1; height: 30px; background-color: #f5f5f5; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
.style2-content { flex: 1; display: flex; flex-direction: row; }
.sidebar-v2 { width: 70px; background-color: #f7f7f7; }
.s2-item { height: 48px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #333; }
.s2-item.active { background-color: #fff; font-weight: bold; }
.p-tab-row-v2 { height: 40px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 15px; }
.p-tab-v2 { font-size: 12px; color: #333; }
.p-tab-v2.active { color: #f2270c; font-weight: bold; border-bottom: 2px solid #f2270c; padding-bottom: 2px; }
.p-arrow-v2 { font-size: 10px; color: #999; flex: 1; text-align: right; }
.main-v2 { flex: 1; background-color: #fff; padding: 10px; }
.banner-mock-v2 { height: 80px; background-color: #0081ff; border-radius: 6px; padding: 10px; display: flex; align-items: center; margin-bottom: 12px; }
.b-txt { font-size: 12px; color: #fff; font-weight: bold; line-height: 1.4; }
.p-side-v2 { width: 70px; background-color: #f7f7f7; }
.p-side-item-v2 { height: 48px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #333; }
.p-side-item-v2.active { background-color: #fff; font-weight: bold; }
.prod-v2 { border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; margin-bottom: 10px; }
.p-name { font-size: 11px; color: #333; line-height: 1.3; margin-bottom: 8px; max-height: 28px; overflow: hidden; }
.p-price-row { display: flex; flex-direction: row; align-items: center; }
.p-price { font-size: 12px; color: #f2270c; font-weight: bold; margin-right: 6px; }
.p-sales { font-size: 9px; color: #999; flex: 1; }
.btn-buy { background-color: #f2270c; padding: 4px 8px; border-radius: 10px; }
.buy-txt { font-size: 9px; color: #fff; }
.p-banner-v2 { height: 80px; background-color: #1a56f0; border-radius: 6px; padding: 12px; display: flex; align-items: center; margin-bottom: 12px; }
.p-banner-txt { color: #fff; font-size: 12px; font-weight: bold; line-height: 1.4; }
.cart-badge { position: absolute; bottom: 65px; left: 15px; width: 34px; height: 34px; background-color: #fff; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.badge-num { position: absolute; top: 0; right: 0; background-color: #f2270c; color: #fff; font-size: 9px; width: 14px; height: 14px; border-radius: 7px; text-align: center; }
.p-prod-v2 { border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; margin-bottom: 12px; }
.p-prod-title { font-size: 11px; color: #333; line-height: 1.4; margin-bottom: 8px; }
.p-prod-footer-v2 { display: flex; flex-direction: row; align-items: center; }
.p-price { font-size: 14px; color: #f2270c; font-weight: bold; flex: 1; }
.p-sales { font-size: 10px; color: #999; margin-right: 12px; }
.p-buy-btn { background-color: #f2270c; color: #fff; font-size: 10px; padding: 4px 10px; border-radius: 12px; }
.footer-p2 { height: 50px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 15px; border-top: 1px solid #eee; }
.f2-total { font-size: 16px; color: #f2270c; font-weight: bold; }
.btn-settle { background-color: #f2270c; padding: 6px 16px; border-radius: 18px; }
.settle-txt { color: #fff; font-size: 14px; }
.p-cart-bar { height: 50px; background-color: #fff; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; align-items: center; padding: 0 12px; margin-top: auto; }
.p-cart-icon-box { width: 36px; height: 36px; background-color: #f2270c; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; position: relative; margin-top: -10px; }
.p-cart-badge { position: absolute; top: -4px; right: -4px; background-color: #fff; color: #f2270c; font-size: 9px; width: 14px; height: 14px; border-radius: 7px; text-align: center; border: 1px solid #f2270c; }
.p-cart-total { font-size: 15px; color: #f2270c; font-weight: bold; flex: 1; margin-left: 10px; }
.p-settle-btn { background-color: #f2270c; color: #fff; font-size: 14px; padding: 6px 20px; border-radius: 20px; }
/* Style 3 Specific */
.search-bar-v3 { height: 44px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 10px; background-color: #fff; }
.home-btn { font-size: 16px; }
.search-input-v3 { flex: 1; height: 30px; background-color: #f5f5f5; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
.p-header-v3 { height: 44px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 10px; }
.p-search-box-v3 { flex: 1; height: 30px; background-color: #f5f5f5; border-radius: 15px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
.tabs-v3 { height: 40px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 12px; background-color: #fff; }
.t3-item { font-size: 12px; color: #666; white-space: nowrap; }
.t3-item.active { color: #f2270c; font-weight: bold; font-size: 14px; }
.t3-item.specialty { background-color: #f2270c; color: #fff; padding: 2px 8px; border-radius: 10px; }
.t3-arrow { font-size: 12px; color: #ccc; flex: 1; text-align: right; }
.p-tab-row-v3 { height: 44px; background-color: #fff; display: flex; flex-direction: row; align-items: center; padding: 0 12px; gap: 12px; }
.p-tab-item-v3 { font-size: 12px; color: #666; }
.p-tab-item-v3.active { background-color: #f2270c; color: #fff; padding: 4px 10px; border-radius: 14px; }
.p-arrow-v3 { font-size: 10px; color: #ccc; flex: 1; text-align: right; }
.style3-content { flex: 1; display: flex; flex-direction: row; background-color: #fff; }
.sidebar-v3 { width: 75px; background-color: #f7f7f7; }
.s3-item { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
.s3-item.active { background-color: #fff; color: #333; font-weight: bold; position: relative; }
.s3-item.active::before { content: ''; position: absolute; left: 0; top: 18px; height: 14px; width: 3px; background-color: #f2270c; }
.p-side-v3 { width: 75px; background-color: #f7f7f7; }
.p-side-item-v3 { height: 48px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
.p-side-item-v3.active { background-color: #fff; color: #333; font-weight: bold; position: relative; }
.p-side-item-v3.active::before { content: ''; position: absolute; left: 0; top: 17px; height: 14px; width: 3px; background-color: #f2270c; }
.main-v3 { flex: 1; padding: 10px; }
.prod-v3 { display: flex; flex-direction: row; margin-bottom: 12px; position: relative; }
.pv-img { width: 70px; height: 70px; background-color: #f5f5f5; border-radius: 4px; margin-right: 10px; }
.pv-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.pv-name { font-size: 11px; color: #333; line-height: 1.3; overflow: hidden; max-height: 30px; }
.pv-price { font-size: 13px; color: #f2270c; font-weight: bold; }
.pv-add-box { position: absolute; right: 0; bottom: 0; }
.pv-add { font-size: 18px; color: #f2270c; }
.p-main-v3 { flex: 1; background-color: #fff; padding: 12px; overflow-y: auto; }
.p-prod-row-v3 { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
.p-prod-img-v3 { width: 70px; height: 70px; background-color: #f5f5f5; border-radius: 4px; margin-right: 12px; }
.p-prod-info-v3 { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.p-prod-name-v3 { font-size: 12px; color: #333; line-height: 1.4; }
.p-prod-price-v3 { font-size: 14px; color: #f2270c; font-weight: bold; }
.p-prod-action-v3 { font-size: 20px; color: #f2270c; }
.p-cart-bar-v3 { height: 50px; background-color: #fff; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; align-items: center; padding: 0 12px; margin-top: auto; }
.p-cart-icon-box-v3 { width: 36px; height: 36px; background-color: #fff; border-radius: 18px; border: 1px solid #f2270c; display: flex; align-items: center; justify-content: center; color: #f2270c; font-size: 18px; position: relative; margin-top: -10px; }
.p-cart-total-v3 { font-size: 15px; color: #f2270c; font-weight: bold; flex: 1; margin-left: 10px; }
.p-settle-btn-v3 { background-color: #f2270c; color: #fff; font-size: 14px; padding: 6px 20px; border-radius: 20px; }
.cart-v3 { height: 50px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; border-top: 1px solid #eee; position: relative; }
.c3-ic-box { font-size: 24px; color: #f2270c; margin-right: 10px; position: relative; margin-top: -15px;}
.c3-badge { position: absolute; top: 0; right: -5px; background-color: #f2270c; color: #fff; font-size: 9px; width: 14px; height: 14px; border-radius: 7px; text-align: center; }
.c3-price { font-size: 14px; color: #f2270c; font-weight: bold; flex: 1; }
.btn-settle-v3 { background-color: #f2270c; padding: 6px 20px; border-radius: 20px; }
</style>

13
pages/mall/admin/docs/UNI_APP_X_PAGE_FIX_GUIDE.md
View File

@@ -23,7 +23,18 @@
- `768px - 1199px`: 固定 2 列 (`grid-template-columns: repeat(2, minmax(0, 1fr))`)。
- `< 768px`: 固定 1 列 (`grid-template-columns: repeat(1, minmax(0, 1fr))`)。
4. 使用 `minmax(0, 1fr)` 配分子项 `min-width: 0` 确保在任何容器宽度下网格不被撑爆。
- **强制规则**: 任何页面都不允许出现一行 3 个卡片的情况。
- **强制规则**: 任何页面都不允许出现一行 3 个卡片的情况。(注：除非是类似“商品分类”样式的预览展示，需遵循下文响应式规则)
#### **原因二十七：响应式预览网格布局 (装饰/设计模块规范)**
- **现象**: 在小屏下预览手机模型重叠或在大屏下留白过多。
- **解决方案**:
1. 使用 `display: grid` 代替 `flex-wrap`。
2. **三段式响应式**:
- `> 1250px`: `grid-template-columns: repeat(3, 1fr);` (一行 3 个)
- `700px ~ 1250px`: `grid-template-columns: repeat(2, 1fr);` (一行 2 个)
- `< 700px`: `grid-template-columns: 1fr;` (一行 1 个)
3. **Case Study**: `pages/mall/admin/decoration/category.uvue` (商品分类) 采用了此标准实现 1:1 视觉复刻。
#### **原因十三：侧边栏响应式断点与 Overlay 冲突 (严重体验红线)**