feat: init

src/assets/style/common.css

@@ -0,0 +1,292 @@
+:root {
+  --el-color-primary: #1b71e3;
+  --el-menu-item-height: 46px;
+  --el-text-color-primary: #333;
+  --el-text-color-regular: #666;
+}
+html,
+body {
+  background-color: #f5f8fa;
+  color: #333;
+}
+a {
+  cursor: pointer;
+  color: var(--el-color-primary);
+}
+a:hover {
+  opacity: 0.7;
+}
+a:focus {
+  opacity: 0.7;
+}
+a:active {
+  opacity: 1;
+}
+a + a {
+  margin-left: 24px;
+}
+input:-webkit-autofill {
+  transition: background-color 5000s ease-in-out 0s;
+}
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+.tab-info-left.el-tabs {
+  background-color: #fff;
+}
+.tab-info-left.el-tabs .el-tabs__header.is-left {
+  margin: 0;
+  border: none;
+}
+.tab-info-left.el-tabs .el-tabs__header .el-tabs__nav.is-left {
+  border: none;
+}
+.tab-info-left.el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
+  width: 160px;
+  color: #666;
+  font-weight: normal;
+}
+.tab-info-left.el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item:hover {
+  color: #1b71e3;
+}
+.tab-info-left.el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item.is-left {
+  border: none;
+}
+.tab-info-left.el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item.is-left::before {
+  display: inline-block;
+  content: '';
+  width: 4px;
+  height: 4px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+.tab-info-left.el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item.is-left.is-active {
+  color: #1b71e3;
+  border: none;
+  background-color: rgba(27, 113, 227, 0.15);
+}
+.tab-info-left.el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item.is-left.is-active::before {
+  background-color: #1b71e3;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 80px;
+  height: 80px;
+  text-align: center;
+}
+.el-descriptions .el-descriptions__label.el-descriptions__cell.is-bordered-label {
+  font-weight: normal;
+  color: var(--el-text-color-primary);
+}
+.el-descriptions .el-descriptions__content.el-descriptions__cell.is-bordered-content {
+  color: var(--el-text-color-regular);
+}
+.el-input-number {
+  width: 100% !important;
+}
+.el-input-number .el-input__wrapper {
+  padding: 1px 7px !important;
+}
+.el-input-number.is-without-controls input {
+  text-align: left;
+}
+.el-date-editor.el-input,
+.el-date-editor.el-input__wrapper {
+  width: 100%;
+}
+.el-card {
+  border: none;
+}
+.el-card .el-card__header {
+  padding: 12px 16px;
+}
+.el-card.tab-card .el-card__header {
+  padding: 0 16px;
+}
+.el-card.tab-card .el-tabs .el-tabs__header {
+  margin: 0;
+}
+.el-card.tab-card .el-tabs .el-tabs__header .el-tabs__item {
+  font-weight: normal;
+}
+.el-card.tab-card .el-tabs .el-tabs__header .el-tabs__nav-wrap::after {
+  display: none;
+}
+.el-form-item--small {
+  --font-size: 14px;
+}
+.el-form-item--small .el-radio__inner {
+  width: 16px !important;
+  height: 16px !important;
+}
+.el-form-item--small .el-radio__label {
+  font-size: 14px !important;
+  font-weight: normal;
+}
+.el-form-item--small .el-radio-button__inner {
+  font-size: 14px;
+  padding: 5px 22px;
+}
+.el-input--small {
+  font-size: 14px;
+}
+.search .el-card__body {
+  padding: 12px 16px;
+}
+.search .el-form .el-form-item {
+  margin-bottom: 0;
+}
+.search .el-form .el-range-editor--small .el-range-input {
+  font-size: 14px;
+}
+.search .el-form .btn .el-form-item__content {
+  justify-content: flex-end;
+}
+.el-tree--highlight-current .el-tree-node .el-tree-node__label {
+  padding: 0 8px;
+}
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label {
+  color: var(--el-color-primary);
+}
+.el-table th.el-table__cell {
+  background-color: #f5f8fa;
+  color: var(--el-text-color-primary);
+}
+.el-table .el-table__header-wrapper tr th.el-table-fixed-column--left,
+.el-table .el-table__header-wrapper tr th.el-table-fixed-column--right {
+  background-color: #f5f8fa;
+}
+.el-button--small {
+  padding: 5px 20px;
+}
+.el-button {
+  font-weight: normal;
+}
+.el-dialog {
+  margin-top: 10vh;
+}
+.el-dialog .el-dialog__header {
+  border-bottom: 1px solid #cfd0d2;
+  padding: 12px 16px;
+  margin: 0;
+}
+.el-dialog .el-dialog__header .el-dialog__title {
+  font-size: 16px;
+}
+.el-dialog .el-dialog__header .el-dialog__headerbtn {
+  top: 0;
+}
+.el-dialog .el-dialog__body {
+  padding: 20px;
+}
+.el-dialog .el-dialog__footer {
+  padding: 12px 0;
+  text-align: center;
+  border-top: 1px solid #cfd0d2;
+}
+.el-drawer .el-drawer__header {
+  margin: 0;
+  padding: 12px 16px;
+  border-bottom: 1px solid #cfd0d2;
+}
+.el-drawer .el-drawer__header .el-drawer__title {
+  color: var(--el-text-color-primary);
+}
+.el-drawer .el-drawer__footer {
+  padding: 12px 0;
+  text-align: center;
+  border-top: 1px solid #cfd0d2;
+}
+.textLeft {
+  text-align: left;
+}
+.textCenter {
+  text-align: center;
+}
+.textRight {
+  text-align: right;
+}
+.textEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.flexItem {
+  display: flex;
+  align-items: center;
+}
+.flexCenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.flexbetween {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.flexRight {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+.svgIcon {
+  width: 16px;
+  height: 16px;
+}
+.el-upload__tip {
+  color: #999;
+  line-height: 1.2;
+  display: contents;
+  font-size: 14px;
+}
+.infoTip {
+  background: rgba(255, 59, 48, 0.08);
+  border-radius: 2px;
+  border: 1px solid rgba(0, 87, 255, 0.45);
+  padding: 9px 24px;
+  color: #FF3B30;
+}
+.footer {
+  bottom: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 56px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  border-top: 1px solid #D8DADF;
+  z-index: 99;
+}
+.myBadage .el-badge__content.is-fixed {
+  top: 50%;
+  right: -20px;
+}
+.el-step__head.is-process,
+.el-step__title.is-process {
+  border-color: #ffba00;
+  color: #ffba00;
+}
+.el-descriptions .el-descriptions__label.el-descriptions__cell.is-bordered-label {
+  width: 200px;
+}

src/assets/style/common.less

@@ -0,0 +1,583 @@
+:root {
+  --el-color-primary: #007FED;
+  --el-menu-item-height: 46px;
+  --el-text-color-primary: #000;
+  --el-text-color-regular: #666;
+  --el-color-success:#4ECB74;
+}
+@font-face {
+  font-family: "PangMenZhengDao";
+  src: url("@/assets/font/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf");
+}
+@font-face {
+  font-family: "DIN";
+  src: url("@/assets/font/DINPro-Medium.ttf");
+}
+html,
+body {
+  background-color: #f5f8fa;
+  color: #333;
+}
+#app{
+  height: 100vh;
+}
+a {
+  cursor: pointer;
+  color: var(--el-color-primary);
+  outline: none;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:focus {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 1;
+  }
+
+  &+a {
+    margin-left: 12px;
+  }
+}
+
+input:-webkit-autofill {
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+
+.input-amount {
+  .el-input {
+    position: relative;
+    .el-input__inner {
+      padding-right: 40px;
+    }
+    &::before {
+      content: "万元";
+      position: absolute;
+      top: 0;
+      right: 11px;
+      height: 32px;
+      line-height: 32px;
+      color:#a8abb2;
+      font-size: 14px;
+      z-index: 1;
+    }
+  }
+  &.f{
+    .el-input{
+      &::before{
+        content: "分";
+      }
+    }
+  }
+}
+
+.dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+// 重写el样式
+// tabs-left
+.tab-info-left {
+  &.el-tabs {
+    background-color: #fff;
+
+    .el-tabs__header {
+      &.is-left {
+        margin: 0;
+        border: none;
+      }
+
+      .el-tabs__nav {
+        &.is-left {
+          border: none;
+        }
+
+        .el-tabs__item {
+          width: 160px;
+          color: #666;
+          font-weight: normal;
+
+          &:hover {
+            color: #1b71e3;
+          }
+
+          &.is-left {
+            border: none;
+
+            &::before {
+              display: inline-block;
+              content: '';
+              width: 4px;
+              height: 4px;
+              vertical-align: middle;
+              margin-right: 8px;
+            }
+
+            &.is-active {
+              color: #1b71e3;
+              border: none;
+              background-color: rgba(27, 113, 227, 0.15);
+
+              &::before {
+                background-color: #1b71e3;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 上传照片
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 80px;
+  height: 80px;
+  text-align: center;
+}
+
+// 描述列表
+
+.el-descriptions {
+  .el-descriptions__label.el-descriptions__cell.is-bordered-label {
+    font-weight: normal;
+    color: var(--el-text-color-primary);
+  }
+
+  .el-descriptions__content.el-descriptions__cell.is-bordered-content {
+    color: var(--el-text-color-regular);
+  }
+}
+
+// 数字输入框
+.el-input-number {
+  width: 100% !important;
+  &.width-150{
+    width: 150px !important;
+  }
+  .el-input__wrapper {
+    padding: 1px 7px !important;
+  }
+
+  &.is-without-controls {
+    input {
+      text-align: left;
+    }
+  }
+}
+
+// 单时间选择框
+.el-date-editor.el-input,
+.el-date-editor.el-input__wrapper {
+  width: 100%;
+}
+
+// 卡片样式
+.el-card {
+  border: none;
+  &.is-always-shadow{
+    box-shadow: 0px 3px 6px 0px rgba(62,99,170,0.06);
+  }
+  // border-radius: 0;
+  .el-card__header {
+    padding: 12px 16px;
+    font-size: 16px;
+  }
+
+  &.tab-card {
+    .el-card__header {
+      padding: 0 16px;
+
+    }
+
+    .el-tabs {
+      .el-tabs__header {
+        margin: 0;
+
+        .el-tabs__item {
+          font-weight: normal;
+          font-size: 16px;
+        }
+
+        .el-tabs__nav-wrap::after {
+          display: none;
+        }
+      }
+    }
+  }
+  &.footerCard{
+    position: relative;
+    padding-bottom: 56px;
+  }
+}
+
+// set small form font-size
+.el-form-item--small {
+  --font-size: 14px;
+
+  .el-radio__inner {
+    width: 16px !important;
+    height: 16px !important;
+  }
+
+  .el-radio__label {
+    font-size: 14px !important;
+    font-weight: normal;
+  }
+
+  .el-radio-button__inner {
+    font-size: 14px;
+    padding: 5px 22px;
+  }
+}
+
+.el-input--small {
+  font-size: 14px;
+}
+
+// 搜索区域
+.search {
+  .el-card__body {
+    padding: 12px 16px;
+  }
+
+  .el-form {
+    .el-form-item {
+      margin-bottom: 0;
+    }
+    .el-range-editor--small .el-range-input{
+      font-size: 14px;
+    }
+    .btn {
+      .el-form-item__content {
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+
+// tree 样式修改
+.el-tree--highlight-current {
+  .el-tree-node {
+    .el-tree-node__label {
+      padding: 0 8px;
+    }
+
+    &.is-current {
+      &>.el-tree-node__content {
+        .el-tree-node__label {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+}
+
+// 表格头部
+.el-table {
+  th.el-table__cell {
+    background-color: #f5f8fa;
+    color: var(--el-text-color-primary);
+  }
+
+  .el-table__header-wrapper {
+    tr {
+      th {
+
+        &.el-table-fixed-column--left,
+        &.el-table-fixed-column--right {
+          background-color: #f5f8fa;
+        }
+      }
+    }
+  }
+}
+
+// 按钮
+.el-button--small {
+  padding: 5px 20px;
+}
+
+.el-button {
+  font-weight: normal;
+}
+
+// 弹窗样式
+.el-dialog {
+  margin-top: 10vh;
+
+  .el-dialog__header {
+    border-bottom: 1px solid #cfd0d2;
+    padding: 12px 16px;
+    margin: 0;
+
+    .el-dialog__title {
+      font-size: 16px;
+    }
+
+    .el-dialog__headerbtn {
+      top: 0;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px;
+  }
+
+  .el-dialog__footer {
+    padding: 12px 0;
+    text-align: center;
+    border-top: 1px solid #cfd0d2;
+  }
+}
+
+// 抽屉样式
+
+.el-drawer {
+  .el-drawer__header {
+    margin: 0;
+    padding: 12px 16px;
+    border-bottom: 1px solid #cfd0d2;
+
+    .el-drawer__title {
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .el-drawer__footer {
+    padding: 12px 0;
+    text-align: center;
+    border-top: 1px solid #cfd0d2;
+  }
+}
+
+.textLeft {
+  text-align: left;
+}
+
+.textCenter {
+  text-align: center;
+}
+
+.textRight {
+  text-align: right;
+}
+
+//省略号
+.textEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1; //（行数）
+  -webkit-box-orient: vertical;
+}
+
+//flex
+.flexItem {
+  display: flex;
+  align-items: center;
+}
+
+//居中
+.flexCenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+//分散
+.flexbetween {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+//右对齐
+.flexRight {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+//svg
+.svgIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.el-upload__tip {
+  color: #999;
+  line-height: 1.2;
+  display: contents;
+  font-size: 14px;
+}
+
+.infoTip{
+  background: rgba(255,59,48,0.08);
+  border-radius: 2px;
+  border: 1px solid rgba(0,87,255,0.45);
+  padding: 9px 24px;
+  color: #FF3B30;
+}
+.footerPage{
+  height: 100%;
+  overflow: auto;
+  padding-bottom: 56px;
+}
+//底部按钮
+.footer{
+  bottom: 0;
+  position: absolute;
+  left: 20px;
+  right: 20px;
+  height: 56px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  border-top: 1px solid #D8DADF;
+  z-index:99
+}
+.myBadage{
+  .el-badge__content.is-fixed{
+    top: 50%;
+    right: -20px;
+  }
+}
+.el-step__head.is-process,.el-step__title.is-process{
+  border-color: #ffba00;
+  color: #ffba00;
+}
+.el-descriptions .el-descriptions__label.el-descriptions__cell.is-bordered-label{
+  width: 200px;
+}
+.el-descriptions .el-descriptions__content.el-descriptions__cell.is-bordered-content{
+  word-break: break-all;
+}
+
+.pointTit{
+  cursor:pointer;
+  font-weight: 500;
+  &:hover{
+    color: #1b71e3;
+  }
+}
+
+.el-upload-list__item .el-progress{
+  bottom:-4px;
+  top: auto;
+}
+.el-upload-list__item-file-name{
+  line-height: 1.5;
+}
+
+.primary-alert.is-light{
+  background: rgba(9, 103, 253, 0.06);
+  color: #1b71e3;
+  .el-alert__description{
+    color: #1b71e3;
+  }
+}
+
+:focus-visible{
+  outline: none;
+}
+
+
+.el-collapse{
+  .el-collapse-item__header {
+    padding: 0px 16px;
+    font-size: 14px;
+  }
+  .el-collapse-item__content {
+    padding:24px 24px 0;
+  }
+  .el-collapse-item__header.is-active {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .collapse-title {
+    flex: 1 0 90%;
+    order: 1;
+    text-align: left;
+    .el-collapse-item__header {
+      flex: 1 0 auto;
+      order: -1;
+    }
+    .el-input-number {
+      width: 150px !important;
+    }
+  }
+}
+.table-upload{
+  .el-upload-list{
+    margin: 0;
+  }
+}
+
+.el-popper{
+  &.loginOutPop{
+    padding: 0;
+    .login-out{
+      &:hover{
+        background: rgba(27, 113, 227, 0.15);
+        color: #1b71e3;
+      }
+    }
+  }
+}
+
+.el-upload-list__item .el-icon--close-tip{
+  display: none !important;
+}
+
+.flex-form-item{
+  display: flex !important;
+  align-items: center;
+  .el-form-item__label{
+    margin-bottom: 0 !important;
+  }
+}
+.el-button:focus{
+  background: var(--el-button-bg-color);
+}
+.el-button{
+  &.is-plain:focus{
+    color:var(--el-color-primary)
+  }
+}
+.font-family-din{
+  font-family: DIN;
+}
+::-webkit-scrollbar{
+  background-color: rgba(0,0,0,0);
+  width: 6px;
+}
+::-webkit-scrollbar-thumb{
+  background-color: #D8DADF;
+  border-radius: 3px;
+  width: 6px;
+}
+
+