init

src/views/business/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="module-root-page">
+    <div class="module-page-header">
+      <h2>业务管理</h2>
+    </div>
+    <IViewTabs v-model:activeKey="activeKey" :animated="false" class="module-entry-tabs">
+      <IViewTabPane key="demo" tab="使用示例">
+        <div class="tab-content" v-if="activeKey === 'demo'">
+          <IndexDemo />
+        </div>
+      </IViewTabPane>
+    </IViewTabs>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import IViewTabs from "@/iview/IViewTabs.vue";
+import IViewTabPane from "@/iview/IViewTabPane.vue";
+import IndexDemo from "./IndexDemo.vue";
+
+const activeKey = ref("demo");
+const route = useRoute();
+const router = useRouter();
+
+watch(
+  () => route.query.tab,
+  (tab) => {
+    if (tab && ["demo"].includes(tab)) {
+      activeKey.value = tab;
+    }
+  },
+  { immediate: true }
+);
+
+watch(activeKey, (newKey) => {
+  router.push({
+    query: { ...route.query, tab: newKey },
+  });
+});
+</script>
+
+<style scoped>
+.module-root-page {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+.module-page-header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+@media screen and (max-width: 768px) {
+  .module-root-page {
+    --module-page-inset: 16px;
+    width: calc(100% + 2 * var(--module-page-inset));
+    margin: calc(-1 * var(--module-page-inset));
+    padding: var(--module-page-inset);
+    gap: 12px;
+  }
+
+  .module-root-page .module-page-header {
+    padding: 0;
+  }
+
+  .module-root-page .module-page-header h2 {
+    font-size: 20px;
+  }
+
+  .module-root-page .module-entry-tabs {
+    margin: 0;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .module-page-header h2 {
+    margin: 0 0 4px;
+  }
+}
+
+.tab-content {
+  min-height: 350px;
+  position: relative;
+  z-index: 1;
+}
+
+@media screen and (max-width: 768px) {
+  .tab-content {
+    min-height: auto;
+  }
+}
+</style>