main page fold
This commit is contained in:
KUN1007
parent
d278bee7d8
commit
c87f340d94
|
|
@ -1,5 +1,5 @@
|
|||
export default {
|
||||
header: {
|
||||
name: '鲲站',
|
||||
name: '鲲Galgame',
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import AsideItem from './item/AsideItem.vue'
|
||||
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'
|
||||
|
||||
const handleClick = () => {
|
||||
router.push('/rank')
|
||||
}
|
||||
// 用户点击折叠左侧区域
|
||||
const asideWidth = ref(240)
|
||||
const asideWidthStyle = `${asideWidth.value}px`
|
||||
// localStorage.setItem('KUNGalgameMainPageAsideBar', 'true')
|
||||
// const asideBarStatus =
|
||||
// localStorage.getItem('KUNGalgameMainPageAsideBar') || true
|
||||
const topic = ref(true)
|
||||
const asideWidth = ref('240px')
|
||||
const handleFold = () => {
|
||||
asideWidth.value = 40
|
||||
console.log(asideWidth.value)
|
||||
if (topic.value) {
|
||||
asideWidth.value = '40px'
|
||||
} else {
|
||||
asideWidth.value = '240px'
|
||||
}
|
||||
topic.value = !topic.value
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -20,14 +32,29 @@ const handleFold = () => {
|
|||
<div class="aside">
|
||||
<!-- 侧边栏交互 -->
|
||||
<div class="nav-aside" @click="handleFold">
|
||||
<span>{{ asideWidth }}</span>
|
||||
<!-- fa 箭头图标字体 -->
|
||||
<Icon icon="line-md:arrow-left" />
|
||||
<span>折叠左侧区域</span>
|
||||
</div>
|
||||
<AsideItem />
|
||||
<HotTopic />
|
||||
<NewTopic />
|
||||
<!-- 侧边栏功能区 -->
|
||||
<div class="item-box">
|
||||
<!-- 发布新文章 -->
|
||||
<div class="new-article" v-show="topic">
|
||||
<!-- 发布新文章的按钮 -->
|
||||
<button class="btn-new-article">发布帖子</button>
|
||||
</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="topic" />
|
||||
<NewTopic v-show="topic" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -36,7 +63,7 @@ const handleFold = () => {
|
|||
.aside {
|
||||
/* 侧边栏距离文章区域的距离 */
|
||||
margin-right: 5px;
|
||||
width: v-bind('asideWidthStyle');
|
||||
width: v-bind('asideWidth');
|
||||
/* 侧边栏相对于整体可视部分的占比 */
|
||||
/* 侧边栏高度 */
|
||||
height: 100%;
|
||||
|
|
@ -44,6 +71,7 @@ const handleFold = () => {
|
|||
display: flex;
|
||||
/* 方向为竖向 */
|
||||
flex-direction: column;
|
||||
transition: 0.2s;
|
||||
}
|
||||
/* 侧边栏交互 */
|
||||
.nav-aside {
|
||||
|
|
@ -59,9 +87,78 @@ const handleFold = () => {
|
|||
/* 字体设置 */
|
||||
font-size: small;
|
||||
color: @kungalgame-font-color-3;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-width: 50px) {
|
||||
.nav-aside {
|
||||
background-color: aqua;
|
||||
}
|
||||
}
|
||||
/* 侧边栏功能区 */
|
||||
.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;
|
||||
/* 页面缩小到最小时不换行 */
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,98 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import router from '@/router'
|
||||
|
||||
const handleClick = () => {
|
||||
router.push('/rank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 侧边栏功能区 -->
|
||||
<div class="item-box">
|
||||
<!-- 发布新文章 -->
|
||||
<div class="new-article">
|
||||
<!-- 发布新文章的按钮 -->
|
||||
<button class="btn-new-article">发布帖子</button>
|
||||
</div>
|
||||
<!-- 功能盒子容器 -->
|
||||
<div class="item-box-container">
|
||||
<div>技术交流</div>
|
||||
<div>其它游戏</div>
|
||||
<div @click="handleClick">排行榜</div>
|
||||
<div>执行条例</div>
|
||||
<div>加入我们</div>
|
||||
<div>帖子池</div>
|
||||
</div>
|
||||
</div>
|
||||
</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;
|
||||
/* 页面缩小到最小时不换行 */
|
||||
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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="new-topic">
|
||||
<!-- 热门帖子的标题 -->
|
||||
<div class="new-topic-title">啊这可海星</div>
|
||||
<!-- 热门帖子的热度值 -->
|
||||
<div class="new-topic-number">
|
||||
<Icon icon="svg-spinners:clock" />
|
||||
<span>刚刚</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 单个新帖子的样式 */
|
||||
.new-topic {
|
||||
display: flex;
|
||||
/* 设置空白左右居中 */
|
||||
justify-content: space-between;
|
||||
/* 设置每个帖子高度相等 */
|
||||
flex-grow: 1;
|
||||
color: @kungalgame-font-color-3;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 单个新帖子的 hover */
|
||||
.new-topic:hover {
|
||||
box-shadow: -2px -2px 5px @kungalgame-white, 2px 2px 5px @kungalgame-gray-3;
|
||||
}
|
||||
.new-topic:active {
|
||||
box-shadow: inset 1px 1px 2px @kungalgame-gray-3,
|
||||
inset -1px -1px 2px @kungalgame-white;
|
||||
}
|
||||
/* 单个帖子的标题样式 */
|
||||
.new-topic-title {
|
||||
/* 单个帖子标题左侧的一段距离 */
|
||||
padding-left: 10px;
|
||||
/* 设置页面变化时不换行，显示省略号 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
|
||||
-webkit-box-orient: vertical; /* 设置为纵向排列 */
|
||||
-webkit-line-clamp: 2; /* 显示两行文本 */
|
||||
/* 设置帖子的字体大小 */
|
||||
font-size: smaller;
|
||||
}
|
||||
/* 设置单个帖子右侧的热度值盒子 */
|
||||
.new-topic-number {
|
||||
/* 热度值距离右侧的距离 */
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
/* 右侧热度区域不换行 */
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
/* 时钟图标的颜色 */
|
||||
.new-topic-number {
|
||||
/* 设置 fa 图标字体的颜色 */
|
||||
color: @kungalgame-purple-4;
|
||||
}
|
||||
/* 右侧区域的大小 */
|
||||
.new-topic-number span {
|
||||
width: 36px;
|
||||
font-size: xx-small;
|
||||
/* 右侧区域距离最右侧的距离 */
|
||||
margin-left: 5px;
|
||||
color: @kungalgame-font-color-3;
|
||||
}
|
||||
</style>
|
||||
61
src/views/Home/content/aside/topic/components/Topic.vue
Normal file
61
src/views/Home/content/aside/topic/components/Topic.vue
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<script setup lang="ts">
|
||||
import SingleTopic from './SingleTopic.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 侧边栏动态推送今日热度帖子 -->
|
||||
<div class="top-topic-wrap">
|
||||
<!-- 今日热度帖子的标题名 -->
|
||||
<div class="top-topic-title-name">今日热门话题</div>
|
||||
<!-- 热门帖子的目录 -->
|
||||
<div class="top-topic-content">
|
||||
<SingleTopic />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 侧边栏动态推送帖子的总容器 */
|
||||
.top-topic-wrap {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
/* 设置今日热门帖子占侧边栏的比例 */
|
||||
flex-grow: 12.5;
|
||||
/* 热门帖子距离最新帖子的距离 */
|
||||
margin-bottom: 5px;
|
||||
/* 今日热门帖子区域为竖直弹性盒 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.top-topic-title-name,
|
||||
.top-topic-content {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
}
|
||||
/* “今日热门话题”六个字的样式 */
|
||||
.top-topic-title-name {
|
||||
/* 设置盒子的 border 在内侧显示 */
|
||||
box-sizing: border-box;
|
||||
border: 3px dashed @kungalgame-trans-blue-1;
|
||||
border-bottom: none;
|
||||
/* 设置（今日热门话题）居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 设置（今日热门话题占整个热门区域的宽度） */
|
||||
flex-grow: 1;
|
||||
color: @kungalgame-font-color-3;
|
||||
/* 设置页面缩小到最小时该行不换行 */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 展示热门帖子标题的区域 */
|
||||
.top-topic-content {
|
||||
background-color: @kungalgame-trans-blue-1;
|
||||
/* 热门帖子标题区域占整个左侧页面中部的比例 */
|
||||
flex-grow: 10;
|
||||
/* 热门帖子标题部分为弹性盒 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,11 +4,11 @@ import vue from '@vitejs/plugin-vue'
|
|||
// 引入 Rollup Plugin Visualizer 打包可视化工具
|
||||
import { visualizer } from 'rollup-plugin-visualizer'
|
||||
// 引入 mock-js
|
||||
import { viteMockServe } from 'vite-plugin-mock'
|
||||
// import { viteMockServe } from 'vite-plugin-mock'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), visualizer() as PluginOption, viteMockServe()],
|
||||
plugins: [vue(), visualizer() as PluginOption],
|
||||
/* src 别名为 @ */
|
||||
resolve: {
|
||||
alias: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue