常用样式
happylay 🐑 2020-12-23 代码片段样式
摘要: 常用样式 时间: 2020-12-23
# 常用写法说明
// 保证居中对齐
display: flex;
justify-content: center;
align-items: center;
// 可以占据剩余空间
flex: 1;
// 第一个div，注意类似于通配符
div: nth-child(1);
// 内边框
border: 0.278vw solid #e97b99;
// 外边框（轮廓）
outline: none;
// 可以设置右边分界线
border-right: 0.278vw solid #ccc;
// 可以设置底部分界线
border-bottom: 1px solid #e7e7e7;
// 内边距
padding: 0.833vw;
// 上、右、下、左（顺时针）
padding: 20px 0 10px 10px;
// 圆角（高度一半）
border-radius: 1.389vw;
// 阴影(右、下、全 顺时针)
box-shadow: 0px 0px 10px #aaa;
// 字体颜色
color: #e97b99;
// 纵向排列
flex-direction: column;
// 横向均匀分布
justify-content: space-between;
// 配置相对定位，可以定位右边元素
right: 0;
// 旋转180度
transform: rotate(180deg);
.detailparent {
display: flex;
// 子项目多行
flex-wrap: wrap;
justify-content: space-between;
.detailitem {
// 外边距
margin: 10px 0;
width: 45%;
}
}
.uploadfile {
// 相对定位
position: relative;
// 内容会被修剪，并且其余内容是不可见的
overflow: hidden;
.uploadimg {
// 透明度 从0.0（完全透明）到1.0（完全不透明）
opacity: 0;
// 绝对定位
position: absolute;
}
}
div:nth-child(2) {
flex: 1;
display: flex;
align-items: center;
margin: 0 5px;
p {
font-size: 3vw;
line-height: 6vw;
background-color: white;
height: 6.322vw;
width: 100%;
position: relative;
padding-left: 6.944vw;
border-radius: 3.611vw;
color: #aaa;
.input-icon {
position: absolute;
left: 10px;
top: 50%;
// 可以调整为居中
transform: translate(0, -50%);
color: #aaa;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
# 布局一
p 标签：块级元素
span 标签：行级元素
<template>
<div class="userdetal">
<div>
<!-- 左侧-头像 -->
<div class="user_img">
<img :src="userinfo.user_img" alt="" v-if="userinfo.user_img" />
<img src="@/assets/user.jpg" v-else />
</div>
<!-- 右侧 -->
<div class="user_edit">
<div>
<p>
<span>666</span>
<span class="user_test">粉丝</span>
</p>
<p>
<span>666</span>
<span class="user_test">关注</span>
</p>
<p>
<span>666</span>
<span class="user_test">获赞</span>
</p>
</div>
<div @click="$router.push('/edit')">
<div class="user_editbtn">
编辑资料
</div>
</div>
</div>
</div>
<!-- 个人信息 -->
<div>
<h2 v-if="userinfo.name">{{ userinfo.name }}</h2>
<h2 v-else>存在したくないし</h2>
<p v-if="userinfo.user_desc">{{ userinfo.user_desc }}</p>
<p v-else>这个人很神秘，什么都没有写</p>
</div>
</div>
</template>
<style lang="scss" scoped>
.user_edit {
flex: 1;
div:nth-child(1) {
display: flex;
p {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.user_test {
color: #aaa;
}
}
p:nth-child(1),
p:nth-child(2) {
border-right: 0.278vw solid #ccc;
}
}
div:nth-child(2) {
padding: 5.556vw;
.user_editbtn {
border: 0.278vw solid #e97b99;
padding: 0.833vw;
display: flex;
justify-content: center;
align-items: center;
color: #e97b99;
border-radius: 1.389vw;
}
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# 布局二
<template>
<div class="home">
<nav-bar></nav-bar>
<van-tabs v-model="active" swipeable sticky>
<van-tab
v-for="(item, index) in category"
:key="index"
:title="item.title"
>
<div v-if="active == index">
<van-list
v-model="item.loading"
:finished="item.finished"
finished-text="我也是有底线的"
:immediate-check="false"
@load="onLoad"
>
<div class="detailparent">
<detail
class="detailitem"
v-for="(categoryitem, categoryindex) in item.list"
:key="categoryindex"
:detailItem="categoryitem"
/>
</div>
</van-list>
</div>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import NavBar from "@/components/common/NavBar";
import Detail from "./Detail";
export default {
name: "Home",
components: {
NavBar,
Detail,
},
data() {
return {
category: [],
active: 0,
};
},
methods: {
async selectCategory() {
const res = await this.$http.get("/category");
this.changeCategory(res.data);
},
changeCategory(data) {
const category1 = data.map((item) => {
item.list = [];
item.page = 0;
item.finished = false;
item.loading = false;
item.pagesize = 10;
return item;
});
console.log(category1);
this.category = category1;
},
async selectArticle() {
const categoryItem = this.categoryItem();
const res = await this.$http.get("/detail/" + categoryItem._id, {
params: {
page: categoryItem.page,
pagesize: categoryItem.pagesize,
},
});
categoryItem.list.push(...res.data);
if (res.data.length < categoryItem.pagesize) {
categoryItem.finished = true;
}
},
categoryItem() {
const categoryItem = this.category[this.active];
console.log(categoryItem);
return categoryItem;
},
onLoad() {
const categoryItem = this.categoryItem();
categoryItem.page += 1;
categoryItem.loading = false;
this.selectArticle();
},
},
watch: {
active() {
this.selectArticle();
},
},
created() {
this.selectCategory();
},
};
</script>
<style lang="scss" scoped>
.home {
background-color: white;
}
.detailparent {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.detailitem {
margin: 10px 0;
width: 45%;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
# 布局三
<template>
<div v-if="model" class="editViews">
<div style="margin-bottom:10px;">
<nav-bar :imgurl="model.user_img"></nav-bar>
</div>
<div class="uploadfile">
<van-uploader
class="uploadimg"
preview-size="100vw"
:after-read="afterRead"
/>
<edit-banner left="头像">
<img :src="model.user_img" alt="" slot="right" v-if="model.user_img" />
<img src="@/assets/default_img.jpg" alt="" slot="right" v-else />
</edit-banner>
</div>
<edit-banner left="昵称" @bannerClick="show = true">
<a href="javascript:;" slot="right">{{ model.name }}</a>
</edit-banner>
<edit-banner left="账号">
<a href="javascript:;" slot="right">{{ model.username }}</a>
</edit-banner>
<edit-banner left="性别" @bannerClick="genderShow = true">
<a href="javascript:;" slot="right"
>{{ model.gender == 1 ? "男" : "女" }}</a
>
</edit-banner>
<edit-banner left="个签" @bannerClick="textShow = true">
<a href="javascript:;" slot="right">{{ model.user_desc }}</a>
</edit-banner>
<van-dialog
v-model="show"
title="昵称"
show-cancel-button
@confirm="confirmClick"
@cancel="content = ''"
>
<van-field v-model="content" autofocus />
</van-dialog>
<van-dialog
v-model="textShow"
title="个签"
show-cancel-button
@confirm="testClick"
@cancel="content = ''"
>
<van-field v-model="content" autofocus />
</van-dialog>
<div class="editback" @click="$router.back()">返回个人中心</div>
<van-action-sheet
v-model="genderShow"
:actions="actions"
cancel-text="取消"
@select="onSelect"
/>
</div>
</template>
<script>
import NavBar from "@/components/common/NavBar";
import EditBanner from "@/components/common/EditBanner";
export default {
name: "Edit",
components: {
NavBar,
EditBanner,
},
data() {
return {
model: {},
show: false,
textShow: false,
content: "",
genderShow: false,
actions: [
{ name: "男", val: 1 },
{ name: "女", val: 0 },
],
};
},
methods: {
async selectUser() {
const res = await this.$http.get("/user/" + localStorage.getItem("id"));
this.model = res.data[0];
},
async afterRead(data) {
console.log(data);
var formdata = new FormData();
formdata.append("file", data.file);
const res = await this.$http.post("/upload", formdata);
console.log(res);
this.model.user_img = res.data.url;
this.userUpdate();
},
async userUpdate() {
const res = await this.$http.post(
"/update/" + localStorage.getItem("id"),
this.model
);
if (res.data.code == 200) {
this.$msg.fail("修改成功");
}
console.log(res);
},
confirmClick() {
console.log("确认");
this.model.name = this.content;
this.userUpdate();
this.content = "";
},
testClick() {
console.log("确认");
this.model.user_desc = this.content;
this.userUpdate();
this.content = "";
},
onSelect(data) {
console.log(data);
this.model.gender = data.val;
this.userUpdate();
this.genderShow = false;
},
},
created() {
this.selectUser();
},
};
</script>
<style lang="scss" scoped>
.editViews a {
color: #333;
}
.editViews img {
height: 46px;
width: 46px;
}
.uploadfile {
position: relative;
overflow: hidden;
.uploadimg {
opacity: 0;
position: absolute;
}
}
.editback {
margin-top: 5.556vw;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 5vw;
padding: 1.389vw 0;
color: #999;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157