|
@@ -30,219 +30,237 @@ table { border-collapse:collapse; border-spacing:0; }
|
|
|
min-height: calc(100vh - 160px);
|
|
|
min-width: 1100px !important;
|
|
|
}
|
|
|
-
|
|
|
-.el-form-item__content{
|
|
|
- line-height:36px !important;
|
|
|
+.el-form-item__content {
|
|
|
+ line-height: 36px !important;
|
|
|
}
|
|
|
-.form-titem{
|
|
|
+
|
|
|
+.form-titem {
|
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
/* 盒子模型 */
|
|
|
.flex-box {
|
|
|
- display: -webkit-box;
|
|
|
- display: -moz-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: -webkit-flex;
|
|
|
- display: flex;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -moz-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
|
|
|
/*盒子模型,竖向自适应,垂直排列 */
|
|
|
.flex-box-v {
|
|
|
- display: -webkit-box;
|
|
|
- display: -webkit-flex;
|
|
|
- display: flex;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-flex-flow: column;
|
|
|
- flex-flow: column;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-flex-flow: column;
|
|
|
+ flex-flow: column;
|
|
|
}
|
|
|
+
|
|
|
/*flex-box与 flex-v-ce结合*/
|
|
|
.flex-box-ce {
|
|
|
- display: -webkit-box;
|
|
|
- display: -moz-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: -webkit-flex;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- -webkit-align-items: center;
|
|
|
- -webkit-box-align: center;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -moz-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
}
|
|
|
|
|
|
/* 水平等列排版(容器左右没缝隙,子元素左右两边自适应) */
|
|
|
.flex-d-center {
|
|
|
- justify-content: space-between;
|
|
|
- -webkit-justify-content: space-between;
|
|
|
+ justify-content: space-between;
|
|
|
+ -webkit-justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
/* 水平等列排版(子元素两边有缝隙自己适应) */
|
|
|
.flex-dv-center {
|
|
|
- justify-content: space-around;
|
|
|
- -webkit-justify-content: space-around;
|
|
|
+ justify-content: space-around;
|
|
|
+ -webkit-justify-content: space-around;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
/*水平,垂直居中 */
|
|
|
.flex-center-center {
|
|
|
- justify-content: center;
|
|
|
- -webkit-justify-content: center;
|
|
|
- -moz-justify-content: center;
|
|
|
- align-items: center;
|
|
|
- -webkit-align-items: center;
|
|
|
- -webkit-box-pack: center;
|
|
|
- -webkit-box-align: center;
|
|
|
- -moz-align-items: center;
|
|
|
- -moz-box-pack: center;
|
|
|
- -moz-box-align: center;
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ -moz-justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ -webkit-box-pack: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -moz-align-items: center;
|
|
|
+ -moz-box-pack: center;
|
|
|
+ -moz-box-align: center;
|
|
|
}
|
|
|
|
|
|
/*对view中的子元素进行居中,并且位于容器的中间位置 水平居中 */
|
|
|
.flex-v-zhu,
|
|
|
.flex-h-zhu {
|
|
|
- justify-content: center;
|
|
|
- -webkit-justify-content: center;
|
|
|
- -webkit-box-pack: center;
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-justify-content: center;
|
|
|
+ -webkit-box-pack: center;
|
|
|
}
|
|
|
|
|
|
/*对view中的子元素进行居中,并且位于容器的中间位置 垂直居中 */
|
|
|
.flex-v-ce,
|
|
|
.flex-h-ce {
|
|
|
- align-items: center;
|
|
|
- -webkit-align-items: center;
|
|
|
- -webkit-box-align: center;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-align-items: center;
|
|
|
+ -webkit-box-align: center;
|
|
|
}
|
|
|
|
|
|
/*让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容: */
|
|
|
.flex-1 {
|
|
|
- -webkit-box-flex: 1;
|
|
|
- -moz-box-flex: 1;
|
|
|
- -webkit-flex: 1;
|
|
|
- -ms-flex: 1;
|
|
|
- flex: 1;
|
|
|
+ -webkit-box-flex: 1;
|
|
|
+ -moz-box-flex: 1;
|
|
|
+ -webkit-flex: 1;
|
|
|
+ -ms-flex: 1;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
|
|
|
.flex-2 {
|
|
|
- -webkit-box-flex: 2;
|
|
|
- box-flex: 2;
|
|
|
- -moz-box-flex: 2;
|
|
|
- -webkit-flex: 2;
|
|
|
- -ms-flex: 2;
|
|
|
- flex: 2;
|
|
|
+ -webkit-box-flex: 2;
|
|
|
+ box-flex: 2;
|
|
|
+ -moz-box-flex: 2;
|
|
|
+ -webkit-flex: 2;
|
|
|
+ -ms-flex: 2;
|
|
|
+ flex: 2;
|
|
|
}
|
|
|
|
|
|
.flex-3 {
|
|
|
- -webkit-box-flex: 3;
|
|
|
- box-flex: 3;
|
|
|
- -moz-box-flex: 3;
|
|
|
- -webkit-flex: 3;
|
|
|
- -ms-flex: 3;
|
|
|
- flex: 3;
|
|
|
+ -webkit-box-flex: 3;
|
|
|
+ box-flex: 3;
|
|
|
+ -moz-box-flex: 3;
|
|
|
+ -webkit-flex: 3;
|
|
|
+ -ms-flex: 3;
|
|
|
+ flex: 3;
|
|
|
}
|
|
|
|
|
|
.flex-4 {
|
|
|
- -webkit-box-flex: 4;
|
|
|
- box-flex: 4;
|
|
|
- -moz-box-flex: 4;
|
|
|
- -webkit-flex: 4;
|
|
|
- -ms-flex: 4;
|
|
|
- flex: 4;
|
|
|
+ -webkit-box-flex: 4;
|
|
|
+ box-flex: 4;
|
|
|
+ -moz-box-flex: 4;
|
|
|
+ -webkit-flex: 4;
|
|
|
+ -ms-flex: 4;
|
|
|
+ flex: 4;
|
|
|
}
|
|
|
|
|
|
|
|
|
.flex-5 {
|
|
|
- -webkit-box-flex: 5;
|
|
|
- box-flex: 5;
|
|
|
- -moz-box-flex: 5;
|
|
|
- -webkit-flex: 5;
|
|
|
- -ms-flex: 5;
|
|
|
- flex: 5;
|
|
|
+ -webkit-box-flex: 5;
|
|
|
+ box-flex: 5;
|
|
|
+ -moz-box-flex: 5;
|
|
|
+ -webkit-flex: 5;
|
|
|
+ -ms-flex: 5;
|
|
|
+ flex: 5;
|
|
|
}
|
|
|
|
|
|
/* 水平反方向 */
|
|
|
.flex-direction-row-reverse {
|
|
|
- flex-direction: row-reverse;
|
|
|
- -webkit-flex-direction: row-reverse;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ -webkit-flex-direction: row-reverse;
|
|
|
}
|
|
|
|
|
|
/*超出部分用....表示的公用样式 */
|
|
|
.font-flex-word {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
-.clamp2{
|
|
|
+
|
|
|
+.clamp2 {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
}
|
|
|
-.clamp3{
|
|
|
+
|
|
|
+.clamp3 {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ word-break: break-all;
|
|
|
display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 3;
|
|
|
- overflow: hidden;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
}
|
|
|
+
|
|
|
/* 内容超出部分自动换行 */
|
|
|
.flex-d-wrap {
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
/* 内容超出部分不换行 */
|
|
|
.flex-no-wrap {
|
|
|
- flex-wrap: nowrap;
|
|
|
+ flex-wrap: nowrap;
|
|
|
}
|
|
|
|
|
|
/* 从右边开始排列 */
|
|
|
.flex-box-end {
|
|
|
- display: -webkit-box;
|
|
|
- display: -moz-box;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: -webkit-flex;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
+ display: -webkit-box;
|
|
|
+ display: -moz-box;
|
|
|
+ display: -ms-flexbox;
|
|
|
+ display: -webkit-flex;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
+/* 字体颜色 */
|
|
|
/* 字体颜色 */
|
|
|
.blue {
|
|
|
- color: #26A2FF!important;
|
|
|
+ color: #2879ff !important;
|
|
|
}
|
|
|
-
|
|
|
.red {
|
|
|
- color: #F56C6C!important;
|
|
|
+ color: #f56c6c !important;
|
|
|
}
|
|
|
-
|
|
|
.yellow {
|
|
|
- color: #E6A23C!important;
|
|
|
+ color: #FFC910 !important;
|
|
|
+}
|
|
|
+.orange {
|
|
|
+ color: #FF9600 !important;
|
|
|
}
|
|
|
-
|
|
|
.green {
|
|
|
- color: #67C23A!important;
|
|
|
+ color: #67c23a !important;
|
|
|
}
|
|
|
-
|
|
|
-.fontColorB {
|
|
|
- color: #777777 !important;
|
|
|
+.cyan{
|
|
|
+ color: #00C4CB !important;
|
|
|
}
|
|
|
-.fontColorZ {
|
|
|
- color: #303133!important;
|
|
|
+.black {
|
|
|
+ color: #141c28 !important;
|
|
|
}
|
|
|
|
|
|
-.fontColorF {
|
|
|
+
|
|
|
+.fontColorA {
|
|
|
+ color: #303133 !important;
|
|
|
+}
|
|
|
+.fontColorB {
|
|
|
color: #606266 !important;
|
|
|
}
|
|
|
|
|
|
-.fontColorT {
|
|
|
- color: #C0C4CC!important;
|
|
|
+.fontColorC {
|
|
|
+ color: #89919F !important;
|
|
|
+}
|
|
|
+
|
|
|
+.fontColorD {
|
|
|
+ color: #BFC7D5 !important;
|
|
|
}
|
|
|
+
|
|
|
.fl {
|
|
|
- float: left;
|
|
|
+ float: left;
|
|
|
}
|
|
|
+
|
|
|
/* 整体布局样式 */
|
|
|
-.all{
|
|
|
+.all {
|
|
|
background-color: #fff;
|
|
|
border-radius: 5px;
|
|
|
min-width: 800px;
|
|
|
position: relative;
|
|
|
}
|
|
|
+
|
|
|
.terr-left {
|
|
|
width: 200px;
|
|
|
box-sizing: border-box;
|
|
@@ -250,19 +268,23 @@ table { border-collapse:collapse; border-spacing:0; }
|
|
|
max-height: 700px;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
+
|
|
|
.terr-left::-webkit-scrollbar {
|
|
|
width: 3px;
|
|
|
height: 3px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
+
|
|
|
.terr-left::-webkit-scrollbar-thumb {
|
|
|
background-color: #D9D9D9;
|
|
|
}
|
|
|
-.terr-right{
|
|
|
+
|
|
|
+.terr-right {
|
|
|
padding: 20px;
|
|
|
min-width: 600px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
.border-right:after {
|
|
|
content: ' ';
|
|
|
position: absolute;
|
|
@@ -272,79 +294,88 @@ table { border-collapse:collapse; border-spacing:0; }
|
|
|
width: 1px;
|
|
|
background: #ebeef5;
|
|
|
}
|
|
|
+
|
|
|
.border-right {
|
|
|
/* position: relative; */
|
|
|
}
|
|
|
-.padding-20{
|
|
|
+
|
|
|
+.padding-20 {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
-.margin-bottom{
|
|
|
+
|
|
|
+.margin-bottom {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
+
|
|
|
.diy-tip {
|
|
|
margin-bottom: 10px !important;
|
|
|
background: #f0f9eb !important;
|
|
|
color: #67c23a !important;
|
|
|
border: 1px solid #67c23a !important;
|
|
|
- padding:16px !important;
|
|
|
+ padding: 16px !important;
|
|
|
min-width: 800px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
-.diy-tip p{
|
|
|
+
|
|
|
+.diy-tip p {
|
|
|
color: #67c23a !important;
|
|
|
}
|
|
|
+
|
|
|
/* 分页样式 */
|
|
|
-.pagination{
|
|
|
+.pagination {
|
|
|
padding: 20px 0;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
|
|
|
/* EL UI 重置 */
|
|
|
-
|
|
|
-.notifyBox{
|
|
|
+.notifyBox {
|
|
|
width: auto !important;
|
|
|
}
|
|
|
|
|
|
/* 级联选择器长度限制样式 */
|
|
|
.el-cascader-menu .el-cascader-menu__wrap .el-scrollbar__view li.el-cascader-node {
|
|
|
- height: auto;
|
|
|
- max-width: 500px;
|
|
|
+ height: auto;
|
|
|
+ max-width: 500px;
|
|
|
}
|
|
|
+
|
|
|
.el-cascader-menu .el-cascader-menu__wrap .el-scrollbar__view li.el-cascader-node .el-cascader-node__label {
|
|
|
- white-space: initial;
|
|
|
- overflow: initial;
|
|
|
- text-overflow: initial;
|
|
|
+ white-space: initial;
|
|
|
+ overflow: initial;
|
|
|
+ text-overflow: initial;
|
|
|
}
|
|
|
+
|
|
|
/* // 滚动条样式 */
|
|
|
-.scroll-bar{
|
|
|
- scroll-behavior: smooth
|
|
|
+.scroll-bar {
|
|
|
+ scroll-behavior: smooth
|
|
|
}
|
|
|
+
|
|
|
.scroll-bar::-webkit-scrollbar {
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
}
|
|
|
|
|
|
/*外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果*/
|
|
|
.scroll-bar::-webkit-scrollbar-track {
|
|
|
- width: 6px;
|
|
|
- background-color: #fff0;
|
|
|
- -webkit-border-radius: 2em;
|
|
|
- -moz-border-radius: 2em;
|
|
|
- border-radius: 2em;
|
|
|
+ width: 6px;
|
|
|
+ background-color: #fff0;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
|
|
|
}
|
|
|
|
|
|
/*滚动条的设置*/
|
|
|
.scroll-bar::-webkit-scrollbar-thumb {
|
|
|
- background-color: #fff0;
|
|
|
- background-clip: padding-box;
|
|
|
- -webkit-border-radius: 2em;
|
|
|
- -moz-border-radius: 2em;
|
|
|
- border-radius: 2em;
|
|
|
+ background-color: #fff0;
|
|
|
+ background-clip: padding-box;
|
|
|
+ -webkit-border-radius: 2em;
|
|
|
+ -moz-border-radius: 2em;
|
|
|
+ border-radius: 2em;
|
|
|
}
|
|
|
+
|
|
|
/*滚动条移上去的背景*/
|
|
|
.scroll-bar:hover::-webkit-scrollbar-thumb {
|
|
|
- background-color: rgba(144, 147, 153, 0.3);
|
|
|
- height: 20px;
|
|
|
-}
|
|
|
+ background-color: rgba(144, 147, 153, 0.3);
|
|
|
+ height: 20px;
|
|
|
+}
|