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>
<meta charset="utf-8">
<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">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="description" content="一个多功能的网址导航，绿色无广告。">
<meta name="keywords" content="collection,navigation,tool,合集,导航,网址导航,网址大全,网站导航,网站大全,工具">
</head>
<body>
<noscript>
<strong>浏览器未启用或不支持 JavaScript。</strong>
</noscript>
<noscript><strong>浏览器未启用或不支持 JavaScript，内容无法正常显示。</strong></noscript>
<div id="app"></div>
</body>
</html>

5
src/App.vue
View File

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

16
src/components/FloatingBtn.vue
View File

@@ -103,6 +103,7 @@ export default {
width: 2.6rem;
height: 2.6rem;
font-size: 1rem;
color: #FFF;
}
}
}
@@ -115,8 +116,8 @@ export default {
height: 0;
background-color: @colorSecondary;
font-size: 0;
transition: all calc(@transitionTime * 1.6),
font-size calc(@transitionTime * 0.8);
color: transparent;
transition: all calc(@transitionTime * 1.6);
&:not(:first-child) {
margin-top: 0.75rem;
@@ -171,7 +172,7 @@ export default {
}
&.animate::after {
animation: floatingBtnClick 0.5s linear;
animation: floatingBtnClick calc(@transitionTime * 2) linear;
}
}
@@ -198,3 +199,12 @@ export default {
}
}
</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-aside class="home-aside">
<el-aside class="home-aside shadow-1">
<el-menu
class="side-nav"
default-active="search"
@@ -396,11 +396,14 @@ export default {
<style lang="less" scoped>
.home-aside {
position: relative;
z-index: 110;
width: auto !important;
overflow-x: hidden;
.side-nav {
min-height: 100%;
border: none;
}
}
@@ -409,8 +412,9 @@ export default {
flex-direction: column;
align-items: center;
position: relative;
padding: 1rem 2rem;
padding: 2rem;
background-color: @colorWhite;
overflow-x: hidden;
overflow-y: scroll;
.wrapper {
@@ -429,7 +433,7 @@ export default {
display: flex;
align-items: center;
position: sticky;
top: 3rem;
top: 2.5rem;
z-index: 100;
width: 100%;
max-width: 40rem;
@@ -494,6 +498,7 @@ export default {
.title {
margin: 0.5rem 0;
text-align: left;
}
.el-radio {
@@ -650,3 +655,29 @@ export default {
}
}
</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>