优化控制台样式

This commit is contained in:
Leo_Ding 2026-01-14 11:18:50 +08:00
parent 0f00347a00
commit 5895cc6b16
11 changed files with 260 additions and 270 deletions

View File

@ -607,11 +607,12 @@ const showUnbindAgreement = () => {
<style scoped> <style scoped>
.bank-card-container { .bank-card-container {
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 20px;
padding: 32px; padding: 32px;
background-color: #fff; background-color: #fff;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); border: 1px solid #f0f0f0;
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); */
min-height: 400px; min-height: 400px;
} }

View File

@ -17,7 +17,7 @@
<!-- 余额和充值部分 --> <!-- 余额和充值部分 -->
<div class="balance-section"> <div class="balance-section">
<!-- 余额卡片带充值方式 --> <!-- 余额卡片带充值方式 -->
<a-card class="balance-card" :bordered="false"> <a-card >
<div class="balance-header"> <div class="balance-header">
<div class="balance-info"> <div class="balance-info">
<div class="balance-amount"> <div class="balance-amount">
@ -87,7 +87,7 @@
</div> </div>
<!-- 充值记录 --> <!-- 充值记录 -->
<a-card class="records-card" title="充值记录"> <a-card title="充值记录">
<!-- 筛选条件 --> <!-- 筛选条件 -->
<div class="filter-section"> <div class="filter-section">
<a-range-picker v-model:value="dateRange" format="YYYY-MM-DD" placeholder="开始时间 - 结束时间" <a-range-picker v-model:value="dateRange" format="YYYY-MM-DD" placeholder="开始时间 - 结束时间"
@ -407,9 +407,9 @@ onMounted(() => {
<style scoped> <style scoped>
.recharge-page { .recharge-page {
padding: 24px; padding: 20px;
background-color: #fafafa; background-color: #ffffff;
min-height: 100vh; /* min-height: 100vh; */
} }
.breadcrumb { .breadcrumb {

View File

@ -1,6 +1,6 @@
<template> <template>
<div style="margin: 20px;">
<a-row :gutter="[18, 18]"> <a-row :gutter="[18, 18]">
<a-col :span="24"> <a-col :span="24">
<a-card title="开票记录"> <a-card title="开票记录">
<a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState" <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"
@ -74,7 +74,7 @@
</a-form> </a-form>
</a-card> </a-card>
</a-modal> </a-modal>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onBeforeMount, computed } from 'vue' import { ref, onBeforeMount, computed } from 'vue'
@ -94,7 +94,7 @@ import {
// }) // })
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination() const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
const visibleOpen = ref(false) const visibleOpen = ref(false)
const formData = ref({ type: 'a' }) const formData = ref<any>({ type: 'a' })
const formRef = ref(null) const formRef = ref(null)
const rules = computed(() => ({ const rules = computed(() => ({
title: [{ required: true, message: '请输入发票标题', trigger: 'blur' }], title: [{ required: true, message: '请输入发票标题', trigger: 'blur' }],

View File

@ -4,7 +4,7 @@
<a-row :gutter="24" class="asset-cards"> <a-row :gutter="24" class="asset-cards">
<!-- 左侧可用余额卡片 --> <!-- 左侧可用余额卡片 -->
<a-col :span="8"> <a-col :span="8">
<a-card :bordered="false" class="card balance-card" title="可用余额"> <a-card class="card balance-card" title="可用余额">
<template #extra><a-button type="link" size="small" class="fee-titleb" <template #extra><a-button type="link" size="small" class="fee-titleb"
@click="goToBills">查看消费明细</a-button></template> @click="goToBills">查看消费明细</a-button></template>
<div class="money">¥ {{ formatAmount(userInfo.balance || 0) }}</div> <div class="money">¥ {{ formatAmount(userInfo.balance || 0) }}</div>
@ -18,7 +18,7 @@
<!-- 右侧算力点和算力券卡片 --> <!-- 右侧算力点和算力券卡片 -->
<a-col :span="16"> <a-col :span="16">
<!-- 算力点卡片 --> <!-- 算力点卡片 -->
<a-card title="算力点" :bordered="false" class="card computing-card"> <a-card title="算力点" class="card computing-card">
<div class="computing-content"> <div class="computing-content">
<div class="computing-amount"> <div class="computing-amount">
<span class="amount-value">{{ '¥' + formatAmount(userInfo.computingPowerPoint || 0) <span class="amount-value">{{ '¥' + formatAmount(userInfo.computingPowerPoint || 0)
@ -32,7 +32,7 @@
</a-card> </a-card>
<!-- 算力券卡片 --> <!-- 算力券卡片 -->
<a-card title="算力券" :bordered="false" class="card coupon-card"> <a-card title="算力券" class="card coupon-card">
<div class="coupon-content"> <div class="coupon-content">
<div class="coupon-amount"> <div class="coupon-amount">
<span class="amount-value">{{ userInfo.voucherNum }}</span> <span class="amount-value">{{ userInfo.voucherNum }}</span>
@ -263,9 +263,8 @@ const handleOk = async () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.home-page { .home-page {
padding: 24px; padding: 20px;
background: #f0f2f5; background: #ffffff;
min-height: 100vh;
} }
.asset-cards { .asset-cards {
@ -280,7 +279,7 @@ const handleOk = async () => {
.card { .card {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
background: #fff; background: #fff;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
height: 100%; height: 100%;

View File

@ -1,4 +1,5 @@
<template> <template>
<div style="margin: 20px;">
<a-row :gutter="[24, 18]"> <a-row :gutter="[24, 18]">
<a-col :span="24"> <a-col :span="24">
<a-card> <a-card>
@ -327,6 +328,7 @@
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

View File

@ -1,4 +1,5 @@
<template> <template>
<div style="margin: 20px;">
<a-card title="我的消息"> <a-card title="我的消息">
<a-tabs v-model:activeKey="activeKey"> <a-tabs v-model:activeKey="activeKey">
<!-- 使用customRender来渲染带徽章的标签 --> <!-- 使用customRender来渲染带徽章的标签 -->
@ -6,12 +7,7 @@
<template #tab> <template #tab>
<span class="tab-label"> <span class="tab-label">
全部 全部
<a-badge <a-badge v-if="allUnreadCount > 0" :count="allUnreadCount" class="tab-badge" :offset="[5, -2]" />
v-if="allUnreadCount > 0"
:count="allUnreadCount"
class="tab-badge"
:offset="[5, -2]"
/>
</span> </span>
</template> </template>
</a-tab-pane> </a-tab-pane>
@ -20,12 +16,7 @@
<template #tab> <template #tab>
<span class="tab-label"> <span class="tab-label">
资金消息 资金消息
<a-badge <a-badge v-if="moneyUnreadCount > 0" :count="moneyUnreadCount" class="tab-badge" :offset="[5, -2]" />
v-if="moneyUnreadCount > 0"
:count="moneyUnreadCount"
class="tab-badge"
:offset="[5, -2]"
/>
</span> </span>
</template> </template>
</a-tab-pane> </a-tab-pane>
@ -34,12 +25,7 @@
<template #tab> <template #tab>
<span class="tab-label"> <span class="tab-label">
安全消息 安全消息
<a-badge <a-badge v-if="secureUnreadCount > 0" :count="secureUnreadCount" class="tab-badge" :offset="[5, -2]" />
v-if="secureUnreadCount > 0"
:count="secureUnreadCount"
class="tab-badge"
:offset="[5, -2]"
/>
</span> </span>
</template> </template>
</a-tab-pane> </a-tab-pane>
@ -48,26 +34,14 @@
<template #tab> <template #tab>
<span class="tab-label"> <span class="tab-label">
活动消息 活动消息
<a-badge <a-badge v-if="activeUnreadCount > 0" :count="activeUnreadCount" class="tab-badge" :offset="[5, -2]" />
v-if="activeUnreadCount > 0"
:count="activeUnreadCount"
class="tab-badge"
:offset="[5, -2]"
/>
</span> </span>
</template> </template>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
<a-table <a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
:columns="columns" :loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
:data-source="billData"
:pagination="pagination"
@change="handleTableChange"
:loading="loading"
class="bill-table"
:scroll="{ x: 1200 }"
bordered>
<!-- 消息类型列自定义渲染 --> <!-- 消息类型列自定义渲染 -->
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
@ -92,6 +66,7 @@
</a-table> </a-table>
</a-card> </a-card>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View File

@ -1,4 +1,5 @@
<template> <template>
<div style="margin: 20px;">
<a-card title="算力券管理"> <a-card title="算力券管理">
<div style="width: 300px;border: 1px solid #e8e8e8;line-height: 45px;border-radius: 5px;"> <div style="width: 300px;border: 1px solid #e8e8e8;line-height: 45px;border-radius: 5px;">
<div <div
@ -19,6 +20,7 @@
</a-table> </a-table>
</div> </div>
</a-card> </a-card>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onBeforeMount, h } from 'vue'; import { ref, onBeforeMount, h } from 'vue';

View File

@ -1,25 +1,35 @@
<template> <template>
<div style="margin: 20px;">
<a-card title="我的邀请"> <a-card title="我的邀请">
<div style="border-radius: 5px;display: flex;justify-content: space-between;border: 1px solid #e8e8e8;"> <div style="border-radius: 5px;display: flex;justify-content: space-between;border: 1px solid #e8e8e8;">
<div> <div>
<div style="font-size:18px;padding: 0 20px;margin-top: 20px;">累计奖金</div> <div style="font-size:18px;padding: 0 20px;margin-top: 20px;">累计奖金</div>
<div style="font-size:18px;font-weight: bold;padding: 0 20px;margin: 20px 0;">0.00</div> <div style="font-size:18px;font-weight: bold;padding: 0 20px;margin: 20px 0;">0.00</div>
<div style="display: flex;justify-content: space-between;align-items: center;gap: 60px;padding: 0 20px;line-height: 30px;"> <div
style="display: flex;justify-content: space-between;align-items: center;gap: 60px;padding: 0 20px;line-height: 30px;">
<div> <div>
<div>方式一复制邀请链接</div> <div>方式一复制邀请链接</div>
<div><span>http://example.com/invite/123456</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#1677ff;"><CopyOutlined /> </span></div> <div><span>http://example.com/invite/123456</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
style="color:#1677ff;">
<CopyOutlined />
</span></div>
</div> </div>
<div> <div>
<div>方式二复制邀请码</div> <div>方式二复制邀请码</div>
<div><span>http://example.com/invite/123456</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#1677ff;"><CopyOutlined /> </span></div> <div><span>http://example.com/invite/123456</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
style="color:#1677ff;">
<CopyOutlined />
</span></div>
</div> </div>
</div> </div>
</div> </div>
<div class="leftImg"> <div class="leftImg">
<div style="font-size:14px;padding: 0 20px;margin-top: 10px;text-align: right;color: #1677ff;">活动规则</div> <div style="font-size:14px;padding: 0 20px;margin-top: 10px;text-align: right;color: #1677ff;">活动规则
</div> </div>
</div> </div>
<div style="width: 100%;display: flex;justify-content: space-around;align-items: center;height: 150px;border: 1px solid #e8e8e8;margin-top: 20px;border-radius: 5px;"> </div>
<div
style="width: 100%;display: flex;justify-content: space-around;align-items: center;height: 150px;border: 1px solid #e8e8e8;margin-top: 20px;border-radius: 5px;">
<div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;"> <div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;">
<div>累计成功邀请人数</div> <div>累计成功邀请人数</div>
<div><span style="font-weight: bold;font-size: 18px;">0</span> </div> <div><span style="font-weight: bold;font-size: 18px;">0</span> </div>
@ -37,6 +47,7 @@
</a-table> </a-table>
</div> </div>
</a-card> </a-card>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';

View File

@ -163,8 +163,8 @@ onMounted(() => {
<style scoped> <style scoped>
.real-name-auth-page { .real-name-auth-page {
padding: 24px; padding: 20px;
background-color: #f5f7fa; background-color: #ffffff;
/* min-height: 100vh; */ /* min-height: 100vh; */
} }

View File

@ -294,7 +294,7 @@ onMounted(() => {
.image-table { .image-table {
background: white; background: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); // box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
@ -311,7 +311,7 @@ onMounted(() => {
margin-top: auto; margin-top: auto;
padding-top: 24px; padding-top: 24px;
text-align: right; text-align: right;
border-top: 1px solid #e8e8e8; // border-top: 1px solid #e8e8e8;
} }
} }

View File

@ -389,9 +389,9 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.instance-list { .instance-list {
padding: 24px; padding: 20px;
background: #f5f7fa; background: #ffffff;
min-height: calc(100vh - 48px); // min-height: calc(100vh - 48px);
} }
.header-section { .header-section {