148 lines
2.9 KiB
Vue
148 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router';
|
|
import { useI18n } from "vue-i18n";
|
|
import {
|
|
RightOutlined,
|
|
DollarOutlined,
|
|
FileTextOutlined,
|
|
CreditCardOutlined,
|
|
ContainerOutlined,
|
|
MoneyCollectOutlined,
|
|
|
|
} from '@ant-design/icons-vue';
|
|
|
|
const { t } = useI18n();
|
|
const router = useRouter();
|
|
|
|
const menuItems = [
|
|
{
|
|
icon: MoneyCollectOutlined,
|
|
title: t('page.recharge.recharge'),
|
|
path: '/billing/recharge'
|
|
|
|
},
|
|
// {
|
|
// icon: CreditCardOutlined,
|
|
// title: t('page.histories.Historicalbilling'),
|
|
// path: '/billing/histories'
|
|
// },
|
|
{
|
|
icon: DollarOutlined,
|
|
title: t('page.Rechargehistory.recharge'),
|
|
path: '/billing/Rechargehistory'
|
|
},
|
|
{
|
|
icon: ContainerOutlined,
|
|
title: t('page.packagehistories.title'),
|
|
path: '/billing/packagehistories'
|
|
},
|
|
// {
|
|
// icon: ContainerOutlined,
|
|
// title: t('page.Internetdetails.title'),
|
|
// path: '/billing/internetdetails'
|
|
// },
|
|
{
|
|
icon: FileTextOutlined,
|
|
title: t('page.endpoint.cdrlrecords'),
|
|
path: '/billing/cdrlrecords'
|
|
}
|
|
];
|
|
|
|
const handleMenuClick = (path: string) => {
|
|
router.push(path);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="billing-service">
|
|
<div class="billing-service-content">
|
|
<!-- 菜单列表 -->
|
|
<div class="menu-list">
|
|
<div
|
|
v-for="item in menuItems"
|
|
:key="item.title"
|
|
class="menu-item"
|
|
@click="handleMenuClick(item.path)"
|
|
>
|
|
<div class="menu-content">
|
|
<div class="icon-wrapper">
|
|
<component :is="item.icon" />
|
|
</div>
|
|
<span>{{ item.title }}</span>
|
|
</div>
|
|
<RightOutlined />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.billing-service {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
padding: 16px;
|
|
background-color: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
|
|
}
|
|
|
|
.billing-service-content {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.menu-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 16px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
background: var(--text-color, var(--ant-text-color)); /* 使用主题变量 */
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.menu-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.menu-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.icon-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
background-color: #f0f5ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
/* 响应式布局调整 */
|
|
@media screen and (max-width: 768px) {
|
|
.menu-list {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.menu-item {
|
|
padding: 16px;
|
|
}
|
|
}
|
|
</style>
|