1078 lines
30 KiB
Plaintext
1078 lines
30 KiB
Plaintext
<template>
|
||
<AdminLayout current-page="system">
|
||
<view class="system-settings">
|
||
<!-- 页面标题 -->
|
||
<view class="page-header">
|
||
<text class="page-title">系统设置</text>
|
||
<text class="page-subtitle">管理系统基础配置和参数</text>
|
||
</view>
|
||
|
||
<!-- Tab 切换栏 -->
|
||
<view class="tab-bar">
|
||
<view
|
||
v-for="tab in tabs"
|
||
:key="tab.key"
|
||
class="tab-item"
|
||
:class="{ 'active': activeTab === tab.key }"
|
||
@click="switchTab(tab.key)"
|
||
>
|
||
<text class="iconfont tab-icon">{{ tab.icon }}</text>
|
||
<text class="tab-title">{{ tab.title }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 设置分类导航 -->
|
||
<view class="settings-nav">
|
||
<view
|
||
v-for="category in settingCategories"
|
||
:key="category.id"
|
||
class="nav-item"
|
||
:class="{ 'active': activeCategory === category.id }"
|
||
@click="setActiveCategory(category.id)"
|
||
>
|
||
<text class="nav-icon">{{ category.icon }}</text>
|
||
<text class="nav-text">{{ category.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 设置内容区域 -->
|
||
<view class="settings-content">
|
||
<!-- 基本设置 -->
|
||
<view v-if="activeCategory === 'basic'" class="setting-section">
|
||
<view class="section-header">
|
||
<text class="section-title">基本设置</text>
|
||
<text class="section-desc">网站基本信息和显示设置</text>
|
||
</view>
|
||
|
||
<view class="setting-items">
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">网站名称</text>
|
||
<text class="item-desc">显示在网站标题和页面的网站名称</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.siteName"
|
||
class="setting-input"
|
||
placeholder="请输入网站名称"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">网站描述</text>
|
||
<text class="item-desc">网站简介，用于SEO优化</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<textarea
|
||
v-model="settings.siteDescription"
|
||
class="setting-textarea"
|
||
placeholder="请输入网站描述"
|
||
:maxlength="200"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">网站Logo</text>
|
||
<text class="item-desc">网站Logo图片，建议尺寸200x60px</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<view class="image-upload">
|
||
<view class="upload-area" @click="handleLogoUpload">
|
||
<text class="iconfont icon-upload"></text>
|
||
<text class="upload-text">点击上传Logo</text>
|
||
</view>
|
||
<view v-if="settings.siteLogo" class="image-preview">
|
||
<image :src="settings.siteLogo" class="preview-image" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">网站状态</text>
|
||
<text class="item-desc">控制网站是否开放访问</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<view class="switch-wrapper">
|
||
<switch
|
||
:checked="settings.siteStatus"
|
||
@change="handleSiteStatusChange"
|
||
color="#1890ff"
|
||
/>
|
||
<text class="switch-text">{{ settings.siteStatus ? '开放' : '维护中' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">维护提示信息</text>
|
||
<text class="item-desc">网站维护时显示的提示信息</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<textarea
|
||
v-model="settings.maintenanceMessage"
|
||
class="setting-textarea"
|
||
placeholder="请输入维护提示信息"
|
||
:disabled="!settings.siteStatus"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 安全设置 -->
|
||
<view v-else-if="activeCategory === 'security'" class="setting-section">
|
||
<view class="section-header">
|
||
<text class="section-title">安全设置</text>
|
||
<text class="section-desc">账号安全和登录相关配置</text>
|
||
</view>
|
||
|
||
<view class="setting-items">
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">登录失败锁定</text>
|
||
<text class="item-desc">连续登录失败后锁定账号</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<view class="switch-wrapper">
|
||
<switch
|
||
:checked="settings.loginLockEnabled"
|
||
@change="settings.loginLockEnabled = $event.detail.value"
|
||
color="#1890ff"
|
||
/>
|
||
<text class="switch-text">{{ settings.loginLockEnabled ? '启用' : '禁用' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">允许失败次数</text>
|
||
<text class="item-desc">连续登录失败的最大次数</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.maxLoginAttempts"
|
||
class="setting-input small"
|
||
type="number"
|
||
:disabled="!settings.loginLockEnabled"
|
||
min="3"
|
||
max="10"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">锁定时间(分钟)</text>
|
||
<text class="item-desc">账号锁定的持续时间</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.lockDuration"
|
||
class="setting-input small"
|
||
type="number"
|
||
:disabled="!settings.loginLockEnabled"
|
||
min="5"
|
||
max="1440"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">密码复杂度要求</text>
|
||
<text class="item-desc">用户密码必须包含的字符类型</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<view class="checkbox-group">
|
||
<view class="checkbox-item">
|
||
<checkbox
|
||
:checked="settings.passwordRequireUppercase"
|
||
@change="settings.passwordRequireUppercase = $event.detail.value"
|
||
/>
|
||
<text>大写字母</text>
|
||
</view>
|
||
<view class="checkbox-item">
|
||
<checkbox
|
||
:checked="settings.passwordRequireLowercase"
|
||
@change="settings.passwordRequireLowercase = $event.detail.value"
|
||
/>
|
||
<text>小写字母</text>
|
||
</view>
|
||
<view class="checkbox-item">
|
||
<checkbox
|
||
:checked="settings.passwordRequireNumbers"
|
||
@change="settings.passwordRequireNumbers = $event.detail.value"
|
||
/>
|
||
<text>数字</text>
|
||
</view>
|
||
<view class="checkbox-item">
|
||
<checkbox
|
||
:checked="settings.passwordRequireSymbols"
|
||
@change="settings.passwordRequireSymbols = $event.detail.value"
|
||
/>
|
||
<text>特殊字符</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">密码最小长度</text>
|
||
<text class="item-desc">密码的最小字符长度</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.minPasswordLength"
|
||
class="setting-input small"
|
||
type="number"
|
||
min="6"
|
||
max="32"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">会话超时时间</text>
|
||
<text class="item-desc">用户登录后的会话有效期(分钟)</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.sessionTimeout"
|
||
class="setting-input small"
|
||
type="number"
|
||
min="15"
|
||
max="1440"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 邮件设置 -->
|
||
<view v-else-if="activeCategory === 'email'" class="setting-section">
|
||
<view class="section-header">
|
||
<text class="section-title">邮件设置</text>
|
||
<text class="section-desc">邮件服务器配置和模板设置</text>
|
||
</view>
|
||
|
||
<view class="setting-items">
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">SMTP服务器</text>
|
||
<text class="item-desc">邮件发送服务器地址</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.smtpHost"
|
||
class="setting-input"
|
||
placeholder="smtp.example.com"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">SMTP端口</text>
|
||
<text class="item-desc">邮件服务器端口号</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.smtpPort"
|
||
class="setting-input small"
|
||
type="number"
|
||
placeholder="587"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">发件人邮箱</text>
|
||
<text class="item-desc">系统邮件的发件人地址</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.smtpUsername"
|
||
class="setting-input"
|
||
placeholder="noreply@example.com"
|
||
type="email"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">授权密码</text>
|
||
<text class="item-desc">邮箱授权密码或应用密码</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.smtpPassword"
|
||
class="setting-input"
|
||
placeholder="请输入授权密码"
|
||
type="password"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">启用SSL</text>
|
||
<text class="item-desc">是否启用SSL加密连接</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<view class="switch-wrapper">
|
||
<switch
|
||
:checked="settings.smtpSSL"
|
||
@change="settings.smtpSSL = $event.detail.value"
|
||
color="#1890ff"
|
||
/>
|
||
<text class="switch-text">{{ settings.smtpSSL ? '启用' : '禁用' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">测试邮件</text>
|
||
<text class="item-desc">发送测试邮件验证配置是否正确</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<button class="btn-secondary" @click="sendTestEmail">
|
||
发送测试邮件
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 支付设置 -->
|
||
<view v-else-if="activeCategory === 'payment'" class="setting-section">
|
||
<view class="section-header">
|
||
<text class="section-title">支付设置</text>
|
||
<text class="section-desc">第三方支付平台配置</text>
|
||
</view>
|
||
|
||
<view class="setting-items">
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">支付宝支付</text>
|
||
<text class="item-desc">启用支付宝在线支付</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<view class="switch-wrapper">
|
||
<switch
|
||
:checked="settings.alipayEnabled"
|
||
@change="settings.alipayEnabled = $event.detail.value"
|
||
color="#1890ff"
|
||
/>
|
||
<text class="switch-text">{{ settings.alipayEnabled ? '启用' : '禁用' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">支付宝应用ID</text>
|
||
<text class="item-desc">支付宝开放平台的应用ID</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.alipayAppId"
|
||
class="setting-input"
|
||
placeholder="请输入应用ID"
|
||
:disabled="!settings.alipayEnabled"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">微信支付</text>
|
||
<text class="item-desc">启用微信支付</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<view class="switch-wrapper">
|
||
<switch
|
||
:checked="settings.wechatPayEnabled"
|
||
@change="settings.wechatPayEnabled = $event.detail.value"
|
||
color="#1890ff"
|
||
/>
|
||
<text class="switch-text">{{ settings.wechatPayEnabled ? '启用' : '禁用' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">微信商户号</text>
|
||
<text class="item-desc">微信支付商户号</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<input
|
||
v-model="settings.wechatMerchantId"
|
||
class="setting-input"
|
||
placeholder="请输入商户号"
|
||
:disabled="!settings.wechatPayEnabled"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">货币单位</text>
|
||
<text class="item-desc">系统使用的货币单位</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<picker
|
||
mode="selector"
|
||
:range="currencyOptions"
|
||
:value="settings.currency"
|
||
@change="settings.currency = $event.detail.value"
|
||
>
|
||
<view class="setting-select">
|
||
<text>{{ currencyOptions[settings.currency] }}</text>
|
||
<text class="iconfont icon-down"></text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 其他设置 -->
|
||
<view v-else-if="activeCategory === 'other'" class="setting-section">
|
||
<view class="section-header">
|
||
<text class="section-title">其他设置</text>
|
||
<text class="section-desc">其他系统配置选项</text>
|
||
</view>
|
||
|
||
<view class="setting-items">
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">数据备份</text>
|
||
<text class="item-desc">定期自动备份系统数据</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<view class="switch-wrapper">
|
||
<switch
|
||
:checked="settings.autoBackupEnabled"
|
||
@change="settings.autoBackupEnabled = $event.detail.value"
|
||
color="#1890ff"
|
||
/>
|
||
<text class="switch-text">{{ settings.autoBackupEnabled ? '启用' : '禁用' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">备份频率</text>
|
||
<text class="item-desc">自动备份的时间间隔</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<picker
|
||
mode="selector"
|
||
:range="backupFrequencyOptions"
|
||
:value="settings.backupFrequency"
|
||
@change="settings.backupFrequency = $event.detail.value"
|
||
:disabled="!settings.autoBackupEnabled"
|
||
>
|
||
<view class="setting-select">
|
||
<text>{{ backupFrequencyOptions[settings.backupFrequency] }}</text>
|
||
<text class="iconfont icon-down"></text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">系统日志</text>
|
||
<text class="item-desc">启用详细的系统操作日志</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<view class="switch-wrapper">
|
||
<switch
|
||
:checked="settings.systemLoggingEnabled"
|
||
@change="settings.systemLoggingEnabled = $event.detail.value"
|
||
color="#1890ff"
|
||
/>
|
||
<text class="switch-text">{{ settings.systemLoggingEnabled ? '启用' : '禁用' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="setting-item">
|
||
<view class="item-info">
|
||
<text class="item-title">API限流</text>
|
||
<text class="item-desc">限制API请求频率，防止滥用</text>
|
||
</view>
|
||
<view class="item-control">
|
||
<view class="switch-wrapper">
|
||
<switch
|
||
:checked="settings.apiRateLimitingEnabled"
|
||
@change="settings.apiRateLimitingEnabled = $event.detail.value"
|
||
color="#1890ff"
|
||
/>
|
||
<text class="switch-text">{{ settings.apiRateLimitingEnabled ? '启用' : '禁用' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 保存设置 -->
|
||
<view class="settings-footer">
|
||
<view class="action-buttons">
|
||
<button class="btn-secondary" @click="resetSettings">
|
||
重置设置
|
||
</button>
|
||
<button class="btn-primary" @click="saveSettings">
|
||
保存设置
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</AdminLayout>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref } from 'vue'
|
||
import AdminLayout from '@/layouts/admin/index.uvue'
|
||
|
||
// Tab 相关
|
||
const activeTab = ref('basic')
|
||
const tabs = ref([
|
||
{ key: 'basic', title: '基本设置', icon: 'icon-basic' },
|
||
{ key: 'security', title: '安全设置', icon: 'icon-security' },
|
||
{ key: 'email', title: '邮件设置', icon: 'icon-email' }
|
||
])
|
||
|
||
// 设置分类
|
||
const settingCategories = [
|
||
{ id: 'basic', name: '基本设置', icon: '🏠' },
|
||
{ id: 'security', name: '安全设置', icon: '🔒' },
|
||
{ id: 'email', name: '邮件设置', icon: '📧' },
|
||
{ id: 'payment', name: '支付设置', icon: '💳' },
|
||
{ id: 'other', name: '其他设置', icon: '⚙️' }
|
||
]
|
||
|
||
// 响应式数据
|
||
const activeCategory = ref('basic')
|
||
|
||
// 系统设置
|
||
const settings = ref({
|
||
// 基本设置
|
||
siteName: 'Mall电商平台',
|
||
siteDescription: '专业的多角色电商解决方案',
|
||
siteLogo: '',
|
||
siteStatus: true,
|
||
maintenanceMessage: '系统正在维护中，请稍后访问',
|
||
|
||
// 安全设置
|
||
loginLockEnabled: true,
|
||
maxLoginAttempts: 5,
|
||
lockDuration: 30,
|
||
passwordRequireUppercase: true,
|
||
passwordRequireLowercase: true,
|
||
passwordRequireNumbers: true,
|
||
passwordRequireSymbols: false,
|
||
minPasswordLength: 8,
|
||
sessionTimeout: 120,
|
||
|
||
// 邮件设置
|
||
smtpHost: 'smtp.qq.com',
|
||
smtpPort: 587,
|
||
smtpUsername: '',
|
||
smtpPassword: '',
|
||
smtpSSL: true,
|
||
|
||
// 支付设置
|
||
alipayEnabled: true,
|
||
alipayAppId: '',
|
||
wechatPayEnabled: true,
|
||
wechatMerchantId: '',
|
||
currency: 0,
|
||
|
||
// 其他设置
|
||
autoBackupEnabled: true,
|
||
backupFrequency: 0,
|
||
systemLoggingEnabled: true,
|
||
apiRateLimitingEnabled: true
|
||
})
|
||
|
||
// 选项数据
|
||
const currencyOptions = ['人民币(CNY)', '美元(USD)', '欧元(EUR)']
|
||
const backupFrequencyOptions = ['每日', '每周', '每月']
|
||
|
||
// 方法
|
||
const setActiveCategory = (categoryId: string) => {
|
||
activeCategory.value = categoryId
|
||
}
|
||
|
||
const handleSiteStatusChange = (e: any) => {
|
||
settings.value.siteStatus = e.detail.value
|
||
}
|
||
|
||
const handleLogoUpload = () => {
|
||
uni.showToast({
|
||
title: 'Logo上传功能开发中',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
const sendTestEmail = () => {
|
||
if (!settings.value.smtpHost || !settings.value.smtpUsername) {
|
||
uni.showToast({
|
||
title: '请先配置邮件服务器信息',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.showToast({
|
||
title: '发送测试邮件...',
|
||
icon: 'loading',
|
||
duration: 2000
|
||
})
|
||
|
||
// TODO: 实现发送测试邮件逻辑
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '测试邮件发送成功',
|
||
icon: 'success'
|
||
})
|
||
}, 2000)
|
||
}
|
||
|
||
const resetSettings = () => {
|
||
uni.showModal({
|
||
title: '确认重置',
|
||
content: '确定要重置所有设置为默认值吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// TODO: 实现重置设置逻辑
|
||
uni.showToast({
|
||
title: '设置已重置',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const saveSettings = () => {
|
||
// 表单验证
|
||
if (!settings.value.siteName.trim()) {
|
||
uni.showToast({
|
||
title: '请输入网站名称',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// TODO: 实现保存设置逻辑
|
||
console.log('保存设置:', settings.value)
|
||
|
||
uni.showToast({
|
||
title: '设置保存成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
|
||
// 生命周期
|
||
// Tab 切换方法
|
||
const switchTab = (tabKey: string) => {
|
||
activeTab.value = tabKey
|
||
}
|
||
|
||
// 页面生命周期
|
||
onLoad((options: any) => {
|
||
// 处理页面参数，切换到对应的tab
|
||
if (options && options.tab) {
|
||
if (['basic', 'security', 'email'].includes(options.tab)) {
|
||
activeTab.value = options.tab
|
||
} else {
|
||
activeTab.value = 'basic'
|
||
}
|
||
} else {
|
||
activeTab.value = 'basic'
|
||
}
|
||
|
||
console.log('系统设置页面加载，参数:', options)
|
||
})
|
||
|
||
onMounted(() => {
|
||
// 初始化设置数据
|
||
console.log('系统设置页面初始化')
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* Tab 栏样式 */
|
||
.tab-bar {
|
||
display: flex;
|
||
background-color: #ffffff;
|
||
border-radius: 8rpx;
|
||
padding: 8rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
padding: 16rpx 24rpx;
|
||
border-radius: 6rpx;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
background-color: #f5f5f5;
|
||
color: #666666;
|
||
}
|
||
|
||
.tab-item:hover {
|
||
background-color: #e8e8e8;
|
||
}
|
||
|
||
.tab-item.active {
|
||
background-color: #1890ff;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.tab-icon {
|
||
font-size: 16rpx;
|
||
}
|
||
|
||
.tab-title {
|
||
font-size: 14rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.system-settings {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.page-title {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.page-subtitle {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.settings-nav {
|
||
display: flex;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx;
|
||
margin-right: 20rpx;
|
||
border-radius: 8rpx;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
min-width: 120rpx;
|
||
}
|
||
|
||
.nav-item:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.nav-item.active {
|
||
background-color: #1890ff;
|
||
color: #fff;
|
||
}
|
||
|
||
.nav-item:not(.active):hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.nav-icon {
|
||
font-size: 32rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.nav-text {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.settings-content {
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.setting-section {
|
||
min-height: 400rpx;
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 30rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 8rpx;
|
||
display: block;
|
||
}
|
||
|
||
.section-desc {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.setting-items {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.setting-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.setting-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.item-info {
|
||
flex: 2;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 6rpx;
|
||
display: block;
|
||
}
|
||
|
||
.item-desc {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.item-control {
|
||
flex: 1;
|
||
min-width: 200rpx;
|
||
}
|
||
|
||
.setting-input {
|
||
width: 100%;
|
||
padding: 16rpx 20rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.setting-input.small {
|
||
width: 150rpx;
|
||
}
|
||
|
||
.setting-textarea {
|
||
width: 100%;
|
||
min-height: 80rpx;
|
||
padding: 16rpx 20rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
resize: vertical;
|
||
}
|
||
|
||
.setting-select {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16rpx 20rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
background-color: #fff;
|
||
cursor: pointer;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.switch-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.switch-text {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.checkbox-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.checkbox-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.image-upload {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.upload-area {
|
||
width: 120rpx;
|
||
height: 60rpx;
|
||
border: 2rpx dashed #ddd;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
color: #999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 22rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.preview-image {
|
||
width: 120rpx;
|
||
height: 60rpx;
|
||
border-radius: 8rpx;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.settings-footer {
|
||
margin-top: 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 30rpx;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #1890ff;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 8rpx;
|
||
padding: 16rpx 40rpx;
|
||
font-size: 28rpx;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background-color: #fff;
|
||
color: #666;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
padding: 16rpx 40rpx;
|
||
font-size: 28rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.iconfont {
|
||
font-family: 'iconfont';
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media screen and (max-width: 750rpx) {
|
||
.settings-nav {
|
||
padding: 15rpx;
|
||
}
|
||
|
||
.nav-item {
|
||
padding: 15rpx 20rpx;
|
||
margin-right: 10rpx;
|
||
min-width: 100rpx;
|
||
}
|
||
|
||
.setting-item {
|
||
flex-direction: column;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.item-info {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.item-control {
|
||
min-width: auto;
|
||
}
|
||
|
||
.setting-input.small {
|
||
width: 100%;
|
||
}
|
||
|
||
.checkbox-group {
|
||
flex-direction: column;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.action-buttons {
|
||
flex-direction: column;
|
||
gap: 15rpx;
|
||
}
|
||
|
||
.btn-primary,
|
||
.btn-secondary {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style> |