Skip to content

Commit a3833c4

Browse files
fxss5201fxss5201
committed
Merge branch 'develop'
2 parents f5b6ff6 + 7dd9894 commit a3833c4

19 files changed

+518
-839
lines changed

‎package-lock.json

Lines changed: 174 additions & 826 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
"markdown-it-toc-and-anchor": "^4.2.0",
1919
"mavon-editor": "^2.7.6",
2020
"moment": "^2.24.0",
21-
"node-sass": "^4.13.0",
2221
"vue": "^2.6.10",
2322
"vue-progressbar": "^0.7.5",
2423
"vue-router": "^3.0.6",
@@ -37,6 +36,7 @@
3736
"eslint": "^5.16.0",
3837
"eslint-plugin-vue": "^5.0.0",
3938
"http-proxy-middleware": "^0.20.0",
39+
"node-sass": "^4.13.0",
4040
"sass-loader": "^8.0.0",
4141
"vue-cli-plugin-axios": "0.0.4",
4242
"vue-cli-plugin-element": "^1.0.1",

‎src/components/AsideAuthorSkeleton.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<el-collapse v-model="activeName" accordion>
3+
<el-collapse-item name="1">
4+
<template slot="title">
5+
<div class="skeleton-row skeleton-box">
6+
<div class="skeleton-bac-animation"></div>
7+
<skeleton-circle diameter="28px"></skeleton-circle>
8+
<skeleton-rect height="20px" margin="4px 0 0 10px" width="100px"></skeleton-rect>
9+
</div>
10+
</template>
11+
<div class="author clearfix skeleton-box">
12+
<div class="skeleton-bac-animation"></div>
13+
<div class="item">
14+
<div class="title">
15+
<skeleton-rect height="19px" width="30px"></skeleton-rect>
16+
</div>
17+
<div class="number">
18+
<skeleton-rect height="19px" width="24px" margin="6px 0 0 3px"></skeleton-rect>
19+
</div>
20+
</div>
21+
<div class="item">
22+
<div class="title">
23+
<skeleton-rect height="19px" width="30px"></skeleton-rect>
24+
</div>
25+
<div class="number">
26+
<skeleton-rect height="19px" width="24px" margin="6px 0 0 3px"></skeleton-rect>
27+
</div>
28+
</div>
29+
<div class="item">
30+
<div class="title">
31+
<skeleton-rect height="19px" width="30px"></skeleton-rect>
32+
</div>
33+
<div class="number">
34+
<skeleton-rect height="19px" width="24px" margin="6px 0 0 3px"></skeleton-rect>
35+
</div>
36+
</div>
37+
<div class="item">
38+
<div class="title">
39+
<skeleton-rect height="19px" width="30px"></skeleton-rect>
40+
</div>
41+
<div class="number">
42+
<skeleton-rect height="19px" width="24px" margin="6px 0 0 3px"></skeleton-rect>
43+
</div>
44+
</div>
45+
<div class="item">
46+
<div class="title">
47+
<skeleton-rect height="19px" width="30px"></skeleton-rect>
48+
</div>
49+
<div class="number">
50+
<skeleton-rect height="19px" width="24px" margin="6px 0 0 3px"></skeleton-rect>
51+
</div>
52+
</div>
53+
</div>
54+
<aside-card-skeleton></aside-card-skeleton>
55+
<aside-card-skeleton></aside-card-skeleton>
56+
</el-collapse-item>
57+
</el-collapse>
58+
</template>
59+
60+
<script>
61+
import AsideCardSkeleton from '@/components/AsideCardSkeleton.vue'
62+
63+
export default {
64+
name: 'AsideAuthorSkeleton',
65+
data () {
66+
return {
67+
activeName: '1'
68+
}
69+
},
70+
components: {
71+
AsideCardSkeleton
72+
}
73+
}
74+
</script>
75+
76+
<style lang="scss" scoped>
77+
@import '@/style/components/aside-author.scss';
78+
@import '@/style/skeleton.scss';
79+
</style>

‎src/components/AsideCardSkeleton.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<el-card class="box-card"
3+
shadow="never">
4+
<div slot="header">
5+
<div class="skeleton-box">
6+
<div class="skeleton-bac-animation"></div>
7+
<skeleton-rect height="19px"></skeleton-rect>
8+
</div>
9+
</div>
10+
<div class="skeleton-box">
11+
<div class="skeleton-bac-animation"></div>
12+
<div class="skeleton-row" v-for="o in 5" :key="o">
13+
<skeleton-rect margin="4px 5px 4px 0" flex="3" height="18px"></skeleton-rect>
14+
<skeleton-rect margin="4px 0 4px 5px" flex="1" height="18px"></skeleton-rect>
15+
</div>
16+
</div>
17+
</el-card>
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: 'AsideCardSkeleton'
23+
}
24+
</script>
25+
26+
<style scoped lang="scss">
27+
@import '@/style/skeleton.scss';
28+
</style>

‎src/components/DetailSkeleton.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="skeleton-box">
3+
<div class="skeleton-bac-animation"></div>
4+
<skeleton-rect height="30px" margin="15px 0"></skeleton-rect>
5+
<div class="skeleton-row" style="margin: 15px 0">
6+
<skeleton-rect height="30px" width="50%"></skeleton-rect>
7+
<skeleton-rect height="30px" width="30%"></skeleton-rect>
8+
</div>
9+
<div class="skeleton-row" style="margin: 15px 0">
10+
<skeleton-rect height="25px" width="40%"></skeleton-rect>
11+
<skeleton-rect height="25px" width="40%"></skeleton-rect>
12+
</div>
13+
<div class="line"></div>
14+
<skeleton-rect height="20px" margin="10px 0"></skeleton-rect>
15+
<skeleton-rect height="20px" margin="10px 0"></skeleton-rect>
16+
<skeleton-rect height="20px" margin="10px 0"></skeleton-rect>
17+
<skeleton-rect height="20px" margin="10px 0" width="50%"></skeleton-rect>
18+
</div>
19+
</template>
20+
21+
<script>
22+
export default {
23+
name: 'DetailSkeleton'
24+
}
25+
</script>
26+
27+
<style lang="scss" scoped>
28+
@import '@/style/skeleton.scss';
29+
.line {
30+
margin: 20px 0 25px;
31+
height: 0;
32+
border-bottom: 1px solid #e6e6e6;
33+
}
34+
</style>

‎src/components/ListArticleSkeleton.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div class="item-box skeleton-box">
3+
<div class="skeleton-bac-animation"></div>
4+
<skeleton-rect height="30px"></skeleton-rect>
5+
<div class="content">
6+
<skeleton-rect height="18px" margin="8px 0"></skeleton-rect>
7+
<skeleton-rect height="18px" margin="8px 0"></skeleton-rect>
8+
<skeleton-rect height="18px" margin="8px 0" width="50%"></skeleton-rect>
9+
</div>
10+
<div class="footer clearfix">
11+
<skeleton-rect width="130px"></skeleton-rect>
12+
<skeleton-rect width="40px" margin="0 0 0 15px"></skeleton-rect>
13+
<skeleton-rect width="40px" margin="0 0 0 15px"></skeleton-rect>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script>
19+
export default {
20+
name: 'ListArticleSkeleton'
21+
}
22+
</script>
23+
24+
<style lang="scss" scoped>
25+
@import '@/style/components/list-article.scss';
26+
@import '@/style/skeleton.scss';
27+
.skeleton-box:hover {
28+
background: #fff;
29+
}
30+
.footer {
31+
display: flex;
32+
}
33+
</style>

‎src/components/PageHeader.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,9 @@ export default {
112112
if (this.$route.path === '/editor') res = '5'
113113
if (this.$route.path === '/admin') res = '6'
114114
}
115+
if (this.$route.path === '/detail') res = ''
115116
}
116-
return res || '1'
117+
return res
117118
}
118119
},
119120
created () {

‎src/components/skeleton/circle/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import SkeletonCircle from "./src/circle";
2+
3+
SkeletonCircle.install = function(Vue) {
4+
Vue.component(SkeletonCircle.name, SkeletonCircle);
5+
};
6+
7+
export default SkeletonCircle;

‎src/components/skeleton/circle/src/circle.vue

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="circle"
3+
:style="{ margin, flex, 'width': diameter, 'height': diameter, opacity }"></div>
4+
</template>
5+
6+
<script>
7+
export default {
8+
name: 'skeleton-circle',
9+
props: {
10+
margin: String,
11+
flex: String,
12+
diameter: String, // 直径,
13+
opacity: {
14+
type: String,
15+
default: '1'
16+
}
17+
}
18+
}
19+
</script>
20+
21+
<style lang="scss" scoped>
22+
.circle {
23+
flex: 0 0 auto;
24+
background-color: #efefef;
25+
border-radius: 50%;
26+
}
27+
</style>

‎src/components/skeleton/rect/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import SkeletonRect from "./src/rect";
2+
3+
SkeletonRect.install = function(Vue) {
4+
Vue.component(SkeletonRect.name, SkeletonRect);
5+
};
6+
7+
export default SkeletonRect;

‎src/components/skeleton/rect/src/rect.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="rect"
3+
:style="{ margin, flex, width, height, opacity }"></div>
4+
</template>
5+
6+
<script>
7+
export default {
8+
name: 'skeleton-rect',
9+
props: {
10+
margin: String,
11+
flex: String,
12+
width: {
13+
type: String,
14+
default: '100%'
15+
},
16+
height: {
17+
type: String,
18+
default: '26px'
19+
},
20+
opacity: {
21+
type: String,
22+
default: '1'
23+
}
24+
}
25+
}
26+
</script>
27+
28+
<style lang="scss" scoped>
29+
.rect {
30+
flex: 0 0 auto;
31+
background-color: #efefef;
32+
border-radius: 2px;
33+
}
34+
</style>

‎src/main.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import './plugins/axios'
44
import App from './App.vue'
55
import router from './router'
66
import store from './store'
7+
import SkeletonRect from './components/skeleton/rect/index.js'
8+
import SkeletonCircle from './components/skeleton/circle/index.js'
79
import './plugins/element.js'
810
import moment from 'moment'
911
import './style/common.scss'
@@ -16,12 +18,15 @@ const options = {
1618
}
1719

1820
Vue.use(VueProgressBar, options)
21+
Vue.use(SkeletonRect)
22+
Vue.use(SkeletonCircle)
1923

2024
Vue.config.productionTip = false
2125
Vue.prototype.$moment = moment
2226

2327
router.beforeEach((to, from, next) => {
2428
Vue.prototype.$message.closeAll()
29+
console.log(to)
2530
document.title = to.meta.title
2631
document.querySelector('meta[name="keywords"]').setAttribute('content', to.meta.keywords)
2732
document.querySelector('meta[name="description"]').setAttribute('content', to.meta.description)

‎src/plugins/axios.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Vue from 'vue'
44
import axios from 'axios'
55
import './element.js'
66
import store from './../store'
7-
import app from './../main'
87

98
// Full config: https://github.com/axios/axios#request-config
109
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || ''
@@ -28,7 +27,6 @@ let axiosSource // 需要最新的链接的保存参数的地方，适用于搜
2827

2928
_axios.interceptors.request.use(
3029
config => {
31-
app.$Progress.start()
3230
// Do something before request is sent
3331
if (config.showLoading && !pageAxiosList.size) {
3432
pageLoading = Vue.prototype.$loading({
@@ -75,7 +73,6 @@ _axios.interceptors.request.use(
7573
// Add a response interceptor
7674
_axios.interceptors.response.use(
7775
response => {
78-
app.$Progress.finish()
7976
// Do something with response data
8077
let nowUrl = response.config.url
8178
if (pageAxiosList.has(nowUrl)) {

‎src/router/index.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,17 @@ const routes = [
7474

7575
const router = new VueRouter({
7676
// mode: 'history',
77-
routes
77+
routes,
78+
scrollBehavior (to, from, savedPosition) {
79+
if (savedPosition) {
80+
return savedPosition
81+
} else {
82+
return {
83+
x: 0,
84+
y: 0
85+
}
86+
}
87+
}
7888
})
7989

8090
export default router

‎src/style/skeleton.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// 骨架屏
2+
.skeleton-box {
3+
position: relative;
4+
}
5+
.skeleton-bac-animation {
6+
position: absolute;
7+
z-index: 10;
8+
width: 100%;
9+
height: 100%;
10+
background: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 80%);
11+
background-size: 30% 100%;
12+
background-repeat: no-repeat;
13+
animation: backpos .9s ease-in-out 0s infinite;
14+
}
15+
@keyframes backpos {
16+
0% {
17+
background-position-x: -200px;
18+
}
19+
to {
20+
background-position-x: calc(200px + 100%);
21+
}
22+
}
23+
.skeleton-column,
24+
.skeleton-row {
25+
display: flex;
26+
}
27+
.skeleton-row {
28+
flex-direction: row;
29+
align-items: center;
30+
justify-content: space-between;
31+
}
32+
.skeleton-column {
33+
flex-direction: column;
34+
align-items: center;
35+
}

0 commit comments

Comments
 (0)