Skip to content

Commit a3833c4

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

File tree

19 files changed

+518
-839
lines changed

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;

0 commit comments

Comments
 (0)