💄 优化存储管理卡片布局对齐
前端优化: - 使用 flexbox 布局确保卡片等高 - 按钮自动对齐到卡片底部 - 添加 align-items: stretch 确保卡片高度一致 - 使用 margin-top: auto 将按钮区域推到底部 视觉改进: - 两个存储卡片高度保持一致 - 操作按钮在同一水平线上对齐 - 整体布局更加美观和协调 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1254,8 +1254,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px;">
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; align-items: stretch;">
|
||||||
<div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04);">
|
<div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||||
<div style="font-weight: 700; color: #0f172a; display: flex; gap: 8px; align-items: center;">
|
<div style="font-weight: 700; color: #0f172a; display: flex; gap: 8px; align-items: center;">
|
||||||
<i class="fas fa-hard-drive"></i> 本地存储
|
<i class="fas fa-hard-drive"></i> 本地存储
|
||||||
@@ -1275,12 +1275,14 @@
|
|||||||
}"></div>
|
}"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="margin-top: auto;">
|
||||||
<button class="btn btn-primary" style="width: 100%; border-radius: 10px;" :disabled="storageType === 'local' || storageSwitching" @click="switchStorage('local')">
|
<button class="btn btn-primary" style="width: 100%; border-radius: 10px;" :disabled="storageType === 'local' || storageSwitching" @click="switchStorage('local')">
|
||||||
<i class="fas fa-bolt"></i> 用本地存储
|
<i class="fas fa-bolt"></i> 用本地存储
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04);">
|
<div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||||
<div style="font-weight: 700; color: #0f172a; display: flex; gap: 8px; align-items: center;">
|
<div style="font-weight: 700; color: #0f172a; display: flex; gap: 8px; align-items: center;">
|
||||||
<i class="fas fa-server"></i> SFTP 存储
|
<i class="fas fa-server"></i> SFTP 存储
|
||||||
@@ -1294,6 +1296,7 @@
|
|||||||
<div v-else style="font-size: 13px; color: #b45309; background: #fff7ed; border: 1px dashed #fcd34d; padding: 10px; border-radius: 8px; margin-bottom: 10px;">
|
<div v-else style="font-size: 13px; color: #b45309; background: #fff7ed; border: 1px dashed #fcd34d; padding: 10px; border-radius: 8px; margin-bottom: 10px;">
|
||||||
<i class="fas fa-exclamation-circle"></i> 先填写 SFTP 连接信息再切换
|
<i class="fas fa-exclamation-circle"></i> 先填写 SFTP 连接信息再切换
|
||||||
</div>
|
</div>
|
||||||
|
<div style="margin-top: auto;">
|
||||||
<button
|
<button
|
||||||
class="btn"
|
class="btn"
|
||||||
:class="user?.has_ftp_config ? 'btn-primary' : 'btn-secondary'"
|
:class="user?.has_ftp_config ? 'btn-primary' : 'btn-secondary'"
|
||||||
@@ -1310,6 +1313,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: 12px; padding: 10px 12px; background: #f1f5f9; border-radius: 10px; font-size: 13px; color: #475569;">
|
<div style="margin-top: 12px; padding: 10px 12px; background: #f1f5f9; border-radius: 10px; font-size: 13px; color: #475569;">
|
||||||
<i class="fas fa-info-circle" style="color: #4b5fc9;"></i>
|
<i class="fas fa-info-circle" style="color: #4b5fc9;"></i>
|
||||||
|
|||||||
Reference in New Issue
Block a user