Showing
2 changed files
with
26 additions
and
55 deletions
@@ -35,7 +35,10 @@ | @@ -35,7 +35,10 @@ | ||
35 | <div class="liverec_info"> | 35 | <div class="liverec_info"> |
36 | <img class="liverec_head" src="{{image master_pic 120 120}}" alt="头像"> | 36 | <img class="liverec_head" src="{{image master_pic 120 120}}" alt="头像"> |
37 | <div class="liverec_pannel"> | 37 | <div class="liverec_pannel"> |
38 | - <p class="liverec_name">{{master_name}} <span class="name-tag">{{master_meta}}</span></p> | 38 | + <p class="liverec_name"> |
39 | + <span class="name-name">{{master_name}}</span> | ||
40 | + <span class="name-tag">{{master_meta}}</span> | ||
41 | + </p> | ||
39 | <p class="liverec_tag">{{title}}</p> | 42 | <p class="liverec_tag">{{title}}</p> |
40 | </div> | 43 | </div> |
41 | </div> | 44 | </div> |
@@ -56,61 +56,14 @@ $border: #e0e0e0; | @@ -56,61 +56,14 @@ $border: #e0e0e0; | ||
56 | text-align: center; | 56 | text-align: center; |
57 | line-height: 1.5; | 57 | line-height: 1.5; |
58 | } | 58 | } |
59 | - | ||
60 | - /*&_info { | ||
61 | - position: relative; | ||
62 | - height: 102px; | ||
63 | - width: 320px; | ||
64 | - border-top: 1px solid $border; | ||
65 | - border-bottom: 1px solid $border; | ||
66 | - }*/ | ||
67 | - | ||
68 | - /*&_head { | ||
69 | - position: absolute; | ||
70 | - top: 20px; | ||
71 | - left: 30px; | ||
72 | - height: 60px; | ||
73 | - width: 60px; | ||
74 | - border-radius: 50%; | ||
75 | - }*/ | ||
76 | - | ||
77 | - /*&_pannel { | ||
78 | - position: absolute; | ||
79 | - top: 20px; | ||
80 | - left: 110px; | ||
81 | - }*/ | ||
82 | - | ||
83 | - &_name { | ||
84 | - margin-bottom: 14px; | ||
85 | - font-size: 26px; | ||
86 | - color: $black; | ||
87 | - line-height: 100%; | ||
88 | - } | ||
89 | - | ||
90 | - /*.name-tag { | ||
91 | - position: relative; | ||
92 | - top: -2px; | ||
93 | - display: inline-block; | ||
94 | - height: 26px; | ||
95 | - width: 86px; | ||
96 | - font-size: 17.9px; | ||
97 | - background: $black; | ||
98 | - margin-left: 5px; | ||
99 | - border-radius: 20px; | ||
100 | - color: $white; | ||
101 | - text-align: center; | ||
102 | - line-height: 1.5; | ||
103 | - }*/ | ||
104 | - | 59 | + |
105 | &_tag { | 60 | &_tag { |
106 | font-size: 20px; | 61 | font-size: 20px; |
62 | + line-height: 1.2; | ||
107 | color: $black; | 63 | color: $black; |
108 | - line-height: 100%; | ||
109 | - display: -webkit-box; | ||
110 | overflow: hidden; | 64 | overflow: hidden; |
111 | - word-break: break-all; | ||
112 | - -webkit-box-orient: vertical; | ||
113 | - -webkit-line-clamp: 1; | 65 | + white-space: nowrap; |
66 | + text-overflow: ellipsis; | ||
114 | } | 67 | } |
115 | } | 68 | } |
116 | 69 | ||
@@ -128,19 +81,34 @@ $border: #e0e0e0; | @@ -128,19 +81,34 @@ $border: #e0e0e0; | ||
128 | } | 81 | } |
129 | 82 | ||
130 | .liverec_pannel { | 83 | .liverec_pannel { |
84 | + line-height: 1; | ||
131 | overflow: hidden; | 85 | overflow: hidden; |
132 | } | 86 | } |
133 | 87 | ||
134 | .liverec_name { | 88 | .liverec_name { |
135 | - line-height: 1; | ||
136 | font-size: 26px; | 89 | font-size: 26px; |
137 | margin-bottom: 14px; | 90 | margin-bottom: 14px; |
91 | + color: $black; | ||
92 | + | ||
93 | + .name-name { | ||
94 | + display: inline-block; | ||
95 | + height: 26px; | ||
96 | + max-width: 85px; | ||
97 | + overflow: hidden; | ||
98 | + } | ||
138 | 99 | ||
139 | .name-tag { | 100 | .name-tag { |
140 | display: inline-block; | 101 | display: inline-block; |
141 | - width: 100px; | ||
142 | - text-align: center; | ||
143 | font-size: 18px; | 102 | font-size: 18px; |
103 | + height: 26px; | ||
104 | + line-height: 26px; | ||
105 | + padding: 0 8px; | ||
106 | + max-width: 90px; | ||
107 | + text-align: center; | ||
108 | + background: $black; | ||
109 | + border-radius: 20px; | ||
110 | + color: $white; | ||
111 | + vertical-align: top; | ||
144 | } | 112 | } |
145 | } | 113 | } |
146 | 114 |
-
Please register or login to post a comment