调整部分页面样式布局
This commit is contained in:
@@ -1,14 +1,16 @@
|
||||
<template>
|
||||
<AdminLayout currentPage="marketing">
|
||||
<view class="Page">
|
||||
<view class="Header">
|
||||
<text class="Title">营销管理</text>
|
||||
<text class="SubTitle">marketing-management</text>
|
||||
</view>
|
||||
<view class="admin-page">
|
||||
<view class="admin-sections">
|
||||
<view class="admin-card Header">
|
||||
<text class="Title">营销管理</text>
|
||||
<text class="SubTitle">marketing-management</text>
|
||||
</view>
|
||||
|
||||
<view class="Card">
|
||||
<text class="Label">页面参数(query)</text>
|
||||
<text class="Mono">{{ params }}</text>
|
||||
<view class="admin-card Card">
|
||||
<text class="Label">页面参数(query)</text>
|
||||
<text class="Mono">{{ params }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
@@ -27,13 +29,7 @@ onLoad((options) => {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.Page {
|
||||
padding: 24rpx;
|
||||
}
|
||||
.Header {
|
||||
padding: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
.Title {
|
||||
font-size: 36rpx;
|
||||
@@ -45,10 +41,6 @@ onLoad((options) => {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.Card {
|
||||
margin-top: 24rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
.Label {
|
||||
font-size: 26rpx;
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
<template>
|
||||
<AdminLayout :currentPage="currentPage">
|
||||
<view class="Page">
|
||||
<view class="Header">
|
||||
<text class="Title">订单</text>
|
||||
<text class="SubTitle">order-management</text>
|
||||
</view>
|
||||
<view class="admin-page">
|
||||
<view class="admin-sections">
|
||||
<view class="admin-card Header">
|
||||
<text class="Title">订单</text>
|
||||
<text class="SubTitle">order-management</text>
|
||||
</view>
|
||||
|
||||
<view class="Card">
|
||||
<text class="Label">页面参数(query)</text>
|
||||
<text class="Mono">{{ params }}</text>
|
||||
<view class="admin-card Card">
|
||||
<text class="Label">页面参数(query)</text>
|
||||
<text class="Mono">{{ params }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
@@ -33,13 +35,7 @@ onLoad((options: Record<string, string>) => {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.Page {
|
||||
padding: 24rpx;
|
||||
}
|
||||
.Header {
|
||||
padding: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
.Title {
|
||||
font-size: 36rpx;
|
||||
@@ -51,10 +47,6 @@ onLoad((options: Record<string, string>) => {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.Card {
|
||||
margin-top: 24rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
.Label {
|
||||
font-size: 26rpx;
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<view class="order-list-page">
|
||||
<!-- 筛选区域 -->
|
||||
<view class="filter-card">
|
||||
<view class="filter-row">
|
||||
<view class="admin-page">
|
||||
<view class="admin-sections">
|
||||
<!-- 筛选区域 -->
|
||||
<view class="admin-card filter-card">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="label">订单类型:</text>
|
||||
<view class="mock-select">
|
||||
@@ -42,7 +43,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 列表数据区域 -->
|
||||
<view class="content-card">
|
||||
<view class="admin-card content-card">
|
||||
<!-- 状态 Tabs -->
|
||||
<view class="status-tabs">
|
||||
<view
|
||||
@@ -133,6 +134,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -222,17 +224,7 @@ const orderData = ref([
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.order-list-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
@@ -338,8 +330,6 @@ const orderData = ref([
|
||||
.btn-default { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
|
||||
|
||||
.content-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<view class="product-statistic-page">
|
||||
<!-- 商品概况头部 -->
|
||||
<view class="page-header-row">
|
||||
<view class="admin-page">
|
||||
<view class="admin-sections">
|
||||
<!-- 商品概况头部 -->
|
||||
<view class="admin-card page-header-row">
|
||||
<view class="title-wrap">
|
||||
<text class="page-title">商品概况</text>
|
||||
<view class="info-icon">?</view>
|
||||
@@ -18,7 +19,7 @@
|
||||
|
||||
<!-- 统计指标网格 (使用统一响应式网格) -->
|
||||
<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="icon-box" :style="{ backgroundColor: item.bgColor }">
|
||||
<text class="stat-emoji">{{ item.emoji }}</text>
|
||||
@@ -41,7 +42,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 图表卡片 -->
|
||||
<view class="chart-card">
|
||||
<view class="admin-card chart-card">
|
||||
<view class="chart-header">
|
||||
<view class="legend-wrap">
|
||||
<view class="legend-item"><view class="dot purple"></view><text>商品浏览量</text></view>
|
||||
@@ -59,7 +60,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 商品排行 -->
|
||||
<view class="ranking-card">
|
||||
<view class="admin-card ranking-card">
|
||||
<view class="ranking-header">
|
||||
<text class="ranking-title">商品排行</text>
|
||||
<view class="ranking-filters">
|
||||
@@ -108,6 +109,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -314,18 +316,11 @@ function initChart() {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.product-statistic-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
@@ -369,9 +364,6 @@ function initChart() {
|
||||
|
||||
/* stat-grid 已废弃,由全局 kpi-grid 接管 */
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -412,9 +404,6 @@ function initChart() {
|
||||
.arrow { font-size: 10px; margin-left: 2px; }
|
||||
|
||||
.chart-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<view class="system-settings-page">
|
||||
<view class="settings-card">
|
||||
<!-- 顶部导航标签 (1:1 复刻 CRMEB: 横向排列) -->
|
||||
<view class="tabs-container">
|
||||
<view class="admin-page">
|
||||
<view class="admin-sections">
|
||||
<view class="admin-card settings-card">
|
||||
<!-- 顶部导航标签 (1:1 复刻 CRMEB: 横向排列) -->
|
||||
<view class="tabs-container">
|
||||
<scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false" :enable-flex="true">
|
||||
<view class="tabs-bar">
|
||||
<view
|
||||
@@ -225,6 +226,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -277,8 +279,9 @@ const handleSubmit = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.system-settings-page { padding: 20px; background-color: #f5f7f9; min-height: 100vh; }
|
||||
.settings-card { background-color: #fff; border-radius: 4px; padding: 20px; box-shadow: 0 1px 4px rgba(0,21,41,0.08); }
|
||||
.settings-card {
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,0.08);
|
||||
}
|
||||
|
||||
/* 核心修复:确保 Tabs 横向排列并且可以滑动 */
|
||||
.tabs-container { margin-bottom: 30px; border-bottom: 1px solid #e8eaec; width: 100%; overflow: hidden; }
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<view class="user-list-page">
|
||||
<!-- 筛选面板 -->
|
||||
<view class="filter-card">
|
||||
<view class="filter-row">
|
||||
<view class="admin-page">
|
||||
<view class="admin-sections">
|
||||
<!-- 筛选面板 -->
|
||||
<view class="admin-card filter-card">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="label">用户搜索:</text>
|
||||
<view class="input-group">
|
||||
@@ -39,7 +40,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 内容卡片 -->
|
||||
<view class="content-card">
|
||||
<view class="admin-card content-card">
|
||||
<!-- 平台切换 Tabs -->
|
||||
<view class="tabs-row">
|
||||
<view
|
||||
@@ -143,6 +144,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
@@ -183,18 +185,8 @@ function onDetail(user: any) {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-list-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 筛选卡片 */
|
||||
.filter-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
@@ -307,8 +299,6 @@ function onDetail(user: any) {
|
||||
|
||||
/* 内容卡片 */
|
||||
.content-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
overflow: visible; /* 必须 visible 以显示下拉菜单 */
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<view class="statistic-page">
|
||||
<!-- 筛选栏 -->
|
||||
<view class="filter-card">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">用户渠道:</text>
|
||||
<view class="admin-page">
|
||||
<view class="admin-sections">
|
||||
<!-- 筛选栏 -->
|
||||
<view class="admin-card filter-card">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">用户渠道:</text>
|
||||
<view class="select-box">
|
||||
<text class="select-text">全部</text>
|
||||
<text class="select-arrow">▼</text>
|
||||
@@ -25,7 +26,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 用户概况卡片区 (使用 6-2-1 响应式网格) -->
|
||||
<view class="section-card">
|
||||
<view class="admin-card section-card">
|
||||
<view class="section-header">
|
||||
<text class="section-title">用户概况</text>
|
||||
<text class="info-icon">❓</text>
|
||||
@@ -66,13 +67,14 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 地域分布与性别比例 -->
|
||||
<view class="analysis-row">
|
||||
<view class="map-col">
|
||||
<AnalyticsUserMapTable />
|
||||
</view>
|
||||
<view class="gender-col">
|
||||
<AnalyticsUserGenderSection />
|
||||
<!-- 地域分布与性别比例 -->
|
||||
<view class="analysis-row">
|
||||
<view class="map-col">
|
||||
<AnalyticsUserMapTable />
|
||||
</view>
|
||||
<view class="gender-col">
|
||||
<AnalyticsUserGenderSection />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -114,21 +116,11 @@ function onExport() {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.statistic-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
@@ -200,10 +192,6 @@ function onExport() {
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
@@ -296,8 +284,7 @@ function onExport() {
|
||||
.analysis-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 16px;
|
||||
gap: var(--admin-section-gap);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user