字体引入,修改
Showing
3 changed files
with
38 additions
and
21 deletions
src/styles/AlimamaShuHeiTi-Bold.ttf
0 → 100644
No preview for this file type
| 1 | @import './variables.scss'; | 1 | @import "./variables.scss"; |
| 2 | @import './mixin.scss'; | 2 | @import "./mixin.scss"; |
| 3 | @import './transition.scss'; | 3 | @import "./transition.scss"; |
| 4 | @import './element-ui.scss'; | 4 | @import "./element-ui.scss"; |
| 5 | @import './sidebar.scss'; | 5 | @import "./sidebar.scss"; |
| 6 | @import './btn.scss'; | 6 | @import "./btn.scss"; |
| 7 | |||
| 8 | // 字体 | ||
| 9 | @font-face { | ||
| 10 | font-family: "albbsht"; | ||
| 11 | font-weight: 200; | ||
| 12 | src: url("./AlimamaShuHeiTi-Bold.ttf"); | ||
| 13 | /* src: url("//at.alicdn.com/wf/webfont/ZU6UneTxNcLy/v9AokMyfgvHu.woff2") format("woff2"), | ||
| 14 | url("//at.alicdn.com/wf/webfont/ZU6UneTxNcLy/paYiW177n7Bc.woff") format("woff"); */ | ||
| 15 | font-display: swap; | ||
| 16 | } | ||
| 7 | 17 | ||
| 8 | /* CSS 初始化 */ | 18 | /* CSS 初始化 */ |
| 9 | html, | 19 | html, |
| ... | @@ -85,7 +95,8 @@ body { | ... | @@ -85,7 +95,8 @@ body { |
| 85 | -moz-osx-font-smoothing: grayscale; | 95 | -moz-osx-font-smoothing: grayscale; |
| 86 | -webkit-font-smoothing: antialiased; | 96 | -webkit-font-smoothing: antialiased; |
| 87 | text-rendering: optimizeLegibility; | 97 | text-rendering: optimizeLegibility; |
| 88 | font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; | 98 | font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, |
| 99 | Microsoft YaHei, Arial, sans-serif; | ||
| 89 | } | 100 | } |
| 90 | 101 | ||
| 91 | html { | 102 | html { |
| ... | @@ -161,7 +172,7 @@ div:focus { | ... | @@ -161,7 +172,7 @@ div:focus { |
| 161 | } | 172 | } |
| 162 | 173 | ||
| 163 | .move { | 174 | .move { |
| 164 | color: #409EFF; | 175 | color: #409eff; |
| 165 | font-size: 24px; | 176 | font-size: 24px; |
| 166 | } | 177 | } |
| 167 | 178 | ||
| ... | @@ -192,7 +203,8 @@ aside { | ... | @@ -192,7 +203,8 @@ aside { |
| 192 | display: block; | 203 | display: block; |
| 193 | line-height: 32px; | 204 | line-height: 32px; |
| 194 | font-size: 16px; | 205 | font-size: 16px; |
| 195 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; | 206 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, |
| 207 | Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; | ||
| 196 | color: #2c3e50; | 208 | color: #2c3e50; |
| 197 | -webkit-font-smoothing: antialiased; | 209 | -webkit-font-smoothing: antialiased; |
| 198 | -moz-osx-font-smoothing: grayscale; | 210 | -moz-osx-font-smoothing: grayscale; |
| ... | @@ -251,7 +263,7 @@ aside { | ... | @@ -251,7 +263,7 @@ aside { |
| 251 | } | 263 | } |
| 252 | 264 | ||
| 253 | .text-center { | 265 | .text-center { |
| 254 | text-align: center | 266 | text-align: center; |
| 255 | } | 267 | } |
| 256 | 268 | ||
| 257 | .width100 { | 269 | .width100 { |
| ... | @@ -266,7 +278,13 @@ aside { | ... | @@ -266,7 +278,13 @@ aside { |
| 266 | text-align: right; | 278 | text-align: right; |
| 267 | padding-right: 20px; | 279 | padding-right: 20px; |
| 268 | transition: 600ms ease position; | 280 | transition: 600ms ease position; |
| 269 | background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); | 281 | background: linear-gradient( |
| 282 | 90deg, | ||
| 283 | rgba(32, 182, 249, 1) 0%, | ||
| 284 | rgba(32, 182, 249, 1) 0%, | ||
| 285 | rgba(33, 120, 241, 1) 100%, | ||
| 286 | rgba(33, 120, 241, 1) 100% | ||
| 287 | ); | ||
| 270 | 288 | ||
| 271 | .subtitle { | 289 | .subtitle { |
| 272 | font-size: 20px; | 290 | font-size: 20px; |
| ... | @@ -314,17 +332,16 @@ aside { | ... | @@ -314,17 +332,16 @@ aside { |
| 314 | .delete-button { | 332 | .delete-button { |
| 315 | line-height: 32px; | 333 | line-height: 32px; |
| 316 | cursor: pointer; | 334 | cursor: pointer; |
| 317 | color: #FF7115; | 335 | color: #ff7115; |
| 318 | font-size: 20px; | 336 | font-size: 20px; |
| 319 | margin-right: 5px; | 337 | margin-right: 5px; |
| 320 | |||
| 321 | } | 338 | } |
| 322 | 339 | ||
| 323 | .add-button { | 340 | .add-button { |
| 324 | line-height: 32px; | 341 | line-height: 32px; |
| 325 | color: #2FA5FF; | 342 | color: #2fa5ff; |
| 326 | cursor: pointer; | 343 | cursor: pointer; |
| 327 | font-size: 20PX; | 344 | font-size: 20px; |
| 328 | } | 345 | } |
| 329 | 346 | ||
| 330 | .description { | 347 | .description { |
| ... | @@ -352,13 +369,13 @@ aside { | ... | @@ -352,13 +369,13 @@ aside { |
| 352 | .disabled { | 369 | .disabled { |
| 353 | color: #87adf3; | 370 | color: #87adf3; |
| 354 | background-color: #fff; | 371 | background-color: #fff; |
| 355 | cursor: not-allowed | 372 | cursor: not-allowed; |
| 356 | } | 373 | } |
| 357 | 374 | ||
| 358 | .bad { | 375 | .bad { |
| 359 | color: #f00; | 376 | color: #f00; |
| 360 | background-color: #fff; | 377 | background-color: #fff; |
| 361 | cursor: not-allowed | 378 | cursor: not-allowed; |
| 362 | } | 379 | } |
| 363 | 380 | ||
| 364 | .allow, | 381 | .allow, |
| ... | @@ -382,7 +399,7 @@ aside { | ... | @@ -382,7 +399,7 @@ aside { |
| 382 | } | 399 | } |
| 383 | 400 | ||
| 384 | .suspend::before { | 401 | .suspend::before { |
| 385 | content: ''; | 402 | content: ""; |
| 386 | position: absolute; | 403 | position: absolute; |
| 387 | left: 5px; | 404 | left: 5px; |
| 388 | top: 45%; | 405 | top: 45%; |
| ... | @@ -424,7 +441,6 @@ aside { | ... | @@ -424,7 +441,6 @@ aside { |
| 424 | } | 441 | } |
| 425 | } | 442 | } |
| 426 | 443 | ||
| 427 | |||
| 428 | .linshiIcon { | 444 | .linshiIcon { |
| 429 | position: relative; | 445 | position: relative; |
| 430 | 446 | ||
| ... | @@ -474,7 +490,7 @@ aside { | ... | @@ -474,7 +490,7 @@ aside { |
| 474 | height: 0; | 490 | height: 0; |
| 475 | border-width: 0px 0px 55px 55px; | 491 | border-width: 0px 0px 55px 55px; |
| 476 | border-style: none solid solid; | 492 | border-style: none solid solid; |
| 477 | border-color: transparent transparent #67C23A; | 493 | border-color: transparent transparent #67c23a; |
| 478 | position: absolute; | 494 | position: absolute; |
| 479 | top: 0; | 495 | top: 0; |
| 480 | right: 0; | 496 | right: 0; |
| ... | @@ -508,4 +524,4 @@ aside { | ... | @@ -508,4 +524,4 @@ aside { |
| 508 | top: 0; | 524 | top: 0; |
| 509 | right: 0; | 525 | right: 0; |
| 510 | transform: rotate(-90deg); | 526 | transform: rotate(-90deg); |
| 511 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 527 | } | ... | ... |
-
Please register or sign in to post a comment