qkui-h5/dist/styles/quick.css

Quick 框架组件

/* ui组件样式 版本：1.0.2 */
/*基础样式 版本 1.0.1 */
.qk-bg-red {
  background: #ed4014;
  color: #fff;
}
.qk-bg-green {
  background: #19be6b;
  color: #fff;
}
.qk-bg-yellow {
  background: #ff9900;
  color: #fff;
}
.qk-bg-blue {
  background: #2d8cf0;
  color: #fff;
}
.qk-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  flex: 1;
  min-height: 1.4rem;
}
.qk-input .input {
  border: none;
  height: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  background: rgba(0, 0, 0, 0);
  display: inline-block;
  padding: inherit;
  outline: none;
  vertical-align: middle;
  text-align: inherit;
  overflow: inherit;
  white-space: inherit;
  text-overflow: inherit;
}
.qk-input .icon {
  font-size: 1.4em;
  margin-left: 0.5rem;
  cursor: pointer;
}
.qk-input-price {
  display: inline-block;
  line-height: 1;
}
.qk-input-price .price-icon,
.qk-input-price .price-count {
  display: inline-block;
  line-height: 1;
}
.qk-input-price .price-icon {
  font-size: 0.55rem;
}
.qk-input-price .price-count {
  font-size: 0.65rem;
}
.qk-input-price .price-icon-sup,
.qk-input-price .price-icon-sub {
  font-size: 52%;
}
.qk-input-price .price-icon-sup {
  vertical-align: super;
  line-height: 1.1;
}
.qk-input-price .price-icon-del,
.qk-input-price .price-count-del {
  font-weight: normal;
  text-decoration: line-through;
}
.qk-input-price .price-count-decimal-small {
  display: inline;
  font-size: 62%;
}
/* 按钮样式*/
.qk-btn {
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 0.3rem;
  color: #787878;
  cursor: pointer;
}
.qk-btn:hover {
  color: #fff;
  background-color: #509ee3;
}
.qk-btn[type='primary'] {
  color: #ffffff;
  background-color: #1aad19;
}
.qk-btn[type='default'] {
  color: #000000;
  background-color: #f8f8f8;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.qk-btn[disabled] {
  color: rgba(255, 255, 255, 0.6);
}
.qk-btn[disabled][type='default'] {
  color: rgba(0, 0, 0, 0.3);
  background-color: #f7f7f7;
}
.qk-btn[disabled][type='primary'] {
  background-color: #9ed99d;
}
.qk-btn-hover[type='default'] {
  color: rgba(0, 0, 0, 0.6);
  background-color: #dedede;
}
.qk-btn[type='warn'] {
  color: #ffffff;
  background-color: #e64340;
}
.qk-btn[plain] {
  color: #353535;
  border: 1px solid #353535;
  background-color: transparent;
}
.qk-btn[plain][disabled] {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
}
.qk-btn[type='primary'][plain] {
  color: #1aad19;
  border: 1px solid #1aad19;
  background-color: transparent;
}
.qk-badge {
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}
.qk-badge-text {
  position: absolute;
  transform: translateX(50%);
  top: -0.3rem;
  right: 0;
  height: 0.8rem;
  line-height: 0.8rem;
  border-radius: 0.375rem;
  background: #ff0009;
  color: #fff;
  text-align: center;
  padding: 0 0.25rem;
  font-size: 0.5rem;
  white-space: nowrap;
  z-index: 10;
}
.qk-badge-dot {
  position: absolute;
  transform: translateX(-50%);
  top: -0.2rem;
  right: -0.4rem;
  height: 0.4rem;
  width: 0.4rem;
  border-radius: 100%;
  background: #ff0009;
  z-index: 10;
}
.qk-tabs .qk-tabs-bar {
  border-bottom: 0.05rem solid #dcdee2;
  padding: 0 1rem;
  display: flex;
  flex-direction: row;
  margin-top: 0.2rem;
}
.qk-tabs .qk-tabs-bar .active {
  color: #007aff;
  background: #fff;
  margin-bottom: -0.05rem;
}
.qk-tabs .qk-tabs-bar .bar-extra {
  position: absolute;
  margin: inherit;
  right: 0;
}
.qk-tabs .qk-tabs-bar-item {
  margin-right: 0.2rem;
  border: 0.05rem solid #dcdee2;
  border-bottom: 0;
  border-radius: 0.2rem 0.2rem 0 0;
  transition: all 0.3s ease-in-out;
  background: #f8f8f9;
  cursor: pointer;
  display: flex;
  flex-direction: row;
}
.qk-tabs .qk-tabs-bar-item .bar-title {
  padding: 0.25rem 0.8rem 0.2rem;
}
.qk-tabs .qk-tabs-bar-item .icon-guanbi {
  font-size: 0.8em;
  padding-top: 0.3rem;
  padding-right: 0.6rem;
  vertical-align: middle;
}
.qk-tabs .qk-tabs-body {
  height: inherit;
}
.qk-popup-mask {
  position: fixed;
  z-index: 998;
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
.qk-popup {
  position: fixed;
  z-index: 999;
  transition: all 0.3s ease;
}
.qk-popup.top {
  top: 0px;
  width: 100%;
}
.qk-popup.bottom {
  bottom: 0px;
  width: 100%;
}
.qk-popup.left {
  left: 0px;
  height: 100%;
}
.qk-popup.right {
  right: 0px;
  height: 100%;
}
.qk-list {
  min-height: 24rem;
}
.qk-list .qk-list-tools {
  margin-bottom: 0.25rem;
  padding: 0.25rem;
  background-color: #fff;
}
.qk-list .qk-list-tools > .ivu-btn {
  margin-left: 0.2rem;
}
.qk-list .qk-list-body {
  padding: 0.5rem;
}
.qk-list .qk-list-btn-group {
  margin-left: 0.5rem;
}
.qk-list .qk-list-tools-select {
  width: 3rem;
}
.qk-list .qk-list-tools-field {
  width: 6rem;
}
.qk-list .qk-list-tools-input {
  width: 15rem;
}
.qk-list .qk-list-pager {
  margin: 0.25rem 0;
}
.qk-list-more dd {
  margin-top: 0.2rem;
  margin-left: 0.5rem;
}
.qk-list-more dl {
  margin-bottom: 0.2rem;
}
.qk-list-more .qk-list-more-foot {
  margin-top: 0.5rem;
  border-top: 1px dotted #eee;
  padding-top: 0.2rem;
  font-size: 0.5rem;
}
.qk-form {
  min-width: 15rem;
}
.qk-form .qk-form-tools {
  padding: 0.5rem;
  width: 100%;
  background-color: #f8f8f8;
}
.qk-form .qk-form {
  padding: 0.25rem 1rem;
}
.qk-form .qk-form-select {
  width: 14rem;
}
.qk-form .qk-form-int {
  width: 8rem;
}
.qk-table .txLink {
  color: #2db7f5;
}
.qk-table .txWarn {
  color: #ff6600;
}
.qk-layout .qk-sider {
  border-right: 1px solid #eee;
  /* min-height: 20rem; */
  height: 92vh;
  overflow: auto;
  width: 20%;
  display: inline-block;
}
.qk-layout .qk-sider-collapse {
  left: -20%;
  position: absolute;
  display: none;
}
.qk-layout .qk-tabs {
  width: 79%;
  display: inline-block;
  vertical-align: top;
  margin: 0.25rem;
}
.qk-layout .qk-tabs-collapse {
  width: 100%;
  display: block;
  padding: 0.25rem;
}
.qk-win {
  position: absolute;
  width: 50%;
  min-height: 2rem;
  top: 10%;
  left: 20%;
  background-color: #fff;
  border: solid 0.1rem #00284d;
  -webkit-box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
}
.qk-win .qk-win-header {
  background-color: #00284d;
  color: #fff;
  height: 2rem;
  line-height: 2rem;
  cursor: move;
}
.qk-win .qk-win-header li {
  display: inline-block;
}
.qk-win .qk-win-header .qk-win-title {
  font-size: 0.7rem;
  width: 70%;
  padding-left: 0.5rem;
}
.qk-win .qk-win-header .qk-win-btn {
  width: 28%;
  text-align: right;
}
.qk-win .qk-win-header .iconfont {
  margin-left: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
}
.qk-win .qk-win-body {
  overflow: auto;
  background-color: #fff;
}
.qk-calendar-header {
  display: flex;
  align-items: center;
  padding: 0.5rem;
}
.qk-calendar-header .header-right {
  margin-left: 2rem;
  border: 1px solid #eee;
  padding: 0.3rem 0;
  border-left: 0;
  border-radius: 0.25rem;
}
.qk-calendar-header .btn {
  padding: 0.3rem 0.8rem;
  border-left: 1px solid #eee;
  cursor: pointer;
}
.qk-calendar-header .btn:hover {
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1), 0 -3px 0.2rem rgba(0, 0, 0, 0.1);
}
.qk-calendar-header .header-center {
  text-align: center;
  font-weight: bold;
  font-size: 0.8rem;
  cursor: pointer;
}
.qk-calendar-header .header-center .title {
  margin: 0 0.5rem;
}
.qk-calendar-body .weeks {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  padding: 0.2rem;
}
.qk-calendar-body .weeks .week {
  flex: 1;
  text-align: center;
}
.qk-calendar-body .weeks .week li {
  font-weight: bold;
  font-size: 0.7rem;
}
.qk-calendar-body .dates {
  position: relative;
}
.qk-calendar-body .dates .week-row {
  border-left: 1px solid #e8e8e8;
  display: flex;
}
.qk-calendar-body .dates .day-cell {
  flex: 1;
  width: 5rem;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  background-color: #fff;
}
.qk-calendar-body .dates .day-cell.not-cur-month {
  color: #999;
  background: #f2f2f2;
}
.qk-calendar-body .dates .day-cell.onday {
  background-color: #fcf8e3;
}
.qk-calendar-body .dates .day-hd {
  cursor: pointer;
  height: 1rem;
  line-height: 1rem;
  padding-left: 0.5rem;
  font-size: 0.7rem;
}
.qk-calendar-body .dates .day-hd .day-hd-info {
  display: inline-block;
  background-color: #ed4014;
  font-size: 0.5rem;
  padding: 0 0.2rem;
  line-height: 0.7rem;
  color: #fff;
  border-radius: 50%;
  vertical-align: top;
  margin-top: 0.1rem;
}
.qk-calendar-body .dates .event-box {
  height: 4rem;
  overflow: auto;
}
.qk-calendar-body .dates .event-box li {
  cursor: pointer;
  font-size: 0.6rem;
  margin-top: 0.1rem;
  padding: 0.1rem 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qk-calendar-body .dates .event-box li:hover {
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1), 0 -3px 0.2rem rgba(0, 0, 0, 0.1);
}
.qk-calendar-body .dates .event-box li.is-start {
  margin-left: 0.2rem;
  border-radius: 0.25rem 0 0 0.25rem;
}
.qk-calendar-body .dates .event-box li.is-end {
  margin-right: 0.4rem;
  border-radius: 0 0.25rem 0.25rem 0;
}
.qk-calendar-body .dates .event-box li.is-day {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  border-radius: 0.25rem;
}
.qk-calendar-body .dates .event-box li.is-opacity {
  opacity: 0;
}
.qk-calendar-body .dates .event-box .more-link {
  cursor: pointer;
  padding-left: 8px;
  padding-right: 2px;
  color: rgba(0, 0, 0, 0.38);
  font-size: 14px;
}
.qk-calendar-body .dates .event-item {
  background: #2b85e4;
  color: #fff;
}
.qk-calendar-body .lists {
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: #e9e9ec;
}
.qk-calendar-body .lists table {
  width: 100%;
  box-sizing: border-box;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1em;
}
.qk-calendar-body .lists tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}
.qk-calendar-body .lists .list-table {
  table-layout: auto;
}
.qk-calendar-body .lists .list-table .list-header {
  border-bottom-width: 1px;
  background: #eee;
  font-size: 14px;
  color: #100d1d;
}
.qk-calendar-body .lists .list-table .list-header .list-header-main {
  float: left;
}
.qk-calendar-body .lists .list-table .list-header .list-header-alt {
  float: right;
}
.qk-calendar-body .lists .list-table a {
  color: #100d1d;
}
.qk-calendar-body .lists .list-table td {
  border-width: 1px 0 0;
  padding: 8px 14px;
}
.qk-calendar-body .lists .list-table tr:first-child td {
  border-top-width: 0;
}
.qk-calendar-body .lists .list-item {
  box-sizing: content-box;
}
.qk-calendar-body .lists .list-item:hover td {
  background-color: #f5f5f5;
}
.qk-calendar-body .lists .list-item-time {
  padding-right: 0;
  width: 25%;
}
.qk-calendar-body .lists .list-item-marker {
  padding-right: 0;
  width: 10px;
}
.qk-calendar-body .lists .list-item-title {
  padding-right: 0;
}
.qk-calendar-body .lists .list-event-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #3a87ad;
}
.qk-map .btn-more {
  position: relative;
  left: 1rem;
  top: 2rem;
  font-size: 1.4rem;
  z-index: 9;
  border-radius: 50%;
  background-color: #fff;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1.8rem;
  text-align: center;
  -webkit-box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.qk-map .qk-map-tools {
  margin: 0.25rem;
  margin-left: 4rem;
}
.qk-map .qk-map-tools .qk-map-input {
  width: 5rem;
}
.qk-map .qk-map-view {
  min-height: 4rem;
}
.qk-item .list-itme {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e7e7e7;
  padding: 0 0.5rem;
}
.qk-item .cell-itme {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 2.5rem;
  background-color: #ffffff;
  border-bottom: 1px solid #e7e7e7;
  padding: 0 0.5rem;
}
.qk-item .iconfont {
  margin: 0 0.5rem;
  font-size: 1.2em;
}
.qk-item .icon-jiantou {
  color: #999;
}