npm
/
comment
Watch 2
Star 3
Fork 17
Code Issues 3 Pull Requests -1 Releases 8 Wiki Activity
Browse Source

fix:点赞后颜色改为红色

adam 5 years ago
parent
fb5ab36d0e
commit
5c1ff6edc7
2 changed files with 212 additions and 212 deletions
Split View Show Diff Stats
  1. 106
    106
      lib/components/ContentItem/index.css
  2. 106
    106
      src/components/ContentItem/index.css

+ 106
- 106
lib/components/ContentItem/index.css View File 

@@ -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 View File 

@@ -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 
+}