|
|
@@ -1,299 +0,0 @@
|
|
|
-<template>
|
|
|
- <div id="index">
|
|
|
- <el-row>
|
|
|
- <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
|
|
|
- <el-image class="video" :src="siteInfo.videoUrl" fit="fill" />
|
|
|
- <div class="content">
|
|
|
- <div class="one">
|
|
|
- <el-row>
|
|
|
- <el-col :span="14" class="left">
|
|
|
- <el-image class="image" :src="siteInfo.logoUrl" fit="fill" />
|
|
|
- <div class="left_1">
|
|
|
- <div class="title">{{ siteInfo.zhTitle }}</div>
|
|
|
- <div class="English">{{ siteInfo.zhEnglish }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="10" class="right">
|
|
|
- <el-row align="middle">
|
|
|
- <el-col :span="6" class="right_1" @click="toCommon(0)">帮助中心</el-col>
|
|
|
- <el-col :span="14" class="right_2">
|
|
|
- <a-input-search
|
|
|
- v-model:value="searchValue"
|
|
|
- placeholder="请输入您想要搜索的内容"
|
|
|
- style="width: 240px"
|
|
|
- enter-button
|
|
|
- @search="onSearch"
|
|
|
- />
|
|
|
- </el-col>
|
|
|
- <el-col :span="4" v-if="user && user.id" class="right_3">
|
|
|
- <el-dropdown>
|
|
|
- <el-button type="primary" size="mini">
|
|
|
- {{ user.nick_name || '游客' }}
|
|
|
- </el-button>
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-item @click="toOpen">管理中心</el-dropdown-item>
|
|
|
- <el-dropdown-item @click="toCenter">个人中心</el-dropdown-item>
|
|
|
- <el-dropdown-item @click="toLogout">注销</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4" v-else class="right_3">
|
|
|
- <el-button @click="toCommon(1)" type="primary" size="small">登录</el-button>
|
|
|
- <el-button @click="toCommon(2)" type="primary" size="small">注册</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div class="two">
|
|
|
- <el-row justify="center" align="middle">
|
|
|
- <el-col class="list" :span="8" @click="switchMenu('one')">
|
|
|
- <div class="bg"></div>
|
|
|
- <div class="two_1">
|
|
|
- <text>{{ siteInfo.zhTitle }}</text>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div class="thr">
|
|
|
- <el-row justify="center" align="middle">
|
|
|
- <el-col
|
|
|
- class="list"
|
|
|
- :span="4"
|
|
|
- v-for="(item, index) in menu"
|
|
|
- :key="index"
|
|
|
- @click="switchMenu(item.href)"
|
|
|
- >
|
|
|
- <div class="thr_1">
|
|
|
- <div class="title">{{ item.title }}</div>
|
|
|
- <div class="English">{{ item.English }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div class="four">
|
|
|
- {{ footInfo.Copyright }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-// 基础
|
|
|
-import { siteInfo, footInfo, menuList } from '@/layout/site'
|
|
|
-import { UserStore } from '@/store/user'
|
|
|
-const userStore = UserStore()
|
|
|
-const user = computed(() => userStore.user)
|
|
|
-// 加载中
|
|
|
-const loading = ref(false)
|
|
|
-// 路由
|
|
|
-const router = useRouter()
|
|
|
-// 搜索
|
|
|
-const searchValue = ref('')
|
|
|
-const menu = ref(menuList)
|
|
|
-// 请求
|
|
|
-onMounted(async () => {
|
|
|
- loading.value = true
|
|
|
- search()
|
|
|
- loading.value = false
|
|
|
-})
|
|
|
-const search = async () => {
|
|
|
- const menuList = menu.value.filter((item) => {
|
|
|
- if (item.href != 'one') return item
|
|
|
- })
|
|
|
- menu.value = menuList
|
|
|
-}
|
|
|
-// 搜索
|
|
|
-const onSearch = (data) => {
|
|
|
- const query = { type: 'search' }
|
|
|
- if (data) query.searchValue = data
|
|
|
- router.push({ path: '/search', query })
|
|
|
-}
|
|
|
-const toCommon = (type) => {
|
|
|
- if (type === 0) router.push({ path: '/help' })
|
|
|
- else if (type === 1) router.push({ path: '/login' })
|
|
|
- else router.push({ path: '/register' })
|
|
|
-}
|
|
|
-// 点击指定模块
|
|
|
-const switchMenu = async (item) => {
|
|
|
- router.push({ path: `/${item}` })
|
|
|
-}
|
|
|
-// 打开管理端
|
|
|
-const toOpen = async () => {
|
|
|
- window.location.href = import.meta.env.VITE_APP_HOME
|
|
|
-}
|
|
|
-// 基础跳转
|
|
|
-const toCenter = () => {
|
|
|
- router.push('/center')
|
|
|
-}
|
|
|
-// 退出登录
|
|
|
-const toLogout = () => {
|
|
|
- userStore.logOut()
|
|
|
- router.push('/login')
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style scoped lang="scss">
|
|
|
-.main {
|
|
|
- height: 100vh;
|
|
|
- min-width: 1200px;
|
|
|
-
|
|
|
- .video {
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- z-index: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 0;
|
|
|
- color: #ffffff;
|
|
|
-
|
|
|
- .one {
|
|
|
- width: 1200px;
|
|
|
- min-width: 1200px;
|
|
|
- margin: 0 auto;
|
|
|
- padding-top: 32px;
|
|
|
- padding-bottom: 12px;
|
|
|
-
|
|
|
- .left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .image {
|
|
|
- height: 45px;
|
|
|
- width: 45px;
|
|
|
- margin: 0 10px 0 0;
|
|
|
- }
|
|
|
-
|
|
|
- .left_1 {
|
|
|
- margin: 0 0 0 5px;
|
|
|
-
|
|
|
- .title {
|
|
|
- margin: 0 0 5px 0;
|
|
|
- font-size: 23px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .English {
|
|
|
- font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- font-size: 16px;
|
|
|
- letter-spacing: 0;
|
|
|
- color: #fff;
|
|
|
- font-weight: 500;
|
|
|
-
|
|
|
- .right_3 {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .example-showcase .el-dropdown-link {
|
|
|
- cursor: pointer;
|
|
|
- color: #1c66e7;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .two {
|
|
|
- width: 1200px;
|
|
|
- min-width: 1200px;
|
|
|
- margin: 0 auto;
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 45%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
-
|
|
|
- .list {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .bg {
|
|
|
- margin: 10px;
|
|
|
- width: 400px;
|
|
|
- height: 400px;
|
|
|
- z-index: 1;
|
|
|
- background-image: url(/images/homebg.png);
|
|
|
- background-position: center center;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: contain;
|
|
|
- animation: animationName 5s linear infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .two_1 {
|
|
|
- position: absolute;
|
|
|
- top: 45%;
|
|
|
- left: 35%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- z-index: 999;
|
|
|
- width: 200px;
|
|
|
-
|
|
|
- text {
|
|
|
- font-size: 20px;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes animationName {
|
|
|
- 100% {
|
|
|
- transform: rotate(1turn);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .thr {
|
|
|
- position: absolute;
|
|
|
- left: 10%;
|
|
|
- bottom: 10%;
|
|
|
- .list {
|
|
|
- margin: 10px 0;
|
|
|
- .thr_1 {
|
|
|
- font-family: PingFangSC-Semibold;
|
|
|
- color: #fff;
|
|
|
- margin-left: 14px;
|
|
|
- text-align: center;
|
|
|
- .title {
|
|
|
- font-size: 19px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .English {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .four {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
