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"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"less-loader": "^11.1.0",
|
|
||||||
"vue": "^3.2.47"
|
"vue": "^3.2.47"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify/vue": "^4.1.1",
|
"@iconify/vue": "^4.1.1",
|
||||||
"@vitejs/plugin-vue": "^4.1.0",
|
"@vitejs/plugin-vue": "^4.1.0",
|
||||||
"less": "^4.1.3",
|
|
||||||
"typescript": "^4.9.3",
|
"typescript": "^4.9.3",
|
||||||
"vite": "^4.2.0",
|
"vite": "^4.2.0",
|
||||||
"vue-tsc": "^1.2.0"
|
"vue-tsc": "^1.2.0"
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import KUNGalgameMainPage from "./views/Home/index.vue";
|
import KUNGalgameMainPage from "./views/Home/KUNGalgameMainPage.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
components: { KUNGalgameMainPage },
|
components: { KUNGalgameMainPage },
|
||||||
|
|
@ -10,4 +10,4 @@ export default {
|
||||||
<KUNGalgameMainPage />
|
<KUNGalgameMainPage />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style type="less" scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
|
|
@ -19,12 +19,15 @@ export default {
|
||||||
<!-- 顶部左侧交互栏 -->
|
<!-- 顶部左侧交互栏 -->
|
||||||
<div class="nav-top">
|
<div class="nav-top">
|
||||||
<div class="kungal-info">
|
<div class="kungal-info">
|
||||||
|
<!-- 网站的名字和网站图标 -->
|
||||||
<a href="#"><img src="../assets/images/favicon.png" alt="KUNgal" /></a>
|
<a href="#"><img src="../assets/images/favicon.png" alt="KUNgal" /></a>
|
||||||
<a href="#"><span>KUNGalgame</span></a>
|
<a href="#"><span>KUNGalgame</span></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-bar">
|
<div class="top-bar">
|
||||||
<ul>
|
<ul>
|
||||||
|
<!-- 顶部单个板块 -->
|
||||||
<li v-for="(kun, index) in topBarItem" :key="index">{{ kun }}</li>
|
<li v-for="(kun, index) in topBarItem" :key="index">{{ kun }}</li>
|
||||||
|
<!-- 顶部板块下部的 hover 效果 -->
|
||||||
<div class="top-bar-box"></div>
|
<div class="top-bar-box"></div>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -42,112 +45,116 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style scoped>
|
||||||
|
/* 头部样式 */
|
||||||
.header {
|
.header {
|
||||||
height: 58px;
|
/* 头部高度 */
|
||||||
box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
|
height: 58px;
|
||||||
backdrop-filter: blur(5px);
|
/* 头部下方阴影 */
|
||||||
background-color: var(--kungalgame-trans-white-5);
|
box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
|
||||||
display: flex;
|
/* 头部背景 */
|
||||||
align-items: center;
|
backdrop-filter: blur(5px);
|
||||||
justify-content: space-between;
|
background-color: var(--kungalgame-trans-white-5);
|
||||||
padding-right: 50px;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-right: 50px;
|
||||||
}
|
}
|
||||||
.nav-top {
|
.nav-top {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.kungal-info {
|
.kungal-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
/* 网站 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 {
|
.top-bar {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.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 {
|
.kungalgamer-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
img {
|
}
|
||||||
border-radius: 50%;
|
|
||||||
height: 40px;
|
.kungalgamer-info img {
|
||||||
}
|
border-radius: 50%;
|
||||||
span {
|
height: 40px;
|
||||||
color: var(--kungalgame-font-color-2);
|
}
|
||||||
margin-left: 20px;
|
|
||||||
}
|
.kungalgamer-info span {
|
||||||
|
color: var(--kungalgame-font-color-2);
|
||||||
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import KUNGalgameTopBar from "../../components/KUNGalgameTopBar.vue";
|
import KUNGalgameTopBar from "../../components/KUNGalgameTopBar.vue";
|
||||||
|
import MainPageContent from "./content/MainPageContent.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "KUNGalgameMainPage",
|
name: "KUNGalgameMainPage",
|
||||||
components: { KUNGalgameTopBar },
|
components: { KUNGalgameTopBar, MainPageContent },
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -11,10 +12,11 @@ export default {
|
||||||
<!-- 可视部分的容器 -->
|
<!-- 可视部分的容器 -->
|
||||||
<div class="visual-wrapper">
|
<div class="visual-wrapper">
|
||||||
<KUNGalgameTopBar />
|
<KUNGalgameTopBar />
|
||||||
|
<MainPageContent/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less">
|
||||||
.visual-wrapper {
|
.visual-wrapper {
|
||||||
height: 1500px;
|
height: 1500px;
|
||||||
display: flex;
|
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 { defineConfig } from "vite";
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
})
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue