base

src/layouts/HomeLayout.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="home-layout min-h-screen flex flex-col">
+        <!-- Header -->
+        <div class="header">
+            <img
+                class="logo rounded-full overflow-hidden"
+                src="/logo.jpg"
+                alt="Logo"
+            />
+            <div class="title">天远数据</div>
+        </div>
+
+        <!-- Content Area -->
+        <div class="content flex flex-col flex-1">
+            <router-view />
+        </div>
+
+        <!-- Vant Tabbar -->
+
+        <van-tabbar v-model="tabbar" @change="tabChange">
+            <van-tabbar-item
+                v-for="(item, index) in menu"
+                :key="index"
+                :name="item.name"
+                :icon="item.icon"
+                >{{ item.title }}
+            </van-tabbar-item>
+        </van-tabbar>
+
+        <!-- Complaint Button -->
+        <div @click="toComplaint" class="complaint-button">
+            <!-- <i class="icon-warning"></i> -->
+            <span>投诉</span>
+        </div>
+        <div class="disclaimer">
+            <div class="flex flex-col items-center">
+                <div class="flex items-center">
+                    <img
+                        class="w-4 h-4 mr-2"
+                        src="@/assets/images/public_security_record_icon.png"
+                        alt="公安备案"
+                    />
+                    <text>琼公网安备46010002000584号</text>
+                </div>
+                <div>
+                    <a class="text-blue-500" href="https://beian.miit.gov.cn">
+                        琼ICP备2024048057号-2
+                    </a>
+                </div>
+            </div>
+            <div>海南天远大数据科技有限公司版权所有</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router"; // 引入 Vue Router
+
+const router = useRouter();
+const route = useRoute();
+const tabbar = ref("index");
+const menu = reactive([
+    { title: "首页", icon: "home-o", name: "index" },
+    { title: "推广", icon: "fire-o", name: "promote" },
+    { title: "资产", icon: "gold-coin-o", name: "agent" },
+    { title: "我的", icon: "user-o", name: "me" }
+]);
+
+// 根据当前路由设置 Tabbar 的高亮项
+onMounted(() => {
+    const currentPage = route.name; // 获取当前路由的名称
+    tabbar.value = currentPage;
+});
+
+const onClickOverlay = () => {};
+// 跳转到相应页面
+const tabChange = (name) => {
+    router.push({ name }); // 使用 Vue Router 进行跳转
+};
+
+// 跳转到投诉页面
+const toComplaint = () => {
+    window.location.href =
+        "https://work.weixin.qq.com/kfid/kfc76b1d0f0d562777a"; // 跳转到客服页面
+    // router.push({ name: 'complaint' }); // 使用 Vue Router 进行跳转
+};
+</script>
+
+<style scoped>
+.home-layout {
+    @apply  from-orange-100/20 to-white bg-gradient-to-b
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    background-color: white;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    height: 3rem;
+}
+
+.logo {
+    width: 2rem;
+    height: 2rem;
+    margin-right: 0.5rem;
+    object-fit: contain;
+}
+
+.title {
+    font-size: 1.25rem;
+    font-weight: bold;
+}
+
+.content {
+    /* min-height: calc(100vh - 3rem); */
+}
+
+.complaint-button {
+    position: fixed;
+    bottom: 6rem;
+    right: 1rem;
+    background: linear-gradient(to bottom, #e24949, #e4827b);
+    border-radius: 1.5rem;
+    padding: 0.25rem 1rem;
+    color: white;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+.complaint-button i {
+    margin-right: 0.5rem;
+}
+
+.disclaimer {
+    /* margin-top: 24px; */
+    padding: 10px;
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+    border-top: 1px solid #e0e0e0;
+    padding-bottom: 60px;
+    background: #ffffff;
+    margin-bottom: 50px;
+}
+</style>