qj-common 4.1.0

package/src/styles/element-ui.scss

@@ -0,0 +1,1369 @@
+ //to reset element-ui default css
+ .el-upload {
+   input[type="file"] {
+     display: none !important;
+   }
+ }
+
+ .el-upload__input {
+   display: none;
+ }
+
+ //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+ .el-dialog {
+   transform: none;
+   left: 0;
+   position: relative;
+   margin: 0 auto;
+   box-shadow: none;
+ }
+
+ //diolag公共样式
+ .el-dialog {
+   margin-bottom: 15vh;
+
+   .el-dialog__header {
+     padding-left: 26px;
+     background-color: #fff;
+
+     .el-dialog__title {
+       font-size: 16px;
+       font-weight: bold;
+       color: #3f3f3f;
+     }
+   }
+
+   .el-dialog__body {
+     padding: 0 26px;
+
+     .el-form {
+       .el-form-item__label {
+         text-align: right;
+       }
+     }
+   }
+
+   .el-dialog__footer {
+     text-align: center;
+     padding: 20px;
+   }
+ }
+
+ //table
+ .el-table {
+   width: 100%;
+
+   .el-table-column--selection {
+     .cell {
+       padding: 0;
+     }
+   }
+
+   .el-table__header {
+     width: 100% !important;
+
+     tr {
+       background-color: #f8f8f8
+     }
+
+     .cell {
+       text-align: left;
+       font-size: 14px;
+       color: #3f3f3f;
+     }
+   }
+
+   .el-table__body {
+     width: 100% !important;
+
+     .cell {
+       color: #444444;
+       font-size: 14px;
+       text-align: left;
+
+       .el-button {
+         width: auto;
+       }
+     }
+   }
+
+   .el-table__fixed-right {
+     height: 100% !important;
+
+     .el-table__body {
+       table-layout: fixed;
+     }
+   }
+
+   .el-table__body-wrapper {
+     overflow: auto;
+   }
+ }
+
+ //element ui upload
+ .upload-container {
+   .el-upload {
+     width: 100%;
+
+     .el-upload-dragger {
+       width: 100%;
+       height: 200px;
+     }
+   }
+ }
+
+ //element ui button
+ .el-button {
+   width: 88px;
+   height: 32px;
+   border-radius: 4px !important;
+   font-size: 12px !important;
+   padding: 0 !important;
+ }
+
+ //input
+ .el-input {
+   .el-input__inner {
+     border: 1px solid #ebeef5;
+     height: 32px;
+     line-height: 32px;
+
+     &:focus {
+       border-color: $--color-primary;
+     }
+   }
+ }
+
+ //form
+ .el-form {
+   .el-form-item {
+     width: 100%;
+   }
+
+   .el-form-item__label {
+     text-align: right;
+     line-height: 32px;
+   }
+
+   .el-form-item__content {
+     line-height: 32px;
+     height: auto;
+   }
+ }
+
+ .el-form.el-form--inline {
+   .el-form-item {
+     width: auto;
+   }
+ }
+
+ //el-pagination
+ .el-pagination {
+   text-align: right;
+   padding: 20px;
+ }
+
+ //el-dropdown
+ .el-dropdown {
+   font-size: 12px;
+ }
+
+ .el-dropdown-menu {
+   .el-dropdown-menu__item {
+     font-size: 12px;
+     line-height: 32px;
+   }
+ }
+
+ //el-container
+ .el-container {
+
+   .el-header,
+   .el-main,
+   .el-footer {
+     padding: 0;
+   }
+ }
+
+ //el-select
+ .el-select {
+   width: 100%;
+   border-bottom-color: #ebeef5
+ }
+
+ //el-date-editor
+ .el-date-editor {
+   border-bottom-color: #ebeef5
+ }
+
+ .el-menu-vertical-demo {
+   background: $--color-subMenuBg;
+   //  background: #363e50
+ }
+
+ .app-menu-fixed hr {
+   background: #41495b;
+ }
+
+ .el-menu-item,
+ .el-menu-item i {
+   color: $--color-subMenuColor;
+ }
+
+ .app-scroll-container .el-menu-vertical {
+   opacity: 1;
+ }
+
+ .el-menu-vertical {
+   background-color: $--color-subMenuBg
+ }
+
+ /**模板使用颜色**/
+
+ .primary {
+   color: $--color-primary;
+ }
+
+ .app-menu-fixed li:hover {
+   background: #fff;
+ }
+
+ .app-menu-fixed li:hover a {
+   color: $--color-primary;
+ }
+
+ /**菜单鼠标经过颜色**/
+
+ .el-menu-item:hover a,
+ .el-menu-item:hover a i {
+   color: $--color-primary;
+ }
+
+ .menu-item .c-theme .iconfont {
+   display: inline-block;
+ }
+
+ /**二级菜单**/
+
+ .el-menu-custom .el-menu-item,
+ .el-menu-custom .el-menu-item i {
+   color: #333;
+ }
+
+ //当前位置颜色
+ .app-breadcrumb.el-breadcrumb {
+
+   .index-href {
+     color: $--color-primary !important;
+   }
+ }
+
+ //common darkblue 字体经过风格
+ .el-menu-item:hover,
+ .el-menu-item:hover a,
+ .el-menu-item:hover a i {
+   color: $--color-primary
+ }
+
+ .el-menu-item.is-active,
+ .el-menu-item.is-active a,
+ .el-menu-item.is-active a i {
+   color: $--color-primary;
+ }
+
+ .el-menu-ul ol li .el-dl-list-box .active a,
+ .el-menu-ul ol li .el-dl-list-box .is-active3 a {
+   color: $--color-primary;
+ }
+
+ .el-menu-ul ol li.active .el-li-title>a {
+   color: $--color-primary
+ }
+
+ .el-menu-ul a.active,
+ .el-menu-ul .active>a {
+   color: $--color-primary
+ }
+
+ //common darkblue 头部颜色
+
+ .nav-bg,
+ .el-menu--horizontal {
+   background: $-color-subHeaderBg !important
+ }
+
+
+
+
+ // start consult 咨询 订单详情，评论
+ .consult-wrap,
+ .order-detail-wrap,
+ .comment-wrap {
+   .base-color {
+     color: $--color-primary;
+   }
+
+   .assist-color {
+     color: $-color-auxiliary;
+   }
+
+   .base-bg {
+     background: $--color-primary;
+   }
+ }
+
+ // 我的福点
+ .my-wallet-wrap {
+   .yue {
+     color: $--color-subMenuColor;
+     background-color: $--color-primary;
+   }
+
+   .list-wrap {
+     h3 {
+       color: $--color-primary;
+     }
+
+     .table-wrap {
+       .has-gutter {
+         th {
+           background-color: $--color-primary;
+
+           .cell {
+             color: $--color-primary;
+           }
+         }
+       }
+     }
+   }
+ }
+
+ // 打赏管理
+ .reward-wrap {
+   .table-wrap {
+     .has-gutter {
+       th {
+         background-color: $--color-primary;
+
+         .cell {
+           color: $--color-subMenuColor;
+         }
+       }
+     }
+
+     .el-dialog__header {
+       background-color: $--color-primary;
+       color: $--color-subMenuColor;
+     }
+   }
+ }
+
+ // 购物车
+ .cart-wrap {
+   .car-settlement {
+     .left {
+       p {
+         color: #666666;
+       }
+     }
+
+     .middle {
+       p {
+         color: $--color-primary;
+       }
+     }
+
+     .right {
+       span {
+         color: $--color-primary;
+       }
+
+       .el-button {
+         background-color: $--color-primary;
+         color: #ffffff;
+         border-color: $--color-primary;
+
+         span {
+           color: #ffffff;
+         }
+       }
+     }
+   }
+
+ }
+
+
+
+
+ .checkboxWrap {
+
+   .checkbox-btn input[type="checkbox"],
+   .checkbox-btn .el-icon-check {
+     background-color: #ffffff;
+     border: solid 1px #dddddd;
+   }
+
+   .checkbox-btn .el-icon-check:before {
+     display: none;
+   }
+
+   .checkbox-btn input[type="checkbox"]:checked+.el-icon-check {
+     border-color: $--color-primary;
+   }
+
+   .checkbox-btn input[type="checkbox"]:checked+.el-icon-check:before {
+     color: $--color-primary;
+   }
+ }
+
+ .cart-list {
+   .cart-head {
+     .shop-title {
+       border-bottom: 2px solid $--color-primary;
+     }
+
+     span {
+       color: #222222;
+     }
+
+     ul {
+       background-color: #fafafa;
+
+       li {
+         color: #666666;
+       }
+     }
+   }
+
+   .cart-cont {
+     .promotion-title {
+       background: #FAFAFA;
+       // border-bottom: 1px solid #eee;
+     }
+
+     .promotion-icon {
+       background-color: $--color-primary;
+       color: #fff;
+     }
+
+     .updatePm {
+       .color-red {
+         color: $--color-primary
+       }
+     }
+
+     li {
+       background-color: #ffffff;
+       box-shadow: inset 0px -1px 0px 0px #eeeeee;
+
+       .good-name {
+         h3 {
+           color: #222222;
+         }
+       }
+
+       h4 {
+         color: #444444;
+       }
+
+       button {
+         background-color: #ffffff;
+         border: solid 1px #dddddd;
+         color: #666666;
+       }
+
+       .quantity {
+         input {
+           background-color: #ffffff;
+           border-top: 1px solid #ddd;
+           border-bottom: 1px solid #ddd;
+         }
+       }
+
+       .action {
+         p {
+           color: $--color-primary;
+         }
+       }
+     }
+   }
+ }
+
+ .accounts-wrap {
+   .account-label {
+     color: #222222;
+   }
+
+   .account-info {
+     border-bottom: 2px solid #eeeeee;
+
+     .right {
+       p {
+         color: #666666;
+       }
+     }
+
+     .label {
+       color: #666666;
+     }
+
+     .info {
+       color: #666666;
+
+       &.total {
+         color: $--color-primary;
+       }
+     }
+   }
+
+   .submit {
+     button {
+       background-color: $--color-primary;
+       color: #ffffff;
+     }
+   }
+
+   .address-list {
+     padding: 20px 0;
+
+     li {
+       margin: 14px 0;
+       font-size: 16px;
+       display: flex;
+
+
+       .radio {
+         margin-right: 10px;
+
+         .inner {
+           input:checked+span {
+             background-color: $--color-primary;
+
+             i {
+               color: #fff;
+             }
+           }
+         }
+       }
+
+       a {
+         color: $--color-primary;
+       }
+     }
+   }
+
+
+   .el-select {
+     .el-input .el-input__inner {
+       border-color: #dddddd;
+     }
+   }
+ }
+
+ .account-item-wrap {
+   .account-item {
+     .top {
+       background-color: #fff;
+
+       .left {
+         color: #222222;
+       }
+
+       .right {
+         p {
+           color: #222222;
+
+           span {
+             color: #444444;
+           }
+         }
+
+         .manage {
+           color: $--color-primary;
+         }
+       }
+     }
+   }
+
+   li {
+     background-color: #ffffff;
+     box-shadow: inset 0px -1px 0px 0px #eeeeee;
+
+     img {
+       max-width: 100%;
+       max-height: 100%;
+     }
+
+     .good-name {
+       h3 {
+         color: #222222;
+       }
+     }
+
+     h4 {
+       color: #444444;
+     }
+
+     .subtotal {
+       color: $--color-primary;
+     }
+   }
+ }
+
+ .addAddress-wrap {
+   .cancel {
+     background: #f5f5f5;
+     border-color: #f5f5f5;
+     color: #999999;
+   }
+ }
+
+ .account-radio-wrap {
+   .inner {
+     span {
+       background-color: #ffffff;
+       border: solid 1px #e0e0e0;
+     }
+
+     input:checked+span {
+       border-color: $--color-primary;
+
+       i {
+         color: $--color-primary;
+       }
+     }
+   }
+ }
+
+ .payment-wrap {
+   background-color: #f7f7f7;
+
+   .m10 {}
+
+   .red {
+     color: $--color-primary;
+   }
+
+   .order-info {
+     background-color: #fff;
+
+     .info {
+       color: #4d4d4d;
+     }
+
+     .el-icon-circle-check-outline {
+       color: #68b931;
+     }
+
+     .address-list {
+       p {
+         color: #666666;
+       }
+     }
+
+     .right {
+       color: $--color-primary;
+       border-left: 1px solid #f7f7f7;
+
+       span {
+         color: $--color-primary;
+       }
+     }
+   }
+
+   .payment-tit {
+     background: #fff;
+
+     .tit {
+       color: #4d4d4d;
+     }
+
+     p {
+       color: #333333;
+
+       span {
+         color: $--color-primary;
+       }
+     }
+   }
+
+   .payment-type-wrap {
+     .payment-cont {
+       background: #fff;
+
+       .payment-item {
+         .info {
+           color: #666666;
+         }
+       }
+
+       .list {
+         li {
+           background-color: #ffffff;
+           border: solid 1px #e0e0e0;
+
+           label {
+             color: #666666;
+           }
+
+           &.on {
+             border-color: $--color-primary;
+
+             i {
+               color: #ffffff;
+               border-right: 20px solid $--color-primary;
+             }
+           }
+         }
+       }
+     }
+   }
+
+   .submit-wrap,
+   .bottom-wrap {
+     button {
+       background-color: $--color-primary;
+       color: #ffffff;
+     }
+   }
+
+   .password-wrap {
+     span {
+       color: $--color-primary;
+     }
+
+     p {
+       color: $--color-primary;
+     }
+   }
+
+   .surePay {
+     background-color: $--color-primary;
+     color: #ffffff;
+   }
+
+   .batch-wrap {
+     .info {
+       background: #fff;
+
+       input {
+         border: solid 1px #e0e0e0;
+       }
+     }
+   }
+ }
+
+ .pwd-wrap {
+   border: 1px solid #adadad;
+
+   .shortInput {
+     border-right: 1px solid #adadad;
+   }
+ }
+
+ .pay-radio-wrap {
+   .inner {
+     span {
+       background-color: #ffffff;
+       border: solid 1px #e0e0e0;
+     }
+
+     input:checked+span {
+       border-color: $--color-primary;
+
+       i {
+         color: $--color-primary;
+       }
+     }
+   }
+ }
+
+ .result-wrap {
+   .order-statu {
+     background: #fff;
+   }
+
+   .su-f {
+     background: #fff;
+
+     a {
+       &:nth-child(1) {
+         color: $--color-primary;
+         border: 1px solid $--color-primary;
+       }
+
+       &:nth-child(2) {
+         background: $--color-primary;
+         border: 1px solid $--color-primary;
+         color: #fff;
+       }
+     }
+   }
+ }
+
+ // 订单页
+ .order-wrap {
+   background-color: #f8f8f8 !important;
+
+   .header-filter {
+     background-color: #fff;
+     border-bottom: 2px solid #d2d9df;
+
+   }
+
+   .dialog-content {
+     color: #666666;
+   }
+ }
+
+ .order-wrap {
+   .content {
+     .el-tabs__item {
+       &:after {
+         content: "";
+         position: absolute;
+         right: 0;
+         width: 1px;
+         height: 20px;
+         background-color: #dddddd;
+       }
+     }
+
+     .el-tabs__item.is-active {
+       color: $--color-primary;
+       border-bottom: 0;
+     }
+   }
+ }
+
+ .order-detail-wrap {
+   .header {
+     color: #333333;
+     border-bottom: 4px solid #f5f5f5;
+
+     button {
+       border: solid 1px #e0e0e0;
+
+       &:first-child {
+         background-color: #fff;
+       }
+
+       &.again-buy {
+         color: #fff;
+       }
+     }
+   }
+
+   h4 {
+     color: #333333;
+   }
+
+   .commonInfo {
+     color: #666666;
+     border-bottom: 1px solid #ededed;
+   }
+
+   .goodsInfo {
+     border-bottom: 4px solid #f5f5f5;
+
+     .goodsItem {
+       >div {
+         color: #666666;
+       }
+
+       .goods {
+         .name {
+           p {
+             color: #666666;
+           }
+
+           span {
+             color: #999999;
+           }
+         }
+       }
+     }
+   }
+
+   .orderInfo {
+     .inner-info {
+       color: #666666;
+     }
+
+     .total {
+       color: #3d3d3d;
+     }
+   }
+
+   .dialog-content {
+     color: #666666;
+   }
+ }
+
+ .order-item-wrap {
+   .empty {
+     color: #999;
+     background-color: #fff;
+   }
+
+   .order-item {
+     background-color: #fff;
+   }
+
+   .top {
+     background: #fafafa;
+
+     .left {
+       color: #000000;
+
+       i {
+         background-color: $--color-primary;
+         color: #fff;
+       }
+     }
+
+     .right {
+       color: #999999;
+     }
+   }
+
+   .item {
+     background-color: #fff;
+
+     .info {
+       h4 {
+         color: #333;
+       }
+     }
+
+     .state {
+       a {
+         color: $--color-primary;
+       }
+     }
+
+     .action {
+       a {
+         color: $--color-primary;
+       }
+     }
+   }
+ }
+
+ .logic-wrap {
+   background-color: #fff;
+
+   .logic-list {
+     li {
+
+       &:first-child,
+       &:last-child {
+         .right:after {
+           content: "";
+           width: 5px;
+           height: calc(50% - 20px);
+           background-color: #fff;
+           position: absolute;
+           top: 0;
+           left: -3px;
+         }
+       }
+     }
+
+     color: #666;
+
+     .active {
+       color: $--color-primary;
+     }
+
+     .right {
+       border-left: 1px dashed #999;
+     }
+   }
+ }
+
+ .logic-wrap {
+   .el-scrollbar__bar {
+     background-color: #f5f5f5;
+   }
+
+   .el-scrollbar__thumb {
+     background-color: #999999;
+   }
+ }
+
+ .confirm-wrap {
+   .mask {
+     background-color: #000;
+     z-index: 10000;
+   }
+
+   .content {
+     background-color: #fff;
+
+     .confirm {
+       background: #243646;
+       color: #fff;
+     }
+
+     .cancel {
+       border: 1px solid #e0e0e0;
+       background-color: #f5f5f5;
+       color: #999999;
+     }
+
+     .title {
+       color: #666666;
+     }
+   }
+ }
+
+ // 我的工程
+ .progress {
+   .isBtn {
+     .el-step__title {
+       background: $--color-primary;
+     }
+   }
+ }
+
+
+ //layout-ucc 主题色
+ .tool-menu-svg {
+   background: $--color-subMenuBg;
+ }
+
+ .common-theme {
+
+   .el-input-group__append,
+   .el-input-group__prepend {
+     background: $--color-primary;
+     border: 1px solid $--color-primary;
+     color: #fff !important;
+   }
+
+   .search-box .el-input .el-input__inner {
+     border: 1px solid $--color-primary;
+   }
+
+
+ }
+
+
+ .top-left-ul {
+   li {
+     a {
+       &:hover {
+         color: $--color-primary
+       }
+     }
+   }
+ }
+
+ .common-top-bar {
+   .inner {
+     .right {
+       ul li {
+         &:hover a {
+           color: $--color-primary;
+         }
+       }
+     }
+   }
+ }
+
+ .menu-item a.active {
+   color: $--color-primary;
+ }
+
+ .userNav-box {
+   ul {
+     li {
+       a.active {
+         color: $--color-primary;
+       }
+     }
+   }
+ }
+
+ //user
+ .headerUcc {
+   .userHeader {
+     .headerImg {
+       .changeHeader {
+         color: $--color-primary;
+       }
+     }
+
+     .headBottom {
+       ul {
+         li {
+           p {
+             span {
+               color: $--color-primary;
+             }
+           }
+         }
+       }
+     }
+   }
+ }
+
+ .userPc {
+   .userCenter {
+     .content {
+       .list {
+         .listText {
+           .ListRight {
+             .ulsFirst {
+               .li:nth-child(2) {
+                 .forAdd {
+                   .second {
+                     .xq {
+                       color: $--color-primary;
+                     }
+                   }
+                 }
+               }
+
+               .li:nth-child(4) {
+                 .forAdd {
+                   .third {
+                     .pay {
+                       span {
+                         background-color: $--color-primary;
+                       }
+                     }
+
+                     .xq {
+                       color: $--color-primary;
+                     }
+                   }
+                 }
+               }
+             }
+           }
+         }
+       }
+     }
+   }
+ }
+
+ //orderucc
+ .orderUcc {
+   .userCenter {
+     .title {
+       p {
+         color: #666;
+       }
+     }
+
+     .content {
+
+
+       .list {
+
+         .listText {
+           .ListRight {
+             .ulsFirst {
+               .li:nth-child(5) {
+                 .forAdd {
+                   .third {
+                     .pay {
+                       span {
+                         background-color: $--color-primary;
+                       }
+                     }
+
+                     .xq {
+                       color: $--color-primary;
+                     }
+                   }
+                 }
+               }
+             }
+           }
+         }
+       }
+     }
+   }
+ }
+
+ //  优惠券
+ .coupon-wrap {
+   .coupon-head {
+     border-bottom: 4px solid #f5f5f5;
+
+     div {
+       color: #666666;
+
+       &.line {
+         background: #e0e0e0;
+       }
+
+       &.active {
+         color: $--color-primary;
+       }
+     }
+   }
+ }
+
+ .coupon-item-wrap {
+   li {
+     background: $--color-primary;
+
+     .con {
+       .price {
+         p {
+           color: #ffffff;
+         }
+       }
+
+       .info {
+         color: #fff;
+       }
+     }
+
+     .time {
+       color: $--color-primary;
+       background: rgba(255, 255, 255, 0.5);
+     }
+
+     .other-info {
+       color: $--color-primary;
+       background: rgba(255, 255, 255, 0.5);
+     }
+
+     .round {
+       span {
+         background: #fff;
+       }
+     }
+
+     &.used,
+     &.already {
+
+       .con,
+       .other-info {
+         background: #cfcfcf;
+         color: #b7b7b7;
+       }
+
+       .time,
+       .other-info {
+         color: #b7b7b7;
+         background: #e5e5e5;
+       }
+     }
+   }
+
+   .noImfo {
+     span {
+       color: #666666;
+     }
+   }
+ }
+
+ //user
+ .follow {
+   .header {
+     .left {
+       ul {
+         .active {
+           color: $--color-primary;
+         }
+       }
+     }
+   }
+ }
+
+ // 我的工程
+ .progress {
+
+   // padding: 20px;
+   .active {
+     .el-step__title {
+       color: #fff;
+       background: $--color-primary;
+     }
+   }
+
+   .progress-list {
+     li {
+       h3 {
+         color: #333;
+
+         .isBtn {
+           color: #fff;
+           background-color: $--color-primary;
+         }
+       }
+     }
+   }
+ }
+
+ .follow {
+
+
+   .header {
+
+
+     .left {
+
+
+       ul {
+
+         .active {
+           color: $--color-primary;
+         }
+       }
+     }
+   }
+ }
+
+ .el-rate__icon {
+   color: $--color-primary;
+ }
+
+ input:-webkit-autofill {
+   -webkit-box-shadow: 0 0 0px 1000px white inset;
+   -webkit-text-fill-color: #333;
+ }
+
+ .menu-vertical .menu-item a:hover {
+   color: $--color-primary;
+ }
+
+ .logic-wrap {
+   .dialog-footer {
+     button {
+       background: $--color-primary;
+       color: #fff;
+       border-color: $--color-primary;
+     }
+
+     .el-button--default {
+       border: 1px solid #e0e0e0;
+       background-color: #f5f5f5;
+       color: #999999;
+     }
+   }
+ }
+
+ .el-input__suffix{
+   display: flex;
+   display: -webkit-flex;
+  align-items: center;
+ }
+
+ .left-menu-container__logo{
+   .menu-vertical li {
+      &:hover,&.active {
+        border-left: 3px solid $--color-primary;
+        background: rgba(243, 17, 35, 0.1);
+        a {
+          color: $--color-primary;
+        }
+      }
+    }
+ }