fix:账单服务界面

src/views/billing/billservice/index.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { useI18n } from "vue-i18n";
+import {
+  RightOutlined,
+  DollarOutlined,
+  CreditCardOutlined,
+  ContainerOutlined
+
+} from '@ant-design/icons-vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const menuItems = [
+  {
+    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.Internetdetails.title'),
+    path: '/billing/internetdetails'
+  },
+];
+
+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: #f5f5f7;
+}
+
+.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: #fff;
+  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>