first commit
This commit is contained in:
@@ -0,0 +1,448 @@
|
||||
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%;
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,742 @@
|
||||
@font-face {
|
||||
font-family: 'iconfont'; /* project id 3379718 */
|
||||
/*src: url('https://at.alicdn.com/t/font_3379718_ey1vmrktwg7.ttf') format('truetype');*/
|
||||
src: url('font_3379718_ey1vmrktwg7.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-usercenter:before {
|
||||
content: "\e78f";
|
||||
}
|
||||
|
||||
.icon-unlock:before {
|
||||
content: "\e790";
|
||||
}
|
||||
|
||||
.icon-vip:before {
|
||||
content: "\e791";
|
||||
}
|
||||
|
||||
.icon-wallet:before {
|
||||
content: "\e792";
|
||||
}
|
||||
|
||||
.icon-landtransportation:before {
|
||||
content: "\e793";
|
||||
}
|
||||
|
||||
.icon-exchangerate:before {
|
||||
content: "\e794";
|
||||
}
|
||||
|
||||
.icon-all-fill1:before {
|
||||
content: "\e795";
|
||||
}
|
||||
|
||||
.icon-bad-fill:before {
|
||||
content: "\e796";
|
||||
}
|
||||
|
||||
.icon-cart-Empty-fill:before {
|
||||
content: "\e797";
|
||||
}
|
||||
|
||||
.icon-certified-supplier-fill:before {
|
||||
content: "\e798";
|
||||
}
|
||||
|
||||
.icon-clock-fill:before {
|
||||
content: "\e799";
|
||||
}
|
||||
|
||||
.icon-Customermanagement-fill:before {
|
||||
content: "\e79a";
|
||||
}
|
||||
|
||||
.icon-discounts-fill:before {
|
||||
content: "\e79b";
|
||||
}
|
||||
|
||||
.icon-email-fill:before {
|
||||
content: "\e79c";
|
||||
}
|
||||
|
||||
.icon-camera-fill:before {
|
||||
content: "\e79d";
|
||||
}
|
||||
|
||||
.icon-good-fill:before {
|
||||
content: "\e79e";
|
||||
}
|
||||
|
||||
.icon-hot-fill:before {
|
||||
content: "\e79f";
|
||||
}
|
||||
|
||||
.icon-company-fill:before {
|
||||
content: "\e7a0";
|
||||
}
|
||||
|
||||
.icon-order-fill:before {
|
||||
content: "\e7a1";
|
||||
}
|
||||
|
||||
.icon-map1:before {
|
||||
content: "\e7a2";
|
||||
}
|
||||
|
||||
.icon-paylater-fill:before {
|
||||
content: "\e7a3";
|
||||
}
|
||||
|
||||
.icon-phone:before {
|
||||
content: "\e7a4";
|
||||
}
|
||||
|
||||
.icon-pic-fill1:before {
|
||||
content: "\e7a5";
|
||||
}
|
||||
|
||||
.icon-rankinglist:before {
|
||||
content: "\e7a6";
|
||||
}
|
||||
|
||||
.icon-product1:before {
|
||||
content: "\e7a7";
|
||||
}
|
||||
|
||||
.icon-prompt-fill1:before {
|
||||
content: "\e7a8";
|
||||
}
|
||||
|
||||
.icon-security-fill:before {
|
||||
content: "\e7a9";
|
||||
}
|
||||
|
||||
.icon-shuffling-banner-fill:before {
|
||||
content: "\e7aa";
|
||||
}
|
||||
|
||||
.icon-store-fill:before {
|
||||
content: "\e7ab";
|
||||
}
|
||||
|
||||
.icon-success-fill:before {
|
||||
content: "\e7ac";
|
||||
}
|
||||
|
||||
.icon-trust-fill:before {
|
||||
content: "\e7ad";
|
||||
}
|
||||
|
||||
.icon-vip-fill:before {
|
||||
content: "\e7ae";
|
||||
}
|
||||
|
||||
.icon-set1:before {
|
||||
content: "\e7af";
|
||||
}
|
||||
|
||||
.icon-brand-fill:before {
|
||||
content: "\e7b0";
|
||||
}
|
||||
|
||||
.icon-collection:before {
|
||||
content: "\e7b1";
|
||||
}
|
||||
|
||||
.icon-consumption-fill:before {
|
||||
content: "\e7b2";
|
||||
}
|
||||
|
||||
.icon-collection-fill:before {
|
||||
content: "\e7b3";
|
||||
}
|
||||
|
||||
.icon-brand:before {
|
||||
content: "\e7b4";
|
||||
}
|
||||
|
||||
.icon-scenes-fill:before {
|
||||
content: "\e7b5";
|
||||
}
|
||||
|
||||
.icon-scenes:before {
|
||||
content: "\e7b6";
|
||||
}
|
||||
|
||||
.icon-topraning-fill:before {
|
||||
content: "\e7b7";
|
||||
}
|
||||
|
||||
.icon-consumption:before {
|
||||
content: "\e7b8";
|
||||
}
|
||||
|
||||
.icon-topraning:before {
|
||||
content: "\e7b9";
|
||||
}
|
||||
|
||||
.icon-writing:before {
|
||||
content: "\e7ba";
|
||||
}
|
||||
|
||||
.icon-home:before {
|
||||
content: "\e7bb";
|
||||
}
|
||||
|
||||
.icon-comments-fill:before {
|
||||
content: "\e7bc";
|
||||
}
|
||||
|
||||
.icon-account-fill:before {
|
||||
content: "\e7bd";
|
||||
}
|
||||
|
||||
.icon-home-fill:before {
|
||||
content: "\e7be";
|
||||
}
|
||||
|
||||
.icon-add-select:before {
|
||||
content: "\e7bf";
|
||||
}
|
||||
|
||||
.icon-sami-select:before {
|
||||
content: "\e7c0";
|
||||
}
|
||||
|
||||
.icon-camera:before {
|
||||
content: "\e7c1";
|
||||
}
|
||||
|
||||
.icon-account:before {
|
||||
content: "\e7c2";
|
||||
}
|
||||
|
||||
.icon-comments:before {
|
||||
content: "\e7c3";
|
||||
}
|
||||
|
||||
.icon-cart-Empty1:before {
|
||||
content: "\e7c4";
|
||||
}
|
||||
|
||||
.icon-favorites:before {
|
||||
content: "\e7c5";
|
||||
}
|
||||
|
||||
.icon-order:before {
|
||||
content: "\e7c6";
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
content: "\e7c7";
|
||||
}
|
||||
|
||||
.icon-usercenter1:before {
|
||||
content: "\e7c8";
|
||||
}
|
||||
|
||||
.icon-tradingdata:before {
|
||||
content: "\e7c9";
|
||||
}
|
||||
|
||||
.icon-microphone:before {
|
||||
content: "\e7ca";
|
||||
}
|
||||
|
||||
.icon-daikuan:before {
|
||||
content: "\e7cb";
|
||||
}
|
||||
|
||||
.icon-shenqingjilu:before {
|
||||
content: "\e7cc";
|
||||
}
|
||||
|
||||
.icon-shangchuanbeiandanzheng:before {
|
||||
content: "\e7cd";
|
||||
}
|
||||
|
||||
.icon-shuangshen:before {
|
||||
content: "\e7ce";
|
||||
}
|
||||
|
||||
.icon-tuishui:before {
|
||||
content: "\e7cf";
|
||||
}
|
||||
|
||||
.icon-kuaidiwuliu:before {
|
||||
content: "\e7d0";
|
||||
}
|
||||
|
||||
.icon-AddProducts:before {
|
||||
content: "\e7d1";
|
||||
}
|
||||
|
||||
.icon-zijin:before {
|
||||
content: "\e7d2";
|
||||
}
|
||||
|
||||
.icon-extra-inquiries:before {
|
||||
content: "\e7d3";
|
||||
}
|
||||
|
||||
.icon-tongxunlu:before {
|
||||
content: "\e7d4";
|
||||
}
|
||||
|
||||
.icon-yiguanzhugongyingshang:before {
|
||||
content: "\e7d5";
|
||||
}
|
||||
|
||||
.icon-becomeagoldsupplier:before {
|
||||
content: "\e7d6";
|
||||
}
|
||||
|
||||
.icon-inspection1:before {
|
||||
content: "\e7dc";
|
||||
}
|
||||
|
||||
.icon-block:before {
|
||||
content: "\e7de";
|
||||
}
|
||||
|
||||
.icon-shouhuoicon:before {
|
||||
content: "\e7df";
|
||||
}
|
||||
|
||||
.icon-auto:before {
|
||||
content: "\e6eb";
|
||||
}
|
||||
|
||||
.icon-all:before {
|
||||
content: "\e6ef";
|
||||
}
|
||||
|
||||
.icon-bussiness-man:before {
|
||||
content: "\e6f0";
|
||||
}
|
||||
|
||||
.icon-component:before {
|
||||
content: "\e6f2";
|
||||
}
|
||||
|
||||
.icon-code:before {
|
||||
content: "\e6f3";
|
||||
}
|
||||
|
||||
.icon-copy:before {
|
||||
content: "\e6f4";
|
||||
}
|
||||
|
||||
.icon-dollar:before {
|
||||
content: "\e6f5";
|
||||
}
|
||||
|
||||
.icon-history:before {
|
||||
content: "\e6f8";
|
||||
}
|
||||
|
||||
.icon-editor:before {
|
||||
content: "\e6f6";
|
||||
}
|
||||
|
||||
.icon-data:before {
|
||||
content: "\e6f9";
|
||||
}
|
||||
|
||||
.icon-gift:before {
|
||||
content: "\e6fa";
|
||||
}
|
||||
|
||||
.icon-integral:before {
|
||||
content: "\e6fb";
|
||||
}
|
||||
|
||||
.icon-nav-list:before {
|
||||
content: "\e6fd";
|
||||
}
|
||||
|
||||
.icon-pic:before {
|
||||
content: "\e6ff";
|
||||
}
|
||||
|
||||
.icon-Notvisible:before {
|
||||
content: "\e6fe";
|
||||
}
|
||||
|
||||
.icon-play:before {
|
||||
content: "\e701";
|
||||
}
|
||||
|
||||
.icon-rising:before {
|
||||
content: "\e703";
|
||||
}
|
||||
|
||||
.icon-QRcode:before {
|
||||
content: "\e704";
|
||||
}
|
||||
|
||||
.icon-rmb:before {
|
||||
content: "\e705";
|
||||
}
|
||||
|
||||
.icon-Exportservices:before {
|
||||
content: "\e702";
|
||||
}
|
||||
|
||||
.icon-sendinquiry:before {
|
||||
content: "\e70d";
|
||||
}
|
||||
|
||||
.icon-all-fill:before {
|
||||
content: "\e718";
|
||||
}
|
||||
|
||||
.icon-favorites-fill:before {
|
||||
content: "\e721";
|
||||
}
|
||||
|
||||
.icon-integral-fill:before {
|
||||
content: "\e726";
|
||||
}
|
||||
|
||||
.icon-namecard-fill:before {
|
||||
content: "\e72a";
|
||||
}
|
||||
|
||||
.icon-pic-fill:before {
|
||||
content: "\e72e";
|
||||
}
|
||||
|
||||
.icon-play-fill:before {
|
||||
content: "\e72f";
|
||||
}
|
||||
|
||||
.icon-prompt-fill:before {
|
||||
content: "\e730";
|
||||
}
|
||||
|
||||
.icon-stop-fill:before {
|
||||
content: "\e738";
|
||||
}
|
||||
|
||||
.icon-add-account:before {
|
||||
content: "\e741";
|
||||
}
|
||||
|
||||
.icon-add:before {
|
||||
content: "\e742";
|
||||
}
|
||||
|
||||
.icon-add-cart:before {
|
||||
content: "\e743";
|
||||
}
|
||||
|
||||
.icon-arrow-right:before {
|
||||
content: "\e744";
|
||||
}
|
||||
|
||||
.icon-arrow-left:before {
|
||||
content: "\e745";
|
||||
}
|
||||
|
||||
.icon-arrow-up:before {
|
||||
content: "\e746";
|
||||
}
|
||||
|
||||
.icon-ascending:before {
|
||||
content: "\e747";
|
||||
}
|
||||
|
||||
.icon-ashbin:before {
|
||||
content: "\e748";
|
||||
}
|
||||
|
||||
.icon-bad:before {
|
||||
content: "\e749";
|
||||
}
|
||||
|
||||
.icon-attachent:before {
|
||||
content: "\e74a";
|
||||
}
|
||||
|
||||
.icon-browse:before {
|
||||
content: "\e74b";
|
||||
}
|
||||
|
||||
.icon-assessed-badge:before {
|
||||
content: "\e74c";
|
||||
}
|
||||
|
||||
.icon-bags:before {
|
||||
content: "\e74d";
|
||||
}
|
||||
|
||||
.icon-calendar:before {
|
||||
content: "\e74e";
|
||||
}
|
||||
|
||||
.icon-category:before {
|
||||
content: "\e74f";
|
||||
}
|
||||
|
||||
.icon-close:before {
|
||||
content: "\e750";
|
||||
}
|
||||
|
||||
.icon-certified-supplier:before {
|
||||
content: "\e751";
|
||||
}
|
||||
|
||||
.icon-cart-Empty:before {
|
||||
content: "\e752";
|
||||
}
|
||||
|
||||
.icon-conditions:before {
|
||||
content: "\e753";
|
||||
}
|
||||
|
||||
.icon-confirm:before {
|
||||
content: "\e754";
|
||||
}
|
||||
|
||||
.icon-company:before {
|
||||
content: "\e755";
|
||||
}
|
||||
|
||||
.icon-copy1:before {
|
||||
content: "\e756";
|
||||
}
|
||||
|
||||
.icon-credit-level:before {
|
||||
content: "\e757";
|
||||
}
|
||||
|
||||
.icon-clock:before {
|
||||
content: "\e758";
|
||||
}
|
||||
|
||||
.icon-data1:before {
|
||||
content: "\e759";
|
||||
}
|
||||
|
||||
.icon-Customermanagement:before {
|
||||
content: "\e75a";
|
||||
}
|
||||
|
||||
.icon-descending:before {
|
||||
content: "\e75b";
|
||||
}
|
||||
|
||||
.icon-download:before {
|
||||
content: "\e75c";
|
||||
}
|
||||
|
||||
.icon-editor1:before {
|
||||
content: "\e75d";
|
||||
}
|
||||
|
||||
.icon-ellipsis:before {
|
||||
content: "\e75e";
|
||||
}
|
||||
|
||||
.icon-email:before {
|
||||
content: "\e75f";
|
||||
}
|
||||
|
||||
.icon-filter:before {
|
||||
content: "\e760";
|
||||
}
|
||||
|
||||
.icon-history1:before {
|
||||
content: "\e761";
|
||||
}
|
||||
|
||||
.icon-help:before {
|
||||
content: "\e762";
|
||||
}
|
||||
|
||||
.icon-good:before {
|
||||
content: "\e763";
|
||||
}
|
||||
|
||||
.icon-gift1:before {
|
||||
content: "\e764";
|
||||
}
|
||||
|
||||
.icon-hot:before {
|
||||
content: "\e765";
|
||||
}
|
||||
|
||||
.icon-inspection:before {
|
||||
content: "\e766";
|
||||
}
|
||||
|
||||
.icon-leftbutton:before {
|
||||
content: "\e767";
|
||||
}
|
||||
|
||||
.icon-leftarrow:before {
|
||||
content: "\e768";
|
||||
}
|
||||
|
||||
.icon-integral1:before {
|
||||
content: "\e769";
|
||||
}
|
||||
|
||||
.icon-link:before {
|
||||
content: "\e76a";
|
||||
}
|
||||
|
||||
.icon-namecard:before {
|
||||
content: "\e76b";
|
||||
}
|
||||
|
||||
.icon-map:before {
|
||||
content: "\e76c";
|
||||
}
|
||||
|
||||
.icon-ontimeshipment:before {
|
||||
content: "\e76d";
|
||||
}
|
||||
|
||||
.icon-password:before {
|
||||
content: "\e76e";
|
||||
}
|
||||
|
||||
.icon-operation:before {
|
||||
content: "\e76f";
|
||||
}
|
||||
|
||||
.icon-pic1:before {
|
||||
content: "\e770";
|
||||
}
|
||||
|
||||
.icon-play1:before {
|
||||
content: "\e771";
|
||||
}
|
||||
|
||||
.icon-print:before {
|
||||
content: "\e772";
|
||||
}
|
||||
|
||||
.icon-product:before {
|
||||
content: "\e773";
|
||||
}
|
||||
|
||||
.icon-prompt:before {
|
||||
content: "\e774";
|
||||
}
|
||||
|
||||
.icon-QRcode1:before {
|
||||
content: "\e775";
|
||||
}
|
||||
|
||||
.icon-resonserate:before {
|
||||
content: "\e776";
|
||||
}
|
||||
|
||||
.icon-remind:before {
|
||||
content: "\e777";
|
||||
}
|
||||
|
||||
.icon-return:before {
|
||||
content: "\e778";
|
||||
}
|
||||
|
||||
.icon-paylater:before {
|
||||
content: "\e779";
|
||||
}
|
||||
|
||||
.icon-save:before {
|
||||
content: "\e77a";
|
||||
}
|
||||
|
||||
.icon-scanning:before {
|
||||
content: "\e77b";
|
||||
}
|
||||
|
||||
.icon-security:before {
|
||||
content: "\e77c";
|
||||
}
|
||||
|
||||
.icon-share:before {
|
||||
content: "\e77d";
|
||||
}
|
||||
|
||||
.icon-signboard:before {
|
||||
content: "\e77e";
|
||||
}
|
||||
|
||||
.icon-shuffling-banner:before {
|
||||
content: "\e77f";
|
||||
}
|
||||
|
||||
.icon-Rightbutton:before {
|
||||
content: "\e780";
|
||||
}
|
||||
|
||||
.icon-sorting:before {
|
||||
content: "\e781";
|
||||
}
|
||||
|
||||
.icon-Similarproducts:before {
|
||||
content: "\e782";
|
||||
}
|
||||
|
||||
.icon-suggest:before {
|
||||
content: "\e783";
|
||||
}
|
||||
|
||||
.icon-success:before {
|
||||
content: "\e784";
|
||||
}
|
||||
|
||||
.icon-switch:before {
|
||||
content: "\e785";
|
||||
}
|
||||
|
||||
.icon-template:before {
|
||||
content: "\e786";
|
||||
}
|
||||
|
||||
.icon-tradingvolume:before {
|
||||
content: "\e787";
|
||||
}
|
||||
|
||||
.icon-upload:before {
|
||||
content: "\e788";
|
||||
}
|
||||
|
||||
.icon-trust:before {
|
||||
content: "\e789";
|
||||
}
|
||||
|
||||
.icon-viewlist:before {
|
||||
content: "\e78a";
|
||||
}
|
||||
|
||||
.icon-set:before {
|
||||
content: "\e78b";
|
||||
}
|
||||
|
||||
.icon-store:before {
|
||||
content: "\e78c";
|
||||
}
|
||||
|
||||
.icon-creditcard:before {
|
||||
content: "\e78d";
|
||||
}
|
||||
|
||||
.icon-discounts:before {
|
||||
content: "\e78e";
|
||||
}
|
||||
|
||||
@@ -0,0 +1,400 @@
|
||||
/* 添加过渡效果 */
|
||||
.u-navbar {
|
||||
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||
}
|
||||
|
||||
/* 确保TabBar有过渡效果 */
|
||||
::v-deep .uni-tabbar {
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.tabs-row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height:26px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 为每个选项卡设置不同的颜色 */
|
||||
.tab[data-index="0"] {
|
||||
width: 26%;
|
||||
color: #4a6da7; /* 到达 - 红色 */
|
||||
}
|
||||
.dot-arrival{
|
||||
width:6px;
|
||||
height:6px;
|
||||
border-radius: 50%;
|
||||
background-color: #4a6da7;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left:4px;
|
||||
}
|
||||
.dot-arrival{
|
||||
width:6px;
|
||||
height:6px;
|
||||
border-radius: 50%;
|
||||
background-color: #4a6da7;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left:4px;
|
||||
}
|
||||
.dot-departure{
|
||||
width:6px;
|
||||
height:6px;
|
||||
border-radius: 50%;
|
||||
background-color: #5b8a72;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left:4px;
|
||||
}
|
||||
.dot-inhouse{
|
||||
width:6px;
|
||||
height:6px;
|
||||
border-radius: 50%;
|
||||
background-color: #8e6f50;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left:4px;
|
||||
}.dot-other{
|
||||
width:6px;
|
||||
height:6px;
|
||||
border-radius: 50%;
|
||||
background-color: #333333;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left:4px;
|
||||
}
|
||||
.tab[data-index="1"] {
|
||||
width: 28%;
|
||||
color: #5b8a72; /* 离开 - 蓝色 */
|
||||
}
|
||||
|
||||
.tab[data-index="2"] {
|
||||
width: 28%;
|
||||
color: #8e6f50; /* 在住 - 绿色 */
|
||||
}
|
||||
|
||||
.tab[data-index="3"] {
|
||||
width: 20%;
|
||||
color: #333333; /* 其他 - 紫色 */
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-top: 0px;
|
||||
}
|
||||
/* 文本容器设置为内容自适应宽度 */
|
||||
.text-container {
|
||||
flex: 0 1 auto; /* 改为不自动扩展,只根据内容调整大小 */
|
||||
min-width: 0; /* 关键:允许内容截断 */
|
||||
}
|
||||
|
||||
/* 图标组防止被压缩 */
|
||||
.icon-group {
|
||||
flex-shrink: 0; /* 禁止收缩 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 4px; /* 可选:添加一个小的间距 */
|
||||
margin-top:4px;
|
||||
}
|
||||
.icon-group-room {
|
||||
flex-shrink: 0; /* 禁止收缩 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0px; /* 可选:添加一个小的间距 */
|
||||
margin-top:0px;
|
||||
}
|
||||
.icon-img-flight {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: 4px;
|
||||
flex-shrink: 0; /* 双重保险防止压缩 */
|
||||
}
|
||||
.icon-img-sharer {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
margin-left: 2px;
|
||||
flex-shrink: 0; /* 双重保险防止压缩 */
|
||||
}
|
||||
.icon-img-limo {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 4px;
|
||||
flex-shrink: 0; /* 双重保险防止压缩 */
|
||||
}
|
||||
.icon-img-room {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: -1px;
|
||||
flex-shrink: 0; /* 双重保险防止压缩 */
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 20px;
|
||||
background: #4a6da7; /* 默认颜色,与第一个选项卡相同 */
|
||||
border-radius: 2px;
|
||||
transition: left 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
/* 详细信息展开动画 */
|
||||
.detail-expand-enter-active {
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.detail-expand-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.detail-expand-enter-from {
|
||||
opacity: 0;
|
||||
transform: scaleY(0) translateY(-10px);
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-expand-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0) translateY(-10px);
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-expand-enter-to,
|
||||
.detail-expand-leave-from {
|
||||
opacity: 1;
|
||||
transform: scaleY(1) translateY(0);
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
/* 详细内容样式 - 使用简单的展开动画 */
|
||||
.detail-content {
|
||||
overflow: hidden;
|
||||
animation: expandDown 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
|
||||
transform-origin: top center;
|
||||
color:#333333;
|
||||
}
|
||||
|
||||
/* 展开动画 */
|
||||
@keyframes expandDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-15px);
|
||||
max-height: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
transform: translateY(-5px);
|
||||
max-height: 500px;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
max-height: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 子元素渐进显示 */
|
||||
.detail-content .hz-font-12px {
|
||||
animation: fadeInUp 0.5s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.detail-content .hz-font-12px:nth-child(1) { animation-delay: 0.1s; }
|
||||
.detail-content .hz-font-12px:nth-child(2) { animation-delay: 0.2s; }
|
||||
.detail-content .hz-font-12px:nth-child(3) { animation-delay: 0.3s; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.u-navbar {
|
||||
|
||||
&--fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
&__content {
|
||||
@include flex(row);
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
background-color: #9acafc;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
&__left,
|
||||
&__right {
|
||||
padding: 0 13px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@include flex(row);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__left {
|
||||
left: 0;
|
||||
|
||||
&--hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 15px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: $u-main-color;
|
||||
}
|
||||
|
||||
&__right {
|
||||
right: 0;
|
||||
|
||||
&__text {
|
||||
font-size: 15px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-box {
|
||||
flex: 1;
|
||||
/* #ifdef APP-NVUE */
|
||||
justify-content: center;
|
||||
/* #endif */
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-bottom-color: #f5f5f5;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.example-body {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-color: #e5e5e5;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.button-text {
|
||||
font-size: 15px;
|
||||
}
|
||||
.slot-button{
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.slot-button-eta {
|
||||
background-color: #C39A4B;
|
||||
}
|
||||
.slot-button-cancel {
|
||||
background-color: #ff5a5f;
|
||||
}
|
||||
|
||||
.slot-button-text {
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ETA标签样式 */
|
||||
.conner-label {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -2px;
|
||||
color: #ffffff;
|
||||
font-size: 9px;
|
||||
padding: 0px 4px 0px 4px;
|
||||
border-radius: 4px;
|
||||
z-index: 10;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.conner-label-eta{
|
||||
background-color: #9f9f9f;
|
||||
}
|
||||
.conner-label-danger{
|
||||
background-color: #ff5a5f;
|
||||
}
|
||||
.conner-label-info{
|
||||
background-color: #4a6da7;
|
||||
}
|
||||
.conner-label-text{
|
||||
position:relative;
|
||||
top:5px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user