620 lines
14 KiB
SCSS
620 lines
14 KiB
SCSS
// thinco样式库
|
||
|
||
/* ============ 初始化 ============*/
|
||
page {
|
||
background-color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* ============ 样式 ============*/
|
||
// 状态栏高度
|
||
.status-bar {height: var(--status-bar-height);width: 100%;}
|
||
// 内容区域距离顶部的距离
|
||
.window-top {height: var(--window-top);width: 100%;}
|
||
// 内容区域距离底部的距离
|
||
.window-bottom {height: var(--window-bottom);width: 100%;}
|
||
|
||
// 页面
|
||
.wrap-page {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
background-color: #F4F6F6;
|
||
}
|
||
|
||
// 卡片
|
||
.wrap-card {
|
||
background-color: #FFFFFF;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
// 列表
|
||
.wrap-list {
|
||
padding: 20rpx;
|
||
.list-title {
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
display: flex;
|
||
font-weight: 500;
|
||
flex-direction: row;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.list-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
// 标签
|
||
.wrap-tag {
|
||
display: inline-block;
|
||
border-radius: 5rpx;
|
||
padding: 5rpx;
|
||
&.tag-dark {
|
||
border: 1px solid #303133;
|
||
color: #606266;
|
||
&.plain {
|
||
background-color: #F0F0F0;
|
||
}
|
||
}
|
||
&.tag-blue {
|
||
border: 1px solid #4AA3FF;
|
||
color: #3C9CFF;
|
||
&.plain {
|
||
background-color: #ECF5FF;
|
||
}
|
||
}
|
||
&.tag-green {
|
||
border: 1px solid #5AC725;
|
||
color: #73CF45;
|
||
&.plain {
|
||
background-color: #ECFDF5;
|
||
}
|
||
}
|
||
&.tag-red {
|
||
border: 1px solid #F56C6C;
|
||
color: #F67979;
|
||
&.plain {
|
||
background-color: #FEF0F0;
|
||
}
|
||
}
|
||
&.tag-yellow {
|
||
border: 1px solid #F9AE3D;
|
||
color: #F9AE3D;
|
||
&.plain {
|
||
background-color: #FDF6EC;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 底部操作栏
|
||
.wrap-bottom-bar {
|
||
|
||
// 操作栏占位符
|
||
.bar-placeholder {
|
||
height: 100rpx;
|
||
width: 100%;
|
||
}
|
||
// 操作栏内容
|
||
.bar-content {
|
||
background-color: #fff;
|
||
border-top: 2rpx solid $uni-border-color2;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 85rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
/* ============ 颜色 ============*/
|
||
// 常用颜色
|
||
$border-color: #E5E7EB; // 主边框颜色(灰色)
|
||
|
||
// 其他颜色
|
||
$color:(
|
||
// 灰色
|
||
gray-50:#F9FAFB,
|
||
gray-100:#F3F4F6,
|
||
gray-200:#E5E7EB,
|
||
gray-300:#D1D5DB,
|
||
gray-400:#9CA3AF,
|
||
gray-500:#6B7280,
|
||
gray-600:#4B5563,
|
||
gray-700:#374151,
|
||
gray-800:#1F2937,
|
||
gray-900:#111827,
|
||
// 红色
|
||
red-50:#FEF2F2,
|
||
red-100:#FEE2E2,
|
||
red-200:#FECACA,
|
||
red-300:#FCA5A5,
|
||
red-400:#F87171,
|
||
red-500:#EF4444,
|
||
red-600:#DC2626,
|
||
red-700:#B91C1C,
|
||
red-800:#991B1B,
|
||
red-900:#7F1D1D,
|
||
// 黄色
|
||
yellow-50:#FFFBEB,
|
||
yellow-100:#FEF3C7,
|
||
yellow-200:#FDE68A,
|
||
yellow-300:#FCD34D,
|
||
yellow-400:#FBBF24,
|
||
yellow-500:#F59E0B,
|
||
yellow-600:#D97706,
|
||
yellow-700:#B45309,
|
||
yellow-800:#92400E,
|
||
yellow-900:#78350F,
|
||
// 橘色
|
||
orange-50:#fff7ed,
|
||
orange-100:#ffedd5,
|
||
orange-200:#fed7aa,
|
||
orange-300:#fdba74,
|
||
orange-400:#fb923c,
|
||
orange-500:#f97316,
|
||
orange-600:#ea580c,
|
||
orange-700:#c2410c,
|
||
orange-800:#9a3412,
|
||
orange-900:#7c2d12,
|
||
// 绿色
|
||
green-50:#ECFDF5,
|
||
green-100:#D1FAE5,
|
||
green-200:#A7F3D0,
|
||
green-300:#6EE7B7,
|
||
green-400:#34D399,
|
||
green-500:#10B981,
|
||
green-600:#059669,
|
||
green-700:#047857,
|
||
green-800:#065F46,
|
||
green-900:#064E3B,
|
||
// 蓝色
|
||
blue-50:#EFF6FF,
|
||
blue-100:#DBEAFE,
|
||
blue-200:#BFDBFE,
|
||
blue-300:#93C5FD,
|
||
blue-400:#60A5FA,
|
||
blue-500:#3B82F6,
|
||
blue-600:#2563EB,
|
||
blue-700:#1D4ED8,
|
||
blue-800:#1E40AF,
|
||
blue-900:#1E3A8A,
|
||
// 紫色
|
||
purple-50:#F5F3FF,
|
||
purple-100:#EDE9FE,
|
||
purple-200:#DDD6FE,
|
||
purple-300:#C4B5FD,
|
||
purple-400:#A78BFA,
|
||
purple-500:#8B5CF6,
|
||
purple-600:#7C3AED,
|
||
purple-700:#6D28D9,
|
||
purple-800:#5B21B6,
|
||
purple-900:#4C1D95,
|
||
// 粉色
|
||
pink-50:#fdf2f8,
|
||
pink-100:#fce7f3,
|
||
pink-200:#fbcfe8,
|
||
pink-300:#f9a8d4,
|
||
pink-400:#f472b6,
|
||
pink-500:#ec4899,
|
||
pink-600:#db2777,
|
||
pink-700:#be185d,
|
||
pink-800:#9d174d,
|
||
pink-900:#831843
|
||
);
|
||
// 文本、边框、背景
|
||
@each $key,$val in $color {
|
||
//文本颜色
|
||
.text-#{$key} {
|
||
color: #{$val}!important;
|
||
}
|
||
//边框颜色
|
||
.border-#{$key} {
|
||
border-color: #{$val}!important;
|
||
}
|
||
//背景颜色
|
||
.bg-#{$key} {
|
||
background-color: #{$val}!important;
|
||
}
|
||
}
|
||
// 文本/图标/背景
|
||
.text-green {color: #01906c;}
|
||
.text-white {color: #fff;}
|
||
.text-black {color: #000;}
|
||
.text-blue {color: #279cff;}
|
||
.text-gray {color: #9CA3AF;}
|
||
.text-yellow {color: #FAAD14;}
|
||
.text-red {color: #e45656;}
|
||
.bg-white {background-color: #fff;}
|
||
.bg-blue {background-color: #279cff;}
|
||
.bg-gray {background-color: #F2F2F2;}
|
||
|
||
/* ============ 布局 ============*/
|
||
|
||
// box
|
||
.box-border { box-sizing: border-box;}
|
||
.box-content { box-sizing: content-box;}
|
||
// 显示
|
||
.block { display: block !important;}
|
||
.inline-block { display: inline-block !important;}
|
||
.inline { display: inline;}
|
||
.flex { display: flex !important;}
|
||
.hidden { display: none !important;}
|
||
// 溢出
|
||
.overflow-hidden { overflow: hidden;}
|
||
.overflow-scroll { overflow: scroll;}
|
||
.overflow-x-hidden { overflow-x: hidden;}
|
||
.overflow-y-hidden { overflow-y: hidden;}
|
||
.overflow-x-scroll { overflow-x: scroll;}
|
||
.overflow-y-scroll { overflow-y: scroll;}
|
||
// 定位
|
||
.static { position: static;}
|
||
.relative{ position: relative;}
|
||
.absolute{ position: absolute;}
|
||
.fixed{ position: fixed;}
|
||
.sticky{ position: static;}
|
||
.top-0{ top: 0; }
|
||
.right-0{ right: 0; }
|
||
.bottom-0{ bottom: 0; }
|
||
.left-0{ left: 0; }
|
||
.top-10{ top: 10rpx; }
|
||
.right-10{ right: 10rpx; }
|
||
.bottom-10{ bottom: 10rpx; }
|
||
.left-10{ left: 10rpx; }
|
||
.top-20{ top: 20rpx; }
|
||
.right-20{ right: 20rpx; }
|
||
.bottom-20{ bottom: 20rpx; }
|
||
.left-20{ left: 20rpx; }
|
||
.top-1-2{ top: 50%; }
|
||
.top-1-3{ top: 33.333333%; }
|
||
.top-2-3{ top: 66.666667%; }
|
||
.top-1-4{ top: 25%; }
|
||
.top-2-4{ top: 50%; }
|
||
.top-3-4{ top: 75%; }
|
||
.top-full{ top: 100%; }
|
||
.right-1-2{ right: 50%; }
|
||
.right-1-3{ right: 33.333333%; }
|
||
.right-2-3{ right: 66.666667%; }
|
||
.right-1-4{ right: 25%; }
|
||
.right-2-4{ right: 50%; }
|
||
.right-3-4{ right: 75%; }
|
||
.right-full{ right: 100%; }
|
||
.bottom-1-2{ bottom: 50%; }
|
||
.bottom-1-3{ bottom: 33.333333%; }
|
||
.bottom-2-3{ bottom: 66.666667%; }
|
||
.bottom-1-4{ bottom: 25%; }
|
||
.bottom-2-4{ bottom: 50%; }
|
||
.bottom-3-4{ bottom: 75%; }
|
||
.bottom-full{ bottom: 100%; }
|
||
.left-1-2{ left: 50%; }
|
||
.left-1-3{ left: 33.333333%; }
|
||
.left-2-3{ left: 66.666667%; }
|
||
.left-1-4{ left: 25%; }
|
||
.left-2-4{ left: 50%; }
|
||
.left-3-4{ left: 75%; }
|
||
.left-full{ left: 100%; }
|
||
// 可见性
|
||
.visible { visibility: visible;}
|
||
.invisible { visibility: hidden;}
|
||
// 优先级
|
||
.z-0 { z-index: 0;}
|
||
.z-10 { z-index: 10;}
|
||
.z-20 { z-index: 20;}
|
||
.z-30 { z-index: 30;}
|
||
.z-40 { z-index: 40;}
|
||
.z-50 { z-index: 50;}
|
||
.z-auto { z-index: auto;}
|
||
|
||
// FLEXBOX 布局
|
||
|
||
// 方向
|
||
.flex-row { flex-direction: row !important;}
|
||
.flex-row-reverse { flex-direction: row-reverse !important;}
|
||
.flex-col { flex-direction: column !important;}
|
||
.flex-col-reverse { flex-direction: column-reverse !important;}
|
||
// 换行
|
||
.flex-wrap { flex-wrap: wrap !important;}
|
||
.flex-wrap-reverse { flex-wrap: wrap-reverse !important;}
|
||
.flex-nowrap { flex-wrap: nowrap !important;}
|
||
// 控制 flex 项目放大和缩小
|
||
.flex-1 { flex: 1 1 0% !important;}
|
||
.flex-none { flex: none !important;}
|
||
// 控制 flex 项目放大的功能类
|
||
.flex-grow-0 { flex-grow: 0 !important;}
|
||
.flex-grow { flex-grow: 1 !important;}
|
||
// 控制 flex 项目缩小的功能类
|
||
.flex-shrink-0 { flex-shrink: 0 !important;}
|
||
.flex-shrink { flex-shrink: 1 !important;}
|
||
// justify-content用于控制 flex 和 grid 项目如何沿着容器的主轴定位的功能类
|
||
.justify-start { justify-content: flex-start !important;}
|
||
.justify-end { justify-content: flex-end !important;}
|
||
.justify-center { justify-content: center !important;}
|
||
.justify-between { justify-content: space-between !important;}
|
||
.justify-around { justify-content: space-around !important;}
|
||
.justify-evenly { justify-content: space-evenly !important;}
|
||
// align-items用于控制 Flex 和网格项如何沿着容器的横轴定位的功能类
|
||
.items-start { align-items: flex-start !important;}
|
||
.items-end {align-items: flex-end !important;}
|
||
.items-center {align-items: center !important;}
|
||
.items-baseline { align-items: baseline !important;}
|
||
.items-stretch { align-items: stretch !important;}
|
||
|
||
/* ============ 间距 ============*/
|
||
|
||
// 上下左右的内外边距：0 - 80（递增数：2，含尾数为5的数）
|
||
@for $i from 0 through 80 {
|
||
// 只要双数和能被5除尽的数
|
||
@if $i % 2 == 0 or $i % 5 == 0 {
|
||
// 定义外边距，结果如：m-30
|
||
.m-#{$i} {
|
||
margin: $i + rpx!important;
|
||
}
|
||
// 定义内边距，结果如：p-30
|
||
.p-#{$i} {
|
||
padding: $i + rpx!important;
|
||
}
|
||
@each $short, $long in l left, t top, r right, b bottom {
|
||
// 定义外边距，结果如： ml-30
|
||
.m#{$short}-#{$i} {
|
||
margin-#{$long}: $i + rpx!important;
|
||
}
|
||
// 定义内边距
|
||
.p#{$short}-#{$i} {
|
||
padding-#{$long}: $i + rpx!important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 水平和垂直的内外边距：0 - 80（递增数：5）
|
||
@for $i from 0 through 16 {
|
||
$var: $i * 5;
|
||
.mx-#{$var} {
|
||
margin-left: $var + rpx!important;
|
||
margin-right: $var + rpx!important;
|
||
}
|
||
.my-#{$var} {
|
||
margin-top: $var + rpx!important;
|
||
margin-bottom: $var + rpx!important;
|
||
}
|
||
.px-#{$var} {
|
||
padding-left: $var + rpx!important;
|
||
padding-right: $var + rpx!important;
|
||
}
|
||
.py-#{$var} {
|
||
padding-top: $var + rpx!important;
|
||
padding-bottom: $var + rpx!important;
|
||
}
|
||
}
|
||
// 自动填充的内外边距
|
||
@each $short, $long in l left, t top, r right, b bottom {
|
||
// 定义外边距
|
||
.m#{$short}-auto {
|
||
margin-#{$long}: auto!important;
|
||
}
|
||
// 定义内边距
|
||
.p#{$short}-auto {
|
||
padding-#{$long}: auto!important;
|
||
}
|
||
}
|
||
.mx-auto {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.my-auto {
|
||
margin-top: auto;
|
||
margin-bottom: auto;
|
||
}
|
||
|
||
/* ============ 尺寸 ============*/
|
||
|
||
// 高度
|
||
.h-1-2 { height: 50%;}
|
||
.h-1-3 { height: 33.333333%;}
|
||
.h-2-3 { height: 66.666667%;}
|
||
.h-1-4 { height: 25%;}
|
||
.h-2-4 { height: 50%;}
|
||
.h-3-4 { height: 75%;}
|
||
.h-1-5 { height: 20%;}
|
||
.h-2-5 { height: 40%;}
|
||
.h-3-5 { height: 60%;}
|
||
.h-4-5 { height: 80%;}
|
||
.h-1-6 { height: 16.666667%;}
|
||
.h-2-6 { height: 33.333333%;}
|
||
.h-3-6 { height: 50%;}
|
||
.h-4-6 { height: 66.666667%;}
|
||
.h-5-6 { height: 83.333333%;}
|
||
.h-full{ height: 100%;}
|
||
.h-screen{ height: 100vh;}
|
||
// 宽度
|
||
.w-1-2 { width: 50%;}
|
||
.w-1-3 { width: 33.333333%;}
|
||
.w-2-3 { width: 66.666667%;}
|
||
.w-1-4 { width: 25%;}
|
||
.w-2-4 { width: 50%;}
|
||
.w-3-4 { width: 75%;}
|
||
.w-1-5 { width: 20%;}
|
||
.w-2-5 { width: 40%;}
|
||
.w-3-5 { width: 60%;}
|
||
.w-4-5 { width: 80%;}
|
||
.w-1-6 { width: 16.666667%;}
|
||
.w-2-6 { width: 33.333333%;}
|
||
.w-3-6 { width: 50%;}
|
||
.w-4-6 { width: 66.666667%;}
|
||
.w-5-6 { width: 83.333333%;}
|
||
.w-1-12 { width: 8.333333%;}
|
||
.w-2-12 { width: 16.666667%;}
|
||
.w-3-12 { width: 25%;}
|
||
.w-4-12 { width: 33.333333%;}
|
||
.w-5-12 { width: 41.666667%;}
|
||
.w-6-12 { width: 50%;}
|
||
.w-7-12 { width: 58.333333%;}
|
||
.w-8-12 { width: 66.666667%;}
|
||
.w-9-12 { width: 75%}
|
||
.w-10-12 { width: 83.333333%;}
|
||
.w-11-12 { width: 91.666667%;}
|
||
.w-full{ width: 100%;}
|
||
.w-screen{ width: 100vh;}
|
||
|
||
@for $i from 1 through 10 {
|
||
$var: $i * 10;
|
||
.w-#{$var} {
|
||
width: #{$var+'%'};
|
||
}
|
||
}
|
||
@for $i from 1 through 19 {
|
||
$var: $i * 5;
|
||
.w-#{$var} {
|
||
width: #{$var+'%'};
|
||
}
|
||
}
|
||
|
||
|
||
/* ============ 字体文本 ============*/
|
||
|
||
// 大小
|
||
// 数值形式（取偶数）
|
||
@for $i from 20 through 60 {
|
||
@if $i % 2 == 0 {
|
||
.text-#{$i} {
|
||
font-size: $i + rpx;
|
||
}
|
||
}
|
||
}
|
||
// 粗细
|
||
.font-thin {
|
||
font-weight: 100;
|
||
}
|
||
.font-extralight {
|
||
font-weight: 200;
|
||
}
|
||
.font-light {
|
||
font-weight: 300;
|
||
}
|
||
.font-normal {
|
||
font-weight: 400;
|
||
}
|
||
.font-medium {
|
||
font-weight: 500;
|
||
}
|
||
.font-semibold {
|
||
font-weight: 600;
|
||
}
|
||
.font-bold {
|
||
font-weight: 700;
|
||
}
|
||
.font-extrabold {
|
||
font-weight: 800;
|
||
}
|
||
.font-black {
|
||
font-weight: 900;
|
||
}
|
||
// 行高
|
||
.leading-0{ line-height: 0!important; }
|
||
.leading-05{ line-height: 0.5!important;}
|
||
.leading-10{ line-height: 1!important; }
|
||
.leading-12{ line-height: 1.2!important; }
|
||
.leading-15{ line-height: 1.5!important; }
|
||
.leading-20{ line-height: 2!important; }
|
||
.leading-30{ line-height: 3!important; }
|
||
// 文本对齐
|
||
.text-left { text-align: left!important;}
|
||
.text-center { text-align: center!important;}
|
||
.text-right { text-align: right!important;}
|
||
.text-justify { text-align: justify!important;}
|
||
// 文本溢出
|
||
.line-1 {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.line-2 {
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
.line-3 {
|
||
-webkit-line-clamp: 3;
|
||
}
|
||
.line-4 {
|
||
-webkit-line-clamp: 4;
|
||
}
|
||
.line-5 {
|
||
-webkit-line-clamp: 5;
|
||
}
|
||
.line-2, .line-3, .line-4, .line-5 {
|
||
overflow: hidden;
|
||
word-break: break-all;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box; // 弹性伸缩盒
|
||
-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
|
||
}
|
||
// 换行
|
||
.break-normal { overflow-wrap: normal;word-break: normal;}
|
||
.break-words { overflow-wrap: break-word;} // 在长单词或 URL 地址内部进行换行
|
||
.break-all { word-break: break-all;} // 在单词内换行
|
||
// 文本修饰
|
||
.underline { text-decoration-line: underline; }
|
||
.overline { text-decoration-line: overline; }
|
||
.line-through { text-decoration-line: line-through; }
|
||
.no-underline { text-decoration-line: no-underline; }
|
||
// 下划线位置
|
||
.underline-offset-auto { text-underline-offset: auto; }
|
||
.underline-offset-0 { text-underline-offset: 0px; }
|
||
.underline-offset-1 { text-underline-offset: 1px; }
|
||
.underline-offset-2 { text-underline-offset: 2px; }
|
||
.underline-offset-4 { text-underline-offset: 4px; }
|
||
.underline-offset-8 { text-underline-offset: 8px; }
|
||
|
||
/* ============ 边框 ============*/
|
||
|
||
// 圆角
|
||
.rounded-none { border-radius: 0px !important;}
|
||
.rounded { border-radius: 5rpx !important; }
|
||
.rounded-10{ border-radius: 10rpx !important; }
|
||
.rounded-20{ border-radius: 20rpx !important; }
|
||
.rounded-30{ border-radius: 30rpx !important; }
|
||
.rounded-50{ border-radius: 50rpx !important; }
|
||
.rounded-full{ border-radius:100% !important; }
|
||
// 边框
|
||
@each $var in left, right, top, bottom {
|
||
// 边框，结果如：border-l
|
||
.border-#{str-slice($var,0,1)}{
|
||
border-#{$var}-width: 1rpx;
|
||
border-#{$var}-style: solid;
|
||
border-#{$var}-color: $border-color;
|
||
}
|
||
// 边框为0，结果如：border-l-0
|
||
.border-#{str-slice($var,0,1)}-0{
|
||
border-#{$var}-width: 0;
|
||
}
|
||
}
|
||
.border{ border-width: 1rpx; border-style: solid; border-color: $border-color;}
|
||
.border-0{ border-width: 0 !important; }
|
||
|
||
/* ============ 效果 ============*/
|
||
// 阴影
|
||
.shadow-sm {
|
||
box-shadow: 0 2rpx 4rpx rgba(114, 130, 138, 0.2)!important;
|
||
}
|
||
.shadow {
|
||
box-shadow: 0 8rpx 16rpx rgba(114, 130, 138, 0.2)!important;
|
||
}
|
||
.shadow-lg {
|
||
box-shadow: 0 16rpx 48rpx rgba(114, 130, 138, 0.2)!important;
|
||
}
|
||
// 透明度
|
||
.opacity-0 { opacity: 0;}
|
||
.opacity-10 { opacity: 0.1;}
|
||
.opacity-20 { opacity: 0.2;}
|
||
.opacity-30 { opacity: 0.3;}
|
||
.opacity-40 { opacity: 0.4;}
|
||
.opacity-50 { opacity: 0.5;}
|
||
.opacity-60 { opacity: 0.6;}
|
||
.opacity-70 { opacity: 0.7;}
|
||
.opacity-80 { opacity: 0.8;}
|
||
.opacity-90 { opacity: 0.9;}
|
||
.opacity-100 { opacity: 1;} |