Mauve
708 lines
12 KiB
SCSS
708 lines
12 KiB
SCSS
page{
|
|
background-color: $page-color-light;
|
|
font-size:$font-base;
|
|
font-family: "Inter-Regular";
|
|
font-weight:600;
|
|
}
|
|
.hz-page{
|
|
padding-bottom:calc(var(--window-bottom) + 20px);
|
|
}
|
|
.hz-bg-white{
|
|
background-color: $page-color-light;
|
|
}
|
|
.hz-bg-primary{
|
|
background-color: $base-color;
|
|
}
|
|
.hz-bg-primary:active{
|
|
background-color: $base-color-active;
|
|
}
|
|
.hz-bg-disPrimary{
|
|
background-color: $base-color-disActive;
|
|
}
|
|
.hz-bg-light{
|
|
background-color: $base-color-light;
|
|
}
|
|
.hz-font-color-black{
|
|
color: $font-color-black;
|
|
}
|
|
.hz-font-color-dark{
|
|
color: $font-color-dark;
|
|
}
|
|
.hz-spacing{
|
|
margin-left:$page-col-spacing;
|
|
margin-right:$page-col-spacing;
|
|
}
|
|
.hz-split{
|
|
border-top:1rpx solid #dddddd;
|
|
margin-top:6px;
|
|
margin-bottom:6px;
|
|
}
|
|
.hz-split-primary{
|
|
border-top:1rpx solid $base-color;
|
|
margin-top:6px;
|
|
margin-bottom:6px;
|
|
}
|
|
.text-truncate {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.hz-row-spacing{
|
|
margin-top:$page-row-spacing;
|
|
}
|
|
.hz-font-min{
|
|
font-size:$font-min;
|
|
}
|
|
.hz-font-12px{
|
|
font-size:$font-12px;
|
|
}
|
|
.hz-font-sm{
|
|
font-size:$font-sm;
|
|
}
|
|
.hz-font-base{
|
|
font-size:$font-base;
|
|
}
|
|
.hz-font-md{
|
|
font-size:$font-md;
|
|
}
|
|
.hz-font-lg{
|
|
font-size:$font-lg;
|
|
}
|
|
.hz-font-xl{
|
|
font-size:$font-xl;
|
|
}
|
|
.hz-font-color-danger{
|
|
color:$font-color-highlight1;
|
|
}
|
|
.hz-font-color-primary{
|
|
color:$font-color-highlight2;
|
|
}
|
|
.hz-font-color-light{
|
|
color:$base-color-light;
|
|
}
|
|
.hz-font-color-white{
|
|
color:$font-color-white;
|
|
}
|
|
.hz-font-normal{
|
|
font-family: "Inter-Regular";
|
|
}
|
|
.hz-font-bold{
|
|
font-family: "Inter-Medium";
|
|
}
|
|
.hz-font-bolder{
|
|
font-family: "Inter-Bold";
|
|
}
|
|
.hz-text-left{
|
|
text-align: left;
|
|
}
|
|
.hz-text-center{
|
|
text-align: center;
|
|
}
|
|
.hz-text-right{
|
|
text-align: right;
|
|
}
|
|
.hz-banner-bg{
|
|
border-radius: 0 0 5% 5%;
|
|
}
|
|
.hz-card-profile{
|
|
border-radius: 12px;
|
|
padding:18px;
|
|
background-color: $font-color-highlight2;
|
|
color:$font-color-white;
|
|
}
|
|
.hz-card-booking{
|
|
border-radius: 12px;
|
|
padding:18px;
|
|
background-color: $page-color-greylight;
|
|
color:$font-color-black;
|
|
}
|
|
.hz-card-extend{
|
|
border-radius: 12px;
|
|
padding:18px;
|
|
background-color: $base-color-light;
|
|
color:$font-color-black;
|
|
}
|
|
.hz-card-level{
|
|
border-radius: 4px;
|
|
padding:0px 4px;
|
|
font-size:9px;
|
|
height:12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: $uni-color-error;
|
|
color:$font-color-white;
|
|
}
|
|
.hz-mr-t-30{
|
|
margin-top:30rpx;
|
|
}
|
|
.hz-mr-b-30{
|
|
margin-bottom:30rpx;
|
|
}
|
|
.hz-mr-t-20{
|
|
margin-top:20rpx;
|
|
}
|
|
.hz-mr-b-20{
|
|
margin-bottom:20rpx;
|
|
}
|
|
.hz-pd-16{
|
|
padding:16rpx;
|
|
}
|
|
.hz-pd-30{
|
|
padding:30rpx;
|
|
}
|
|
.hz-pd-l-30{
|
|
padding-left:30rpx;
|
|
}
|
|
.hz-pd-r-30{
|
|
padding-right:30rpx;
|
|
}
|
|
.hz-nav-btn{
|
|
width:22px;
|
|
height:22px;
|
|
}
|
|
.hz-flex-row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.hz-flex-col{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.hz-flex-vertical-mid{
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.hz-btn-status{
|
|
border-radius: 4px;
|
|
padding: 3px 2px;
|
|
font-size:20rpx;
|
|
color:#ffffff;
|
|
text-align:center;
|
|
}
|
|
.hz-status-duein{
|
|
background-color: $font-color-spec;
|
|
}
|
|
.hz-status-reserved{
|
|
background-color: $uni-color-primary;
|
|
}
|
|
.hz-status-cancel{
|
|
background-color: $font-color-highlight2;
|
|
}
|
|
.hz-status-checkedin{
|
|
background-color: $font-color-spec;
|
|
}
|
|
.hz-status-dueout{
|
|
background-color: $font-color-spec;
|
|
}
|
|
.hz-status-pending{
|
|
background-color: $uni-text-color-placeholder;
|
|
}
|
|
.hz-status-waitlist{
|
|
background-color: $uni-color-error;
|
|
}
|
|
.hz-status-approval{
|
|
background-color: $uni-color-error;
|
|
}
|
|
.hz-status-font-duein{
|
|
color: $font-color-spec;
|
|
}
|
|
.hz-status-font-reserved{
|
|
color: $uni-color-primary;
|
|
}
|
|
.hz-status-font-cancel{
|
|
color: $font-color-highlight2;
|
|
}
|
|
.hz-status-font-approval{
|
|
color: $uni-color-error;
|
|
}
|
|
.hz-status-font-checkedin{
|
|
color: $font-color-spec;
|
|
}
|
|
.hz-status-font-dueout{
|
|
color: $font-color-spec;
|
|
}
|
|
.hz-status-font-pending{
|
|
color: $uni-text-color-placeholder;
|
|
}
|
|
.hz-status-font-waitlist{
|
|
color: $uni-color-error;
|
|
}
|
|
.hz-status-font-pendingApproval{
|
|
color: #E8D9BA
|
|
}
|
|
.hz-btn-extend{
|
|
border-radius: 4px;
|
|
padding: 3px 2px;
|
|
background-color: $base-color;
|
|
color:#ffffff;
|
|
text-align:center;
|
|
font-size: 20rpx;
|
|
width:30%;
|
|
}
|
|
.hz-btn-group{
|
|
border-radius: 4px;
|
|
padding: 3px 2px;
|
|
background-color: $font-color-spec;
|
|
color:#ffffff;
|
|
text-align:center;
|
|
font-size: 20rpx;
|
|
width:30%;
|
|
}
|
|
.hz-btn-sharer{
|
|
border-radius: 4px;
|
|
padding: 3px 2px;
|
|
background-color: #4bc397;
|
|
color:#ffffff;
|
|
text-align:center;
|
|
font-size: 20rpx;
|
|
width:30%;
|
|
}
|
|
.hz-btn-sm{
|
|
border-radius: 6rpx;
|
|
padding: 10rpx 20rpx;
|
|
background-color: $base-color;
|
|
color:#ffffff;
|
|
text-align:center;
|
|
font-size: $font-sm;
|
|
}
|
|
.hz-date-title{
|
|
border-radius: 12rpx;
|
|
padding: 10rpx 20rpx;
|
|
background-color: $base-color;
|
|
font-size: $font-lg;
|
|
color:$font-color-white;
|
|
font-weight:bold;
|
|
}
|
|
.hz-date-des {
|
|
font-size: $font-12px;
|
|
color: $font-color-base;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
}
|
|
.hz-btn{
|
|
background-color: $base-color;
|
|
width:100%;
|
|
margin-top:6px;
|
|
height:44px;
|
|
line-height:44px;
|
|
border-radius:22px;
|
|
}
|
|
.hz-btn-line{
|
|
background-color: #ffffff;
|
|
border:1px solid $base-color;
|
|
width:100%;
|
|
color:$base-color;
|
|
margin-top:6px;
|
|
height:44px;
|
|
line-height:44px;
|
|
border-radius:22px;
|
|
}
|
|
.hz-btn:active{
|
|
background-color: $base-color-active;
|
|
}
|
|
.hz-btn-light{
|
|
background-color: $base-color-light;
|
|
width:100%;
|
|
margin-top:6px;
|
|
height:44px;
|
|
line-height:44px;
|
|
border-radius:22px;
|
|
}
|
|
.hz-btn-danger{
|
|
background-color: $base-color-danger;
|
|
width:100%;
|
|
margin-top:6px;
|
|
height:44px;
|
|
line-height:44px;
|
|
border-radius:22px;
|
|
}
|
|
.hz-circle{
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: $base-color;
|
|
border-radius: 50%;
|
|
}
|
|
.hz-placeholder{
|
|
color:#666;
|
|
font-size:$font-md;
|
|
}
|
|
.hz-disabled{
|
|
opacity: 0.4;
|
|
background-color: #dddddd;
|
|
}
|
|
.hz-btn-leftRight {
|
|
background-color: #ffffff;
|
|
border-top:1rpx solid #f4f4f4;
|
|
width:100%;
|
|
.hz-btn-left {
|
|
width: 50%;
|
|
text-align: center;
|
|
margin-top:12rpx;
|
|
height:44px;
|
|
line-height:44px;
|
|
border-top-left-radius:22px;
|
|
border-bottom-left-radius:22px;
|
|
}
|
|
.hz-btn-right {
|
|
width: 50%;
|
|
text-align: center;
|
|
margin-top:12rpx;
|
|
height:44px;
|
|
line-height:44px;
|
|
border-top-right-radius:22px;
|
|
border-bottom-right-radius:22px;
|
|
}
|
|
}
|
|
.hz-card-waitlist{
|
|
border-radius: 12px;
|
|
padding:18px;
|
|
background-color:$base-color-notice;
|
|
color:$font-color-black;
|
|
}
|
|
.hz-card-approval{
|
|
border-radius: 12px;
|
|
padding:18px;
|
|
background-color:$base-color-approval;
|
|
color:$font-color-black;
|
|
}
|
|
.book {
|
|
background-color: #ffffff;
|
|
border-top:1rpx solid #f4f4f4;
|
|
width:100%;
|
|
}
|
|
|
|
/* bookingRecord.vue */
|
|
.hz-nav-right {
|
|
margin-top: 2px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.hz-nav-right-group {
|
|
border: 1rpx solid #ccc;
|
|
border-radius: 14px;
|
|
padding: 4px 12px;
|
|
}
|
|
|
|
.hz-nav-right-divider {
|
|
height: 20px;
|
|
border-left: 1px solid #ccc;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.hz-record-card {
|
|
margin-top: 20rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.hz-row-gap {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.hz-w-40 {
|
|
width: 40%;
|
|
}
|
|
|
|
.hz-w-50 {
|
|
width: 50%;
|
|
}
|
|
|
|
.hz-w-55 {
|
|
width: 55%;
|
|
}
|
|
|
|
.hz-w-60 {
|
|
width: 60%;
|
|
}
|
|
|
|
.hz-w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.hz-sharer-wrap {
|
|
width: 50%;
|
|
text-align: right;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.hz-sharer-tag {
|
|
width: 40%;
|
|
height: 14px;
|
|
line-height: 14px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.hz-limo-dropoff-wrap {
|
|
padding-right: 50rpx;
|
|
}
|
|
|
|
.hz-book-btn-wrap {
|
|
width: 45%;
|
|
}
|
|
|
|
.hz-limo-status {
|
|
color: #ff9b9b;
|
|
}
|
|
|
|
.hz-booking-type-row {
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.hz-booking-type-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.hz-booking-type-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* newLimo.vue */
|
|
.limo-text-input[disabled],
|
|
.limo-text-input--disabled {
|
|
background-color: #F5F7FA;
|
|
color: #4D4D4D;
|
|
}
|
|
|
|
.limo-booking-contact-row {
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
}
|
|
|
|
.limo-booking-contact-row + .limo-booking-contact-row {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.limo-booking-contact-label {
|
|
color: #4D4D4D;
|
|
align-self: center;
|
|
flex: 0 0 38%;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.limo-booking-contact-controls {
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex: 0 0 62%;
|
|
flex-direction: row;
|
|
gap: 2%;
|
|
justify-content: flex-end;
|
|
min-height: 36px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.limo-booking-contact-code-picker {
|
|
align-self: stretch;
|
|
flex: 0 0 38%;
|
|
min-width: 0;
|
|
min-height: 36px;
|
|
}
|
|
|
|
.limo-booking-contact-code-picker ::v-deep .lu-data-select-box {
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
border: 1px solid #e5e5e5 !important;
|
|
border-radius: 4rpx;
|
|
box-sizing: border-box;
|
|
color: #4D4D4D;
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
height: 36px !important;
|
|
justify-content: center;
|
|
min-height: 36px !important;
|
|
padding: 0 5% !important;
|
|
width: 100%;
|
|
}
|
|
|
|
.limo-booking-contact-code-picker ::v-deep .wid {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.limo-booking-contact-code-picker ::v-deep .lu-select-text,
|
|
.limo-booking-contact-code-picker ::v-deep .lu-data-select-input,
|
|
.limo-booking-contact-code-picker ::v-deep .placeholder-class {
|
|
color: #4D4D4D !important;
|
|
font-size: 24rpx !important;
|
|
font-weight: 600 !important;
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 0 !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.limo-booking-contact-code-picker ::v-deep .lu-data-select-close {
|
|
margin-left: 4%;
|
|
}
|
|
|
|
.limo-text-input.limo-booking-contact-phone {
|
|
background-color: #ffffff;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 4rpx;
|
|
box-sizing: border-box;
|
|
color: #4D4D4D;
|
|
flex: 0 0 47%;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
height: 36px;
|
|
min-width: 0;
|
|
min-height: 36px;
|
|
padding: 0 3%;
|
|
}
|
|
|
|
.limo-booking-contact-btn {
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 4rpx;
|
|
box-sizing: border-box;
|
|
color: #4D4D4D;
|
|
display: flex;
|
|
flex: 0 0 10%;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
height: 36px;
|
|
justify-content: center;
|
|
min-height: 36px;
|
|
}
|
|
|
|
.limo-booking-contact-disabled {
|
|
background-color: #F5F7FA;
|
|
color: #4D4D4D;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.limo-booking-contact-disabled ::v-deep .lu-data-select-box {
|
|
background-color: #F5F7FA;
|
|
color: #4D4D4D;
|
|
}
|
|
|
|
.limo-additional-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.limo-additional-options ::v-deep .u-checkbox-group {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.limo-additional-options .limo-booking-contact-row {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.limo-additional-options .limo-booking-contact-row + .limo-booking-contact-row {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* textarea */
|
|
.uni-textarea{
|
|
width:100%;
|
|
background:#FFF;
|
|
}
|
|
.uni-textarea textarea{
|
|
width:96%;
|
|
padding:18rpx 2%;
|
|
line-height:1.6;
|
|
font-size:28rpx;
|
|
height:150rpx;
|
|
}
|
|
.scroll-list {
|
|
@include flex(column);
|
|
|
|
&__goods-item {
|
|
margin-right: 20px;
|
|
|
|
&__image {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&__text {
|
|
color: #f56c6c;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
&__show-more {
|
|
background-color: #fff0f0;
|
|
border-radius: 3px;
|
|
padding: 3px 6px;
|
|
@include flex(column);
|
|
align-items: center;
|
|
|
|
&__text {
|
|
font-size: 12px;
|
|
width: 12px;
|
|
color: #f56c6c;
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
|
|
&__line {
|
|
@include flex;
|
|
margin-top: 10px;
|
|
text-align:center;
|
|
|
|
&__item {
|
|
margin-right: 15px;
|
|
|
|
&__image {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
&__text {
|
|
margin-top: 5px;
|
|
color: $u-content-color;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
&--no-margin-right {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.find-player-ico {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
// spacing utilities
|
|
@for $i from 0 through 2000 {
|
|
.p-\[#{$i}\] { padding: #{$i}rpx !important; }
|
|
.px-\[#{$i}\] { padding-left: #{$i}rpx !important; padding-right: #{$i}rpx !important; }
|
|
.py-\[#{$i}\] { padding-top: #{$i}rpx !important; padding-bottom: #{$i}rpx !important; }
|
|
.pt-\[#{$i}\] { padding-top: #{$i}rpx !important; }
|
|
.pr-\[#{$i}\] { padding-right: #{$i}rpx !important; }
|
|
.pb-\[#{$i}\] { padding-bottom: #{$i}rpx !important; }
|
|
.pl-\[#{$i}\] { padding-left: #{$i}rpx !important; }
|
|
.m-\[#{$i}\] { margin: #{$i}rpx !important; }
|
|
.mx-\[#{$i}\] { margin-left: #{$i}rpx !important; margin-right: #{$i}rpx !important; }
|
|
.my-\[#{$i}\] { margin-top: #{$i}rpx !important; margin-bottom: #{$i}rpx !important; }
|
|
.mt-\[#{$i}\] { margin-top: #{$i}rpx !important; }
|
|
.mr-\[#{$i}\] { margin-right: #{$i}rpx !important; }
|
|
.mb-\[#{$i}\] { margin-bottom: #{$i}rpx !important; }
|
|
.ml-\[#{$i}\] { margin-left: #{$i}rpx !important; }
|
|
}
|