优化控制台样式
This commit is contained in:
parent
0f00347a00
commit
5895cc6b16
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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> <span style="color:#1677ff;"><CopyOutlined /> </span></div>
|
||||
<div><span>http://example.com/invite/123456</span> <span
|
||||
style="color:#1677ff;">
|
||||
<CopyOutlined />
|
||||
</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>方式二:复制邀请码</div>
|
||||
<div><span>http://example.com/invite/123456</span> <span style="color:#1677ff;"><CopyOutlined /> </span></div>
|
||||
<div><span>http://example.com/invite/123456</span> <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';
|
||||
|
||||
@ -163,8 +163,8 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.real-name-auth-page {
|
||||
padding: 24px;
|
||||
background-color: #f5f7fa;
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
/* min-height: 100vh; */
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user