Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1ab9e1d

Browse files
committed
💄 样式:使用 sass-bem 重写
1 parent 0f9be55 commit 1ab9e1d

File tree

11 files changed

+1223
-338
lines changed

11 files changed

+1223
-338
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,16 @@
5858
"mpvue-loader": "^1.0.8",
5959
"mpvue-template-compiler": "^1.0.6",
6060
"mpvue-webpack-target": "^1.0.0",
61+
"node-sass": "^4.8.3",
6162
"npm-run-all": "^4.1.2",
6263
"optimize-css-assets-webpack-plugin": "^2.0.0",
6364
"ora": "^1.2.0",
6465
"postcss-loader": "^2.0.6",
6566
"postcss-mpvue-wxss": "^1.0.0",
6667
"px2rpx-loader": "^0.1.8",
6768
"rimraf": "^2.6.0",
69+
"sass-bem": "^2.6.5",
70+
"sass-loader": "^7.0.1",
6871
"semver": "^5.3.0",
6972
"shelljs": "^0.7.6",
7073
"url-loader": "^0.5.8",

‎src/App.vue‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,5 @@ export default {
1212
</script>
1313

1414
<style>
15-
.container {
16-
height: 100%;
17-
display: flex;
18-
flex-direction: column;
19-
align-items: center;
20-
justify-content: space-between;
21-
/* padding: 200rpx 0; */
22-
box-sizing: border-box;
23-
}
24-
/* this rule will be remove */
25-
* {
26-
transition: width 2s;
27-
-moz-transition: width 2s;
28-
-webkit-transition: width 2s;
29-
-o-transition: width 2s;
30-
}
15+
3116
</style>

‎src/components/movie-item.vue‎

Lines changed: 63 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
2-
<div class="md-list-item">
3-
<view class="item">
4-
<image class="poster" :src="movie.images.small"></image>
5-
<view class="meta">
6-
<text class="title">{{ movie.title }}</text>
7-
<text class="sub-title">{{ movie.original_title }} ({{ movie.year }})</text>
8-
<view class="artists">导演:<block v-for="(director, i) in movie.directors" :key="director.id"> {{ director.name }} </block></view>
2+
<div class="md-movie-item">
3+
<view class="md-movie-item__item">
4+
<image class="md-movie-item__poster" :src="movie.images.small"></image>
5+
<view class="md-movie-item__meta">
6+
<text class="md-movie-item__title">{{ movie.title }}</text>
7+
<text class="md-movie-item__sub-title">{{ movie.original_title }} ({{ movie.year }})</text>
8+
<view class="md-movie-item__artists">导演:<block v-for="(director, i) in movie.directors" :key="director.id"> {{ director.name }} </block></view>
99
</view>
10-
<view class="rating">
11-
<text>{{ movie.rating.average }}</text>
10+
<view class="md-movie-item__rating">
11+
<textclass="md-movie-item__rating-text">{{ movie.rating.average }}</text>
1212
</view>
1313
</view>
1414
</div>
@@ -25,5 +25,58 @@ export default {
2525
}
2626
</script>
2727

28-
<style>
28+
<style lang="scss">
29+
@import "node_modules/sass-bem/bem";
30+
$bem-component-namespace: 'md';
31+
32+
@include c('movie-item') {
33+
34+
@include e('item') {
35+
display: flex;
36+
padding: 20rpx 40rpx;
37+
border-bottom: 1rpx solid #eee;
38+
cursor: pointer;
39+
}
40+
41+
@include e('poster') {
42+
width: 128rpx;
43+
height: 168rpx;
44+
margin-right: 20rpx;
45+
}
46+
47+
@include e('meta') {
48+
flex: 1;
49+
}
50+
51+
@include e('title') {
52+
display: block;
53+
margin-bottom: 15rpx;
54+
font-size: 32rpx;
55+
}
56+
57+
@include e('sub-title') {
58+
display: block;
59+
margin-bottom: 15rpx;
60+
font-size: 22rpx;
61+
color: #c0c0c0;
62+
}
63+
64+
@include e('artists') {
65+
font-size: 24rpx;
66+
color: #999;
67+
}
68+
69+
@include e('rating-text') {
70+
display: inline-block;
71+
width: 40rpx;
72+
font-size: 28rpx;
73+
font-weight: bold;
74+
text-align: center;
75+
background-color: rgba(247, 76, 49, 0.8);
76+
color: #fff;
77+
padding: 10rpx;
78+
border-radius: 20rpx;
79+
}
80+
}
81+
2982
</style>

‎src/components/movie-list.vue‎

Lines changed: 26 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="md-movie-list">
3-
<view class="list">
3+
<view class="md-movie-list__list">
44
<template v-if="type !== 'us_box'">
55
<navigator :url="'../item/main?id=' + item.id" v-for="(item, index) in movies" :key="item.id">
66
<movie-item :movie="item"></movie-item>
@@ -11,10 +11,10 @@
1111
<movie-item :movie="item.subject"></movie-item>
1212
</navigator>
1313
</template>
14-
<view class="tips">
14+
<view class="md-movie-list__tips">
1515
<view v-if="hasMore">
16-
<image src="/static/images/loading.gif" mode="aspectFill"/>
17-
<text>正在加载...</text>
16+
<image class="md-movie-list__tips-image"src="/static/images/loading.gif" mode="aspectFill"/>
17+
<textclass="md-movie-list__tips-text">正在加载...</text>
1818
</view>
1919
<view v-else>
2020
<text>--------------- 我也是有底线的 --------------</text>
@@ -49,90 +49,33 @@ export default {
4949
}
5050
</script>
5151

52-
<style>
53-
.list {
54-
height: 100%;
55-
}
56-
57-
.list .item {
58-
display: flex;
59-
padding: 20rpx 40rpx;
60-
border-bottom: 1rpx solid #eee;
61-
cursor: pointer;
62-
}
63-
64-
.list .item .poster {
65-
width: 128rpx;
66-
height: 168rpx;
67-
margin-right: 20rpx;
68-
}
69-
70-
.list .item .meta {
71-
flex: 1;
72-
}
73-
74-
.list .item .meta .title,
75-
.list .item .meta .sub-title {
76-
display: block;
77-
margin-bottom: 15rpx;
78-
}
79-
80-
.list .item .meta .title {
81-
font-size: 32rpx;
82-
}
83-
84-
.list .item .meta .sub-title {
85-
font-size: 22rpx;
86-
color: #c0c0c0;
87-
}
52+
<style lang="scss">
53+
@import "node_modules/sass-bem/bem";
54+
$bem-component-namespace: 'md';
8855
89-
.list .item .meta .artists {
90-
font-size: 24rpx;
91-
color: #999;
92-
}
93-
94-
.list .item .rating text {
95-
display: inline-block;
96-
width: 40rpx;
97-
font-size: 28rpx;
98-
font-weight: bold;
99-
text-align: center;
100-
background-color: rgba(247, 76, 49, 0.8);
101-
color: #fff;
102-
padding: 10rpx;
103-
border-radius: 20rpx;
104-
}
105-
106-
.list .tips {
107-
font-size: 28rpx;
108-
text-align: center;
109-
padding: 50rpx;
110-
color: #ccc;
111-
}
112-
113-
.list .tips image,
114-
.list .tips text {
115-
vertical-align: middle;
116-
}
56+
@include c('movie-list') {
11757
118-
.list .tips image {
119-
width: 40rpx;
120-
height: 40rpx;
121-
margin-right: 20rpx;
122-
}
58+
@include e('list') {
59+
height: 100%;
60+
}
12361
124-
.header {
125-
display: flex;
126-
justify-content: center;
127-
border-bottom: 1rpx solid #ccc;
128-
}
62+
@include e('tips') {
63+
font-size: 28rpx;
64+
text-align: center;
65+
padding: 50rpx;
66+
color: #ccc;
67+
}
12968
69+
@include e('tips-text') {
70+
vertical-align: middle;
71+
}
13072
131-
.header text {
132-
padding: 20rpx 40rpx;
133-
color: #999;
134-
font-size: 38rpx;
135-
text-align: center;
73+
@include e('tips-image') {
74+
width: 40rpx;
75+
height: 40rpx;
76+
margin-right: 20rpx;
77+
vertical-align: middle;
78+
}
13679
}
13780
13881
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /