142 lines
3.6 KiB
Vue
142 lines
3.6 KiB
Vue
<template>
|
|
<div class="home-layout min-h-screen flex flex-col">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<img class="logo rounded-full overflow-hidden" src="@/assets/images/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号-1
|
|
</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: 'balance-o', name: 'agent' },
|
|
{ title: 'AI律师', icon: 'chat-o', name: 'ai' },
|
|
{ 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/kfc5c19b2b93a5e73b9' // 跳转到客服页面
|
|
// router.push({ name: 'complaint' }); // 使用 Vue Router 进行跳转
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home-layout {
|
|
background: linear-gradient(to bottom, #cfe0fa, #f4f8ff);
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: white;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
height: 3rem;
|
|
}
|
|
|
|
.logo {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
margin-right: 0.75rem;
|
|
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> |