Pārlūkot izejas kodu

fix:点赞后颜色改为红色

adam 5 gadus atpakaļ
vecāks
revīzija
5c1ff6edc7
2 mainītis faili ar 212 papildinājumiem un 212 dzēšanām
  1. 106
    106
      lib/components/ContentItem/index.css
  2. 106
    106
      src/components/ContentItem/index.css

+ 106
- 106
lib/components/ContentItem/index.css Parādīt failu

@@ -1,106 +1,106 @@
1
-.comment-item-box {
2
-  margin: 10px 0 0 0;
3
-  padding: 15px 5px 0 5px;
4
-  border-top: 1px solid #eee;
5
-}
6
-
7
-.comment-item-left {
8
-  display: inline-block;
9
-  vertical-align: top;
10
-  width: 40px;
11
-}
12
-
13
-.comment-item-right {
14
-  display: inline-block;
15
-  width: 90%;
16
-  margin-left: 10px;
17
-  margin-bottom: 20px;
18
-}
19
-
20
-.comment-item-content {
21
-  margin: 10px 0;
22
-  word-break: break-all;
23
-}
24
-
25
-.comment-item-bottom {
26
-  margin: 20px auto;
27
-}
28
-
29
-.comment-item-bottom-left {
30
-  float: left;
31
-  user-select: none;
32
-}
33
-
34
-.comment-item-bottom-right {
35
-  float: right;
36
-  margin-left: 5px;
37
-  cursor: pointer;
38
-}
39
-
40
-.comment-favor {
41
-  font-size: 20px;
42
-}
43
-
44
-.comment-favored {
45
-  color: #4a90e2;
46
-}
47
-
48
-.comment-item-image {
49
-  width: 400px;
50
-  max-width: 100%;
51
-}
52
-
53
-.comment-item-image .comment-item-image-wrapper {
54
-  float: left;
55
-  width: 25%;
56
-  box-sizing: border-box;
57
-  padding: 5px;
58
-}
59
-
60
-.comment-item-image .comment-item-image-wrapper .comment-img-thumbnail {
61
-  background-position: center;
62
-  background-size: cover;
63
-  display: inline-block;
64
-  width: 100%;
65
-  height: 0;
66
-  padding-bottom: 100%;
67
-  border-radius: 5px;
68
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined"),
69
-    auto;
70
-}
71
-
72
-.comment-item-image .comment-item-image-wrapper .comment-img-divider {
73
-  display: inline-block;
74
-  width: 100%;
75
-  height: 0;
76
-  padding-bottom: 100%;
77
-  border-radius: 5px;
78
-}
79
-
80
-.comment-item-image .comment-img {
81
-  margin-right: 10px;
82
-}
83
-
84
-@media screen and (max-width: 616px) and (min-width: 449px) {
85
-  .comment-item-right {
86
-    display: inline-block;
87
-    width: 85%;
88
-    margin-left: 10px;
89
-  }
90
-}
91
-
92
-@media screen and (max-width: 449px) and (min-width: 365px) {
93
-  .comment-item-right {
94
-    display: inline-block;
95
-    width: 80%;
96
-    margin-left: 10px;
97
-  }
98
-}
99
-
100
-@media screen and (max-width: 365px) {
101
-  .comment-item-right {
102
-    display: inline-block;
103
-    width: 75%;
104
-    margin-left: 10px;
105
-  }
106
-}
1
+.comment-item-box {
2
+  margin: 10px 0 0 0;
3
+  padding: 15px 5px 0 5px;
4
+  border-top: 1px solid #eee;
5
+}
6
+
7
+.comment-item-left {
8
+  display: inline-block;
9
+  vertical-align: top;
10
+  width: 40px;
11
+}
12
+
13
+.comment-item-right {
14
+  display: inline-block;
15
+  width: 90%;
16
+  margin-left: 10px;
17
+  margin-bottom: 20px;
18
+}
19
+
20
+.comment-item-content {
21
+  margin: 10px 0;
22
+  word-break: break-all;
23
+}
24
+
25
+.comment-item-bottom {
26
+  margin: 20px auto;
27
+}
28
+
29
+.comment-item-bottom-left {
30
+  float: left;
31
+  user-select: none;
32
+}
33
+
34
+.comment-item-bottom-right {
35
+  float: right;
36
+  margin-left: 5px;
37
+  cursor: pointer;
38
+}
39
+
40
+.comment-favor {
41
+  font-size: 20px;
42
+}
43
+
44
+.comment-favored {
45
+  color: #c00;
46
+}
47
+
48
+.comment-item-image {
49
+  width: 400px;
50
+  max-width: 100%;
51
+}
52
+
53
+.comment-item-image .comment-item-image-wrapper {
54
+  float: left;
55
+  width: 25%;
56
+  box-sizing: border-box;
57
+  padding: 5px;
58
+}
59
+
60
+.comment-item-image .comment-item-image-wrapper .comment-img-thumbnail {
61
+  background-position: center;
62
+  background-size: cover;
63
+  display: inline-block;
64
+  width: 100%;
65
+  height: 0;
66
+  padding-bottom: 100%;
67
+  border-radius: 5px;
68
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined"),
69
+    auto;
70
+}
71
+
72
+.comment-item-image .comment-item-image-wrapper .comment-img-divider {
73
+  display: inline-block;
74
+  width: 100%;
75
+  height: 0;
76
+  padding-bottom: 100%;
77
+  border-radius: 5px;
78
+}
79
+
80
+.comment-item-image .comment-img {
81
+  margin-right: 10px;
82
+}
83
+
84
+@media screen and (max-width: 616px) and (min-width: 449px) {
85
+  .comment-item-right {
86
+    display: inline-block;
87
+    width: 85%;
88
+    margin-left: 10px;
89
+  }
90
+}
91
+
92
+@media screen and (max-width: 449px) and (min-width: 365px) {
93
+  .comment-item-right {
94
+    display: inline-block;
95
+    width: 80%;
96
+    margin-left: 10px;
97
+  }
98
+}
99
+
100
+@media screen and (max-width: 365px) {
101
+  .comment-item-right {
102
+    display: inline-block;
103
+    width: 75%;
104
+    margin-left: 10px;
105
+  }
106
+}

+ 106
- 106
src/components/ContentItem/index.css Parādīt failu

@@ -1,106 +1,106 @@
1
-.comment-item-box {
2
-  margin: 10px 0 0 0;
3
-  padding: 15px 5px 0 5px;
4
-  border-top: 1px solid #eee;
5
-}
6
-
7
-.comment-item-left {
8
-  display: inline-block;
9
-  vertical-align: top;
10
-  width: 40px;
11
-}
12
-
13
-.comment-item-right {
14
-  display: inline-block;
15
-  width: 90%;
16
-  margin-left: 10px;
17
-  margin-bottom: 20px;
18
-}
19
-
20
-.comment-item-content {
21
-  margin: 10px 0;
22
-  word-break: break-all;
23
-}
24
-
25
-.comment-item-bottom {
26
-  margin: 20px auto;
27
-}
28
-
29
-.comment-item-bottom-left {
30
-  float: left;
31
-  user-select: none;
32
-}
33
-
34
-.comment-item-bottom-right {
35
-  float: right;
36
-  margin-left: 5px;
37
-  cursor: pointer;
38
-}
39
-
40
-.comment-favor {
41
-  font-size: 20px;
42
-}
43
-
44
-.comment-favored {
45
-  color: #4a90e2;
46
-}
47
-
48
-.comment-item-image {
49
-  width: 400px;
50
-  max-width: 100%;
51
-}
52
-
53
-.comment-item-image .comment-item-image-wrapper {
54
-  float: left;
55
-  width: 25%;
56
-  box-sizing: border-box;
57
-  padding: 5px;
58
-}
59
-
60
-.comment-item-image .comment-item-image-wrapper .comment-img-thumbnail {
61
-  background-position: center;
62
-  background-size: cover;
63
-  display: inline-block;
64
-  width: 100%;
65
-  height: 0;
66
-  padding-bottom: 100%;
67
-  border-radius: 5px;
68
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined"),
69
-    auto;
70
-}
71
-
72
-.comment-item-image .comment-item-image-wrapper .comment-img-divider {
73
-  display: inline-block;
74
-  width: 100%;
75
-  height: 0;
76
-  padding-bottom: 100%;
77
-  border-radius: 5px;
78
-}
79
-
80
-.comment-item-image .comment-img {
81
-  margin-right: 10px;
82
-}
83
-
84
-@media screen and (max-width: 616px) and (min-width: 449px) {
85
-  .comment-item-right {
86
-    display: inline-block;
87
-    width: 85%;
88
-    margin-left: 10px;
89
-  }
90
-}
91
-
92
-@media screen and (max-width: 449px) and (min-width: 365px) {
93
-  .comment-item-right {
94
-    display: inline-block;
95
-    width: 80%;
96
-    margin-left: 10px;
97
-  }
98
-}
99
-
100
-@media screen and (max-width: 365px) {
101
-  .comment-item-right {
102
-    display: inline-block;
103
-    width: 75%;
104
-    margin-left: 10px;
105
-  }
106
-}
1
+.comment-item-box {
2
+  margin: 10px 0 0 0;
3
+  padding: 15px 5px 0 5px;
4
+  border-top: 1px solid #eee;
5
+}
6
+
7
+.comment-item-left {
8
+  display: inline-block;
9
+  vertical-align: top;
10
+  width: 40px;
11
+}
12
+
13
+.comment-item-right {
14
+  display: inline-block;
15
+  width: 90%;
16
+  margin-left: 10px;
17
+  margin-bottom: 20px;
18
+}
19
+
20
+.comment-item-content {
21
+  margin: 10px 0;
22
+  word-break: break-all;
23
+}
24
+
25
+.comment-item-bottom {
26
+  margin: 20px auto;
27
+}
28
+
29
+.comment-item-bottom-left {
30
+  float: left;
31
+  user-select: none;
32
+}
33
+
34
+.comment-item-bottom-right {
35
+  float: right;
36
+  margin-left: 5px;
37
+  cursor: pointer;
38
+}
39
+
40
+.comment-favor {
41
+  font-size: 20px;
42
+}
43
+
44
+.comment-favored {
45
+  color: #c00;
46
+}
47
+
48
+.comment-item-image {
49
+  width: 400px;
50
+  max-width: 100%;
51
+}
52
+
53
+.comment-item-image .comment-item-image-wrapper {
54
+  float: left;
55
+  width: 25%;
56
+  box-sizing: border-box;
57
+  padding: 5px;
58
+}
59
+
60
+.comment-item-image .comment-item-image-wrapper .comment-img-thumbnail {
61
+  background-position: center;
62
+  background-size: cover;
63
+  display: inline-block;
64
+  width: 100%;
65
+  height: 0;
66
+  padding-bottom: 100%;
67
+  border-radius: 5px;
68
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined"),
69
+    auto;
70
+}
71
+
72
+.comment-item-image .comment-item-image-wrapper .comment-img-divider {
73
+  display: inline-block;
74
+  width: 100%;
75
+  height: 0;
76
+  padding-bottom: 100%;
77
+  border-radius: 5px;
78
+}
79
+
80
+.comment-item-image .comment-img {
81
+  margin-right: 10px;
82
+}
83
+
84
+@media screen and (max-width: 616px) and (min-width: 449px) {
85
+  .comment-item-right {
86
+    display: inline-block;
87
+    width: 85%;
88
+    margin-left: 10px;
89
+  }
90
+}
91
+
92
+@media screen and (max-width: 449px) and (min-width: 365px) {
93
+  .comment-item-right {
94
+    display: inline-block;
95
+    width: 80%;
96
+    margin-left: 10px;
97
+  }
98
+}
99
+
100
+@media screen and (max-width: 365px) {
101
+  .comment-item-right {
102
+    display: inline-block;
103
+    width: 75%;
104
+    margin-left: 10px;
105
+  }
106
+}