完善页面
This commit is contained in:
@@ -1,23 +1,62 @@
|
||||
<template>
|
||||
<template>
|
||||
<view class="admin-page-container">
|
||||
<view class="page-card">
|
||||
<view class="page-header">
|
||||
<text class="page-title">系统存储配置</text>
|
||||
<view class="page-header"><view class="breadcrumb"><text class="bc-item">设置</text><text class="bc-sep">/</text><text class="bc-item">接口配置</text><text class="bc-sep">/</text><text class="bc-item active">系统存储配置</text></view></view>
|
||||
<view class="content-card">
|
||||
<view class="tabs-header">
|
||||
<scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false">
|
||||
<view class="tabs-list">
|
||||
<view class="tab-item active"><text class="tab-text">储存配置</text></view>
|
||||
<view class="tab-item"><text class="tab-text">七牛云储存</text></view>
|
||||
<view class="tab-item"><text class="tab-text">阿里云储存</text></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="page-content">
|
||||
<text class="placeholder-text">系统存储配置 页面开发中...</text>
|
||||
<view class="config-view">
|
||||
<view class="notice-box">
|
||||
<text class="notice-text">上传图片时会生成缩略图\nx</text>
|
||||
</view>
|
||||
<view class="form-content">
|
||||
<view class="form-row">
|
||||
<view class="form-label">存储方式:</view>
|
||||
<view class="form-input-box">
|
||||
<radio-group class="form-radio-group" @change="onStorageTypeChange">
|
||||
<label class="radio-label"><radio value="local" :checked="form.storageType == 'local'" color="#2d8cf0" /><text class="radio-text">本地存储</text></label>
|
||||
<label class="radio-label"><radio value="qiniu" :checked="form.storageType == 'qiniu'" color="#2d8cf0" /><text class="radio-text">七牛云存储</text></label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-actions"><button class="save-btn" type="primary" @click="handleSave">保存</button></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, reactive } from 'vue'
|
||||
const form = reactive({ storageType: 'local' })
|
||||
const onStorageTypeChange = (e : any) => { form.storageType = e.detail.value }
|
||||
const handleSave = () => { uni.showToast({ title: '保存成功' }) }
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-page-container { padding: 20px; background-color: #f5f7f9; min-height: 100vh; }
|
||||
.page-card { background-color: #fff; border-radius: 4px; padding: 20px; box-shadow: 0 1px 4px rgba(0,21,41,0.08); }
|
||||
.page-header { margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; padding-bottom: 15px; }
|
||||
.page-title { font-size: 16px; font-weight: bold; color: #303133; }
|
||||
.placeholder-text { font-size: 14px; color: #909399; }
|
||||
.admin-page-container { min-height: 100vh; background-color: #f5f7f9; padding: 20px; }
|
||||
.breadcrumb { display: flex; flex-direction: row; margin-bottom: 20px; }
|
||||
.bc-item { font-size: 14px; color: #999; }
|
||||
.bc-item.active { color: #333; }
|
||||
.bc-sep { margin: 0 8px; color: #ccc; }
|
||||
.content-card { background-color: #fff; border-radius: 4px; }
|
||||
.tabs-header { border-bottom: 1px solid #f0f0f0; }
|
||||
.tabs-scroll { white-space: nowrap; width: 100%; }
|
||||
.tabs-list { display: flex; flex-direction: row; padding: 0 20px; }
|
||||
.tab-item { padding: 15px 20px; cursor: pointer; }
|
||||
.tab-text { font-size: 14px; color: #666; }
|
||||
.tab-item.active { border-bottom: 2px solid #2d8cf0; }
|
||||
.tab-item.active .tab-text { color: #2d8cf0; font-weight: bold; }
|
||||
.config-view { padding: 24px; }
|
||||
.notice-box { background-color: #fffbe6; border: 1px solid #ffe58f; border-radius: 4px; padding: 16px; margin-bottom: 30px; }
|
||||
.notice-text { font-size: 13px; color: #faad14; line-height: 1.8; }
|
||||
.form-content { padding-left: 20px; }
|
||||
.form-row { display: flex; flex-direction: row; margin-bottom: 30px; align-items: center; }
|
||||
.form-label { width: 140px; font-size: 14px; color: #333; text-align: right; margin-right: 20px; }
|
||||
.form-actions { margin-top: 40px; padding-left: 160px; }
|
||||
.save-btn { width: 80px; height: 36px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 14px; line-height: 36px; text-align: center; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user