fix i18n, aside bar style
This commit is contained in:
KUN1007
parent
c2e0267333
commit
ab7e641590
11
src/api/index.ts
Normal file
11
src/api/index.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import axios from 'axios'
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: 'https://api.example.com', // 设置请求的基础URL
|
||||
timeout: 5000, // 设置请求超时时间
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
export default instance
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export function getUser(id: string) {
|
||||
return axios.get(`/users/${id}`)
|
||||
}
|
||||
|
||||
export function updateUser(id: string, data: string) {
|
||||
return axios.put(`/users/${id}`, data)
|
||||
}
|
||||
|
||||
export function deleteUser(id: string) {
|
||||
return axios.delete(`/users/${id}`)
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import { defineAsyncComponent } from 'vue'
|
|||
// 导入图标
|
||||
import { Icon } from '@iconify/vue'
|
||||
// 导入必要 vue 函数
|
||||
import { onBeforeMount, ref } from 'vue'
|
||||
import { onBeforeMount } from 'vue'
|
||||
// 导入 css 动画
|
||||
import 'animate.css'
|
||||
// 导入路由
|
||||
|
|
@ -64,9 +64,6 @@ if (isTopicPage) {
|
|||
let navItemNum = topBarItem.length
|
||||
const navItemNumString = navItemNum + '00px'
|
||||
|
||||
// 用户点击设置按钮时的操作
|
||||
const isShowPanel = ref(true)
|
||||
|
||||
// 用户点击头像时的操作
|
||||
const handleClickAvatar = () => {
|
||||
// isShowInfo.value = !isShowInfo.value
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import zh from './zh'
|
|||
import en from './en'
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: localStorage.getItem('locale') || 'en',
|
||||
locale: localStorage.getItem('KUNGalgame-locale') || 'en',
|
||||
// 支持 Vue3 composition API
|
||||
legacy: false,
|
||||
// 全局注册 ts 方法
|
||||
|
|
|
|||
|
|
@ -1,20 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import NewTopic from './topic/NewTopic.vue'
|
||||
import HotTopic from './topic/HotTopic.vue'
|
||||
// 导入图标
|
||||
import { Icon } from '@iconify/vue'
|
||||
// 导入 Vue 函数
|
||||
import { ref } from 'vue'
|
||||
// 用户点击项目跳转
|
||||
import router from '@/router'
|
||||
import { is } from 'dom7'
|
||||
import AsideActive from './components/AsideActive.vue'
|
||||
// 导入 animate css
|
||||
import 'animate.css'
|
||||
import Aside from './components/Aside.vue'
|
||||
|
||||
// 单个 item 样式
|
||||
const itemStyle = {}
|
||||
|
||||
const handleClick = () => {
|
||||
router.push('/rank')
|
||||
}
|
||||
// 用户点击折叠左侧区域
|
||||
// localStorage.setItem('KUNGalgameMainPageAsideBar', 'true')
|
||||
// const asideBarStatus =
|
||||
|
|
@ -47,27 +40,21 @@ const handleFold = () => {
|
|||
style="font-size: 17px"
|
||||
v-show="!isActive"
|
||||
/>
|
||||
<span v-show="isActive">折叠左侧区域</span>
|
||||
<span
|
||||
v-show="isActive"
|
||||
class="animate__animated animate__rotateInDownRight"
|
||||
>折叠左侧区域</span
|
||||
>
|
||||
</div>
|
||||
<!-- 侧边栏功能区 -->
|
||||
<div class="item-box" v-show="isActive">
|
||||
<!-- 发布新文章 -->
|
||||
<div class="new-article">
|
||||
<!-- 发布新文章的按钮 -->
|
||||
<button class="btn-new-article">发布帖子</button>
|
||||
<Transition
|
||||
enter-active-class="animate__animated animate__fadeIn animate__fast"
|
||||
leave-active-class="animate__animated animate__bounceOutLeft"
|
||||
>
|
||||
<div class="item" v-show="isActive">
|
||||
<AsideActive :isActive="isActive" />
|
||||
<!-- <Aside /> -->
|
||||
</div>
|
||||
<!-- 功能盒子容器 -->
|
||||
<div class="item-box-container">
|
||||
<div>技术交流</div>
|
||||
<div>其它游戏</div>
|
||||
<div @click="handleClick">排行榜</div>
|
||||
<div>执行条例</div>
|
||||
<div>加入我们</div>
|
||||
<div>帖子池</div>
|
||||
</div>
|
||||
</div>
|
||||
<HotTopic v-show="isActive" />
|
||||
<NewTopic v-show="isActive" />
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -84,7 +71,10 @@ const handleFold = () => {
|
|||
display: flex;
|
||||
/* 方向为竖向 */
|
||||
flex-direction: column;
|
||||
transition: 0.2s;
|
||||
transition: 0.5s;
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
/* 侧边栏交互 */
|
||||
.nav-aside {
|
||||
|
|
@ -99,71 +89,9 @@ const handleFold = () => {
|
|||
color: @kungalgame-font-color-3;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 侧边栏功能区 */
|
||||
.item-box {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
/* 功能区相对于侧边栏的占比 */
|
||||
flex-grow: 6;
|
||||
/* 设置六个功能（模式、排行、背景等）分布的弹性盒 */
|
||||
.item {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 发布帖子 */
|
||||
.new-article {
|
||||
width: 100%;
|
||||
/* 发布帖子的按钮相对于功能区盒子的占比 */
|
||||
flex-grow: 2;
|
||||
}
|
||||
/* 发布按钮样式 */
|
||||
.new-article button {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: @kungalgame-red-0;
|
||||
border: 1px solid @kungalgame-red-3;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
color: @kungalgame-red-3;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
/* 页面缩小到最小时不换行 */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 发布按钮 hover 效果 */
|
||||
.new-article button:hover {
|
||||
font-size: xx-large;
|
||||
background-color: @kungalgame-red-3;
|
||||
color: @kungalgame-red-0;
|
||||
/* 效果过渡时长 */
|
||||
transition: 0.3s;
|
||||
}
|
||||
/* 功能区容器 */
|
||||
/* 功能区容器 */
|
||||
.item-box-container {
|
||||
/* 两行三列 grid 布局 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 80px);
|
||||
grid-template-rows: repeat(2, 40px);
|
||||
font-size: 14px;
|
||||
/* 字体颜色 */
|
||||
color: @kungalgame-font-color-3;
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
}
|
||||
/* 六个功能之间的距离 */
|
||||
.item-box-container > div {
|
||||
/* 设置六个功能（模式、排行、背景等）之间的间距 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
color: @kungalgame-font-color-2;
|
||||
}
|
||||
/* 设置六个功能（模式、排行、背景等）的 hover */
|
||||
.item-box-container > div:hover {
|
||||
color: @kungalgame-font-color-3;
|
||||
background-color: @kungalgame-blue-0;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
11
src/views/Home/content/aside/components/Aside.vue
Normal file
11
src/views/Home/content/aside/components/Aside.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang='ts'>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang='less' scoped>
|
||||
|
||||
</style>
|
||||
117
src/views/Home/content/aside/components/AsideActive.vue
Normal file
117
src/views/Home/content/aside/components/AsideActive.vue
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<script setup lang="ts">
|
||||
import NewTopic from '../topic/NewTopic.vue'
|
||||
import HotTopic from '../topic/HotTopic.vue'
|
||||
import { toRefs } from 'vue'
|
||||
|
||||
// 接受父组件的传值
|
||||
let props = defineProps(['isActive'])
|
||||
const isActive = toRefs(props.isActive)
|
||||
|
||||
// 单个项目的接口
|
||||
interface aside {
|
||||
index: number
|
||||
name: string
|
||||
router: string
|
||||
}
|
||||
|
||||
// 顶部导航栏的项目
|
||||
const asideItem: aside[] = [
|
||||
{ index: 1, name: '技术交流', router: '/pool' },
|
||||
{ index: 2, name: '收支公示', router: '/balance' },
|
||||
{ index: 3, name: '排行榜', router: '/rank' },
|
||||
{ index: 4, name: '执行条例', router: '/regulations' },
|
||||
{ index: 5, name: '加入我们', router: '/contacts' },
|
||||
{ index: 6, name: '帖子池', router: '/pool' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 侧边栏功能区 -->
|
||||
<div class="item-box" v-show="isActive">
|
||||
<!-- 发布新文章 -->
|
||||
<div class="new-article">
|
||||
<!-- 发布新文章的按钮 -->
|
||||
<button class="btn-new-article">发布帖子</button>
|
||||
</div>
|
||||
<!-- 功能盒子容器 -->
|
||||
<div class="item-box-container">
|
||||
<!-- 顶部单个板块 -->
|
||||
<div v-for="kun in asideItem" :key="kun.index">
|
||||
<router-link :to="{ path: kun.router }">{{ kun.name }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HotTopic v-show="isActive" />
|
||||
<NewTopic v-show="isActive" />
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 侧边栏功能区 */
|
||||
.item-box {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
/* 功能区相对于侧边栏的占比 */
|
||||
flex-grow: 6;
|
||||
/* 设置六个功能（模式、排行、背景等）分布的弹性盒 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 发布帖子 */
|
||||
.new-article {
|
||||
width: 100%;
|
||||
/* 发布帖子的按钮相对于功能区盒子的占比 */
|
||||
flex-grow: 2;
|
||||
}
|
||||
/* 发布按钮样式 */
|
||||
.new-article button {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: @kungalgame-red-0;
|
||||
border: 1px solid @kungalgame-red-3;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
color: @kungalgame-red-3;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
/* 发布按钮 hover 效果 */
|
||||
.new-article button:hover {
|
||||
font-size: xx-large;
|
||||
background-color: @kungalgame-red-3;
|
||||
color: @kungalgame-red-0;
|
||||
/* 效果过渡时长 */
|
||||
transition: 0.3s;
|
||||
}
|
||||
/* 功能区容器 */
|
||||
/* 功能区容器 */
|
||||
.item-box-container {
|
||||
/* 两行三列 grid 布局 */
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 2fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
font-size: 14px;
|
||||
/* 字体颜色 */
|
||||
color: @kungalgame-font-color-3;
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 六个功能之间的距离 */
|
||||
& > div {
|
||||
/* 设置六个功能（模式、排行、背景等）之间的间距 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
a {
|
||||
color: @kungalgame-font-color-2;
|
||||
}
|
||||
/* 设置六个功能（模式、排行、背景等）的 hover */
|
||||
&:hover {
|
||||
color: @kungalgame-font-color-3;
|
||||
background-color: @kungalgame-blue-0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import router from '@/router'
|
||||
|
||||
const handleClick = () => {
|
||||
router.push('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -28,7 +33,7 @@ import { Icon } from '@iconify/vue'
|
|||
</div>
|
||||
</div>
|
||||
<!-- 返回主页 -->
|
||||
<div class="return">
|
||||
<div class="return" @click="handleClick">
|
||||
<!-- 这里 Vue 不让用 < 这个符号，换成图标字体 -->
|
||||
<span><Icon icon="line-md:arrow-small-left" />返回主页</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue