105 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			SCSS
		
	
	
			
		
		
	
	
			105 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			SCSS
		
	
	
| /* ==================
 | |
|           文本
 | |
|  ==================== */
 | |
| @use 'sass:math';
 | |
| .font-0 {
 | |
|   font-size: 24rpx;
 | |
|   --textSize: -4rpx;
 | |
| }
 | |
| .font-1 {
 | |
|   font-size: 28rpx;
 | |
|   --textSize: 0rpx;
 | |
| }
 | |
| .font-2 {
 | |
|   font-size: 32rpx;
 | |
|   --textSize: 4rpx;
 | |
| }
 | |
| .font-3 {
 | |
|   font-size: 36rpx;
 | |
|   --textSize: 8rpx;
 | |
| }
 | |
| .font-4 {
 | |
|   font-size: 40rpx;
 | |
|   --textSize: 12rpx;
 | |
| }
 | |
| .text {
 | |
|   @each $class, $value in $fontsize {
 | |
|     &-#{$class},
 | |
|     &-#{math.div($value ,2)} {
 | |
|       font-size: calc(#{$value}rpx + var(--textSize)) !important;
 | |
|     }
 | |
|   }
 | |
|   &-cut {
 | |
|     text-overflow: ellipsis;
 | |
|     white-space: nowrap;
 | |
|     overflow: hidden;
 | |
|   }
 | |
|   @at-root [class*='text-linecut'] {
 | |
|     display: -webkit-box;
 | |
|     -webkit-box-orient: vertical;
 | |
|     -webkit-line-clamp: 2;
 | |
|     overflow: hidden;
 | |
|     word-break: break-all;
 | |
|   }
 | |
|   @for $i from 2 through 10 {
 | |
|     &-linecut-#{$i} {
 | |
|       -webkit-line-clamp: #{$i};
 | |
|     }
 | |
|   }
 | |
|   &-justify {
 | |
|     text-align: justify;
 | |
|   }
 | |
|   &-justify-line {
 | |
|     text-align: justify;
 | |
|     line-height: 0.5em;
 | |
|     margin-top: 0.5em;
 | |
|     &::after {
 | |
|       content: '.';
 | |
|       display: inline-block;
 | |
|       width: 100%;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &-Abc {
 | |
|     text-transform: Capitalize !important;
 | |
|   }
 | |
|   &-ABC {
 | |
|     text-transform: Uppercase !important;
 | |
|   }
 | |
|   &-abc {
 | |
|     text-transform: Lowercase !important;
 | |
|   }
 | |
|   &-del,
 | |
|   &-line {
 | |
|     text-decoration: line-through !important;
 | |
|   }
 | |
|   &-bottomline {
 | |
|     text-decoration: underline !important;
 | |
|   }
 | |
|   &-italic {
 | |
|     font-style: italic !important;
 | |
|   }
 | |
|   &-style-none {
 | |
|     text-decoration: none !important;
 | |
|   }
 | |
|   &-break {
 | |
|     word-break: break-word !important;
 | |
|     overflow-wrap: break-word !important;
 | |
|   }
 | |
|   &-reset {
 | |
|     color: inherit !important;
 | |
|   }
 | |
|   &-price::before {
 | |
|     content: '¥';
 | |
|     font-size: 80%;
 | |
|     margin-right: 4rpx;
 | |
|   }
 | |
|   &-hide {
 | |
|     font: 0/0 a;
 | |
|     color: transparent;
 | |
|     text-shadow: none;
 | |
|     background-color: transparent;
 | |
|     border: 0;
 | |
|   }
 | |
| }
 |