Skip to content

Commit 0c3942e

Browse files
chenc041chenc041
committed
feat: 增加简答骨架屏, 删除点赞, 收藏等逻辑
1 parent be7f76b commit 0c3942e

14 files changed

Lines changed: 228 additions & 282 deletions

File tree

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ module.exports = {
3434
// allow optionalDependencies
3535
'import/no-extraneous-dependencies': 0,
3636
'import/no-duplicates': 0,
37+
'arrow-parens':0,
3738
'import/no-named-as-default': 0,
3839
'import/no-named-as-default-member': 0,
3940
// allow debugger during development

‎.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"singleQuote": true,
3+
"bracketSpacing": true,
4+
"trailingComma": "es5",
5+
"printWidth": 80,
6+
"arrowParens": "always"
7+
}

‎project.config.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@
22
"description": "项目配置文件。",
33
"setting": {
44
"urlCheck": true,
5-
"es6": false,
5+
"es6": true,
66
"postcss": true,
77
"minified": true,
8-
"newFeature": true
8+
"newFeature": true,
9+
"autoAudits": false
910
},
1011
"miniprogramRoot": "dist/wx/",
1112
"compileType": "miniprogram",
12-
"appid": "1111",
13+
"appid": "wx32591462be84da32",
1314
"projectname": "hello-cnode",
15+
"simulatorType": "wechat",
16+
"simulatorPluginLibVersion": {},
1417
"condition": {
1518
"search": {
1619
"current": -1,
@@ -29,4 +32,4 @@
2932
"list": []
3033
}
3134
}
32-
}
35+
}

‎src/components/skeletonIndex.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div class="container">
3+
<div class="topic-list">
4+
<div class="topic-list-item" v-for="item of Skeleton" :key="item">
5+
<div class="topic-item-left"></div>
6+
<div class="topic-item-right">
7+
<div class="topic-list-item-top">
8+
<div class="topic-author">c</div>
9+
</div>
10+
<div class="topic-list-item-bottom">
11+
<div class="topic-title">c</div>
12+
<div class="topic-badge">c</div>
13+
</div>
14+
</div>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
props: {
23+
Skeleton: {
24+
type: Array,
25+
default: () => [1, 2, 3, 4, 5, 6],
26+
},
27+
},
28+
data() {
29+
return {
30+
Skeleton: this.Skeleton,
31+
};
32+
},
33+
};
34+
</script>
35+
36+
<style scoped>
37+
.topic-list {
38+
padding-top: 15px;
39+
padding-bottom: 30px;
40+
}
41+
.topic-list-item {
42+
display: flex;
43+
width: 345px;
44+
height: auto;
45+
border-radius: 8px;
46+
margin: 0 auto 18px;
47+
padding-bottom: 10px;
48+
justify-content: flex-start;
49+
box-shadow: 0 0 8px 2px #dddddd;
50+
}
51+
52+
.topic-badge {
53+
width: 55%;
54+
height: 15px;
55+
font-size: 10px;
56+
margin-top: 6px;
57+
color: #eeeeee;
58+
margin-right: 10px;
59+
background: #eeeeee;
60+
}
61+
62+
.topic-item-left {
63+
width: 40px;
64+
height: 40px;
65+
border-radius: 100%;
66+
overflow: hidden;
67+
margin-top: 10px;
68+
margin-right: 10px;
69+
margin-left: 10px;
70+
background: #eeeeee;
71+
}
72+
.topic-item-left > img {
73+
width: 100%;
74+
height: 100%;
75+
overflow: hidden;
76+
}
77+
.topic-item-right {
78+
width: 285px;
79+
}
80+
81+
.topic-list-item-top {
82+
display: flex;
83+
align-items: center;
84+
justify-content: space-between;
85+
}
86+
.topic-title {
87+
width: 275px;
88+
height: 30px;
89+
font-size: 10px;
90+
overflow: hidden;
91+
margin-top: 10px;
92+
color: #eeeeee;
93+
margin-right: 10px;
94+
text-overflow: ellipsis;
95+
background-color: #eeeeee;
96+
}
97+
.topic-author {
98+
width: 30%;
99+
height: 16px;
100+
color: #eeeeee;
101+
margin-top: 10px;
102+
overflow: hidden;
103+
background: #eeeeee;
104+
}
105+
</style>

‎src/components/skeletonIndexDetail.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="topic-content">
3+
<div class="toppic-content-wrap">
4+
<div class="topic-detail-title">x</div>
5+
<div class="topic-detail-content">x</div>
6+
<div class="topic-detail-replies">
7+
<SkeletonIndex />
8+
</div>
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import SkeletonIndex from '@/components/skeletonIndex';
15+
16+
export default {
17+
components: {
18+
SkeletonIndex,
19+
},
20+
};
21+
</script>
22+
23+
<style scoped>
24+
.topic-content {
25+
width: 345px;
26+
font-size: 14px;
27+
margin-top: 10px;
28+
}
29+
.topic-detail-title {
30+
width: 65%;
31+
height: 14px;
32+
color: #eeeeee;
33+
margin-bottom: 10px;
34+
background-color: #eeeeee;
35+
}
36+
.topic-detail-content {
37+
width: 100%;
38+
height: 100px;
39+
color: #eeeeee;
40+
background: #eeeeee;
41+
}
42+
</style>
43+
44+

‎src/pages/ask/index.vue‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@click="navigateTo('/pages/detail/main', 'id', item.id)"
99
>
1010
<div class="topic-item-left">
11-
<img :src="item.author.avatar_url" :alt="item.author.loginname">
11+
<img :src="item.author.avatar_url" :alt="item.author.loginname" />
1212
</div>
1313
<div class="topic-item-right">
1414
<div class="topic-list-item-top">
@@ -18,19 +18,17 @@
1818
<div class="topic-list-item-bottom">
1919
<div class="topic-title">{{ item.title }}</div>
2020
<div class="topic-badge">
21-
<div class="top" v-if="item.top">置顶</div><span v-if="item.top" class="divider">|</span>
22-
<badge :badge="item.tab"/> <span class="divider">|</span>
21+
<div class="top" v-if="item.top">置顶</div>
22+
<span v-if="item.top" class="divider">|</span>
23+
<badge :badge="item.tab" />
24+
<span class="divider">|</span>
2325
<div class="topic-hot">{{ item.reply_count }} / {{ item.visit_count }}</div>
2426
</div>
2527
</div>
2628
</div>
2729
</div>
2830
</div>
29-
<div
30-
v-if="isScan"
31-
class="cnode-menu-bar"
32-
@click="scanLogin()"
33-
>[ ]</div>
31+
<div v-if="isScan" class="cnode-menu-bar" @click="scanLogin()">[ ]</div>
3432
</div>
3533
</template>
3634

@@ -158,7 +156,7 @@ export default {
158156
margin-right: 10px;
159157
margin-left: 10px;
160158
}
161-
.topic-item-left>img {
159+
.topic-item-left > img {
162160
width: 100%;
163161
height: 100%;
164162
overflow: hidden;
@@ -266,5 +264,4 @@ export default {
266264
background: #ff4466;
267265
border: 0.5px solid #ff4466;
268266
}
269-
270267
</style>

0 commit comments

Comments
 (0)