优化控制台样式

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>
.bank-card-container {
max-width: 100%;
margin: 0 auto;
margin: 20px;
padding: 32px;
background-color: #fff;
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;
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,28 +1,38 @@
<template>
<div style="margin: 20px;">
<a-card title="我的邀请">
<div style="border-radius: 5px;display: flex;justify-content: space-between;border: 1px solid #e8e8e8;">
<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="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><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><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 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 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>累计成功邀请人数</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>
</div>
<div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;">
<div>累计获得奖金</div>
@ -37,6 +47,7 @@
</a-table>
</div>
</a-card>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

View File

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

View File

@ -294,7 +294,7 @@ onMounted(() => {
.image-table {
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;
overflow: hidden;
height: 100%;
@ -311,7 +311,7 @@ onMounted(() => {
margin-top: auto;
padding-top: 24px;
text-align: right;
border-top: 1px solid #e8e8e8;
// border-top: 1px solid #e8e8e8;
}
}

View File

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