项目初始化
This commit is contained in:
jerry
354
sheep/scss/_main.scss
Normal file
354
sheep/scss/_main.scss
Normal file
@@ -0,0 +1,354 @@
|
||||
body {
|
||||
color: var(--text-a);
|
||||
background-color: var(--ui-BG-1) !important;
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
|
||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
}
|
||||
|
||||
/* ==================
|
||||
初始化
|
||||
==================== */
|
||||
.ui-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
navigator {
|
||||
display: inline-flex;
|
||||
}
|
||||
navigator.navigator-hover {
|
||||
background-color: inherit;
|
||||
transform: translate(1rpx, 1rpx);
|
||||
// opacity: 1;
|
||||
}
|
||||
|
||||
/* ==================
|
||||
辅助类
|
||||
==================== */
|
||||
.none {
|
||||
display: none !important;
|
||||
}
|
||||
.inline {
|
||||
display: inline !important;
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.block {
|
||||
display: block !important;
|
||||
}
|
||||
.touch-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
.touch-all {
|
||||
pointer-events: all;
|
||||
}
|
||||
.flex {
|
||||
display: flex !important;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
/* -- 浮动 -- */
|
||||
.cf::after,
|
||||
.cf::before {
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
.cf::after {
|
||||
clear: both;
|
||||
}
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
.position-center {
|
||||
@include position-center;
|
||||
}
|
||||
.position-relative {
|
||||
position: relative;
|
||||
}
|
||||
/* -- 工具类 -- */
|
||||
@function negativify-map($map) {
|
||||
$result: ();
|
||||
@each $key, $value in $map {
|
||||
@if $key != 0 {
|
||||
$result: map-merge($result, ('n' + $key: (-$value)));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
$utilities: () !default;
|
||||
$utilities: map-merge(
|
||||
(
|
||||
'margin': (
|
||||
responsive: true,
|
||||
property: margin,
|
||||
class: m,
|
||||
values:
|
||||
map-merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-x': (
|
||||
property: margin-right margin-left,
|
||||
class: mx,
|
||||
values:
|
||||
map-merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-y': (
|
||||
property: margin-top margin-bottom,
|
||||
class: my,
|
||||
values:
|
||||
map-merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-top': (
|
||||
property: margin-top,
|
||||
class: mt,
|
||||
values:
|
||||
map-merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-right': (
|
||||
property: margin-right,
|
||||
class: mr,
|
||||
values:
|
||||
map-merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-bottom': (
|
||||
property: margin-bottom,
|
||||
class: mb,
|
||||
values:
|
||||
map-merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-left': (
|
||||
property: margin-left,
|
||||
class: ml,
|
||||
values:
|
||||
map-merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'padding': (
|
||||
responsive: true,
|
||||
property: padding,
|
||||
class: p,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-x': (
|
||||
property: padding-right padding-left,
|
||||
class: px,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-y': (
|
||||
property: padding-top padding-bottom,
|
||||
class: py,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-top': (
|
||||
property: padding-top,
|
||||
class: pt,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-right': (
|
||||
property: padding-right,
|
||||
class: pr,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-bottom': (
|
||||
property: padding-bottom,
|
||||
class: pb,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-left': (
|
||||
property: padding-left,
|
||||
class: pl,
|
||||
values: $spacers,
|
||||
),
|
||||
'font-weight': (
|
||||
property: font-weight,
|
||||
class: text,
|
||||
values: (
|
||||
light: $font-weight-light,
|
||||
lighter: $font-weight-lighter,
|
||||
normal: $font-weight-normal,
|
||||
bold: $font-weight-bold,
|
||||
bolder: $font-weight-bolder,
|
||||
),
|
||||
),
|
||||
'text-align': (
|
||||
property: text-align,
|
||||
class: text,
|
||||
values: left right center,
|
||||
),
|
||||
'font-color': (
|
||||
property: color,
|
||||
class: text,
|
||||
values:
|
||||
map-merge(
|
||||
$colors,
|
||||
map-merge(
|
||||
$grays,
|
||||
map-merge(
|
||||
$darks,
|
||||
(
|
||||
'reset': inherit,
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
),
|
||||
'line-height': (
|
||||
property: line-height,
|
||||
class: lh,
|
||||
values: (
|
||||
1: 1,
|
||||
sm: $line-height-sm,
|
||||
base: $line-height-base,
|
||||
lg: $line-height-lg,
|
||||
),
|
||||
),
|
||||
'white-space': (
|
||||
property: white-space,
|
||||
class: text,
|
||||
values: (
|
||||
nowrap: nowrap,
|
||||
),
|
||||
),
|
||||
'radius': (
|
||||
property: border-radius,
|
||||
class: radius,
|
||||
values: (
|
||||
null: $radius,
|
||||
sm: $radius-sm,
|
||||
lg: $radius-lg,
|
||||
0: 0,
|
||||
),
|
||||
),
|
||||
'round': (
|
||||
property: border-radius,
|
||||
class: round,
|
||||
values: (
|
||||
null: $round-pill,
|
||||
circle: 50%,
|
||||
),
|
||||
),
|
||||
'radius-top': (
|
||||
property: border-top-left-radius border-top-right-radius,
|
||||
class: radius-top,
|
||||
values: (
|
||||
null: $radius,
|
||||
),
|
||||
),
|
||||
'radius-right': (
|
||||
property: border-top-right-radius border-bottom-right-radius,
|
||||
class: radius-right,
|
||||
values: (
|
||||
null: $radius,
|
||||
),
|
||||
),
|
||||
'radius-bottom': (
|
||||
property: border-bottom-right-radius border-bottom-left-radius,
|
||||
class: radius-bottom,
|
||||
values: (
|
||||
null: $radius,
|
||||
),
|
||||
),
|
||||
'radius-left': (
|
||||
property: border-bottom-left-radius border-top-left-radius,
|
||||
class: radius-left,
|
||||
values: (
|
||||
null: $radius,
|
||||
),
|
||||
),
|
||||
'radius-lr': (
|
||||
property: border-top-left-radius border-bottom-right-radius,
|
||||
class: radius-lr,
|
||||
values: (
|
||||
null: $radius,
|
||||
),
|
||||
),
|
||||
'radius-lrs': (
|
||||
property: border-top-right-radius border-bottom-left-radius,
|
||||
class: radius-lr,
|
||||
values: (
|
||||
null: 0,
|
||||
),
|
||||
),
|
||||
'radius-rl': (
|
||||
property: border-top-right-radius border-bottom-left-radius,
|
||||
class: radius-rl,
|
||||
values: (
|
||||
null: $radius,
|
||||
),
|
||||
),
|
||||
'radius-rls': (
|
||||
property: border-top-left-radius border-bottom-right-radius,
|
||||
class: radius-rl,
|
||||
values: (
|
||||
null: 0,
|
||||
),
|
||||
),
|
||||
),
|
||||
$utilities
|
||||
);
|
||||
@each $key, $utility in $utilities {
|
||||
@if type-of($utility) == 'map' {
|
||||
$values: map-get($utility, values);
|
||||
@if type-of($values) == 'string' or type-of(nth($values, 1)) != 'list' {
|
||||
$values: zip($values, $values);
|
||||
}
|
||||
@each $key, $value in $values {
|
||||
$properties: map-get($utility, property);
|
||||
@if type-of($properties) == 'string' {
|
||||
$properties: append((), $properties);
|
||||
}
|
||||
$property-class: if(
|
||||
map-has-key($utility, class),
|
||||
map-get($utility, class),
|
||||
nth($properties, 1)
|
||||
);
|
||||
$property-class: if($property-class == null, '', $property-class);
|
||||
$property-class-modifier: if($key, if($property-class == '', '', '-') + $key, '');
|
||||
.#{$property-class + $property-class-modifier} {
|
||||
@each $property in $properties {
|
||||
#{$property}: $value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
61
sheep/scss/_mixins.scss
Normal file
61
sheep/scss/_mixins.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
@mixin bg-square {
|
||||
background: {
|
||||
color: #fff;
|
||||
image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
|
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
|
||||
size: 40rpx 40rpx;
|
||||
position: 0 0, 20rpx 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flex($direction: row) {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: $direction;
|
||||
}
|
||||
@mixin flex-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin arrow {
|
||||
content: '';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
}
|
||||
@mixin arrow-top {
|
||||
@include arrow;
|
||||
// border-color: transparent transparent $ui-BG;
|
||||
border-style: none solid solid;
|
||||
border-width: 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
@mixin arrow-right {
|
||||
@include arrow;
|
||||
// border-color: transparent $ui-BG transparent;
|
||||
border-style: solid solid solid none;
|
||||
border-width: 20rpx 20rpx 20rpx 0;
|
||||
}
|
||||
@mixin position-center {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@mixin blur {
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
color: var(--ui-TC);
|
||||
}
|
||||
286
sheep/scss/_tools.scss
Normal file
286
sheep/scss/_tools.scss
Normal file
@@ -0,0 +1,286 @@
|
||||
/* ==================
|
||||
常用工具
|
||||
==================== */
|
||||
|
||||
.ss-bg-opactity-block {
|
||||
background-color: rgba(#000, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ==================
|
||||
flex布局
|
||||
==================== */
|
||||
|
||||
.ss-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ss-flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ss-flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ss-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ss-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.ss-col-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ss-col-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ss-col-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.ss-col-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.ss-row-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ss-row-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ss-row-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.ss-row-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ss-row-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.ss-self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.ss-self-end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.ss-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
.ss-h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
.ss-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ==================
|
||||
|
||||
margin padding: 内外边距
|
||||
|
||||
==================== */
|
||||
@for $i from 0 through 100 {
|
||||
// 只要双数和能被5除尽的数
|
||||
@if $i % 2==0 or $i % 5==0 {
|
||||
// 得出：u-margin-30或者u-m-30
|
||||
.ss-margin-#{$i},
|
||||
.ss-m-#{$i} {
|
||||
margin: $i + rpx;
|
||||
}
|
||||
.ss-m-x-#{$i} {
|
||||
margin-left: $i + rpx;
|
||||
margin-right: $i + rpx;
|
||||
}
|
||||
.ss-m-y-#{$i} {
|
||||
margin-top: $i + rpx;
|
||||
margin-bottom: $i + rpx;
|
||||
}
|
||||
|
||||
// 得出：u-padding-30或者u-p-30
|
||||
.ss-padding-#{$i},
|
||||
.ss-p-#{$i} {
|
||||
padding: $i + rpx;
|
||||
}
|
||||
.ss-p-x-#{$i} {
|
||||
padding-left: $i + rpx;
|
||||
padding-right: $i + rpx;
|
||||
}
|
||||
.ss-p-y-#{$i} {
|
||||
padding-top: $i + rpx;
|
||||
padding-bottom: $i + rpx;
|
||||
}
|
||||
|
||||
@each $short, $long in l left, t top, r right, b bottom {
|
||||
// 缩写版，结果如： u-m-l-30
|
||||
// 定义外边距
|
||||
.ss-m-#{$short}-#{$i} {
|
||||
margin-#{$long}: $i + rpx;
|
||||
}
|
||||
|
||||
// 定义内边距
|
||||
.ss-p-#{$short}-#{$i} {
|
||||
padding-#{$long}: $i + rpx;
|
||||
}
|
||||
|
||||
// 完整版，结果如：u-margin-left-30
|
||||
// 定义外边距
|
||||
.ss-margin-#{$long}-#{$i} {
|
||||
margin-#{$long}: $i + rpx;
|
||||
}
|
||||
|
||||
// 定义内边距
|
||||
.ss-padding-#{$long}-#{$i} {
|
||||
padding-#{$long}: $i + rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================
|
||||
|
||||
radius
|
||||
|
||||
==================== */
|
||||
@for $i from 0 through 100 {
|
||||
// 只要双数和能被5除尽的数
|
||||
@if $i % 2==0 or $i % 5==0 {
|
||||
.ss-radius-#{$i},
|
||||
.ss-r-#{$i} {
|
||||
border-radius: $i + rpx;
|
||||
}
|
||||
|
||||
.ss-r-t-#{$i} {
|
||||
border-top-left-radius: $i + rpx;
|
||||
border-top-right-radius: $i + rpx;
|
||||
}
|
||||
|
||||
.ss-r-b-#{$i} {
|
||||
border-bottom-left-radius: $i + rpx;
|
||||
border-bottom-right-radius: $i + rpx;
|
||||
}
|
||||
|
||||
@each $short, $long in tl 'top-left', tr 'top-right', bl 'bottom-right', br 'bottom-right' {
|
||||
// 定义外边距
|
||||
.ss-r-#{$short}-#{$i} {
|
||||
border-#{$long}-radius: $i + rpx;
|
||||
}
|
||||
|
||||
// 定义内边距
|
||||
.ss-radius-#{$long}-#{$i} {
|
||||
border-#{$long}-radius: $i + rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================
|
||||
|
||||
溢出省略号
|
||||
@param {Number} 行数
|
||||
|
||||
==================== */
|
||||
@mixin ellipsis($rowCount: 1) {
|
||||
// @if $rowCount <=1 {
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
// } @else {
|
||||
// min-width: 0;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// display: -webkit-box;
|
||||
// -webkit-line-clamp: $rowCount;
|
||||
// -webkit-box-orient: vertical;
|
||||
// }
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $rowCount;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@for $i from 1 through 6 {
|
||||
.ss-line-#{$i} {
|
||||
@include ellipsis($i);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================
|
||||
hover
|
||||
==================== */
|
||||
.ss-hover-class {
|
||||
background-color: $gray-c;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.ss-hover-btn {
|
||||
transform: translate(1px, 1px);
|
||||
}
|
||||
|
||||
/* ==================
|
||||
底部安全区域
|
||||
==================== */
|
||||
|
||||
.ss-safe-bottom {
|
||||
padding-bottom: 0;
|
||||
padding-bottom: calc(constant(safe-area-inset-bottom) / 5 * 3);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 5 * 3);
|
||||
}
|
||||
|
||||
/* ==================
|
||||
|
||||
字体大小
|
||||
|
||||
==================== */
|
||||
|
||||
@for $i from 20 through 50 {
|
||||
.ss-font-#{$i} {
|
||||
font-size: $i + rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================
|
||||
按钮
|
||||
==================== */
|
||||
.ss-reset-button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
border: 0rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
.ss-reset-button.button-hover {
|
||||
transform: translate(1px, 1px);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ss-reset-button::after {
|
||||
border: none;
|
||||
}
|
||||
162
sheep/scss/_var.scss
Normal file
162
sheep/scss/_var.scss
Normal file
@@ -0,0 +1,162 @@
|
||||
@import './mixins';
|
||||
|
||||
//颜色 ，渐变背景60%
|
||||
$yellow: #ffc300; //ss-黄
|
||||
$orange: #ff6000; //ss-橘
|
||||
$red: #ff3000; //ss-红
|
||||
$pink: #e03997;
|
||||
$mauve: #b745cb;
|
||||
$purple: #652abf; //rgba(101, 42, 191, 1); // ss-紫
|
||||
$blue: #0081ff;
|
||||
$cyan: #37c0fe;
|
||||
$green: #7ea19e; //ss-绿
|
||||
$olive: #8dc63f;
|
||||
$grey: #8799a3;
|
||||
$brown: #a5673f;
|
||||
$black: #484848; //ss-黑
|
||||
$golden: #e9b461; //ss-金
|
||||
|
||||
$colors: ();
|
||||
$colors: map-merge(
|
||||
(
|
||||
'yellow': $yellow,
|
||||
'orange': $orange,
|
||||
'red': $red,
|
||||
'pink': $pink,
|
||||
'mauve': $mauve,
|
||||
'purple': $purple,
|
||||
'violet': $purple,
|
||||
'blue': $blue,
|
||||
'cyan': $cyan,
|
||||
'green': $green,
|
||||
'olive': $olive,
|
||||
'grey': $grey,
|
||||
'brown': $brown,
|
||||
'black': $black,
|
||||
'golden': $golden,
|
||||
),
|
||||
$colors
|
||||
);
|
||||
|
||||
//灰度
|
||||
$bg-page: #f6f6f6;
|
||||
$white: #ffffff;
|
||||
$gray-f: #f8f9fa;
|
||||
$gray-e: #eeeeee;
|
||||
$gray-d: #dddddd;
|
||||
$gray-c: #cccccc;
|
||||
$gray-b: #bbbbbb;
|
||||
$gray-a: #aaaaaa;
|
||||
$dark-9: #999999;
|
||||
$dark-8: #888888;
|
||||
$dark-7: #777777;
|
||||
$dark-6: #666666;
|
||||
$dark-5: #555555;
|
||||
$dark-4: #484848; //ss-黑
|
||||
$dark-3: #333333;
|
||||
$dark-2: #222222;
|
||||
$dark-1: #111111;
|
||||
$black: #000000;
|
||||
|
||||
$grays: ();
|
||||
$grays: map-merge(
|
||||
(
|
||||
'white': $white,
|
||||
'gray-f': $gray-f,
|
||||
'gray-e': $gray-e,
|
||||
'gray-d': $gray-d,
|
||||
'gray-c': $gray-c,
|
||||
'gray-b': $gray-b,
|
||||
'gray-a': $gray-a,
|
||||
'gray': $gray-a,
|
||||
),
|
||||
$grays
|
||||
);
|
||||
|
||||
$darks: ();
|
||||
$darks: map-merge(
|
||||
(
|
||||
'dark-9': $dark-9,
|
||||
'dark-8': $dark-8,
|
||||
'dark-7': $dark-7,
|
||||
'dark-6': $dark-6,
|
||||
'dark-5': $dark-5,
|
||||
'dark-4': $dark-4,
|
||||
'dark-3': $dark-3,
|
||||
'dark-2': $dark-2,
|
||||
'dark-1': $dark-1,
|
||||
'black': $black,
|
||||
),
|
||||
$darks
|
||||
);
|
||||
|
||||
// 边框
|
||||
$border-width: 1rpx !default; // 边框大小
|
||||
$border-color: $gray-d !default; // 边框颜色
|
||||
|
||||
// 圆角
|
||||
$radius: 10rpx !default; // 默认圆角大小
|
||||
$radius-lg: 40rpx !default; // 大圆角
|
||||
$radius-sm: 6rpx !default; // 小圆角
|
||||
$round-pill: 1000rpx !default; // 半圆
|
||||
|
||||
// 动画过渡
|
||||
$transition-base: all 0.2s ease-in-out !default; // 默认过渡
|
||||
$transition-base-out: all 0.04s ease-in-out !default; // 进场过渡
|
||||
$transition-fade: opacity 0.15s linear !default; // 透明过渡
|
||||
$transition-collapse: height 0.35s ease !default; // 收缩过渡
|
||||
|
||||
// 间距
|
||||
$spacer: 20rpx !default;
|
||||
$spacers: () !default;
|
||||
$spacers: map-merge(
|
||||
(
|
||||
0: 0,
|
||||
1: $spacer * 0.25,
|
||||
2: $spacer * 0.5,
|
||||
3: $spacer,
|
||||
4: $spacer * 1.5,
|
||||
5: $spacer * 3,
|
||||
6: $spacer * 5,
|
||||
),
|
||||
$spacers
|
||||
);
|
||||
// 字形
|
||||
$font-weight-lighter: lighter !default;
|
||||
$font-weight-light: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-bold: 700 !default;
|
||||
$font-weight-bolder: 900 !default;
|
||||
$fontsize: () !default;
|
||||
$fontsize: map-merge(
|
||||
(
|
||||
xs: 20,
|
||||
sm: 24,
|
||||
df: 28,
|
||||
lg: 32,
|
||||
xl: 36,
|
||||
xxl: 44,
|
||||
sl: 80,
|
||||
xsl: 120,
|
||||
),
|
||||
$fontsize
|
||||
);
|
||||
// 段落
|
||||
$line-height-base: 1.5 !default;
|
||||
$line-height-lg: 2 !default;
|
||||
$line-height-sm: 1.25 !default;
|
||||
// 图标
|
||||
$iconsize: () !default;
|
||||
$iconsize: map-merge(
|
||||
(
|
||||
xs: 0.5,
|
||||
sm: 0.75,
|
||||
df: 1,
|
||||
lg: 1.25,
|
||||
xl: 1.5,
|
||||
xxl: 2,
|
||||
sl: 6,
|
||||
xsl: 10,
|
||||
),
|
||||
$iconsize
|
||||
);
|
||||
BIN
sheep/scss/font/OPPOSANS-M-subfont.ttf
Normal file
BIN
sheep/scss/font/OPPOSANS-M-subfont.ttf
Normal file
Binary file not shown.
1340
sheep/scss/icon/_coloricon.scss
Normal file
1340
sheep/scss/icon/_coloricon.scss
Normal file
File diff suppressed because one or more lines are too long
181
sheep/scss/icon/_icon.scss
Normal file
181
sheep/scss/icon/_icon.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
@font-face {
|
||||
font-family: 'colorui'; /* Project id 2620914 */
|
||||
src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
|
||||
format('woff2');
|
||||
/* #ifdef MP-ALIPAY */
|
||||
src: url('//at.alicdn.com/t/font_2620914_57y9q5zpbel.woff?t=1624238023908') format('woff'),
|
||||
url('//at.alicdn.com/t/font_2620914_57y9q5zpbel.ttf?t=1624238023908') format('truetype');
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
[class*='_icon-'] {
|
||||
font-family: 'colorui' !important;
|
||||
display: inline-block;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'ui-num';
|
||||
src: url('data:application/x-font-ttf;base64,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')
|
||||
format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
._icon-checkbox:before {
|
||||
content: '\e713';
|
||||
}
|
||||
|
||||
._icon-box:before {
|
||||
content: '\e714';
|
||||
}
|
||||
|
||||
._icon-checkbox-o:before {
|
||||
content: '\e715';
|
||||
}
|
||||
|
||||
._icon-round:before {
|
||||
content: '\e716';
|
||||
}
|
||||
|
||||
._icon-home-o:before {
|
||||
content: '\e70a';
|
||||
}
|
||||
|
||||
._icon-home:before {
|
||||
content: '\e70d';
|
||||
}
|
||||
|
||||
._icon-edit:before {
|
||||
content: '\e649';
|
||||
}
|
||||
|
||||
._icon-close:before {
|
||||
content: '\e6ed';
|
||||
}
|
||||
|
||||
._icon-check-round:before {
|
||||
content: '\e6f1';
|
||||
}
|
||||
|
||||
._icon-check-round-o:before {
|
||||
content: '\e6f2';
|
||||
}
|
||||
|
||||
._icon-close-round:before {
|
||||
content: '\e6f3';
|
||||
}
|
||||
|
||||
._icon-close-round-o:before {
|
||||
content: '\e6f4';
|
||||
}
|
||||
|
||||
._icon-waiting:before {
|
||||
content: '\e6f8';
|
||||
}
|
||||
|
||||
._icon-waiting-o:before {
|
||||
content: '\e6f9';
|
||||
}
|
||||
|
||||
._icon-warn:before {
|
||||
content: '\e662';
|
||||
}
|
||||
|
||||
._icon-warn-o:before {
|
||||
content: '\e675';
|
||||
}
|
||||
|
||||
._icon-more:before {
|
||||
content: '\e688';
|
||||
}
|
||||
|
||||
._icon-delete:before {
|
||||
content: '\e707';
|
||||
}
|
||||
|
||||
._icon-delete-o:before {
|
||||
content: '\e709';
|
||||
}
|
||||
|
||||
._icon-add-round:before {
|
||||
content: '\e717';
|
||||
}
|
||||
|
||||
._icon-add-round-o:before {
|
||||
content: '\e718';
|
||||
}
|
||||
|
||||
._icon-add:before {
|
||||
content: '\e6e4';
|
||||
}
|
||||
|
||||
._icon-info:before {
|
||||
content: '\e6ef';
|
||||
}
|
||||
|
||||
._icon-info-o:before {
|
||||
content: '\e705';
|
||||
}
|
||||
|
||||
._icon-move:before {
|
||||
content: '\e768';
|
||||
}
|
||||
|
||||
._icon-title:before {
|
||||
content: '\e82f';
|
||||
}
|
||||
|
||||
._icon-titles:before {
|
||||
content: '\e745';
|
||||
}
|
||||
|
||||
._icon-loading:before {
|
||||
content: '\e746';
|
||||
}
|
||||
|
||||
._icon-copy-o:before {
|
||||
content: '\e7bc';
|
||||
}
|
||||
|
||||
._icon-copy:before {
|
||||
content: '\e85c';
|
||||
}
|
||||
|
||||
._icon-loader:before {
|
||||
content: '\e76d';
|
||||
}
|
||||
|
||||
._icon-search:before {
|
||||
content: '\e782';
|
||||
}
|
||||
|
||||
._icon-back:before {
|
||||
content: '\e600';
|
||||
}
|
||||
|
||||
._icon-forward:before {
|
||||
content: '\e601';
|
||||
}
|
||||
|
||||
._icon-arrow:before {
|
||||
content: '\e608';
|
||||
}
|
||||
|
||||
._icon-drop-down:before {
|
||||
content: '\e61c';
|
||||
}
|
||||
|
||||
._icon-drop-up:before {
|
||||
content: '\e61d';
|
||||
}
|
||||
|
||||
._icon-check:before {
|
||||
content: '\e69f';
|
||||
}
|
||||
|
||||
._icon-move-round:before {
|
||||
content: '\e602';
|
||||
}
|
||||
|
||||
._icon-move-round-o:before {
|
||||
content: '\e603';
|
||||
}
|
||||
94
sheep/scss/icon/_sheepicon.scss
Normal file
94
sheep/scss/icon/_sheepicon.scss
Normal file
File diff suppressed because one or more lines are too long
43
sheep/scss/icon/_style.scss
Normal file
43
sheep/scss/icon/_style.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
@import './icon'; //核心图标库
|
||||
@import './coloricon'; //扩展图标库
|
||||
@import './sheepicon';
|
||||
.icon-spin {
|
||||
animation: icon-spin 2s infinite linear;
|
||||
}
|
||||
|
||||
.icon-pulse {
|
||||
animation: icon-spin 1s infinite steps(8);
|
||||
}
|
||||
|
||||
@keyframes icon-spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
.icon-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.icon-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.icon-270 {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
.icon-x {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
.icon-y {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
.icon-fw {
|
||||
width: calc(18em / 14);
|
||||
text-align: center;
|
||||
}
|
||||
@each $class, $value in $iconsize {
|
||||
.icon-#{$class} {
|
||||
transform: scale(#{$value});
|
||||
}
|
||||
}
|
||||
27
sheep/scss/index.scss
Normal file
27
sheep/scss/index.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
@import './tools';
|
||||
@import './ui';
|
||||
|
||||
/* 字体文件 */
|
||||
@font-face {
|
||||
font-family: OPPOSANS;
|
||||
src: url('~@/sheep/scss/font/OPPOSANS-M-subfont.ttf');
|
||||
}
|
||||
.font-OPPOSANS {
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
page {
|
||||
-webkit-overflow-scrolling: touch; // 解决ios滑动不流畅
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// font-family: OPPOSANS;
|
||||
word-break: break-all; //英文文本不换行
|
||||
white-space: normal;
|
||||
background-color: $bg-page;
|
||||
color: $dark-3;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
display: none;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
39
sheep/scss/theme/_dark.scss
Normal file
39
sheep/scss/theme/_dark.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
// 核心主题样式文件
|
||||
@mixin theme-dark {
|
||||
// 背景色
|
||||
--ui-BG: #393939;
|
||||
--ui-BG-1: #333333;
|
||||
--ui-BG-2: #2c2c2c;
|
||||
--ui-BG-3: #292929;
|
||||
--ui-BG-4: #222222;
|
||||
|
||||
// 文本色
|
||||
--ui-TC: #ffffff;
|
||||
--ui-TC-1: #d4d4d4;
|
||||
--ui-TC-2: #919191;
|
||||
--ui-TC-3: #6a6a6a;
|
||||
--ui-TC-4: #474747;
|
||||
|
||||
// 模糊
|
||||
--ui-Blur: rgba(38, 38, 38, 0.98);
|
||||
--ui-Blur-1: rgba(38, 38, 38, 0.75);
|
||||
--ui-Blur-2: rgba(38, 38, 38, 0.25);
|
||||
--ui-Blur-3: rgba(38, 38, 38, 0.05);
|
||||
|
||||
// 边框
|
||||
--ui-Border: rgba(119, 119, 119, 0.25);
|
||||
--ui-Outline: rgba(255, 255, 255, 0.1);
|
||||
--ui-Line: rgba(119, 119, 119, 0.25);
|
||||
|
||||
// 透明与阴影
|
||||
--ui-Shadow: 0 0.5em 1em rgba(0, 0, 0, 0.45);
|
||||
--ui-Shadow-sm: 0 0.125em 0.25em rgba(0, 0, 0, 0.475);
|
||||
--ui-Shadow-lg: 0 1em 3em rgba(0, 0, 0, 0.475);
|
||||
--ui-Shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.475);
|
||||
|
||||
--ui-Shadow-opacity: 0.55;
|
||||
--ui-Shadow-opacity-sm: 0.175;
|
||||
--ui-Shadow-opacity-lg: 0.75;
|
||||
|
||||
--ui-BG-opacity: 0.1;
|
||||
}
|
||||
39
sheep/scss/theme/_light.scss
Normal file
39
sheep/scss/theme/_light.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
// 核心主题样式文件
|
||||
@mixin theme-light {
|
||||
// 背景色
|
||||
--ui-BG: #ffffff;
|
||||
--ui-BG-1: #f6f6f6;
|
||||
--ui-BG-2: #f1f1f1;
|
||||
--ui-BG-3: #e8e8e8;
|
||||
--ui-BG-4: #e0e0e0;
|
||||
|
||||
// 文本色
|
||||
--ui-TC: #303030;
|
||||
--ui-TC-1: #525252;
|
||||
--ui-TC-2: #777777;
|
||||
--ui-TC-3: #9e9e9e;
|
||||
--ui-TC-4: #c6c6c6;
|
||||
|
||||
// 模糊
|
||||
--ui-Blur: rgba(255, 255, 255, 0.98);
|
||||
--ui-Blur-1: rgba(255, 255, 255, 0.75);
|
||||
--ui-Blur-2: rgba(255, 255, 255, 0.25);
|
||||
--ui-Blur-3: rgba(255, 255, 255, 0.05);
|
||||
|
||||
// 边框
|
||||
--ui-Border: rgba(119, 119, 119, 0.25);
|
||||
--ui-Outline: rgba(0, 0, 0, 0.1);
|
||||
--ui-Line: rgba(119, 119, 119, 0.25);
|
||||
|
||||
// 透明与阴影
|
||||
--ui-Shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15);
|
||||
--ui-Shadow-sm: 0 0.125em 0.25em rgba(0, 0, 0, 0.075);
|
||||
--ui-Shadow-lg: 0 1em 3em rgba(0, 0, 0, 0.175);
|
||||
--ui-Shadow-inset: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.075);
|
||||
|
||||
--ui-Shadow-opacity: 0.45;
|
||||
--ui-Shadow-opacity-sm: 0.075;
|
||||
--ui-Shadow-opacity-lg: 0.65;
|
||||
|
||||
--ui-BG-opacity: 0.1;
|
||||
}
|
||||
68
sheep/scss/theme/_style.scss
Normal file
68
sheep/scss/theme/_style.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
@import './light'; //浅蓝主题
|
||||
@import './dark'; //深蓝主题
|
||||
// 多主题
|
||||
.theme-light {
|
||||
@include theme-light;
|
||||
}
|
||||
.theme-dark {
|
||||
@include theme-dark;
|
||||
}
|
||||
.theme-auto {
|
||||
@include theme-light;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.theme-auto {
|
||||
@include theme-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@each $value in ('', '-1', '-2', '-3', '-4') {
|
||||
// 背景色 + 文字色 ： 白色 + 默认色；
|
||||
.ui-BG#{$value} {
|
||||
background-color: var(--ui-BG#{$value}) !important;
|
||||
color: var(--ui-TC);
|
||||
}
|
||||
// 文字颜色
|
||||
.ui-TC#{$value} {
|
||||
color: var(--ui-TC#{$value}) !important;
|
||||
}
|
||||
// 主题色背景
|
||||
.ui-BG-Main#{$value} {
|
||||
background-color: var(--ui-BG-Main#{$value}) !important;
|
||||
color: var(--ui-BG-Main-TC) !important;
|
||||
}
|
||||
// 主题色渐变，横向
|
||||
.ui-BG-Main-Gradient {
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)) !important;
|
||||
color: var(--ui-BG-Main-TC) !important;
|
||||
}
|
||||
// 主题色文字
|
||||
.ui-TC-Main#{$value} {
|
||||
color: var(--ui-BG-Main#{$value}) !important;
|
||||
}
|
||||
// 主题色阴影
|
||||
.ui-Shadow-Main {
|
||||
box-shadow: var(--ui-Main-box-shadow) !important;
|
||||
}
|
||||
.ui-BG-Main-light {
|
||||
background: var(----ui-BG-Main-light) !important;
|
||||
color: var(--ui-BG-Main#{$value}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
.main-#{$color} {
|
||||
--ui-BG-Main: #{$value};
|
||||
--ui-BG-Main-tag: #{rgba($value, 0.05)};
|
||||
--ui-BG-Main-gradient: #{rgba($value, 0.6)};
|
||||
--ui-BG-Main-light: #{rgba($value, 0.2)};
|
||||
--ui-BG-Main-opacity-1: #{rgba($value, 0.1)};
|
||||
--ui-BG-Main-opacity-4: #{rgba($value, 0.4)};
|
||||
--ui-Main-box-shadow: 0 0.2em 0.5em #{rgba($value, var(--ui-Shadow-opacity))};
|
||||
--ui-BG-Main-1: #{mix(rgba(255, 255, 255, 0.7), desaturate($value, 20%), 10%)};
|
||||
--ui-BG-Main-2: #{mix(rgba(255, 255, 255, 0.6), desaturate($value, 40%), 20%)};
|
||||
--ui-BG-Main-3: #{mix(rgba(119, 119, 119, 0.2), desaturate($value, 40%), 40%)};
|
||||
--ui-BG-Main-4: #{mix(rgba(119, 119, 119, 0.1), desaturate($value, 40%), 60%)};
|
||||
--ui-BG-Main-TC: #ffffff !important;
|
||||
}
|
||||
}
|
||||
19
sheep/scss/ui.scss
Normal file
19
sheep/scss/ui.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
@import './theme/style'; //系统主题
|
||||
@import './main'; //主样式*
|
||||
|
||||
@import './style/background'; //背景
|
||||
@import './style/grid'; //列
|
||||
@import './style/flex'; //布局
|
||||
@import './style/border'; //边框
|
||||
@import './style/text'; //文本
|
||||
@import './style/shadow'; //阴影
|
||||
@import './icon/style'; //图标
|
||||
@import './style/tag'; //标签
|
||||
@import './style/button'; //按钮
|
||||
@import './style/avatar'; //头像
|
||||
@import './style/table'; //表格
|
||||
@import './style/code'; //代码片段
|
||||
@import './style/form'; //表单
|
||||
@import './style/menu'; //表单
|
||||
@import './style/markdown'; //表单
|
||||
@import './style/card'; //表单
|
||||
Reference in New Issue
Block a user