优化：首页UI优化
This commit is contained in:
xugaoyi
parent
f0373ab519
commit
39851a8464
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<div class="i-body" :style="'background-image: url('+ data.footer.bgImg +')'">
|
||||
|
||||
|
||||
<div class="banner">
|
||||
<main class="home">
|
||||
<header class="hero">
|
||||
<img v-if="data.heroImage" :src="$withBase(data.heroImage)" :alt="data.heroAlt || 'hero'" />
|
||||
|
||||
<h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>
|
||||
|
||||
<p class="description">{{ data.tagline || $description || 'Welcome to your VuePress site' }}</p>
|
||||
|
||||
<p class="action" v-if="data.actionText && data.actionLink">
|
||||
<NavLink class="action-button" :item="actionLink" />
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="features" v-if="data.features && data.features.length">
|
||||
<!-- PC端features块 s -->
|
||||
<div class="features" v-if="data.features && data.features.length && !isMQMobile">
|
||||
<div class="feature" v-for="(feature, index) in data.features" :key="index">
|
||||
<a :href="$withBase(feature.url)">
|
||||
<img class="image_title" :src="$withBase(feature.imgname)" :alt="feature.title" />
|
||||
|
|
@ -23,7 +23,34 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PC端features块 s -->
|
||||
</main>
|
||||
|
||||
<!-- 移动端slide s -->
|
||||
<div class="slide-banner" v-if="data.features && data.features.length" v-show="isMQMobile">
|
||||
<div class="banner-wrapper">
|
||||
<div class="slide-banner-scroll" ref="slide">
|
||||
<div class="slide-banner-wrapper">
|
||||
<div class="slide-item" v-for="(feature, index) in data.features" :key="index">
|
||||
<a :href="$withBase(feature.url)">
|
||||
<img class="image_title" :src="$withBase(feature.imgname)" :alt="feature.title" />
|
||||
<h2>{{ feature.title }}</h2>
|
||||
<p>{{ feature.details }}</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-wrapper">
|
||||
<span
|
||||
class="doc"
|
||||
v-for="(item, index) in data.features.length"
|
||||
:key="index"
|
||||
:class="{'active': currentPageIndex === index}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移动端slide e -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -58,8 +85,84 @@
|
|||
|
||||
<script>
|
||||
import NavLink from "@theme/components/NavLink.vue";
|
||||
import BScroll from "@better-scroll/core"
|
||||
import Slide from "@better-scroll/slide"
|
||||
|
||||
BScroll.use(Slide)
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
isMQMobile: false,
|
||||
slide: null,
|
||||
currentPageIndex: 0,
|
||||
playTimer: 0,
|
||||
mark: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
//vupress在打包时不能在beforeCreate(),created()内访问浏览器api（如window）
|
||||
},
|
||||
beforeMount(){
|
||||
this.isMQMobile = window.innerWidth < 720 ? true : false; // vupress在打包时不能在beforeCreate(),created()访问浏览器api（如window）
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
this.isMQMobile = window.innerWidth < 720 ? true : false;
|
||||
if(this.isMQMobile && !this.slide && !this.mark){
|
||||
this.mark++
|
||||
setTimeout(() => {
|
||||
this.init()
|
||||
},60)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.isMQMobile && this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearTimeout(this.playTimer)
|
||||
this.slide.destroy()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
clearTimeout(this.playTimer)
|
||||
this.slide = new BScroll(this.$refs.slide, {
|
||||
scrollX: true, // x轴滚动
|
||||
scrollY: false, // y轴滚动
|
||||
slide: {
|
||||
loop: true,
|
||||
threshold: 100
|
||||
},
|
||||
useTransition: true, // 使用css3 transition动画
|
||||
momentum: false,
|
||||
bounce: false, // 回弹
|
||||
stopPropagation: false, // 是否阻止事件冒泡
|
||||
probeType: 2,
|
||||
preventDefault: false
|
||||
})
|
||||
|
||||
// user touches the slide area
|
||||
this.slide.on('beforeScrollStart', () => {
|
||||
clearTimeout(this.playTimer)
|
||||
})
|
||||
// user touched the slide done
|
||||
this.slide.on('scrollEnd', () => {
|
||||
this.autoGoNext()
|
||||
})
|
||||
this.slide.on('slideWillChange', (page) => {
|
||||
this.currentPageIndex = page.pageX
|
||||
})
|
||||
this.autoGoNext()
|
||||
},
|
||||
autoGoNext() {
|
||||
clearTimeout(this.playTimer)
|
||||
this.playTimer = setTimeout(() => {
|
||||
this.slide.next()
|
||||
}, 4000)
|
||||
}
|
||||
},
|
||||
|
||||
components: { NavLink },
|
||||
|
||||
computed: {
|
||||
|
|
@ -78,6 +181,48 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
|
||||
.slide-banner
|
||||
margin-top: 2rem;
|
||||
.banner-wrapper
|
||||
position relative
|
||||
.slide-banner-scroll
|
||||
min-height 1px
|
||||
overflow hidden
|
||||
.slide-banner-wrapper
|
||||
height 300px
|
||||
.slide-item
|
||||
display inline-block
|
||||
height 300px
|
||||
width 100%
|
||||
text-align center
|
||||
.image_title
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
h2
|
||||
font-size: 1.1rem;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
p
|
||||
color: #b0b6be;
|
||||
|
||||
.docs-wrapper
|
||||
position absolute
|
||||
bottom 25px
|
||||
left 50%
|
||||
transform translateX(-50%)
|
||||
.doc
|
||||
display inline-block
|
||||
margin 0 4px
|
||||
width 8px
|
||||
height 8px
|
||||
border-radius 50%
|
||||
background #2F455A
|
||||
&.active
|
||||
background #517EA9
|
||||
|
||||
.i-body{
|
||||
background #f3f7fa bottom no-repeat
|
||||
overflow hidden
|
||||
|
|
@ -247,11 +392,15 @@ body .home-content{
|
|||
|
||||
@media (max-width: $MQMobile) {
|
||||
// 719px
|
||||
.banner .home .hero h1{
|
||||
margin: 1.8rem auto;
|
||||
.banner{
|
||||
min-height 517px
|
||||
.home .hero h1{
|
||||
margin: 1.8rem auto;
|
||||
}
|
||||
}
|
||||
.home {
|
||||
.features {
|
||||
display none
|
||||
flex-direction: column;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,10 @@ sidebar: false
|
|||
---
|
||||
# 关于
|
||||
|
||||
这是一个兼具博客文章、个人技能树、文档查找的网站。
|
||||
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客欢迎到[GitHub](https://github.com/xugaoyi/blog)点个Star、获取源码，或者[交换友链](/pages/844eea1b2387fb96/)。
|
||||
|
||||
博主，web前端工程师，喜欢唱、跳、rap、篮球，写程序。 本人↓↓↓
|
||||
|
||||
博主，从事Web前端开发工作，喜欢唱、跳、rap、篮球，写程序。 本人↓↓↓
|
||||
|
||||
<img src='https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg' width=300 alian=center alt='本人照片' >
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,43 @@ footer:
|
|||
bgImg: /img/footer.jpg
|
||||
---
|
||||
|
||||
## :earth_americas:前端
|
||||
# 简介
|
||||
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术（[最新](/pages/8818d4830dac5e2a/)）。如果你喜欢这个博客欢迎到 [GitHub](https://github.com/xugaoyi/blog) 点个Star、获取源码，或者[交换友链](/pages/844eea1b2387fb96/)。
|
||||
|
||||
</br>
|
||||
|
||||
## 特色功能
|
||||
博客部分特色功能介绍
|
||||
#### Demo演示模块
|
||||
为了更直观的展示一些代码的效果，博客添加了demo模块插件，可查看demo、源码，以及跳转到codepen在线编辑。**示例**：
|
||||
|
||||
::: demo [vanilla]
|
||||
```html
|
||||
<html>
|
||||
<div id="vanilla-box"></div>
|
||||
</html>
|
||||
<script>
|
||||
var box = document.getElementById('vanilla-box')
|
||||
box.innerHTML = 'Hello World! Welcome to EB'
|
||||
</script>
|
||||
<style>
|
||||
#vanilla-box {
|
||||
color: #11a8cd;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 搜索前端技术文档（学习笔记）
|
||||
|
||||
博客内容包含js、es6等文档教程（学习笔记），可以利用搜索框快速搜索到相关文档，如搜索 `Object`，即可搜索到在博客中存在的相关文档或文章，如果博客中没有，可以选择最下方的 `在MDN中搜索“XXX”` 到MDN查看权威文档。
|
||||
|
||||
</br>
|
||||
|
||||
|
||||
## 文章推荐
|
||||
|
||||
### :earth_americas:前端
|
||||
|
||||
* JavaScript
|
||||
* [ES6面向对象](/pages/1f4123be6f45abcd/)
|
||||
|
|
@ -32,7 +68,7 @@ footer:
|
|||
* TypeScript
|
||||
* [《TypeScript 从零实现 axios》](/pages/e05dce83e5129785/)
|
||||
|
||||
## 🗺️页面
|
||||
### 🗺️页面
|
||||
* HTML/CSS
|
||||
* [flex布局语法](/pages/0a83b083bdf257cb/)
|
||||
* [flex布局案例-圣杯布局](/pages/df9e7c7214fa5046/)
|
||||
|
|
@ -41,7 +77,7 @@ footer:
|
|||
|
||||
|
||||
|
||||
## 💻技术
|
||||
### 💻技术
|
||||
|
||||
* 技术文档
|
||||
* [Git使用手册](/pages/9a7ee40fc232253e/)
|
||||
|
|
@ -62,7 +98,7 @@ footer:
|
|||
* [博客源码](https://github.com/xugaoyi/blog)
|
||||
|
||||
|
||||
## 👾其他
|
||||
### 👾其他
|
||||
* 学习
|
||||
* [提高学习效率的策略](/pages/a8692ab3bdcb4588/)
|
||||
* [提高记忆的技巧](/pages/996822b2a2ca6e3b/)
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@
|
|||
"vuepress-plugin-zooming": "^1.1.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@better-scroll/core": "^2.0.0-beta.4",
|
||||
"@better-scroll/slide": "^2.0.0-beta.4",
|
||||
"vuepress-plugin-comment": "^0.7.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue