qj-happy-common-zhongjian 1.0.27

package/src/styles/element-ui.scss

@@ -0,0 +1,1345 @@
+//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;
+  }
+
+  .el-table__body-wrapper::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+//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;
+      }
+    }
+  }
+}