Discard less, use css
This commit is contained in:
KUN1007
parent
81fcddd7c6
commit
2acabc5631
1432
package-lock.json
generated
1432
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -18,13 +18,11 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"less-loader": "^11.1.0",
|
||||
"vue": "^3.2.47"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/vue": "^4.1.1",
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"less": "^4.1.3",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.2.0",
|
||||
"vue-tsc": "^1.2.0"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import KUNGalgameMainPage from "./views/Home/index.vue";
|
||||
import KUNGalgameMainPage from "./views/Home/KUNGalgameMainPage.vue";
|
||||
export default {
|
||||
name: "App",
|
||||
components: { KUNGalgameMainPage },
|
||||
|
|
@ -10,4 +10,4 @@ export default {
|
|||
<KUNGalgameMainPage />
|
||||
</template>
|
||||
|
||||
<style type="less" scoped></style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -19,12 +19,15 @@ export default {
|
|||
<!-- 顶部左侧交互栏 -->
|
||||
<div class="nav-top">
|
||||
<div class="kungal-info">
|
||||
<!-- 网站的名字和网站图标 -->
|
||||
<a href="#"><img src="../assets/images/favicon.png" alt="KUNgal" /></a>
|
||||
<a href="#"><span>KUNGalgame</span></a>
|
||||
</div>
|
||||
<div class="top-bar">
|
||||
<ul>
|
||||
<!-- 顶部单个板块 -->
|
||||
<li v-for="(kun, index) in topBarItem" :key="index">{{ kun }}</li>
|
||||
<!-- 顶部板块下部的 hover 效果 -->
|
||||
<div class="top-bar-box"></div>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -42,112 +45,116 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style scoped>
|
||||
/* 头部样式 */
|
||||
.header {
|
||||
height: 58px;
|
||||
box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
|
||||
backdrop-filter: blur(5px);
|
||||
background-color: var(--kungalgame-trans-white-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 50px;
|
||||
/* 头部高度 */
|
||||
height: 58px;
|
||||
/* 头部下方阴影 */
|
||||
box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
|
||||
/* 头部背景 */
|
||||
backdrop-filter: blur(5px);
|
||||
background-color: var(--kungalgame-trans-white-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 50px;
|
||||
}
|
||||
.nav-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.kungal-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
height: 50px;
|
||||
margin-left: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
span {
|
||||
margin-left: 20px;
|
||||
margin-right: 7px;
|
||||
color: var(--kungalgame-font-color-3);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* 网站 LOGO */
|
||||
.kungal-info img {
|
||||
height: 50px;
|
||||
margin-left: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 网站名称 */
|
||||
.kungal-info span {
|
||||
margin-left: 20px;
|
||||
margin-right: 7px;
|
||||
color: var(--kungalgame-font-color-3);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 顶部导航栏 */
|
||||
.top-bar {
|
||||
width: 400px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
right: 5%;
|
||||
.top-bar-box {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: calc((100% / 4) * 1);
|
||||
height: 7px;
|
||||
border-radius: 2px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
li {
|
||||
width: 100%;
|
||||
color: var(--kungalgame-blue-5);
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 58px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: var(--kungalgame-blue-0);
|
||||
transition: 0.5s;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
&:hover {
|
||||
&~.top-bar-box {
|
||||
left: calc(100% / 4 * 0);
|
||||
background-color: var(--kungalgame-red-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&:hover {
|
||||
&~.top-bar-box {
|
||||
left: calc(100% / 4 * 1);
|
||||
background-color: var(--kungalgame-yellow-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&:hover {
|
||||
&~.top-bar-box {
|
||||
left: calc(100% / 4 * 2);
|
||||
background-color: var(--kungalgame-blue-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&:hover {
|
||||
&~.top-bar-box {
|
||||
left: calc(100% / 4 * 3);
|
||||
background-color: var(--kungalgame-green-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
width: 400px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.top-bar ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
right: 5%;
|
||||
}
|
||||
.top-bar ul .top-bar-box {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
/* 如果导航栏就六个导航，那么每个导航的宽度都是整个导航
|
||||
的六分之一 */
|
||||
width: calc((100% / 4) * 1);
|
||||
height: 7px;
|
||||
border-radius: 2px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.top-bar ul li {
|
||||
width: 100%;
|
||||
color: var(--kungalgame-blue-5);
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 58px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.top-bar ul li:hover {
|
||||
background-color: var(--kungalgame-blue-0);
|
||||
transition: 0.5s;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.top-bar ul li:nth-child(1):hover ~ .top-bar-box {
|
||||
left: calc(100% / 4 * 0);
|
||||
background-color: var(--kungalgame-red-3);
|
||||
}
|
||||
.top-bar ul li:nth-child(2):hover ~ .top-bar-box {
|
||||
left: calc(100% / 4 * 1);
|
||||
background-color: var(--kungalgame-yellow-3);
|
||||
}
|
||||
.top-bar ul li:nth-child(3):hover ~ .top-bar-box {
|
||||
left: calc(100% / 4 * 2);
|
||||
background-color: var(--kungalgame-blue-3);
|
||||
}
|
||||
.top-bar ul li:nth-child(4):hover ~ .top-bar-box {
|
||||
left: calc(100% / 4 * 3);
|
||||
background-color: var(--kungalgame-green-3);
|
||||
}
|
||||
|
||||
/* 顶部搜索框 */
|
||||
/*
|
||||
|
||||
TODO:
|
||||
|
||||
*/
|
||||
|
||||
/* 用户个人信息 */
|
||||
.kungalgamer-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
}
|
||||
span {
|
||||
color: var(--kungalgame-font-color-2);
|
||||
margin-left: 20px;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.kungalgamer-info img {
|
||||
border-radius: 50%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.kungalgamer-info span {
|
||||
color: var(--kungalgame-font-color-2);
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<script lang="ts">
|
||||
import KUNGalgameTopBar from "../../components/KUNGalgameTopBar.vue";
|
||||
import MainPageContent from "./content/MainPageContent.vue";
|
||||
|
||||
export default {
|
||||
name: "KUNGalgameMainPage",
|
||||
components: { KUNGalgameTopBar },
|
||||
components: { KUNGalgameTopBar, MainPageContent },
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -11,10 +12,11 @@ export default {
|
|||
<!-- 可视部分的容器 -->
|
||||
<div class="visual-wrapper">
|
||||
<KUNGalgameTopBar />
|
||||
<MainPageContent/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="less">
|
||||
.visual-wrapper {
|
||||
height: 1500px;
|
||||
display: flex;
|
||||
47
src/views/Home/content/MainPageContent.vue
Normal file
47
src/views/Home/content/MainPageContent.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<script lang="ts">
|
||||
import AsideItem from "./aside/item/AsideItem.vue";
|
||||
export default {
|
||||
name:'MainPageContent',
|
||||
components: { AsideItem },
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 主容器 -->
|
||||
<div class="main-container">
|
||||
<!-- 内容区容器 -->
|
||||
<div class="content-container">
|
||||
<AsideItem />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style type="less" scoped>
|
||||
.main-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 可视内容部分宽度 */
|
||||
.content-container {
|
||||
width: 61.8%;
|
||||
/* 可视页面的最小宽度 */
|
||||
min-width: 700px;
|
||||
/* 盒子边线在内部，页面缩小到最小时右侧不留白 */
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
/* 设置可视内容区不覆盖顶部 shadow */
|
||||
margin-top: 5px;
|
||||
/* 可视内容区为弹性盒 */
|
||||
display: flex;
|
||||
/* 可视内容区居中 */
|
||||
align-items: center;
|
||||
/* 设置背景毛玻璃效果 */
|
||||
backdrop-filter: blur(5px);
|
||||
background-color: var(--kungalgame-trans-white-5);
|
||||
/* 设置背景边框和圆角 */
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
30
src/views/Home/content/aside/MainPageAside.vue
Normal file
30
src/views/Home/content/aside/MainPageAside.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script lang="ts">
|
||||
import AsideItem from "./item/AsideItem.vue";
|
||||
export default {
|
||||
name: "MainPageAside",
|
||||
component: { AsideItem },
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 侧边栏 -->
|
||||
<div class="aside">
|
||||
<AsideItem />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 侧边栏部分 */
|
||||
.aside {
|
||||
/* 侧边栏距离文章区域的距离 */
|
||||
margin-right: 5px;
|
||||
width: 240px;
|
||||
/* 侧边栏相对于整体可视部分的占比 */
|
||||
/* 侧边栏高度 */
|
||||
height: 100%;
|
||||
/* 设置侧边栏为弹性盒子 */
|
||||
display: flex;
|
||||
/* 方向为竖向 */
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
133
src/views/Home/content/aside/item/AsideItem.vue
Normal file
133
src/views/Home/content/aside/item/AsideItem.vue
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<script lang="ts">
|
||||
import { Icon } from "@iconify/vue";
|
||||
export default {
|
||||
name: "AsideItem",
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<!-- 侧边栏交互 -->
|
||||
<div class="nav-aside">
|
||||
<!-- fa 箭头图标字体 -->
|
||||
<Icon icon="line-md:arrow-left" />
|
||||
折叠左侧区域
|
||||
</div>
|
||||
<!-- 侧边栏功能区 -->
|
||||
<div class="item-box">
|
||||
<!-- 发布新文章 -->
|
||||
<div class="new-article">
|
||||
<!-- 发布新文章的按钮 -->
|
||||
<button class="btn-new-article">发布帖子</button>
|
||||
</div>
|
||||
<!-- 功能盒子容器 -->
|
||||
<div class="item-box-container">
|
||||
<div class="function">模式切换</div>
|
||||
<div class="function">游戏排行</div>
|
||||
<div class="function">坛友排行</div>
|
||||
<div class="function">加入我们</div>
|
||||
<div class="function">背景设置</div>
|
||||
<div class="function">其它游戏</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style type="less" scoped>
|
||||
/* 侧边栏部分 */
|
||||
.aside {
|
||||
/* 侧边栏距离文章区域的距离 */
|
||||
margin-right: 5px;
|
||||
width: 240px;
|
||||
/* 侧边栏相对于整体可视部分的占比 */
|
||||
/* 侧边栏高度 */
|
||||
height: 100%;
|
||||
/* 设置侧边栏为弹性盒子 */
|
||||
display: flex;
|
||||
/* 方向为竖向 */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 侧边栏交互 */
|
||||
.nav-aside {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
/* 折叠区相当于侧边栏的占比 */
|
||||
flex-grow: 1;
|
||||
/* 内容居中（折叠左侧区域） */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
/* 字体设置 */
|
||||
font-size: small;
|
||||
color: var(--kungalgame-font-color-3);
|
||||
/* 页面缩小到最小时不换行 */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 侧边栏功能区 */
|
||||
.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: var(--kungalgame-red-0);
|
||||
border: 1px solid var(--kungalgame-red-3);
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
color: var(--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: var(--kungalgame-red-3);
|
||||
color: var(--kungalgame-red-0);
|
||||
/* 效果过渡时长 */
|
||||
transition: 0.3s;
|
||||
}
|
||||
/* 功能区容器 */
|
||||
.item-box-container {
|
||||
width: 100%;
|
||||
/* 设置六个功能（模式、排行、背景等）的容器为弹性 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
color: var(--kungalgame-font-color-2);
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* 六个功能之间的距离 */
|
||||
.item-box-container div {
|
||||
/* 设置六个功能（模式、排行、背景等）之间的间距 */
|
||||
padding: 10px;
|
||||
}
|
||||
/* 设置六个功能（模式、排行、背景等）的 hover */
|
||||
.item-box-container > div:hover {
|
||||
color: var(--kungalgame-font-color-3);
|
||||
background-color: var(--kungalgame-trans-red-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
5
src/views/Home/content/aside/topic/HotTopic.vue
Normal file
5
src/views/Home/content/aside/topic/HotTopic.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script lang="ts">
|
||||
export default {};
|
||||
</script>
|
||||
<template></template>
|
||||
<style scoped></style>
|
||||
5
src/views/Home/content/aside/topic/NewTopic.vue
Normal file
5
src/views/Home/content/aside/topic/NewTopic.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script lang="ts">
|
||||
export default {};
|
||||
</script>
|
||||
<template></template>
|
||||
<style scoped></style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue