frost-craft/frost-navigation
1
0
Fork 0
Code Releases Activity

细节优化

Browse Source 
- index.html meta 标签（viewport、description、keywords）
- 部分页面在移动端上的排版
This commit is contained in:
Frost-ZX
2021-06-14 16:38:10 +08:00
parent 8095f67724
commit 1aebf20e7f
6 changed files with 55 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/index.html
View File

@@ -3,14 +3,14 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<meta name="description" content="一个多功能的网址导航，绿色无广告。">
<meta name="keywords" content="collection,navigation,tool,合集,导航,网址导航,网址大全,网站导航,网站大全,工具">
</head> </head>
<body> <body>
<noscript> <noscript><strong>浏览器未启用或不支持 JavaScript，内容无法正常显示。</strong></noscript>
<strong>浏览器未启用或不支持 JavaScript。</strong>
</noscript>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

5
src/App.vue
View File

@@ -32,7 +32,7 @@
<el-menu-item :class="['item-dropdown', { active: showHeaderDropdown }]" <el-menu-item :class="['item-dropdown', { active: showHeaderDropdown }]"
@click="showHeaderDropdown = !showHeaderDropdown" @click="showHeaderDropdown = !showHeaderDropdown"
> >
<i class="el-icon-menu"></i> <i class="fa fa-bars"></i>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
@@ -229,10 +229,9 @@ export default {
right: 0; right: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 2.2rem;
i { i {
font-size: 2em; font-size: 1.75em;
} }
} }
} }

2
src/assets/css/global.less
View File

@@ -1,4 +1,4 @@
/* -- 全局样式 -- */ // 全局样式
// 滚动条 // 滚动条

2
src/assets/css/variable.less
View File

@@ -1,4 +1,4 @@
/* -- 全局变量 -- */ // 全局变量
@headerHeight: 4rem; @headerHeight: 4rem;

16
src/components/FloatingBtn.vue
View File

@@ -103,6 +103,7 @@ export default {
width: 2.6rem; width: 2.6rem;
height: 2.6rem; height: 2.6rem;
font-size: 1rem; font-size: 1rem;
color: #FFF;
} }
} }
} }
@@ -115,8 +116,8 @@ export default {
height: 0; height: 0;
background-color: @colorSecondary; background-color: @colorSecondary;
font-size: 0; font-size: 0;
transition: all calc(@transitionTime * 1.6), color: transparent;
font-size calc(@transitionTime * 0.8); transition: all calc(@transitionTime * 1.6);
&:not(:first-child) { &:not(:first-child) {
margin-top: 0.75rem; margin-top: 0.75rem;
@@ -171,7 +172,7 @@ export default {
} }
&.animate::after { &.animate::after {
animation: floatingBtnClick 0.5s linear; animation: floatingBtnClick calc(@transitionTime * 2) linear;
} }
} }
@@ -198,3 +199,12 @@ export default {
} }
} }
</style> </style>
<style lang="less" scoped>
@media screen and (max-width: 400px) {
.floating-btn {
right: 1.5rem;
bottom: 1.5rem;
}
}
</style>

37
src/views/Home.vue
View File

@@ -2,7 +2,7 @@
<el-container class="home"> <el-container class="home">
<!-- 侧边栏 --> <!-- 侧边栏 -->
<el-aside class="home-aside"> <el-aside class="home-aside shadow-1">
<el-menu <el-menu
class="side-nav" class="side-nav"
default-active="search" default-active="search"
@@ -396,11 +396,14 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.home-aside { .home-aside {
position: relative;
z-index: 110;
width: auto !important; width: auto !important;
overflow-x: hidden; overflow-x: hidden;
.side-nav { .side-nav {
min-height: 100%; min-height: 100%;
border: none;
} }
} }
@@ -409,8 +412,9 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
padding: 1rem 2rem; padding: 2rem;
background-color: @colorWhite; background-color: @colorWhite;
overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
.wrapper { .wrapper {
@@ -429,7 +433,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
position: sticky; position: sticky;
top: 3rem; top: 2.5rem;
z-index: 100; z-index: 100;
width: 100%; width: 100%;
max-width: 40rem; max-width: 40rem;
@@ -494,6 +498,7 @@ export default {
.title { .title {
margin: 0.5rem 0; margin: 0.5rem 0;
text-align: left;
} }
.el-radio { .el-radio {
@@ -650,3 +655,29 @@ export default {
} }
} }
</style> </style>
<style lang="less" scoped>
@media screen and (max-width: 400px) {
.home-content {
padding: 1rem;
}
.search-engine {
.search-bar {
top: 1rem;
}
.search-type {
margin: 2rem 0;
}
.category {
text-align: center;
.el-radio {
width: 90% !important;
}
}
}
}
</style>