|
32 | 32 | </template> |
33 | 33 |
|
34 | 34 | <style lang="stylus" rel="stylesheet/stylus" scoped type="text/stylus"> |
35 | | - .box{ |
36 | | - width 100% |
37 | | - height 100% |
38 | | - margin-top 50px |
| 35 | + .box { |
| 36 | + width: 100%; |
| 37 | + height: 100%; |
| 38 | + margin-top: 50px; |
39 | 39 | } |
| 40 | +
|
40 | 41 | .boxSize { |
41 | 42 | position: relative; |
42 | 43 | float: left; |
|
48 | 49 | border: 1px solid #ddd; |
49 | 50 | // overflow: hidden; |
50 | 51 | border-radius: 5px; |
51 | | - cursor pointer |
52 | | - transition: transform 0.4s ease |
| 52 | + cursor: pointer; |
| 53 | + transition: transform 0.4s ease; |
| 54 | +
|
53 | 55 | .sourceName { |
54 | 56 | overflow: hidden; |
55 | 57 | text-overflow: ellipsis; |
|
59 | 61 | font-size: 16px; |
60 | 62 | color: #333; |
61 | 63 | line-height: 28px; |
62 | | - padding 10px 15px |
| 64 | + padding: 10px 15px; |
| 65 | +
|
63 | 66 | i { |
64 | | - font-style normal |
| 67 | + font-style: normal; |
65 | 68 | } |
| 69 | +
|
66 | 70 | .itemName { |
67 | | - float left |
| 71 | + float: left; |
| 72 | + width: 126px; |
| 73 | + text-overflow: ellipsis; |
| 74 | + white-space: nowrap; |
| 75 | + overflow: hidden; |
68 | 76 | } |
| 77 | +
|
69 | 78 | .fork { |
70 | | - float right |
71 | | - .num{ |
| 79 | + float: right; |
| 80 | +
|
| 81 | + .num { |
72 | 82 | font-weight: 400; |
73 | 83 | color: #666; |
74 | | - margin-left 10px |
| 84 | + margin-left: 10px; |
75 | 85 | } |
76 | 86 | } |
77 | 87 | } |
78 | | - .bottom{ |
79 | | - margin-top 10px |
| 88 | +
|
| 89 | + .bottom { |
| 90 | + margin-top: 10px; |
80 | 91 | } |
| 92 | +
|
81 | 93 | .sourceKey { |
82 | 94 | width: 200px; |
83 | 95 | overflow: hidden; |
|
97 | 109 | &:hover { |
98 | 110 | cursor: pointer; |
99 | 111 | // box-shadow: 0 10px 30px 0 hsla(0,0%,84.3%,.5); |
100 | | - transform: translate3d(0,-4px,0); |
| 112 | + transform: translate3d(0, -4px, 0); |
101 | 113 | box-shadow: 0px 0px 8px #8D8E8F; |
102 | 114 | } |
103 | 115 |
|
|
115 | 127 | filter: blur(10px); |
116 | 128 | position: absolute; |
117 | 129 | width: 100%; |
118 | | - z-index 1 |
119 | | - left 0 |
| 130 | + z-index: 1; |
| 131 | + left: 0; |
120 | 132 | } |
121 | 133 |
|
122 | 134 | .logo { |
123 | | - position relative |
| 135 | + position: relative; |
124 | 136 | width: 100%; |
125 | | - height: 100%; |
126 | | - z-index 2 |
| 137 | + z-index: 2; |
127 | 138 | } |
128 | 139 | } |
129 | 140 |
|
|
138 | 149 | top: 34px; |
139 | 150 | // background-color: rgba(4, 1, 1, 0.53); |
140 | 151 | // padding: 10px; |
141 | | - z-index 3 |
| 152 | + z-index: 3; |
142 | 153 | } |
143 | 154 | } |
| 155 | +
|
144 | 156 | .qr { |
145 | | - float left |
| 157 | + float: left; |
146 | 158 | cursor: pointer; |
147 | | - top 8px |
148 | | - margin 0 10px |
149 | | - border 0 |
| 159 | + top: 8px; |
| 160 | + margin: 0 10px; |
| 161 | + border: 0; |
| 162 | +
|
150 | 163 | .qrBox { |
151 | | - position relative |
| 164 | + position: relative; |
152 | 165 | background-color: #eee; |
153 | 166 | border-radius: 3px; |
154 | 167 | text-align: center; |
155 | | - width 36px |
156 | | - height 36px |
| 168 | + width: 36px; |
| 169 | + height: 36px; |
157 | 170 | } |
| 171 | +
|
158 | 172 | &:hover { |
159 | 173 | .qrBox { |
160 | 174 | background-color: #1593ff; |
161 | 175 | } |
| 176 | +
|
162 | 177 | .qrcode { |
163 | 178 | display: block; |
164 | 179 | } |
165 | 180 | } |
| 181 | +
|
166 | 182 | .eqf-QRcode { |
167 | 183 | position: absolute; |
168 | 184 | width: 20px; |
169 | 185 | height: 20px; |
170 | 186 | font-size: 20px; |
171 | | - background url('../../assets/image/project/qr.png') |
172 | | - background-repeat: no-repeat |
173 | | - background-size: 100% 100% |
174 | | - top 50% |
175 | | - transform translate(-50%, -50%) |
| 187 | + background: url('../../assets/image/project/qr.png'); |
| 188 | + background-repeat: no-repeat; |
| 189 | + background-size: 100% 100%; |
| 190 | + top: 50%; |
| 191 | + transform: translate(-50%, -50%); |
176 | 192 | } |
177 | 193 | } |
| 194 | +
|
178 | 195 | .editButton { |
179 | 196 | display: inline-block; |
180 | 197 | height: 32px; |
|
185 | 202 | background: #1593ff; |
186 | 203 | border-radius: 3px; |
187 | 204 | float: right; |
188 | | - margin-right 20px |
| 205 | + margin-right: 20px; |
189 | 206 | } |
| 207 | +
|
190 | 208 | .act_btn:hover { |
191 | 209 | .actions { |
192 | | - display block |
| 210 | + display: block; |
193 | 211 | } |
194 | 212 | } |
| 213 | +
|
195 | 214 | .actions { |
196 | | - display none |
197 | | - position absolute |
198 | | - right 21px |
199 | | - bottom 50px |
| 215 | + display: none; |
| 216 | + position: absolute; |
| 217 | + right: 21px; |
| 218 | + bottom: 50px; |
200 | 219 | width: 50%; |
201 | 220 | text-align: left; |
202 | 221 | background-color: #fff; |
203 | 222 | box-shadow: 0px 0px 8px #8D8E8F; |
204 | 223 | z-index: 999; |
| 224 | +
|
205 | 225 | .action { |
206 | 226 | font-family: PingFang-SC-Medium; |
207 | | - text-decoration:none; |
208 | | - color:#333; |
| 227 | + text-decoration: none; |
| 228 | + color: #333; |
209 | 229 | font-size: 13px; |
210 | 230 | cursor: pointer; |
211 | 231 | transition: background-color 0.4s ease-in-out; |
212 | | - margin 0 |
| 232 | + margin: 0; |
213 | 233 | line-height: 25px; |
214 | 234 | padding: 4px 10px; |
| 235 | +
|
215 | 236 | &:hover { |
216 | 237 | background-color: #1593ff; |
217 | 238 | } |
218 | 239 | } |
| 240 | +
|
219 | 241 | .last { |
220 | | - width 100% |
221 | | - height 10px |
222 | | - margin 0 |
223 | | - padding 0 |
| 242 | + width: 100%; |
| 243 | + height: 10px; |
| 244 | + margin: 0; |
| 245 | + padding: 0; |
224 | 246 | background-color: rgba(220, 196, 196, 0.2); |
225 | 247 | } |
| 248 | +
|
226 | 249 | .dele:hover { |
227 | | - background-color #f56c6c |
| 250 | + background-color: #f56c6c; |
228 | 251 | } |
229 | 252 | } |
230 | 253 | } |
|
0 commit comments