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-02 21:45:59 +08:00
parent f4af5dded9
commit 93b42a277a
19 changed files with 2785 additions and 672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
pages/mall/admin/user/MemberConfig.uvue Normal file
View File

@@ -0,0 +1,341 @@
<template>
<view class="user-config-page">
<view class="config-card">
<!-- 顶部 Tab 切换 -->
<view class="config-tabs">
<view
class="tab-item"
:class="{ active: activeTab === 0 }"
@click="activeTab = 0"
>
<text>用户等级配置</text>
</view>
<view
class="tab-item"
:class="{ active: activeTab === 1 }"
@click="activeTab = 1"
>
<text>新用户设置</text>
</view>
</view>
<view class="config-content">
<!-- 用户等级配置表单 -->
<view v-if="activeTab === 0" class="config-form">
<view class="form-item">
<view class="item-label">
<text class="label-text">用户等级启用：</text>
</view>
<view class="item-content">
<radio-group class="radio-group" @change="onLevelEnabledChange">
<label class="radio-label">
<radio value="1" :checked="levelConfig.enabled === '1'" color="#2f54eb" />
<text class="radio-text">开启</text>
</label>
<label class="radio-label">
<radio value="0" :checked="levelConfig.enabled === '0'" color="#2f54eb" />
<text class="radio-text">关闭</text>
</label>
</radio-group>
<text class="item-desc">商城用户等级功能开启关闭</text>
</view>
</view>
<view class="form-item">
<view class="item-label">
<text class="label-text">订单赠送经验：</text>
</view>
<view class="item-content">
<input class="config-input" v-model="levelConfig.orderExp" type="number" />
<text class="item-desc">下单赠送用户经验比例 (实际支付1元赠送多少经验)</text>
</view>
</view>
<view class="form-item">
<view class="item-label">
<text class="label-text">邀新赠送经验：</text>
</view>
<view class="item-content">
<input class="config-input" v-model="levelConfig.inviteExp" type="number" />
<text class="item-desc">邀请一个新用户赠送用户经验值</text>
</view>
</view>
<view class="form-actions">
<button class="submit-btn" type="primary" @click="onSubmit">提交</button>
</view>
</view>
<!-- 新用户设置表单 -->
<view v-else class="config-form">
<view class="form-item">
<view class="item-label">
<text class="label-text">用户默认头像：</text>
</view>
<view class="item-content">
<view class="avatar-upload">
<image class="avatar-preview" src="https://img.crmeb.com/crmeb_demo/75211.png" mode="aspectFill" />
<view class="upload-mask">
<text class="upload-icon">+</text>
</view>
</view>
<text class="item-desc">内用户默认头像，后台添加用户以及用户登录的默认头像显示，尺寸(80*80)</text>
</view>
</view>
<view class="form-item">
<view class="item-label">
<text class="label-text">强制手机号登录：</text>
</view>
<view class="item-content">
<radio-group class="radio-group" @change="onForcePhoneChange">
<label class="radio-label">
<radio value="1" :checked="newUserConfig.forcePhone === '1'" color="#2f54eb" />
<text class="radio-text">强制</text>
</label>
<label class="radio-label">
<radio value="0" :checked="newUserConfig.forcePhone === '0'" color="#2f54eb" />
<text class="radio-text">不强制</text>
</label>
</radio-group>
<text class="item-desc">用户在授权之后强制绑定手机号，可以实现用户多端统一</text>
</view>
</view>
<view class="form-item">
<view class="item-label">
<text class="label-text">赠送余额(元)：</text>
</view>
<view class="item-content">
<input class="config-input" v-model="newUserConfig.giftBalance" type="number" />
<text class="item-desc">新用户奖励金额，必须大于等于0，0为不赠送</text>
</view>
</view>
<view class="form-item">
<view class="item-label">
<text class="label-text">赠送积分：</text>
</view>
<view class="item-content">
<input class="config-input" v-model="newUserConfig.giftIntegral" type="number" />
<text class="item-desc">新用户奖励积分，必须大于等于0，0为不赠送</text>
</view>
</view>
<view class="form-actions">
<button class="submit-btn" type="primary" @click="onSubmit">提交</button>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const activeTab = ref(0)
const levelConfig = ref({
enabled: '1',
orderExp: '1',
inviteExp: '100'
})
const newUserConfig = ref({
forcePhone: '1',
giftBalance: '88888',
giftIntegral: '88888'
})
function onLevelEnabledChange(e: any) {
levelConfig.value.enabled = e.detail.value
}
function onForcePhoneChange(e: any) {
newUserConfig.value.forcePhone = e.detail.value
}
function onSubmit() {
uni.showLoading({ title: '提交中...' })
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '修改成功',
icon: 'success'
})
}, 800)
}
</script>
<style scoped lang="scss">
.user-config-page {
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
.config-card {
background-color: #fff;
border-radius: 4px;
overflow: hidden;
}
.config-tabs {
display: flex;
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
padding: 0 24px;
}
.tab-item {
padding: 16px 20px;
cursor: pointer;
position: relative;
text {
font-size: 15px;
color: #666;
}
&.active {
text {
color: #1890ff;
font-weight: 500;
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #1890ff;
}
}
}
.config-content {
padding: 32px 24px;
}
.config-form {
max-width: 800px;
}
.form-item {
display: flex;
flex-direction: row;
margin-bottom: 30px;
align-items: flex-start;
}
.item-label {
width: 160px;
padding-top: 6px;
display: flex;
justify-content: flex-end;
margin-right: 24px;
}
.label-text {
font-size: 14px;
color: #333;
}
.item-content {
flex: 1;
}
.radio-group {
display: flex;
flex-direction: row;
gap: 32px;
margin-bottom: 8px;
}
.radio-label {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
.radio-text {
font-size: 14px;
color: #333;
}
.config-input {
width: 400px;
height: 36px;
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 0 12px;
font-size: 14px;
margin-bottom: 8px;
}
.item-desc {
display: block;
font-size: 12px;
color: #bfbfbf;
}
.avatar-upload {
width: 60px;
height: 60px;
border: 1px solid #d9d9d9;
border-radius: 4px;
position: relative;
margin-bottom: 12px;
overflow: hidden;
}
.avatar-preview {
width: 100%;
height: 100%;
}
.upload-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
&:hover {
opacity: 1;
}
}
.upload-icon {
color: #fff;
font-size: 24px;
}
.form-actions {
margin-top: 48px;
padding-left: 184px;
}
.submit-btn {
width: 72px;
height: 32px;
background-color: #2f54eb;
border-color: #2f54eb;
color: #fff;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
margin: 0;
}
</style>

306
pages/mall/admin/user/Statistic.uvue Normal file
View File

@@ -0,0 +1,306 @@
<template>
<view class="statistic-page">
<!-- 筛选栏 -->
<view class="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>
</view>
</view>
<view class="filter-item">
<text class="filter-label">选择时间：</text>
<view class="date-picker-box">
<text class="date-icon">📅</text>
<text class="date-text">2026/01/04 - 2026/02/02</text>
</view>
</view>
<view class="filter-btns">
<button class="btn primary" @click="onSearch">查询</button>
<button class="btn" @click="onExport">导出</button>
</view>
</view>
<!-- 用户概况卡片区 -->
<view class="section-card">
<view class="section-header">
<text class="section-title">用户概况</text>
<text class="info-icon">ⓘ</text>
</view>
<view class="kpi-row">
<view class="kpi-card" v-for="item in kpiData" :key="item.title">
<view class="kpi-icon-box" :style="{ backgroundColor: item.bg }">
<text class="kpi-icon">{{ item.icon }}</text>
</view>
<view class="kpi-content">
<text class="kpi-label">{{ item.title }}</text>
<text class="kpi-value">{{ item.value }}</text>
<view class="kpi-meta">
<text class="meta-label">环比增长：</text>
<text class="meta-value" :class="item.trend">{{ item.percent }} {{ item.trend === 'up' ? '▲' : '▼' }}</text>
</view>
</view>
</view>
</view>
<!-- 图表区 -->
<view class="chart-container">
<view class="chart-header">
<view class="header-left"></view>
<view class="header-right">
<text class="download-icon">📥</text>
</view>
</view>
<AnalyticsMultiLineChart
:xLabels="chartData.x"
:series="chartData.series"
:height="450"
/>
</view>
</view>
<!-- 地域分布与性别比例 -->
<view class="analysis-row">
<view class="map-col">
<AnalyticsUserMapTable />
</view>
<view class="gender-col">
<AnalyticsUserGenderSection />
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
import AnalyticsMultiLineChart from '@/components/analytics/AnalyticsMultiLineChart.uvue'
import AnalyticsUserMapTable from '@/components/analytics/AnalyticsUserMapTable.uvue'
import AnalyticsUserGenderSection from '@/components/analytics/AnalyticsUserGenderSection.uvue'
const kpiData = [
{ title: '累计用户', value: '80834', percent: '0.84%', trend: 'up', icon: '👤', bg: '#f3e8ff' },
{ title: '访客数', value: '1138', percent: '1.04%', trend: 'down', icon: '👤', bg: '#e0f2fe' },
{ title: '浏览量', value: '9519', percent: '2.34%', trend: 'down', icon: '👁️', bg: '#dcfce7' },
{ title: '新增用户数', value: '680', percent: '4.36%', trend: 'down', icon: '👤', bg: '#ffedd5' },
{ title: '成交用户数', value: '132', percent: '11.86%', trend: 'up', icon: '👤', bg: '#f3e8ff' },
{ title: '付费会员数', value: '79', percent: '7.05%', trend: 'down', icon: '💎', bg: '#f3e8ff' }
]
const chartData = {
x: ['01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02'],
series: [
{ name: '新增用户数', color: '#1890ff', data: [40, 30, 25, 30, 22, 10, 20, 32, 28, 15, 8, 12, 18, 22, 15, 12, 25, 30, 28, 25, 35, 20, 18, 22, 20, 15, 10, 8, 15, 38] },
{ name: '访客数', color: '#52c41a', data: [70, 75, 65, 55, 65, 50, 45, 35, 50, 68, 72, 65, 50, 48, 55, 65, 75, 62, 58, 85, 70, 55, 48, 58, 65, 72, 68, 60, 45, 50] },
{ name: '浏览量', color: '#fa8c16', data: [520, 500, 420, 280, 580, 180, 220, 100, 180, 450, 500, 400, 320, 340, 150, 280, 450, 320, 440, 460, 320, 260, 320, 280, 380, 400, 320, 330, 250, 300] },
{ name: '成交用户数', color: '#722ed1', data: [15, 12, 10, 8, 18, 5, 8, 4, 6, 12, 15, 10, 8, 9, 4, 10, 12, 8, 10, 12, 8, 6, 10, 8, 12, 14, 10, 8, 5, 8] },
{ name: '新增付费用户数', color: '#f5222d', data: [5, 4, 3, 2, 6, 1, 2, 1, 2, 4, 5, 3, 2, 3, 1, 3, 4, 2, 3, 4, 2, 2, 3, 2, 4, 5, 3, 2, 1, 3] }
]
}
function onSearch() {
uni.showToast({ title: '搜索中...' })
}
function onExport() {
uni.showToast({ title: '导出中...' })
}
</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 {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.filter-label {
font-size: 14px;
color: #333;
}
.select-box {
width: 180px;
height: 32px;
border: 1px solid #d9d9d9;
border-radius: 2px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 12px;
}
.select-text { font-size: 14px; color: #333; }
.select-arrow { font-size: 10px; color: #bfbfbf; }
.date-picker-box {
min-width: 240px;
height: 32px;
border: 1px solid #d9d9d9;
border-radius: 2px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 12px;
gap: 8px;
}
.date-icon { font-size: 14px; }
.date-text { font-size: 14px; color: #333; }
.filter-btns {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.btn {
height: 32px;
padding: 0 16px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
background-color: #fff;
border: 1px solid #d9d9d9;
margin: 0;
}
.btn.primary {
background-color: #1890ff;
border-color: #1890ff;
color: #fff;
}
.section-card {
background-color: #fff;
border-radius: 4px;
padding: 20px;
}
.section-header {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.section-title {
font-size: 16px;
font-weight: 500;
color: #262626;
}
.info-icon {
font-size: 14px;
color: #bfbfbf;
}
.kpi-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
}
.kpi-card {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
padding: 8px;
}
.kpi-icon-box {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.kpi-icon { font-size: 20px; }
.kpi-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.kpi-label { font-size: 14px; color: #8c8c8c; }
.kpi-value { font-size: 24px; font-weight: 500; color: #262626; }
.kpi-meta {
display: flex;
flex-direction: row;
align-items: center;
font-size: 12px;
}
.meta-label { color: #8c8c8c; }
.meta-value.up { color: #ff4d4f; }
.meta-value.down { color: #52c41a; }
.chart-container {
border-top: 1px solid #f0f0f0;
padding-top: 24px;
}
.chart-header {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 24px;
}
.download-icon {
font-size: 18px;
color: #8c8c8c;
cursor: pointer;
}
.analysis-row {
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 16px;
width: 100%;
}
.map-col {
flex: 7;
}
.gender-col {
flex: 3;
}
</style>

456
pages/mall/admin/user/list.uvue
View File

@@ -1,15 +1,123 @@
<template>
<view class="page-container">
<view class="page-header">
<text class="page-title">用户管理</text>
<text class="page-subtitle">Component: UserList</text>
<view class="user-list-page">
<!-- 筛选面板 -->
<view class="filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">用户搜索：</text>
<view class="input-group">
<view class="compact-select">
<text>请选择</text>
<text class="arrow">▼</text>
</view>
<input class="filter-input" placeholder="请输入用户" />
</view>
</view>
<view class="filter-item">
<text class="label">用户等级：</text>
<view class="filter-select">
<text class="select-placeholder">请选择用户等级</text>
<text class="arrow">▼</text>
</view>
</view>
<view class="filter-item">
<text class="label">用户分组：</text>
<view class="filter-select">
<text class="select-placeholder">请选择用户分组</text>
<text class="arrow">▼</text>
</view>
</view>
<view class="filter-btns">
<button class="btn primary" @click="onSearch">搜索</button>
<button class="btn" @click="onReset">重置</button>
<text class="expand-btn">展开 ∨</text>
</view>
</view>
</view>
<view class="page-content">
<view class="placeholder-card">
<text class="placeholder-title">页面占位</text>
<text class="placeholder-desc">该功能模块正在开发中</text>
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
<!-- 内容卡片 -->
<view class="content-card">
<!-- 平台切换 Tabs -->
<view class="tabs-row">
<view
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ active: activeTab === index }"
@click="activeTab = index"
>
<text>{{ tab }}</text>
</view>
</view>
<!-- 操作按钮行 -->
<view class="action-bar">
<button class="btn primary small" @click="onAddUser">添加用户</button>
<button class="btn ghost small">发送优惠券</button>
<button class="btn ghost small">发送图文消息</button>
<button class="btn ghost small">批量设置分组</button>
<button class="btn ghost small">批量设置标签</button>
<button class="btn ghost small">导出</button>
</view>
<!-- 用户列表表格 -->
<view class="table-container">
<!-- 表头 -->
<view class="table-header">
<view class="col col-check"><checkbox :checked="isAllChecked" /></view>
<view class="col col-expand"></view>
<view class="col col-id"><text>用户ID</text></view>
<view class="col col-avatar"><text>头像</text></view>
<view class="col col-name"><text>姓名</text></view>
<view class="col col-member"><text>付费会员</text></view>
<view class="col col-level"><text>用户等级</text></view>
<view class="col col-group"><text>分组</text></view>
<view class="col col-spread"><text>分销等级</text></view>
<view class="col col-phone"><text>手机号</text></view>
<view class="col col-type"><text>用户类型</text></view>
<view class="col col-balance sortable">
<text>余额</text>
<text class="sort-icon">↕</text>
</view>
<view class="col col-ops"><text>操作</text></view>
</view>
<!-- 表格内容 -->
<view class="table-body">
<view v-for="user in userList" :key="user.id" class="table-row">
<view class="col col-check"><checkbox :checked="user.checked" /></view>
<view class="col col-expand"><text class="expand-arrow">›</text></view>
<view class="col col-id"><text>{{ user.id }}</text></view>
<view class="col col-avatar">
<image class="avatar-img" :src="user.avatar" mode="aspectFill" />
</view>
<view class="col col-name">
<text class="name-text">{{ user.nickname }}</text>
</view>
<view class="col col-member">
<text :class="user.isMember === '是' ? 'status-yes' : 'status-no'">{{ user.isMember }}</text>
</view>
<view class="col col-level"><text>{{ user.level }}</text></view>
<view class="col col-group"><text>{{ user.group }}</text></view>
<view class="col col-spread"><text>{{ user.spreadLevel }}</text></view>
<view class="col col-phone"><text>{{ user.phone }}</text></view>
<view class="col col-type"><text>{{ user.userType }}</text></view>
<view class="col col-balance"><text>{{ user.balance }}</text></view>
<view class="col col-ops">
<text class="op-link" @click="onDetail(user)">详情</text>
<view class="op-divider"></view>
<text class="op-link more">更多 ⌵</text>
</view>
</view>
</view>
</view>
<!-- 分页区域 (模拟) -->
<view class="pagination">
<text class="page-info">共 80834 条数据</text>
</view>
</view>
</view>
@@ -18,64 +126,310 @@
<script setup lang="uts">
import { ref } from 'vue'
// TODO: 实现 用户管理 的具体功能
const loading = ref<boolean>(false)
const activeTab = ref(0)
const tabs = ['全部', '微信公众号', '微信小程序', 'H5', 'PC', 'APP']
const isAllChecked = ref(false)
const userList = ref([
{ id: '77414', avatar: 'https://img.crmeb.com/crmeb_demo/77414.png', nickname: '199****0268', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '199****0268', userType: '公众号', balance: '88888.00', checked: false },
{ id: '75311', avatar: 'https://img.crmeb.com/crmeb_demo/75311.png', nickname: 'wljbhg', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100002.00', checked: false },
{ id: '75305', avatar: 'https://img.crmeb.com/crmeb_demo/75305.png', nickname: '相见欢', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75296', avatar: 'https://img.crmeb.com/crmeb_demo/75296.png', nickname: '..', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75293', avatar: 'https://img.crmeb.com/crmeb_demo/75293.png', nickname: '钟(钏)华', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75289', avatar: 'https://img.crmeb.com/crmeb_demo/75289.png', nickname: '小二上酒', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75257', avatar: 'https://img.crmeb.com/crmeb_demo/75257.png', nickname: '5+7', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75226', avatar: 'https://img.crmeb.com/crmeb_demo/75226.png', nickname: '慢步前行', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75211', avatar: 'https://img.crmeb.com/crmeb_demo/75211.png', nickname: '难得糊涂', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false }
])
function onSearch() {
uni.showToast({ title: '搜索中...', icon: 'none' })
}
function onReset() {
uni.showToast({ title: '已重置', icon: 'none' })
}
function onAddUser() {
uni.showToast({ title: '添加用户', icon: 'none' })
}
function onDetail(user: any) {
uni.showToast({ title: '查看用户: ' + user.id, icon: 'none' })
}
</script>
<style scoped lang="scss">
.page-container {
padding: 20px;
.user-list-page {
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
background: #f5f5f5;
}
.page-header {
margin-bottom: 20px;
}
.page-title {
display: block;
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.page-subtitle {
display: block;
font-size: 14px;
color: #999;
}
.page-content {
/* 筛选卡片 */
.filter-card {
background: #fff;
border-radius: 4px;
padding: 24px;
margin-bottom: 16px;
}
.placeholder-card {
text-align: center;
padding: 60px 20px;
.filter-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 24px;
}
.placeholder-title {
display: block;
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
}
.label {
font-size: 14px;
color: #333;
width: 70px;
}
.input-group {
display: flex;
flex-direction: row;
border: 1px solid #d9d9d9;
border-radius: 2px;
height: 32px;
width: 260px;
}
.compact-select {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 12px;
border-right: 1px solid #d9d9d9;
background: #fafafa;
text { font-size: 14px; color: #666; }
.arrow { font-size: 10px; margin-left: 4px; color: #bfbfbf; }
}
.filter-input {
flex: 1;
height: 30px;
padding: 0 12px;
font-size: 14px;
}
.filter-select {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1px solid #d9d9d9;
border-radius: 2px;
height: 32px;
width: 220px;
padding: 0 12px;
background: #fff;
}
.select-placeholder { font-size: 14px; color: #bfbfbf; }
.arrow { font-size: 10px; color: #bfbfbf; }
.filter-btns {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.btn {
height: 32px;
padding: 0 16px;
font-size: 14px;
border-radius: 2px;
border: 1px solid #d9d9d9;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 0;
}
.btn.primary {
background: #2f54eb;
border-color: #2f54eb;
color: #fff;
}
.btn.ghost {
color: #2f54eb;
border-color: #2f54eb;
background: #fff;
}
.btn.small {
height: 28px;
padding: 0 12px;
font-size: 13px;
}
.expand-btn {
font-size: 14px;
color: #2f54eb;
cursor: pointer;
}
/* 内容卡片 */
.content-card {
background: #fff;
border-radius: 4px;
padding: 0;
overflow: hidden;
}
/* Tabs */
.tabs-row {
display: flex;
flex-direction: row;
padding: 0 24px;
border-bottom: 1px solid #f0f0f0;
}
.tab-item {
padding: 16px 20px;
cursor: pointer;
position: relative;
text { font-size: 15px; color: #666; }
&.active {
text { color: #2f54eb; font-weight: 500; }
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #2f54eb;
}
}
}
/* 操作栏 */
.action-bar {
padding: 16px 24px;
display: flex;
flex-direction: row;
gap: 12px;
}
/* 表格 */
.table-container {
padding: 0 24px 24px;
}
.table-header {
display: flex;
flex-direction: row;
background: #f8faff;
border-bottom: 1px solid #f0f0f0;
padding: 12px 0;
}
.table-row {
display: flex;
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
padding: 16px 0;
align-items: center;
&:hover {
background: #fafafa;
}
}
.col {
padding: 0 8px;
display: flex;
align-items: center;
font-size: 14px;
color: #333;
}
.col-check { width: 40px; justify-content: center; }
.col-expand { width: 30px; justify-content: center; }
.col-id { width: 80px; }
.col-avatar { width: 80px; justify-content: center; }
.col-name { width: 140px; }
.col-member { width: 90px; justify-content: center; }
.col-level { width: 90px; justify-content: center; }
.col-group { width: 110px; justify-content: center; }
.col-spread { width: 110px; justify-content: center; }
.col-phone { width: 130px; }
.col-type { width: 90px; }
.col-balance { width: 110px; }
.col-ops { flex: 1; min-width: 120px; justify-content: flex-end; padding-right: 16px; }
.table-header .col {
color: #5c5c5c;
font-weight: 500;
}
.sort-icon {
font-size: 12px;
margin-left: 4px;
color: #bfbfbf;
}
.expand-arrow {
color: #bfbfbf;
font-size: 18px;
font-weight: 600;
color: #666;
margin-bottom: 12px;
}
.placeholder-desc {
display: block;
.avatar-img {
width: 40px;
height: 40px;
border-radius: 4px;
background: #f5f5f5;
}
.name-text {
font-weight: 400;
}
.status-yes { color: #52c41a; }
.status-no { color: #ff4d4f; }
.op-link {
color: #2f54eb;
cursor: pointer;
font-size: 14px;
&.more {
margin-left: 4px;
}
}
.op-divider {
width: 1px;
height: 14px;
background: #e8e8e8;
margin: 0 8px;
}
.pagination {
padding: 16px 24px;
border-top: 1px solid #f0f0f0;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.page-info {
font-size: 14px;
color: #999;
margin-bottom: 8px;
}
.placeholder-info {
display: block;
font-size: 12px;
color: #1890ff;
}
</style>