调整部分页面样式布局

This commit is contained in:
2026-02-06 16:37:21 +08:00
parent 57846534bc
commit b6184b4fec
9 changed files with 109 additions and 126 deletions

View File

@@ -407,6 +407,11 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.layout-root { .layout-root {
--admin-page-padding-desktop: 12px;
--admin-page-padding-mobile: 8px;
--admin-section-gap: 12px;
--admin-card-padding: 16px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
@@ -491,10 +496,12 @@ onMounted(() => {
.content-inner { .content-inner {
min-height: calc(100vh - 120px); min-height: calc(100vh - 120px);
padding: 12px; padding: var(--admin-page-padding-desktop);
display: flex;
flex-direction: column;
} }
.content-inner.is-mobile { .content-inner.is-mobile {
padding: 8px; padding: var(--admin-page-padding-mobile);
} }
</style> </style>

View File

@@ -61,3 +61,36 @@
grid-template-columns: repeat(1, minmax(0, 1fr)) !important; grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
} }
} }
/* ===== 后台通用紧凑布局规范 (CRMEB 1:1) ===== */
/* 页面根容器: 去除各页面自带的 padding由 Layout 统一管理 */
.admin-page {
width: 100%;
display: flex;
flex-direction: column;
padding: 0 !important;
margin: 0 !important;
}
/* 垂直区块容器: 统一控制卡片、组件之间的间距 */
.admin-sections {
display: flex;
flex-direction: column;
gap: var(--admin-section-gap);
width: 100%;
}
/* 通用网格: 用于图表布局等 */
.admin-grid {
display: grid;
gap: var(--admin-section-gap);
width: 100%;
}
/* 统一卡片内部间距: 替代业务组件或页面内硬编码的 padding */
.admin-card {
padding: var(--admin-card-padding) !important;
background: #ffffff;
border-radius: 4px;
}

View File

@@ -1,16 +1,18 @@
<template> <template>
<AdminLayout currentPage="marketing"> <AdminLayout currentPage="marketing">
<view class="Page"> <view class="admin-page">
<view class="Header"> <view class="admin-sections">
<view class="admin-card Header">
<text class="Title">营销管理</text> <text class="Title">营销管理</text>
<text class="SubTitle">marketing-management</text> <text class="SubTitle">marketing-management</text>
</view> </view>
<view class="Card"> <view class="admin-card Card">
<text class="Label">页面参数query</text> <text class="Label">页面参数query</text>
<text class="Mono">{{ params }}</text> <text class="Mono">{{ params }}</text>
</view> </view>
</view> </view>
</view>
</AdminLayout> </AdminLayout>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
@@ -27,13 +29,7 @@ onLoad((options) => {
</script> </script>
<style> <style>
.Page {
padding: 24rpx;
}
.Header { .Header {
padding: 24rpx;
border-radius: 16rpx;
background: #ffffff;
} }
.Title { .Title {
font-size: 36rpx; font-size: 36rpx;
@@ -45,10 +41,6 @@ onLoad((options) => {
opacity: 0.7; opacity: 0.7;
} }
.Card { .Card {
margin-top: 24rpx;
padding: 24rpx;
border-radius: 16rpx;
background: #ffffff;
} }
.Label { .Label {
font-size: 26rpx; font-size: 26rpx;

View File

@@ -1,16 +1,18 @@
<template> <template>
<AdminLayout :currentPage="currentPage"> <AdminLayout :currentPage="currentPage">
<view class="Page"> <view class="admin-page">
<view class="Header"> <view class="admin-sections">
<view class="admin-card Header">
<text class="Title">订单</text> <text class="Title">订单</text>
<text class="SubTitle">order-management</text> <text class="SubTitle">order-management</text>
</view> </view>
<view class="Card"> <view class="admin-card Card">
<text class="Label">页面参数query</text> <text class="Label">页面参数query</text>
<text class="Mono">{{ params }}</text> <text class="Mono">{{ params }}</text>
</view> </view>
</view> </view>
</view>
</AdminLayout> </AdminLayout>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
@@ -33,13 +35,7 @@ onLoad((options: Record<string, string>) => {
</script> </script>
<style> <style>
.Page {
padding: 24rpx;
}
.Header { .Header {
padding: 24rpx;
border-radius: 16rpx;
background: #ffffff;
} }
.Title { .Title {
font-size: 36rpx; font-size: 36rpx;
@@ -51,10 +47,6 @@ onLoad((options: Record<string, string>) => {
opacity: 0.7; opacity: 0.7;
} }
.Card { .Card {
margin-top: 24rpx;
padding: 24rpx;
border-radius: 16rpx;
background: #ffffff;
} }
.Label { .Label {
font-size: 26rpx; font-size: 26rpx;

View File

@@ -1,7 +1,8 @@
<template> <template>
<view class="order-list-page"> <view class="admin-page">
<view class="admin-sections">
<!-- 筛选区域 --> <!-- 筛选区域 -->
<view class="filter-card"> <view class="admin-card filter-card">
<view class="filter-row"> <view class="filter-row">
<view class="filter-item"> <view class="filter-item">
<text class="label">订单类型:</text> <text class="label">订单类型:</text>
@@ -42,7 +43,7 @@
</view> </view>
<!-- 列表数据区域 --> <!-- 列表数据区域 -->
<view class="content-card"> <view class="admin-card content-card">
<!-- 状态 Tabs --> <!-- 状态 Tabs -->
<view class="status-tabs"> <view class="status-tabs">
<view <view
@@ -134,6 +135,7 @@
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
@@ -222,17 +224,7 @@ const orderData = ref([
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.order-list-page {
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
.filter-card { .filter-card {
background-color: #fff;
padding: 24px;
border-radius: 4px;
margin-bottom: 16px;
} }
.filter-row { .filter-row {
@@ -338,8 +330,6 @@ const orderData = ref([
.btn-default { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; } .btn-default { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
.content-card { .content-card {
background-color: #fff;
border-radius: 4px;
} }
.status-tabs { .status-tabs {

View File

@@ -1,7 +1,8 @@
<template> <template>
<view class="product-statistic-page"> <view class="admin-page">
<view class="admin-sections">
<!-- 商品概况头部 --> <!-- 商品概况头部 -->
<view class="page-header-row"> <view class="admin-card page-header-row">
<view class="title-wrap"> <view class="title-wrap">
<text class="page-title">商品概况</text> <text class="page-title">商品概况</text>
<view class="info-icon">?</view> <view class="info-icon">?</view>
@@ -18,7 +19,7 @@
<!-- 统计指标网格 (使用统一响应式网格) --> <!-- 统计指标网格 (使用统一响应式网格) -->
<view class="kpi-grid"> <view class="kpi-grid">
<view v-for="(item, index) in statItems" :key="index" class="stat-card"> <view v-for="(item, index) in statItems" :key="index" class="admin-card stat-card">
<view class="stat-main"> <view class="stat-main">
<view class="icon-box" :style="{ backgroundColor: item.bgColor }"> <view class="icon-box" :style="{ backgroundColor: item.bgColor }">
<text class="stat-emoji">{{ item.emoji }}</text> <text class="stat-emoji">{{ item.emoji }}</text>
@@ -41,7 +42,7 @@
</view> </view>
<!-- 图表卡片 --> <!-- 图表卡片 -->
<view class="chart-card"> <view class="admin-card chart-card">
<view class="chart-header"> <view class="chart-header">
<view class="legend-wrap"> <view class="legend-wrap">
<view class="legend-item"><view class="dot purple"></view><text>商品浏览量</text></view> <view class="legend-item"><view class="dot purple"></view><text>商品浏览量</text></view>
@@ -59,7 +60,7 @@
</view> </view>
<!-- 商品排行 --> <!-- 商品排行 -->
<view class="ranking-card"> <view class="admin-card ranking-card">
<view class="ranking-header"> <view class="ranking-header">
<text class="ranking-title">商品排行</text> <text class="ranking-title">商品排行</text>
<view class="ranking-filters"> <view class="ranking-filters">
@@ -109,6 +110,7 @@
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
@@ -314,18 +316,11 @@ function initChart() {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.product-statistic-page {
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
.page-header-row { .page-header-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px;
} }
.title-wrap { .title-wrap {
@@ -369,9 +364,6 @@ function initChart() {
/* stat-grid 已废弃,由全局 kpi-grid 接管 */ /* stat-grid 已废弃,由全局 kpi-grid 接管 */
.stat-card { .stat-card {
background: #fff;
border-radius: 8px;
padding: 20px;
min-width: 0; min-width: 0;
} }
@@ -412,9 +404,6 @@ function initChart() {
.arrow { font-size: 10px; margin-left: 2px; } .arrow { font-size: 10px; margin-left: 2px; }
.chart-card { .chart-card {
background: #fff;
border-radius: 8px;
padding: 24px;
} }
.chart-header { .chart-header {

View File

@@ -1,6 +1,7 @@
<template> <template>
<view class="system-settings-page"> <view class="admin-page">
<view class="settings-card"> <view class="admin-sections">
<view class="admin-card settings-card">
<!-- 顶部导航标签 (1:1 复刻 CRMEB: 横向排列) --> <!-- 顶部导航标签 (1:1 复刻 CRMEB: 横向排列) -->
<view class="tabs-container"> <view class="tabs-container">
<scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false" :enable-flex="true"> <scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false" :enable-flex="true">
@@ -226,6 +227,7 @@
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
@@ -277,8 +279,9 @@ const handleSubmit = () => {
</script> </script>
<style scoped> <style scoped>
.system-settings-page { padding: 20px; background-color: #f5f7f9; min-height: 100vh; } .settings-card {
.settings-card { background-color: #fff; border-radius: 4px; padding: 20px; box-shadow: 0 1px 4px rgba(0,21,41,0.08); } box-shadow: 0 1px 4px rgba(0,21,41,0.08);
}
/* 核心修复:确保 Tabs 横向排列并且可以滑动 */ /* 核心修复:确保 Tabs 横向排列并且可以滑动 */
.tabs-container { margin-bottom: 30px; border-bottom: 1px solid #e8eaec; width: 100%; overflow: hidden; } .tabs-container { margin-bottom: 30px; border-bottom: 1px solid #e8eaec; width: 100%; overflow: hidden; }

View File

@@ -1,7 +1,8 @@
<template> <template>
<view class="user-list-page"> <view class="admin-page">
<view class="admin-sections">
<!-- 筛选面板 --> <!-- 筛选面板 -->
<view class="filter-card"> <view class="admin-card filter-card">
<view class="filter-row"> <view class="filter-row">
<view class="filter-item"> <view class="filter-item">
<text class="label">用户搜索:</text> <text class="label">用户搜索:</text>
@@ -39,7 +40,7 @@
</view> </view>
<!-- 内容卡片 --> <!-- 内容卡片 -->
<view class="content-card"> <view class="admin-card content-card">
<!-- 平台切换 Tabs --> <!-- 平台切换 Tabs -->
<view class="tabs-row"> <view class="tabs-row">
<view <view
@@ -143,6 +144,7 @@
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
@@ -183,18 +185,8 @@ function onDetail(user: any) {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.user-list-page {
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
/* 筛选卡片 */ /* 筛选卡片 */
.filter-card { .filter-card {
background: #fff;
border-radius: 4px;
padding: 24px;
margin-bottom: 16px;
} }
.filter-row { .filter-row {
@@ -307,8 +299,6 @@ function onDetail(user: any) {
/* 内容卡片 */ /* 内容卡片 */
.content-card { .content-card {
background: #fff;
border-radius: 4px;
padding: 0; padding: 0;
overflow: visible; /* 必须 visible 以显示下拉菜单 */ overflow: visible; /* 必须 visible 以显示下拉菜单 */
} }

View File

@@ -1,7 +1,8 @@
<template> <template>
<view class="statistic-page"> <view class="admin-page">
<view class="admin-sections">
<!-- 筛选栏 --> <!-- 筛选栏 -->
<view class="filter-card"> <view class="admin-card filter-card">
<view class="filter-item"> <view class="filter-item">
<text class="filter-label">用户渠道:</text> <text class="filter-label">用户渠道:</text>
<view class="select-box"> <view class="select-box">
@@ -25,7 +26,7 @@
</view> </view>
<!-- 用户概况卡片区 (使用 6-2-1 响应式网格) --> <!-- 用户概况卡片区 (使用 6-2-1 响应式网格) -->
<view class="section-card"> <view class="admin-card section-card">
<view class="section-header"> <view class="section-header">
<text class="section-title">用户概况</text> <text class="section-title">用户概况</text>
<text class="info-icon">❓</text> <text class="info-icon">❓</text>
@@ -76,6 +77,7 @@
</view> </view>
</view> </view>
</view> </view>
</view>
</template> </template>
<script setup lang="uts"> <script setup lang="uts">
@@ -114,21 +116,11 @@ function onExport() {
</script> </script>
<style scoped> <style scoped>
.statistic-page {
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
.filter-card { .filter-card {
background-color: #fff;
border-radius: 4px;
padding: 16px 24px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 32px; gap: 32px;
margin-bottom: 16px;
} }
.filter-item { .filter-item {
@@ -200,10 +192,6 @@ function onExport() {
} }
.section-card { .section-card {
background-color: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
} }
@@ -296,8 +284,7 @@ function onExport() {
.analysis-row { .analysis-row {
display: grid; display: grid;
grid-template-columns: 2fr 1fr; grid-template-columns: 2fr 1fr;
gap: 20px; gap: var(--admin-section-gap);
margin-top: 16px;
width: 100%; width: 100%;
} }