mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-25 11:06:36 +08:00
472 lines
9.4 KiB
SCSS
472 lines
9.4 KiB
SCSS
// Color
|
|
$primary-color : #3399ff;
|
|
$info-color : #2db7f5;
|
|
$success-color : #00cc66;
|
|
$warning-color : #ff9900;
|
|
$error-color : #ff5500;
|
|
$link-color : #3399ff;
|
|
$link-hover-color : #5cadff;
|
|
$link-focus-color : rgba(51,153,255, .2);
|
|
$link-active-color : #3091f2;
|
|
$selected-color : rgba($primary-color, .9);
|
|
$tooltip-color : #fff;
|
|
//辅助/图标
|
|
$subsidiary-color : #9ea7b4;
|
|
$disabled-color : #f3f3f3;
|
|
|
|
// Base
|
|
$body-background : #fff;
|
|
$component-background : #fff;
|
|
$font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
|
$code-family : Consolas,Menlo,Courier,monospace;
|
|
$title-color : #464c5b;
|
|
$text-color : #657180;
|
|
//失效 Disabled
|
|
$tip-color : #c3cbd6;
|
|
$font-size-lg : 16px;
|
|
$font-size-base : 14px;
|
|
$font-size-small : 12px;
|
|
$line-height-base : 1.5;
|
|
$line-height-computed : floor(($font-size-base * $line-height-base));
|
|
$border-radius-base : 6px;
|
|
$border-radius-small : 4px;
|
|
$cursor-disabled : not-allowed;
|
|
|
|
// Border color
|
|
$border-color-base : #d7dde4; // outside
|
|
$border-color-split : #e3e8ee; // inside
|
|
|
|
|
|
// Background color
|
|
$background-color-base : #f7f7f7; // base
|
|
$background-color-select-hover: #f3f3f3;
|
|
$tooltip-bg : rgba(70, 76, 91, .9);
|
|
$head-bg : #f9fafc;
|
|
$table-thead-bg : #f5f7f9;
|
|
$table-td-stripe-bg : #f5f7f9;
|
|
$table-td-hover-bg : #ebf7ff;
|
|
$table-td-highlight-bg : #ebf7ff;
|
|
|
|
// Z-index
|
|
$zindex-spin : 8;
|
|
$zindex-affix : 10;
|
|
$zindex-back-top : 10;
|
|
$zindex-select : 900;
|
|
$zindex-modal : 1000;
|
|
$zindex-message : 1010;
|
|
$zindex-notification : 1010;
|
|
$zindex-tooltip : 1060;
|
|
$zindex-loading-bar : 2000;
|
|
|
|
// Animation
|
|
$animation-time : .3s;
|
|
$transition-time : .2s;
|
|
$ease-out : cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
$ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
$ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
$ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46);
|
|
$ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6);
|
|
$ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
|
$ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1);
|
|
$ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
|
$ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
|
$ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
|
|
$ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
$ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1);
|
|
|
|
// Shadow
|
|
$shadow-color : rgba(0, 0, 0, .2);
|
|
$shadow-1-up : 0 -1px 6px $shadow-color;
|
|
$shadow-1-down : 0 1px 6px $shadow-color;
|
|
$shadow-1-left : -1px 0 6px $shadow-color;
|
|
$shadow-1-right : 1px 0 6px $shadow-color;
|
|
$shadow-2 : 0 2px 8px $shadow-color;
|
|
$box-shadow-base : $shadow-1-down;
|
|
|
|
$mask-color: rgba(55, 55, 55, .6);
|
|
|
|
.pl-10{
|
|
padding-left: 10px;
|
|
}
|
|
|
|
html, body{
|
|
height: 100%;
|
|
background-color: $background-color-base;
|
|
}
|
|
|
|
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
|
// ::-webkit-scrollbar
|
|
// {
|
|
// width: 8px;
|
|
// height: 8px;
|
|
// }
|
|
// ::-webkit-scrollbar:window-inactive
|
|
// {
|
|
// display: none;
|
|
// }
|
|
|
|
|
|
// /*定义滚动条轨道 内阴影+圆角*/
|
|
// ::-webkit-scrollbar-track
|
|
// {
|
|
// border-radius: 10px;
|
|
// background-color: #ececec;
|
|
// }
|
|
|
|
// /*定义滑块 圆角*/
|
|
// ::-webkit-scrollbar-thumb
|
|
// {
|
|
// border-radius: 10px;
|
|
// background-color: #9e9e9e;
|
|
// }
|
|
|
|
#app{
|
|
min-height: 100%;
|
|
}
|
|
|
|
.top-panel{
|
|
background: #fff;
|
|
height: 80px;
|
|
font-size: 14px;
|
|
border: 1px solid $border-color-split;
|
|
.ui-cell:nth-child(n){
|
|
height: 80px;
|
|
line-height: 79px;
|
|
}
|
|
.logo-swap{
|
|
text-align: center;
|
|
& > span{
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.desc{
|
|
margin-left: 8px;
|
|
}
|
|
.logo{
|
|
text-align: center;
|
|
color: #39f;
|
|
font-size: 28px;
|
|
}
|
|
.item{
|
|
display: block;
|
|
height: 78px;
|
|
text-align: center;
|
|
color: $title-color;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
&.selected{
|
|
border-bottom: 2px solid $primary-color;
|
|
color: rgba($primary-color, .9);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-panel{
|
|
position: absolute;
|
|
left: 30px;
|
|
right: 30px;
|
|
top: 110px;
|
|
bottom: 30px;
|
|
}
|
|
|
|
.body-panel{
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: $body-background;
|
|
border: 1px solid $border-color-split;
|
|
border-radius: $border-radius-base;
|
|
font-size: 0;
|
|
}
|
|
|
|
.left-panel{
|
|
position: relative;
|
|
width: 16%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
padding: 20px 0;
|
|
border-right: 1px solid $border-color-base;
|
|
font-size: 14px;
|
|
li{
|
|
line-height: 50px;
|
|
padding: 0 20px;
|
|
a{
|
|
display: block;
|
|
color: $text-color;
|
|
}
|
|
&.selected{
|
|
border-right: 2px solid $primary-color;
|
|
a{
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
&:hover{
|
|
background-color: $disabled-color;
|
|
}
|
|
}
|
|
h3{
|
|
padding: 0 20px;
|
|
color: $text-color;
|
|
line-height: 50px;
|
|
font-size: 16px;
|
|
}
|
|
.level-2{
|
|
li{
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-panel{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 16%;
|
|
bottom: 0;
|
|
right: 0;
|
|
overflow: auto;
|
|
padding: 20px;
|
|
color: $text-color;
|
|
font-size: 14px;
|
|
.article{
|
|
img{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
h1{
|
|
font-size: 26px;
|
|
font-weight: 400;
|
|
margin: 12px 0;
|
|
}
|
|
h2{
|
|
margin: 25px 0 12px;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
}
|
|
h3{
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
p{
|
|
font-size: 14px;
|
|
margin: 5px;
|
|
}
|
|
ul:not(.ui-select-dropdown-list):not(.cur-month-months):not(.ui-carousel-list):not(.picker-item){
|
|
padding-left: 40px;
|
|
}
|
|
li:not(.ui-select-item):not(.ui-menu-item):not(.picker-item-child){
|
|
&.ui-tree-node{
|
|
list-style: none;
|
|
}
|
|
list-style-type: disc;
|
|
margin-bottom: 5px;
|
|
font-size: 14px;
|
|
}
|
|
section > table {
|
|
font-family: Consolas,Menlo,Courier,monospace;
|
|
font-size: 12px;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
empty-cells: show;
|
|
border: 1px solid #e9e9e9;
|
|
width: 100%;
|
|
margin-bottom: 24px;
|
|
th {
|
|
background: #f7f7f7;
|
|
white-space: nowrap;
|
|
color: #5c6b77;
|
|
font-weight: 600
|
|
}
|
|
td, th {
|
|
border: 1px solid #e9e9e9;
|
|
padding: 8px 16px;
|
|
text-align: left
|
|
}
|
|
td ul li {
|
|
font-size: 12px!important
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel{
|
|
border: 1px solid #eee;
|
|
border-radius: 6px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
height: auto;
|
|
.son-panel{
|
|
height: 100%;
|
|
}
|
|
.panel-split{
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
border: 1px dashed #eee;
|
|
}
|
|
&:hover{
|
|
border: 1px solid #fff;
|
|
box-shadow: $box-shadow-base;
|
|
}
|
|
.panel-case{
|
|
padding: 20px 20px;
|
|
}
|
|
.panel-header{
|
|
position: relative;
|
|
span{
|
|
display: inline-block;
|
|
background: #fff;
|
|
padding: 0 5px 0 18px;
|
|
position: relative;
|
|
margin-left: 30px;
|
|
font-size: 14px;
|
|
}
|
|
&:before{
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #eee;
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 0;
|
|
}
|
|
}
|
|
.panel-desc{
|
|
padding: 5px 20px;
|
|
p{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.code{
|
|
padding: 20px;
|
|
pre{
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
code{
|
|
display: inline;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.layout-page {
|
|
.article-row {
|
|
margin: 5px 0;
|
|
text-align: center;
|
|
.ui-cell {
|
|
color: white;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
&:nth-child(n) {
|
|
background: rgba(0, 153, 229, .7);
|
|
}
|
|
&:nth-child(2n) {
|
|
background: rgba(0, 153, 229, .5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-page {
|
|
.ui-icons-list {
|
|
margin: 40px 0;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
zoom: 1;
|
|
&:before, &:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
li {
|
|
float: left;
|
|
width: 16.66%;
|
|
text-align: center;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
height: 100px;
|
|
color: #555;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
margin: 3px 0;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
padding: 10px 0 0 0;
|
|
}
|
|
.ui-icon {
|
|
font-size: 24px;
|
|
margin: 12px 0 16px;
|
|
transition: all .3s;
|
|
}
|
|
.ui-icon-class {
|
|
font-size: 16px;
|
|
display: block;
|
|
text-align: center;
|
|
transform: scale(0.83);
|
|
font-family: "Lucida Console", Consolas;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip-page {
|
|
.swap {
|
|
width: 500px;
|
|
text-align: center;
|
|
}
|
|
.top,
|
|
.center,
|
|
.bottom {
|
|
width: 100%;
|
|
}
|
|
.center {
|
|
padding: 0px 50px;
|
|
height: 170px;
|
|
.ui-button{
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.center-left {
|
|
float: left;
|
|
width: 100px;
|
|
height: 170px;
|
|
}
|
|
.center-right {
|
|
float: right;
|
|
width: 100px;
|
|
height: 170px;
|
|
}
|
|
|
|
}
|
|
|
|
.button-page{
|
|
|
|
}
|
|
|
|
.loading-page{
|
|
.ui-loading{
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.input-page{
|
|
.panel-case{
|
|
.ui-input-swap{
|
|
width: 50%;
|
|
margin: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-case {
|
|
> .ui-calendars {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|