项目初始化
This commit is contained in:
jerry
0
sheep/scss/style/_avatar.scss
Normal file
0
sheep/scss/style/_avatar.scss
Normal file
204
sheep/scss/style/_background.scss
Normal file
204
sheep/scss/style/_background.scss
Normal file
@@ -0,0 +1,204 @@
|
||||
/* ==================
|
||||
背景
|
||||
==================== */
|
||||
/* -- 基础色 -- */
|
||||
@each $color, $value in map-merge($colors, $darks) {
|
||||
.bg-#{$color} {
|
||||
background-color: $value !important;
|
||||
@if $color == 'yellow' {
|
||||
color: #333333 !important;
|
||||
} @else {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -- 浅色 -- */
|
||||
@each $color, $value in $colors {
|
||||
.bg-#{$color}-light {
|
||||
background-image: linear-gradient(45deg, white, mix(white, $value, 85%)) !important;
|
||||
color: $value !important;
|
||||
}
|
||||
|
||||
.bg-#{$color}-thin {
|
||||
background-color: rgba($value, var(--ui-BG-opacity)) !important;
|
||||
color: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* -- 渐变色 -- */
|
||||
|
||||
@each $color, $value in $colors {
|
||||
@each $colorsub, $valuesub in $colors {
|
||||
@if $color != $colorsub {
|
||||
.bg-#{$color}-#{$colorsub} {
|
||||
// background-color: $value !important;
|
||||
background-image: linear-gradient(130deg, $value, $valuesub) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-yellow-gradient {
|
||||
background-image: linear-gradient(45deg, #f5fe00, #ff6600) !important;
|
||||
color: $dark-3 !important;
|
||||
}
|
||||
.bg-orange-gradient {
|
||||
background-image: linear-gradient(90deg, #ff6000, #fe832a) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.bg-red-gradient {
|
||||
background-image: linear-gradient(45deg, #f33a41, #ed0586) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.bg-pink-gradient {
|
||||
background-image: linear-gradient(45deg, #fea894, #ff1047) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.bg-mauve-gradient {
|
||||
background-image: linear-gradient(45deg, #c01f95, #7115cc) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.bg-purple-gradient {
|
||||
background-image: linear-gradient(45deg, #9829ea, #5908fb) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.bg-blue-gradient {
|
||||
background-image: linear-gradient(45deg, #00b8f9, #0166eb) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.bg-cyan-gradient {
|
||||
background-image: linear-gradient(45deg, #06edfe, #48b2fe) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.bg-green-gradient {
|
||||
background-image: linear-gradient(45deg, #3ab54a, #8cc63f) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.bg-olive-gradient {
|
||||
background-image: linear-gradient(45deg, #90e630, #39d266) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.bg-grey-gradient {
|
||||
background-image: linear-gradient(45deg, #9aadb9, #354855) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.bg-brown-gradient {
|
||||
background-image: linear-gradient(45deg, #ca6f2e, #cb1413) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
@each $color, $value in $grays {
|
||||
.bg-#{$color} {
|
||||
background-color: $value !important;
|
||||
color: #333333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-square {
|
||||
@include bg-square;
|
||||
}
|
||||
.bg-none {
|
||||
background: transparent !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
[class*='bg-mask'] {
|
||||
position: relative;
|
||||
//background: transparent !important;
|
||||
color: #ffffff !important;
|
||||
> view,
|
||||
> text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #ffffff;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
border-radius: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include position-center;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
z-index: 0;
|
||||
}
|
||||
@at-root .bg-mask-80::before {
|
||||
background: rgba(0, 0, 0, 0.8) !important;
|
||||
}
|
||||
@at-root .bg-mask-50::before {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
@at-root .bg-mask-20::before {
|
||||
background: rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
@at-root .bg-mask-top::before {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.618), rgba(0, 0, 0, 0.01));
|
||||
}
|
||||
@at-root .bg-white-top {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.3));
|
||||
}
|
||||
@at-root .bg-mask-bottom::before {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.618), rgba(0, 0, 0, 1));
|
||||
}
|
||||
}
|
||||
.bg-img {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
[class*='bg-blur'] {
|
||||
position: relative;
|
||||
> view,
|
||||
> text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include position-center;
|
||||
border-radius: inherit;
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@supports (-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px)) {
|
||||
.bg-blur::before {
|
||||
@include blur;
|
||||
background-color: var(--ui-Blur-1);
|
||||
}
|
||||
.bg-blur-1::before {
|
||||
@include blur;
|
||||
background-color: var(--ui-Blur-2);
|
||||
}
|
||||
.bg-blur-2::before {
|
||||
@include blur;
|
||||
background-color: var(--ui-Blur-3);
|
||||
}
|
||||
}
|
||||
@supports not (backdrop-filter: blur(5px)) {
|
||||
.bg-blur {
|
||||
color: var(--ui-TC);
|
||||
&::before {
|
||||
background-color: var(--ui-BG);
|
||||
}
|
||||
}
|
||||
.bg-blur-1 {
|
||||
color: var(--ui-TC);
|
||||
&::before {
|
||||
background-color: var(--ui-BG-1);
|
||||
}
|
||||
}
|
||||
.bg-blur-2 {
|
||||
color: var(--ui-TC);
|
||||
&::before {
|
||||
background-color: var(--ui-BG-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
140
sheep/scss/style/_border.scss
Normal file
140
sheep/scss/style/_border.scss
Normal file
@@ -0,0 +1,140 @@
|
||||
/* ==================
|
||||
边框
|
||||
==================== */
|
||||
/* -- 实线 -- */
|
||||
.border {
|
||||
overflow: initial !important;
|
||||
@at-root [class*='border'],
|
||||
[class*='dashed'] {
|
||||
position: relative;
|
||||
&.dline {
|
||||
--ui-Border: var(--ui-BG-3);
|
||||
}
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
border-radius: inherit;
|
||||
}
|
||||
&.radius::after {
|
||||
border-radius: calc(#{$radius} * 2);
|
||||
}
|
||||
&.round::after {
|
||||
border-radius: #{$round-pill};
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
border: 1px solid var(--ui-Border);
|
||||
}
|
||||
&s::after {
|
||||
border: 4rpx solid var(--ui-Border);
|
||||
}
|
||||
&ss::after {
|
||||
border: 8rpx solid var(--ui-Border);
|
||||
}
|
||||
@each $value in (top, right, bottom, left) {
|
||||
&-#{$value}::after {
|
||||
border-#{$value}: 1px solid var(--ui-Border);
|
||||
}
|
||||
&s-#{$value}::after {
|
||||
border-#{$value}: 4rpx solid var(--ui-Border);
|
||||
}
|
||||
&ss-#{$value}::after {
|
||||
border-#{$value}: 8rpx solid var(--ui-Border);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* -- 虚线 -- */
|
||||
.dashed {
|
||||
&::after {
|
||||
border: 4rpx dashed var(--ui-Border);
|
||||
}
|
||||
&s::after {
|
||||
border: 6rpx dashed var(--ui-Border);
|
||||
}
|
||||
@each $value in (top, right, bottom, left) {
|
||||
&-#{$value}::after {
|
||||
border-#{$value}: 4rpx dashed var(--ui-Border);
|
||||
}
|
||||
&s-#{$value}::after {
|
||||
border-#{$value}: 6rpx dashed var(--ui-Border);
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $color, $value in map-merge($colors, map-merge($darks, $grays)) {
|
||||
.border-#{$color}::after,
|
||||
.border-#{$color}[class*='-shine']::before {
|
||||
border-color: $value !important;
|
||||
}
|
||||
}
|
||||
@each $value in (a, b, c, d, e) {
|
||||
.main-#{$value}-border::after,
|
||||
.main-#{$value}-border[class*='-shine']::before {
|
||||
border-color: var(--main-#{$value}) !important;
|
||||
}
|
||||
}
|
||||
.dashed-shine,
|
||||
.dasheds-shine {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::after,
|
||||
&::before {
|
||||
border-style: dashed;
|
||||
border-color: var(--ui-Border);
|
||||
animation: shineafter 1s infinite linear;
|
||||
width: calc(200% + 40px);
|
||||
height: 200%;
|
||||
border-width: 2px 0;
|
||||
}
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
animation: shinebefore 1s infinite linear;
|
||||
width: 200%;
|
||||
height: calc(200% + 40px);
|
||||
border-width: 0 2px;
|
||||
}
|
||||
}
|
||||
.dasheds-shine {
|
||||
&::after,
|
||||
&::before {
|
||||
border-width: 4px 0;
|
||||
}
|
||||
&::before {
|
||||
border-width: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shineafter {
|
||||
0% {
|
||||
top: 0;
|
||||
left: -22px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shinebefore {
|
||||
0% {
|
||||
top: -22px;
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
87
sheep/scss/style/_button.scss
Normal file
87
sheep/scss/style/_button.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
.ui-btn-box {
|
||||
display: inline-block;
|
||||
}
|
||||
.ui-btn {
|
||||
position: relative;
|
||||
border: 0rpx;
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0.7857em 1.5em 0.7857em;
|
||||
font-size: 28rpx;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
overflow: visible;
|
||||
margin: 0 0.25em 0 0;
|
||||
transform: translate(0rpx, 0rpx);
|
||||
border-radius: $radius;
|
||||
white-space: nowrap;
|
||||
color: var(--text-a);
|
||||
background-color: var(--ui-BG);
|
||||
vertical-align: baseline;
|
||||
&:first-child:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
&:not([class*='round'])::after {
|
||||
border-radius: calc(#{$radius} * 2);
|
||||
}
|
||||
&:not([class*='border'])::after {
|
||||
// content: ' ';
|
||||
// width: 200%;
|
||||
// height: 200%;
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// z-index: 0;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// transform: scale(0.5);
|
||||
// transform-origin: 0 0;
|
||||
// pointer-events: none;
|
||||
// box-sizing: border-box;
|
||||
display: none;
|
||||
}
|
||||
&.round::after {
|
||||
border-radius: #{$round-pill};
|
||||
}
|
||||
&.icon {
|
||||
padding: 0.8em 0.8em;
|
||||
}
|
||||
|
||||
&.sm {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
&.lg {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&.xl {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.none-style {
|
||||
background-color: transparent !important;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-btn:not(.icon) [class*='icon-'] {
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
353
sheep/scss/style/_card.scss
Normal file
353
sheep/scss/style/_card.scss
Normal file
@@ -0,0 +1,353 @@
|
||||
/* ==================
|
||||
卡片
|
||||
==================== */
|
||||
|
||||
.ui-cards {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
& .ui-btn.badge {
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 24rpx;
|
||||
padding: 0rpx 15rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
&.no-card > .ui-item {
|
||||
margin: 0rpx;
|
||||
border-radius: 0rpx;
|
||||
}
|
||||
& > .ui-item {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: 10rpx;
|
||||
margin: 30rpx;
|
||||
}
|
||||
& > .ui-item.shadow-blur {
|
||||
overflow: initial;
|
||||
}
|
||||
.grid.grid-square {
|
||||
margin-bottom: -20rpx;
|
||||
}
|
||||
&.article {
|
||||
display: block;
|
||||
& > .ui-item {
|
||||
padding: 30rpx;
|
||||
background-color: var(--box-bg);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
& > .time {
|
||||
padding: 30rpx 0 0 30rpx;
|
||||
}
|
||||
& > .ui-item .title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 900;
|
||||
color: #333333;
|
||||
}
|
||||
& > .ui-item .content {
|
||||
flex: 1;
|
||||
}
|
||||
& > .ui-item > image {
|
||||
width: 240rpx;
|
||||
height: 6.4em;
|
||||
margin-left: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
& > .ui-item .content .desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-c);
|
||||
}
|
||||
& > .ui-item .content .text-content {
|
||||
font-size: 28rpx;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
&.case {
|
||||
.image {
|
||||
position: relative;
|
||||
image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.ui-tag {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.ui-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
padding: 0rpx 30rpx;
|
||||
}
|
||||
.bg-black {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
&.no-card .image {
|
||||
margin: 30rpx 30rpx 0;
|
||||
overflow: hidden;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
&.dynamic {
|
||||
display: block;
|
||||
& > .ui-item {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
& > .text-content {
|
||||
padding: 0 30rpx 0;
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
& .square-img {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
& .only-img {
|
||||
width: 100%;
|
||||
height: 320rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.goods {
|
||||
display: block;
|
||||
& > .ui-item {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background-color: var(--ui-BG);
|
||||
& + .ui-item {
|
||||
border-top: 1rpx solid #eeeeee;
|
||||
}
|
||||
.content {
|
||||
width: 410rpx;
|
||||
padding: 0rpx;
|
||||
}
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 900;
|
||||
color: #333333;
|
||||
line-height: 1.4;
|
||||
height: 1.4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&.col-goods.col-twice {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 30rpx;
|
||||
& > .ui-item {
|
||||
width: calc(50% - 30rpx);
|
||||
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
& > .ui-item:nth-child(2n) {
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
}
|
||||
&.col-goods > .ui-item {
|
||||
padding: 0rpx;
|
||||
display: block;
|
||||
border: 0px;
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 30rpx;
|
||||
}
|
||||
}
|
||||
&.no-card > .ui-item .content {
|
||||
width: 470rpx;
|
||||
padding: 0rpx;
|
||||
}
|
||||
&.no-card > .ui-item .title,
|
||||
&.col-goods > .ui-item .title {
|
||||
height: 3em;
|
||||
overflow: hidden;
|
||||
}
|
||||
& > .ui-item .text-linecut-2 {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
&.no-card > .ui-item .text-linecut-2,
|
||||
&.col-goods > .ui-item .text-linecut-2 {
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 1.6em;
|
||||
height: 3.2em;
|
||||
}
|
||||
& > .ui-item > image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
&.no-card > .ui-item > image {
|
||||
width: 220rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
&.col-goods > .ui-item > image {
|
||||
width: 100%;
|
||||
height: 340rpx;
|
||||
border-bottom-left-radius: 0rpx;
|
||||
border-bottom-right-radius: 0rpx;
|
||||
display: block;
|
||||
}
|
||||
&.col-goods.col-twice > .ui-item > image {
|
||||
height: 236rpx;
|
||||
}
|
||||
}
|
||||
&.loan {
|
||||
display: block;
|
||||
& > .ui-item {
|
||||
padding: 30rpx 0 30rpx 30rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background-color: var(--box-bg);
|
||||
|
||||
.content {
|
||||
width: 450rpx;
|
||||
padding: 0rpx;
|
||||
.tag-list {
|
||||
width: 450rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 12px;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
}
|
||||
.action {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.houses {
|
||||
display: block;
|
||||
& > .ui-item {
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background-color: var(--box-bg);
|
||||
.image {
|
||||
width: 230rpx;
|
||||
height: 180rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.content {
|
||||
width: 400rpx;
|
||||
padding: 0rpx;
|
||||
.tag-list {
|
||||
width: 400rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 12px;
|
||||
margin-top: 10rpx;
|
||||
.ui-item {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.action {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.product {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 30rpx;
|
||||
& > .ui-item {
|
||||
width: calc(100% - 15rpx);
|
||||
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||
background-color: var(--box-bg);
|
||||
position: relative;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
// width: calc(100% - 345rpx);
|
||||
.text-cut {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
border-radius: 6rpx 0 0 6rpx;
|
||||
display: block;
|
||||
}
|
||||
.ui-progress-tag {
|
||||
width: 4em;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
.border-top {
|
||||
width: 100%;
|
||||
}
|
||||
.ui-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 6rpx 0 6rpx 0;
|
||||
}
|
||||
}
|
||||
// & > .ui-item:nth-child(2n) {
|
||||
// margin-left: 0rpx;
|
||||
// }
|
||||
}
|
||||
&.shop {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 30rpx;
|
||||
& > .ui-item {
|
||||
width: calc(50% - 30rpx);
|
||||
margin: 20rpx 20rpx 0rpx 20rpx;
|
||||
background-color: var(--box-bg);
|
||||
padding: 20rpx;
|
||||
.content {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 285rpx;
|
||||
border-radius: 6rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
& > .ui-item:nth-child(2n) {
|
||||
margin-left: 0rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.orders .ui-item {
|
||||
margin-top: 30rpx;
|
||||
.address-box {
|
||||
padding: 15rpx;
|
||||
margin: 0 30rpx 30rpx;
|
||||
border: 1px solid;
|
||||
border-color: var(--main-a);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
.ui-form-group {
|
||||
min-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
55
sheep/scss/style/_code.scss
Normal file
55
sheep/scss/style/_code.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
.ui-code {
|
||||
font-family: Monaco, Menlo, Consolas, 'Courier New';
|
||||
font-size: 90%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: var(--ui-TC);
|
||||
.ui-rich-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.code {
|
||||
display: inline-block;
|
||||
padding: 0 10rpx;
|
||||
margin: 0 10rpx;
|
||||
border-radius: $radius-sm;
|
||||
line-height: 1.6;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
&.pre {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
line-height: 1.6;
|
||||
&.hasTitle {
|
||||
margin: 3.2em 0 1em;
|
||||
}
|
||||
// border-radius: $radius-sm;
|
||||
.ui-code-title {
|
||||
position: absolute;
|
||||
top: -2.2em;
|
||||
color: var(--ui-TC-2);
|
||||
left: 0;
|
||||
}
|
||||
.ui-rich-text {
|
||||
padding: 40rpx;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.ui-scroll-view {
|
||||
&.ui-scroll {
|
||||
max-height: 500px;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
.ui-copy-btn {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0.8em;
|
||||
border-radius: 0 $radius-sm 0 $radius-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
79
sheep/scss/style/_flex.scss
Normal file
79
sheep/scss/style/_flex.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
/* ==================
|
||||
弹性布局
|
||||
==================== */
|
||||
.flex {
|
||||
display: flex !important;
|
||||
&-sub {
|
||||
flex: 1 !important;
|
||||
}
|
||||
&-twice {
|
||||
flex: 2 !important;
|
||||
}
|
||||
&-treble {
|
||||
flex: 3 !important;
|
||||
}
|
||||
&-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
&-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
&-column-reverse {
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
&-row-reverse {
|
||||
flex-direction: row-reverse !important;
|
||||
}
|
||||
&-wrap {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
&-center {
|
||||
@include flex-center;
|
||||
}
|
||||
&-bar {
|
||||
@include flex-bar;
|
||||
}
|
||||
}
|
||||
.basis {
|
||||
@each $class, $value in (xs: 20%, sm: 40%, df: 50%, lg: 60%, xl: 80%) {
|
||||
&-#{$class} {
|
||||
flex-basis: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.align {
|
||||
@each $class,
|
||||
$value
|
||||
in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline)
|
||||
{
|
||||
&-#{$class} {
|
||||
align-items: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.self {
|
||||
@each $class,
|
||||
$value
|
||||
in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline)
|
||||
{
|
||||
&-#{$class} {
|
||||
align-self: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.justify {
|
||||
@each $class,
|
||||
$value
|
||||
in (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around
|
||||
)
|
||||
{
|
||||
&-#{$class} {
|
||||
justify-content: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
121
sheep/scss/style/_form.scss
Normal file
121
sheep/scss/style/_form.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
/* ==================
|
||||
表单
|
||||
==================== */
|
||||
.ui-form-item {
|
||||
padding: 1rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 100rpx;
|
||||
justify-content: space-between;
|
||||
.title {
|
||||
text-align: justify;
|
||||
padding-right: 30rpx;
|
||||
font-size: 30rpx;
|
||||
position: relative;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
input,
|
||||
ui-input {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #555;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
text[class*='icon-'] {
|
||||
font-size: 36rpx;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
textarea {
|
||||
margin: 32rpx 0 30rpx;
|
||||
height: 4.6em;
|
||||
width: 100%;
|
||||
line-height: 1.2em;
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
padding: 0;
|
||||
}
|
||||
picker,
|
||||
.arrow {
|
||||
flex: 1;
|
||||
padding-right: 40rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
picker .picker,
|
||||
.arrow > view {
|
||||
line-height: 100rpx;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
picker::after,
|
||||
.arrow::after {
|
||||
font-family: 'ui';
|
||||
display: block;
|
||||
content: '\e605';
|
||||
position: absolute;
|
||||
font-size: 34rpx;
|
||||
color: #8799a3;
|
||||
line-height: 100rpx;
|
||||
width: 60rpx;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: -20rpx;
|
||||
margin: auto;
|
||||
}
|
||||
textarea[disabled],
|
||||
textarea[disabled] .placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
&.align-start .title {
|
||||
height: 1em;
|
||||
margin-top: 32rpx;
|
||||
line-height: 1em;
|
||||
}
|
||||
.grid-square {
|
||||
> view {
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 12rpx;
|
||||
.mask {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
position: absolute;
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
padding: 6rpx 0;
|
||||
&.red-mask {
|
||||
background-color: rgba(255, 80, 80, 0.6);
|
||||
}
|
||||
}
|
||||
[class*='icon'] {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform: scale(1.5);
|
||||
justify-content: center;
|
||||
}
|
||||
.text-gray {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
103
sheep/scss/style/_grid.scss
Normal file
103
sheep/scss/style/_grid.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
/* ==================
|
||||
栅栏
|
||||
==================== */
|
||||
@use 'sass:math';
|
||||
|
||||
@mixin make_col($screen) {
|
||||
@for $i from 1 through 12 {
|
||||
.ui-col-#{$screen}-#{$i} {
|
||||
width: calc(100% / 12 * #{$i});
|
||||
}
|
||||
.ui-cols-#{$screen}-#{$i} .ui-item {
|
||||
width: calc(100% / #{$i});
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui-container {
|
||||
box-sizing: border-box;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
&-fluid {
|
||||
max-width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.ui-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&.multi-column {
|
||||
display: block;
|
||||
column-count: 2;
|
||||
column-width: 0px;
|
||||
column-gap: 0px;
|
||||
> .ui-item {
|
||||
break-inside: avoid;
|
||||
padding: 0.001em;
|
||||
}
|
||||
}
|
||||
&.grid-square {
|
||||
overflow: hidden;
|
||||
> .ui-item {
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@for $i from 1 through 12 {
|
||||
&.ui-cols-#{$i} > .ui-item {
|
||||
padding-bottom: calc((100% - #{20rpx * ($i - 1)}) / #{$i});
|
||||
height: 0;
|
||||
width: calc((100% - #{20rpx * ($i - 1)}) / #{$i});
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 12 {
|
||||
&.ui-cols-#{$i} > .ui-item:nth-child(#{$i}n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 12 {
|
||||
.ui-cols-#{$i} .ui-item {
|
||||
width: calc(100% / #{$i});
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 12 {
|
||||
.ui-col-#{$i} {
|
||||
width: calc(100% / 12 * #{$i});
|
||||
}
|
||||
}
|
||||
// 小屏
|
||||
@media screen and (min-width: 0px) {
|
||||
@include make_col('xs');
|
||||
}
|
||||
|
||||
// 小屏
|
||||
@media screen and (min-width: 320px) {
|
||||
@include make_col('sm');
|
||||
}
|
||||
|
||||
// 中屏
|
||||
@media screen and (min-width: 768px) {
|
||||
@include make_col('md');
|
||||
}
|
||||
|
||||
// 普通屏
|
||||
@media screen and (min-width: 1025px) {
|
||||
@include make_col('lg');
|
||||
}
|
||||
|
||||
// 大屏
|
||||
@media screen and (min-width: 1440px) {
|
||||
@include make_col('xl');
|
||||
}
|
||||
|
||||
// 超大屏
|
||||
@media screen and (min-width: 1920px) {
|
||||
@include make_col('xxl');
|
||||
}
|
||||
62
sheep/scss/style/_markdown.scss
Normal file
62
sheep/scss/style/_markdown.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
.cu-markdown {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&.selectable {
|
||||
cursor: auto;
|
||||
user-select: text;
|
||||
}
|
||||
inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.list {
|
||||
.list-item {
|
||||
line-height: 1.8;
|
||||
.list {
|
||||
margin-left: 1.28571em;
|
||||
.ui-title {
|
||||
transform: scale(0.6);
|
||||
&:before {
|
||||
content: '\e716';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-item-p {
|
||||
position: relative;
|
||||
padding-left: 1.5em;
|
||||
.list-item-t {
|
||||
display: block;
|
||||
width: 1.3em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.md-table + .md-table {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin: 0 0 40rpx;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.blockquote {
|
||||
@extend .paragraph;
|
||||
padding: 20rpx 30rpx;
|
||||
border-left-style: solid;
|
||||
border-left-width: 10rpx;
|
||||
border-color: var(--ui-Border);
|
||||
background: none repeat scroll 0 0 rgba(102, 128, 153, 0.05);
|
||||
|
||||
.paragraph {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.paragraph:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
54
sheep/scss/style/_menu.scss
Normal file
54
sheep/scss/style/_menu.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.ui-menu {
|
||||
background-color: var(--ui-BG);
|
||||
}
|
||||
|
||||
.ui-menu-item {
|
||||
position: relative;
|
||||
@include flex-bar;
|
||||
min-height: 4em;
|
||||
padding: 0 30rpx;
|
||||
.ui-menu-item-icon {
|
||||
width: 1.7em;
|
||||
margin-right: 0.3em;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.ui-menu-item-icon .ui-menu-item-image {
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
display: inline-block;
|
||||
}
|
||||
.ui-menu-item-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
@include flex-bar;
|
||||
}
|
||||
.ui-menu-item-arrow {
|
||||
width: 1.6em;
|
||||
text-align: center;
|
||||
color: var(--ui-TC-3);
|
||||
}
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: calc(200% - 120rpx);
|
||||
left: 30rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
height: 200%;
|
||||
border-top: 1px solid var(--ui-Border);
|
||||
border-radius: inherit;
|
||||
transform: scale(1);
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.first-item::after {
|
||||
display: none;
|
||||
}
|
||||
&:first-child::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
90
sheep/scss/style/_shadow.scss
Normal file
90
sheep/scss/style/_shadow.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
/* ==================
|
||||
阴影
|
||||
==================== */
|
||||
|
||||
.shadow {
|
||||
box-shadow: var(--ui-Shadow);
|
||||
&-sm {
|
||||
box-shadow: var(--ui-Shadow-sm);
|
||||
}
|
||||
&-lg {
|
||||
box-shadow: var(--ui-Shadow-lg);
|
||||
}
|
||||
&-inset {
|
||||
box-shadow: var(--ui-Shadow-inset);
|
||||
}
|
||||
@each $color, $value in $colors {
|
||||
@at-root .shadow-#{$color} {
|
||||
box-shadow: 0 0.5em 1em rgba($value, var(--ui-Shadow-opacity));
|
||||
}
|
||||
&-sm.shadow-#{$color} {
|
||||
box-shadow: 0 0.125em 0.25em rgba($value, var(--ui-Shadow-opacity));
|
||||
}
|
||||
&-lg.shadow-#{$color} {
|
||||
box-shadow: 0 1em 3em rgba($value, var(--ui-Shadow-opacity-lg));
|
||||
}
|
||||
}
|
||||
|
||||
&-warp {
|
||||
position: relative;
|
||||
}
|
||||
&-warp:before,
|
||||
&-warp:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: -10rpx;
|
||||
left: 20rpx;
|
||||
width: calc(50% - #{40rpx});
|
||||
height: 30rpx;
|
||||
transform: skew(0deg, -6deg);
|
||||
transform-origin: 50% 50%;
|
||||
background-color: rgba(0, 0, 0, var(--ui-Shadow-opacity));
|
||||
filter: blur(20rpx);
|
||||
z-index: -1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&-warp:after {
|
||||
right: 20rpx;
|
||||
left: auto;
|
||||
transform: skew(0deg, 6deg);
|
||||
}
|
||||
&-blur {
|
||||
position: relative;
|
||||
}
|
||||
&-blur::before {
|
||||
content: '';
|
||||
display: block;
|
||||
background: inherit;
|
||||
filter: blur(20rpx);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0.5em;
|
||||
left: 0.5em;
|
||||
z-index: -1;
|
||||
opacity: var(--ui-Shadow-opacity-lg);
|
||||
transform-origin: 0 0;
|
||||
border-radius: inherit;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
.drop-shadow {
|
||||
filter: drop-shadow(0 0 30rpx rgba(0, 0, 0, 0.1));
|
||||
&-sm {
|
||||
filter: drop-shadow(0 4rpx 4rpx rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
&-lg {
|
||||
filter: drop-shadow(0 30rpx 60rpx rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
@each $color, $value in $colors {
|
||||
@at-root .drop-shadow-#{$color} {
|
||||
filter: drop-shadow(0 15rpx 15rpx rgba(darken($value, 10%), 0.3));
|
||||
}
|
||||
&-sm.drop-shadow-#{$color} {
|
||||
filter: drop-shadow(0 4rpx 4rpx rgba(darken($value, 10%), 0.3));
|
||||
}
|
||||
&-lg.drop-shadow-#{$color} {
|
||||
filter: drop-shadow(0 50rpx 100rpx rgba(darken($value, 10%), 0.2));
|
||||
}
|
||||
}
|
||||
}
|
||||
133
sheep/scss/style/_table.scss
Normal file
133
sheep/scss/style/_table.scss
Normal file
@@ -0,0 +1,133 @@
|
||||
.ui-table {
|
||||
background-color: var(--ui-BG);
|
||||
max-width: 100%;
|
||||
display: table;
|
||||
&.table-full {
|
||||
width: 100%;
|
||||
}
|
||||
&.table-radius {
|
||||
border-radius: $radius;
|
||||
.ui-table-header {
|
||||
.ui-table-tr {
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
.ui-table-th {
|
||||
&:first-child {
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui-table-header {
|
||||
display: table-header-group;
|
||||
.ui-table-th {
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid var(--ui-Border);
|
||||
white-space: nowrap;
|
||||
|
||||
padding: 1em 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-table-tr {
|
||||
display: table-row;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ui-table-body {
|
||||
display: table-row-group;
|
||||
position: relative;
|
||||
.ui-table-tr:hover {
|
||||
background-color: var(--ui-BG-1) !important;
|
||||
}
|
||||
.ui-table-loading {
|
||||
min-height: 300px;
|
||||
position: absolute !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--ui-Border);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-table-td,
|
||||
.ui-table-th {
|
||||
display: table-cell;
|
||||
text-align: unset;
|
||||
padding: 0.5em 0.8em;
|
||||
// font-size: 90%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-table.table-border {
|
||||
&,
|
||||
& .ui-table-td,
|
||||
& .ui-table-th {
|
||||
position: relative;
|
||||
&::after {
|
||||
content: ' ';
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: inherit;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--ui-Border);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.ui-table-td,
|
||||
.ui-table-th {
|
||||
&::after {
|
||||
border-width: 1px 1px 0 0;
|
||||
}
|
||||
&:last-child::after {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui-table.table-radius {
|
||||
&::after {
|
||||
border-radius: calc(#{$radius} * 2);
|
||||
}
|
||||
& .ui-table-tr .ui-table-th:first-child {
|
||||
border-top-left-radius: calc(#{$radius} * 2);
|
||||
}
|
||||
& .ui-table-tr .ui-table-th:last-child {
|
||||
border-top-right-radius: calc(#{$radius} * 2);
|
||||
}
|
||||
& .ui-table-tr:last-child .ui-table-td:first-child {
|
||||
border-bottom-left-radius: #{$radius};
|
||||
}
|
||||
& .ui-table-tr:last-child .ui-table-td:last-child {
|
||||
border-bottom-right-radius: #{$radius};
|
||||
}
|
||||
}
|
||||
.ui-table.table-striped > .ui-table-body > .ui-table-tr:nth-child(2n + 1),
|
||||
.ui-table.table-striped > .ui-table-body > .ui-table-tr:nth-child(2n + 1) {
|
||||
background-color: var(--ui-BG-1);
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
width: inherit;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
.table-responsive-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
0
sheep/scss/style/_tag.scss
Normal file
0
sheep/scss/style/_tag.scss
Normal file
104
sheep/scss/style/_text.scss
Normal file
104
sheep/scss/style/_text.scss
Normal file
@@ -0,0 +1,104 @@
|
||||
/* ==================
|
||||
文本
|
||||
==================== */
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user