eric/gitlab-instance-0a899031_citynew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 用户体验-骨架屏

Browse Source
This commit is contained in:
eric
2022-11-26 22:13:09 +08:00
parent 971c2d1d69
commit 0456a3c6d3
9 changed files with 317 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
dist/common.wxss vendored
View File

@@ -2,6 +2,10 @@
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/style/base.css ***!
\*********************************************************************************************************************************************************************************************************************/
.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical}.van-clearfix::after{display:table;clear:both;content:''}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}body,html,page{font-size:28rpx}
/*!*************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/skeleton/index.css ***!
\*************************************************************************************************************************************************************************************************************************/
.van-skeleton{display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:0 32rpx;padding:var(--skeleton-padding,0 32rpx)}.van-skeleton__avatar{-webkit-flex-shrink:0;flex-shrink:0;margin-right:32rpx;margin-right:var(--padding-md,32rpx);background-color:#f2f3f5;background-color:var(--skeleton-avatar-background-color,#f2f3f5)}.van-skeleton__avatar--round{border-radius:100%}.van-skeleton__content{-webkit-flex:1;flex:1}.van-skeleton__avatar+.van-skeleton__content{padding-top:16rpx;padding-top:var(--padding-xs,16rpx)}.van-skeleton__row,.van-skeleton__title{height:32rpx;height:var(--skeleton-row-height,32rpx);background-color:#f2f3f5;background-color:var(--skeleton-row-background-color,#f2f3f5)}.van-skeleton__title{margin:0}.van-skeleton__row:not(:first-child){margin-top:24rpx;margin-top:var(--skeleton-row-margin-top,24rpx)}.van-skeleton__title+.van-skeleton__row{margin-top:40rpx}.van-skeleton--animate{-webkit-animation:van-skeleton-blink 1.2s ease-in-out infinite;animation:van-skeleton-blink 1.2s ease-in-out infinite}@-webkit-keyframes van-skeleton-blink{50%{opacity:.6}}@keyframes van-skeleton-blink{50%{opacity:.6}}
/*!*********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/info/index.css ***!
\*********************************************************************************************************************************************************************************************************************/
@@ -22,18 +26,6 @@
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/overlay/index.css ***!
\************************************************************************************************************************************************************************************************************************/
.van-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:rgba(0,0,0,.7);background-color:var(--overlay-background-color,rgba(0,0,0,.7))}
/*!*********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/cell/index.css ***!
\*********************************************************************************************************************************************************************************************************************/
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}.van-cell{position:relative;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;-webkit-align-items:center;align-items:center;-webkit-flex:1;flex:1;padding:24rpx 32rpx;padding:var(--cell-vertical-padding,24rpx) var(--cell-horizontal-padding,32rpx);font-size:28rpx;font-size:var(--cell-font-size, 28rpx);line-height:48rpx;line-height:var(--cell-line-height, 48rpx);color:#323233;color:var(--cell-text-color,#323233);background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell::after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:' ';pointer-events:none;right:32rpx;bottom:0;left:32rpx;border-bottom:1PX solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-cell--borderless::after{display:none}.van-cell-group{background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell__label{margin-top:6rpx;margin-top:var(--cell-label-margin-top,6rpx);font-size:24rpx;font-size:var(--cell-label-font-size, 24rpx);color:#969799;color:var(--cell-label-color,#969799);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle;color:#969799;color:var(--cell-value-color,#969799)}.van-cell__title,.van-cell__value{-webkit-flex:1;flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:48rpx;height:var(--cell-line-height,48rpx);font-size:32rpx;font-size:var(--cell-icon-size, 32rpx)}.van-cell__left-icon-wrap{margin-right:8rpx;margin-right:var(--padding-base,8rpx)}.van-cell__right-icon-wrap{margin-left:8rpx;margin-left:var(--padding-base,8rpx);color:#969799;color:var(--cell-right-icon-color,#969799)}.van-cell__left-icon{vertical-align:middle;line-height:48rpx;line-height:var(--cell-line-height, 48rpx)}.van-cell__right-icon{line-height:48rpx;line-height:var(--cell-line-height, 48rpx)}.van-cell--clickable.van-cell--hover{-webkit-filter:brightness(0.95);filter:brightness(.95)}.van-cell--required{overflow:visible}.van-cell--required::before{position:absolute;content:'*';left:16rpx;left:var(--padding-xs,16rpx);font-size:28rpx;font-size:var(--cell-font-size, 28rpx);color:#ee0a24;color:var(--cell-required-color,#ee0a24)}.van-cell--center{-webkit-align-items:center;align-items:center}.van-cell--large{padding-top:24rpx;padding-top:var(--cell-large-vertical-padding,24rpx);padding-bottom:24rpx;padding-bottom:var(--cell-large-vertical-padding,24rpx)}.van-cell--large .van-cell__title{font-size:32rpx;font-size:var(--cell-large-title-font-size, 32rpx)}.van-cell--large .van-cell__value{font-size:32rpx;font-size:var(--cell-large-value-font-size, 32rpx)}.van-cell--large .van-cell__label{font-size:28rpx;font-size:var(--cell-large-label-font-size, 28rpx)}
/*!**********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/popup/index.css ***!
\**********************************************************************************************************************************************************************************************************************/
.van-popup{position:fixed;box-sizing:border-box;max-height:100%;overflow-y:auto;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-animation:ease-out both;animation:ease-out both;z-index:1010;-webkit-overflow-scrolling:touch;background-color:#fff;background-color:var(--popup-background-color,#fff)}.van-popup--center{top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup--center.van-popup--round{border-radius:32rpx;border-radius:var(--popup-round-border-radius,32rpx)}.van-popup--top{top:0;left:0;width:100%}.van-popup--top.van-popup--round{border-radius:0 0 32rpx 32rpx;border-radius:0 0 var(--popup-round-border-radius,32rpx) var(--popup-round-border-radius,32rpx)}.van-popup--right{top:50%;right:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.van-popup--right.van-popup--round{border-radius:32rpx 0 0 32rpx;border-radius:var(--popup-round-border-radius,32rpx) 0 0 var(--popup-round-border-radius,32rpx)}.van-popup--bottom{bottom:0;left:0;width:100%}.van-popup--bottom.van-popup--round{border-radius:32rpx 32rpx 0 0;border-radius:var(--popup-round-border-radius,32rpx) var(--popup-round-border-radius,32rpx) 0 0}.van-popup--left{top:50%;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.van-popup--left.van-popup--round{border-radius:0 32rpx 32rpx 0;border-radius:0 var(--popup-round-border-radius,32rpx) var(--popup-round-border-radius,32rpx) 0}.van-popup--bottom.van-popup--safe{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.van-popup--safeTop{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.van-popup__close-icon{position:absolute;z-index:1010;z-index:var(--popup-close-icon-z-index,1010);color:#969799;color:var(--popup-close-icon-color,#969799);font-size:36rpx;font-size:var(--popup-close-icon-size, 36rpx)}.van-popup__close-icon--top-left{top:16rpx;top:var(--popup-close-icon-margin,16rpx);left:16rpx;left:var(--popup-close-icon-margin,16rpx)}.van-popup__close-icon--top-right{top:16rpx;top:var(--popup-close-icon-margin,16rpx);right:16rpx;right:var(--popup-close-icon-margin,16rpx)}.van-popup__close-icon--bottom-left{bottom:16rpx;bottom:var(--popup-close-icon-margin,16rpx);left:16rpx;left:var(--popup-close-icon-margin,16rpx)}.van-popup__close-icon--bottom-right{right:16rpx;right:var(--popup-close-icon-margin,16rpx);bottom:16rpx;bottom:var(--popup-close-icon-margin,16rpx)}.van-popup__close-icon:active{opacity:.6}.van-scale-enter-active,.van-scale-leave-active{-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.van-scale-enter,.van-scale-leave-to{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-fade-enter-active,.van-fade-leave-active{-webkit-transition-property:opacity;transition-property:opacity}.van-fade-enter,.van-fade-leave-to{opacity:0}.van-center-enter-active,.van-center-leave-active{-webkit-transition-property:opacity transform;transition-property:opacity transform}.van-center-enter,.van-center-leave-to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}.van-bottom-enter-active,.van-bottom-leave-active,.van-left-enter-active,.van-left-leave-active,.van-right-enter-active,.van-right-leave-active,.van-top-enter-active,.van-top-leave-active{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;transition-property:transform,-webkit-transform}.van-bottom-enter,.van-bottom-leave-to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.van-top-enter,.van-top-leave-to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.van-left-enter,.van-left-leave-to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.van-right-enter,.van-right-leave-to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}
/*!**********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/toast/index.css ***!
\**********************************************************************************************************************************************************************************************************************/
.van-toast{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:content-box;color:#fff;color:var(--toast-text-color,#fff);font-size:28rpx;font-size:var(--toast-font-size, 28rpx);line-height:40rpx;line-height:var(--toast-line-height, 40rpx);white-space:pre-wrap;word-wrap:break-word;background-color:rgba(26,26,26,.7);background-color:var(--toast-background-color,rgba(26,26,26,.7));border-radius:16rpx;border-radius:var(--toast-border-radius,16rpx)}.van-toast__container{position:fixed;top:50%;left:50%;width:-webkit-fit-content;width:fit-content;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1000;max-width:70%;max-width:var(--toast-max-width,70%)}.van-toast--text{min-width:192rpx;min-width:var(--toast-text-min-width,192rpx);padding:16rpx 24rpx;padding:var(--toast-text-padding,16rpx 24rpx)}.van-toast--icon{width:176rpx;width:var(--toast-default-width,176rpx);min-height:176rpx;min-height:var(--toast-default-min-height,176rpx);padding:32rpx;padding:var(--toast-default-padding,32rpx)}.van-toast--icon .van-toast__icon{font-size:72rpx;font-size:var(--toast-icon-size, 72rpx)}.van-toast--icon .van-toast__text{padding-top:16rpx}.van-toast__box{display:grid;text-align:center}.van-toast__loading{margin:20rpx 0}.van-toast--top{-webkit-transform:translate(0,-30vh);transform:translate(0,-30vh)}.van-toast--bottom{-webkit-transform:translate(0,30vh);transform:translate(0,30vh)}
/*!***********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/button/index.css ***!
\***********************************************************************************************************************************************************************************************************************/
@@ -42,6 +34,10 @@ taro-button-core{position:relative;display:block;margin-left:auto;margin-right:a
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/goods-action-button/index.css ***!
\************************************************************************************************************************************************************************************************************************************/
.van-goods-action-button{border-radius:0;height:80rpx;height:var(--goods-action-button-height,80rpx);line-height:40rpx;line-height:var(--goods-action-button-line-height, 40rpx);border-width:0}.van-goods-action-button--warning{background:-webkit-linear-gradient(left,#ffd01e,#ff8917);background:linear-gradient(to right,#ffd01e,#ff8917);background:var(--goods-action-button-warning-color,linear-gradient(to right,#ffd01e,#ff8917))}.van-goods-action-button--danger{background:-webkit-linear-gradient(left,#ff6034,#ee0a24);background:linear-gradient(to right,#ff6034,#ee0a24);background:var(--goods-action-button-danger-color,linear-gradient(to right,#ff6034,#ee0a24))}.van-goods-action-button--first{margin-left:10rpx;border-radius:999rpx 0 0 999rpx;border-radius:var(--goods-action-button-border-radius,999rpx) 0 0 var(--goods-action-button-border-radius,999rpx)}.van-goods-action-button--last{margin-right:10rpx;border-radius:0 999rpx 999rpx 0;border-radius:0 var(--goods-action-button-border-radius,999rpx) var(--goods-action-button-border-radius,999rpx) 0}.van-goods-action-button--first.van-goods-action-button--last{border-radius:999rpx;border-radius:var(--goods-action-button-border-radius,999rpx)}.van-goods-action-button--plain{background:#fff;background:var(--goods-action-button-plain-color,#fff)}.van-goods-action-button--plain+.van-goods-action-button--plain{border-left-width:0!important}.van-goods-action-button__inner{width:100%;font-weight:500!important;font-weight:var(--font-weight-bold,500)!important}
/*!**********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/popup/index.css ***!
\**********************************************************************************************************************************************************************************************************************/
.van-popup{position:fixed;box-sizing:border-box;max-height:100%;overflow-y:auto;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-animation:ease-out both;animation:ease-out both;z-index:1010;-webkit-overflow-scrolling:touch;background-color:#fff;background-color:var(--popup-background-color,#fff)}.van-popup--center{top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-popup--center.van-popup--round{border-radius:32rpx;border-radius:var(--popup-round-border-radius,32rpx)}.van-popup--top{top:0;left:0;width:100%}.van-popup--top.van-popup--round{border-radius:0 0 32rpx 32rpx;border-radius:0 0 var(--popup-round-border-radius,32rpx) var(--popup-round-border-radius,32rpx)}.van-popup--right{top:50%;right:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.van-popup--right.van-popup--round{border-radius:32rpx 0 0 32rpx;border-radius:var(--popup-round-border-radius,32rpx) 0 0 var(--popup-round-border-radius,32rpx)}.van-popup--bottom{bottom:0;left:0;width:100%}.van-popup--bottom.van-popup--round{border-radius:32rpx 32rpx 0 0;border-radius:var(--popup-round-border-radius,32rpx) var(--popup-round-border-radius,32rpx) 0 0}.van-popup--left{top:50%;left:0;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.van-popup--left.van-popup--round{border-radius:0 32rpx 32rpx 0;border-radius:0 var(--popup-round-border-radius,32rpx) var(--popup-round-border-radius,32rpx) 0}.van-popup--bottom.van-popup--safe{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}.van-popup--safeTop{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.van-popup__close-icon{position:absolute;z-index:1010;z-index:var(--popup-close-icon-z-index,1010);color:#969799;color:var(--popup-close-icon-color,#969799);font-size:36rpx;font-size:var(--popup-close-icon-size, 36rpx)}.van-popup__close-icon--top-left{top:16rpx;top:var(--popup-close-icon-margin,16rpx);left:16rpx;left:var(--popup-close-icon-margin,16rpx)}.van-popup__close-icon--top-right{top:16rpx;top:var(--popup-close-icon-margin,16rpx);right:16rpx;right:var(--popup-close-icon-margin,16rpx)}.van-popup__close-icon--bottom-left{bottom:16rpx;bottom:var(--popup-close-icon-margin,16rpx);left:16rpx;left:var(--popup-close-icon-margin,16rpx)}.van-popup__close-icon--bottom-right{right:16rpx;right:var(--popup-close-icon-margin,16rpx);bottom:16rpx;bottom:var(--popup-close-icon-margin,16rpx)}.van-popup__close-icon:active{opacity:.6}.van-scale-enter-active,.van-scale-leave-active{-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}.van-scale-enter,.van-scale-leave-to{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-fade-enter-active,.van-fade-leave-active{-webkit-transition-property:opacity;transition-property:opacity}.van-fade-enter,.van-fade-leave-to{opacity:0}.van-center-enter-active,.van-center-leave-active{-webkit-transition-property:opacity transform;transition-property:opacity transform}.van-center-enter,.van-center-leave-to{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}.van-bottom-enter-active,.van-bottom-leave-active,.van-left-enter-active,.van-left-leave-active,.van-right-enter-active,.van-right-leave-active,.van-top-enter-active,.van-top-leave-active{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;transition-property:transform,-webkit-transform}.van-bottom-enter,.van-bottom-leave-to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.van-top-enter,.van-top-leave-to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.van-left-enter,.van-left-leave-to{-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.van-right-enter,.van-right-leave-to{-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}
/*!*****************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/goods-action/index.css ***!
\*****************************************************************************************************************************************************************************************************************************/
@@ -50,6 +46,14 @@ taro-button-core{position:relative;display:block;margin-left:auto;margin-right:a
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/dialog/index.css ***!
\***********************************************************************************************************************************************************************************************************************/
.van-dialog{top:45%!important;overflow:hidden;width:640rpx;width:var(--dialog-width,640rpx);font-size:32rpx;font-size:var(--dialog-font-size, 32rpx);border-radius:32rpx;border-radius:var(--dialog-border-radius,32rpx);background-color:#fff;background-color:var(--dialog-background-color,#fff)}@media (max-width:642px){.van-dialog{width:90%;width:var(--dialog-small-screen-width,90%)}}.van-dialog taro-button-core+taro-button-core{margin-top:0}.van-dialog__header{text-align:center;padding-top:48rpx;padding-top:var(--dialog-header-padding-top,48rpx);font-weight:500;font-weight:var(--dialog-header-font-weight,500);line-height:48rpx;line-height:var(--dialog-header-line-height, 48rpx)}.van-dialog__header--isolated{padding:48rpx 0;padding:var(--dialog-header-isolated-padding,48rpx 0)}.van-dialog__message{overflow-y:auto;text-align:center;-webkit-overflow-scrolling:touch;font-size:28rpx;font-size:var(--dialog-message-font-size, 28rpx);line-height:40rpx;line-height:var(--dialog-message-line-height, 40rpx);max-height:60vh;max-height:var(--dialog-message-max-height,60vh);padding:48rpx;padding:var(--dialog-message-padding,48rpx)}.van-dialog__message-text{word-wrap:break-word}.van-dialog__message--hasTitle{padding-top:16rpx;padding-top:var(--dialog-has-title-message-padding-top,16rpx);color:#646566;color:var(--dialog-has-title-message-text-color,#646566)}.van-dialog__message--round-button{padding-bottom:32rpx;color:#323233}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__footer--round-button{position:relative!important;padding:16rpx 48rpx 32rpx!important}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__confirm{border:0!important;color:#576b95}.van-dialog__cancel{border:0!important;color:#646566}.van-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
/*!*********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/cell/index.css ***!
\*********************************************************************************************************************************************************************************************************************/
.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom::after,.van-hairline--left::after,.van-hairline--right::after,.van-hairline--surround::after,.van-hairline--top-bottom::after,.van-hairline--top::after,.van-hairline::after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}.van-cell{position:relative;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;-webkit-align-items:center;align-items:center;-webkit-flex:1;flex:1;padding:24rpx 32rpx;padding:var(--cell-vertical-padding,24rpx) var(--cell-horizontal-padding,32rpx);font-size:28rpx;font-size:var(--cell-font-size, 28rpx);line-height:48rpx;line-height:var(--cell-line-height, 48rpx);color:#323233;color:var(--cell-text-color,#323233);background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell::after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:' ';pointer-events:none;right:32rpx;bottom:0;left:32rpx;border-bottom:1PX solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-cell--borderless::after{display:none}.van-cell-group{background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell__label{margin-top:6rpx;margin-top:var(--cell-label-margin-top,6rpx);font-size:24rpx;font-size:var(--cell-label-font-size, 24rpx);color:#969799;color:var(--cell-label-color,#969799);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle;color:#969799;color:var(--cell-value-color,#969799)}.van-cell__title,.van-cell__value{-webkit-flex:1;flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:48rpx;height:var(--cell-line-height,48rpx);font-size:32rpx;font-size:var(--cell-icon-size, 32rpx)}.van-cell__left-icon-wrap{margin-right:8rpx;margin-right:var(--padding-base,8rpx)}.van-cell__right-icon-wrap{margin-left:8rpx;margin-left:var(--padding-base,8rpx);color:#969799;color:var(--cell-right-icon-color,#969799)}.van-cell__left-icon{vertical-align:middle;line-height:48rpx;line-height:var(--cell-line-height, 48rpx)}.van-cell__right-icon{line-height:48rpx;line-height:var(--cell-line-height, 48rpx)}.van-cell--clickable.van-cell--hover{-webkit-filter:brightness(0.95);filter:brightness(.95)}.van-cell--required{overflow:visible}.van-cell--required::before{position:absolute;content:'*';left:16rpx;left:var(--padding-xs,16rpx);font-size:28rpx;font-size:var(--cell-font-size, 28rpx);color:#ee0a24;color:var(--cell-required-color,#ee0a24)}.van-cell--center{-webkit-align-items:center;align-items:center}.van-cell--large{padding-top:24rpx;padding-top:var(--cell-large-vertical-padding,24rpx);padding-bottom:24rpx;padding-bottom:var(--cell-large-vertical-padding,24rpx)}.van-cell--large .van-cell__title{font-size:32rpx;font-size:var(--cell-large-title-font-size, 32rpx)}.van-cell--large .van-cell__value{font-size:32rpx;font-size:var(--cell-large-value-font-size, 32rpx)}.van-cell--large .van-cell__label{font-size:28rpx;font-size:var(--cell-large-label-font-size, 28rpx)}
/*!**********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/toast/index.css ***!
\**********************************************************************************************************************************************************************************************************************/
.van-toast{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:content-box;color:#fff;color:var(--toast-text-color,#fff);font-size:28rpx;font-size:var(--toast-font-size, 28rpx);line-height:40rpx;line-height:var(--toast-line-height, 40rpx);white-space:pre-wrap;word-wrap:break-word;background-color:rgba(26,26,26,.7);background-color:var(--toast-background-color,rgba(26,26,26,.7));border-radius:16rpx;border-radius:var(--toast-border-radius,16rpx)}.van-toast__container{position:fixed;top:50%;left:50%;width:-webkit-fit-content;width:fit-content;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1000;max-width:70%;max-width:var(--toast-max-width,70%)}.van-toast--text{min-width:192rpx;min-width:var(--toast-text-min-width,192rpx);padding:16rpx 24rpx;padding:var(--toast-text-padding,16rpx 24rpx)}.van-toast--icon{width:176rpx;width:var(--toast-default-width,176rpx);min-height:176rpx;min-height:var(--toast-default-min-height,176rpx);padding:32rpx;padding:var(--toast-default-padding,32rpx)}.van-toast--icon .van-toast__icon{font-size:72rpx;font-size:var(--toast-icon-size, 72rpx)}.van-toast--icon .van-toast__text{padding-top:16rpx}.van-toast__box{display:grid;text-align:center}.van-toast__loading{margin:20rpx 0}.van-toast--top{-webkit-transform:translate(0,-30vh);transform:translate(0,-30vh)}.van-toast--bottom{-webkit-transform:translate(0,30vh);transform:translate(0,30vh)}
/*!**********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].oneOf[0].use[2]!./node_modules/@antmjs/vantui/es/image/index.css ***!
\**********************************************************************************************************************************************************************************************************************/

2
dist/pages/activityList/components/details/index.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/pages/activityList/components/details/index.js.LICENSE.txt vendored
View File

@@ -20,6 +20,8 @@
/*! @antmjs/vantui/es/image */
/*! @antmjs/vantui/es/skeleton */
/*! @antmjs/vantui/es/toast */
/*! @tarojs/components */

2
dist/pages/home/index.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/pages/home/index.js.LICENSE.txt vendored
View File

@@ -70,6 +70,8 @@
/*! @antmjs/vantui/es/search */
/*! @antmjs/vantui/es/skeleton */
/*! @antmjs/vantui/es/swiper */
/*! @antmjs/vantui/es/swiper-item */

2
dist/vendors.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/vendors.js.LICENSE.txt vendored
View File

@@ -274,6 +274,10 @@
!*** ./node_modules/@antmjs/vantui/es/common/version.js ***!
\**********************************************************/
/*!**********************************************************!*\
!*** ./node_modules/@antmjs/vantui/es/skeleton/index.js ***!
\**********************************************************/
/*!**********************************************************!*\
!*** ./node_modules/@antmjs/vantui/es/transition/wxs.js ***!
\**********************************************************/

527
src/pages/activityList/components/details/index.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Cell, Dialog, Toast } from "@antmjs/vantui";
import { Button, Cell, Dialog, Skeleton, Toast } from "@antmjs/vantui";
import { Input, RichText, View } from "@tarojs/components";
import Taro, { getCurrentInstance, useShareTimeline } from "@tarojs/taro";
import react, { useEffect, useState } from "react";
@@ -161,7 +161,7 @@ const details = () => {
let newstatusName = "立即报名";
// 开放中
if (detailStatus === "1") {
if (status === "0" ) {
if (status === "0") {
newstatusName = "立即报名";
}
if (status === "4") {
@@ -185,70 +185,128 @@ const details = () => {
return newstatusName;
};
const canelActive = () => {
// 取消报名
let peopleArrItem = (dataSource?.peopleArr ?? []).map(
(item, index, arr) => {
if (item?.openid === openId) {
return {
...item,
status: "4", //报名后取消
};
} else {
return {
...item,
};
}
}
);
updateTableid({
tableName: "details",
id: id,
objData: {
// 删除用户报名记录
// useridArr: [
// ...(dataSource?.useridArr ?? []).filter(
// (value, index, arr) => {
// return value !== openId;
// }
// ),
// ],
// peopleArr: [
// ...(dataSource?.peopleArr ?? []).filter(
// (item, index, arr) => {
// return item?.openid !== openId;
// }
// ),
// ],
peopleArr: [...peopleArrItem],
},
okFun: (res: any) => {
Toast.success({
message: "取消成功",
selector: "#vanToast-demo2",
onClose: () => {
// 刷新数据
getDetail();
// 返回首页 [上一页]
// Taro.navigateBack({
// // url: "/pages/home/index",
// delta: 1,
// });
},
});
},
});
};
return (
<View className={`detailContent`}>
<View>
<View>{dataSource?.title}</View>
<Image
width="100%"
height="180px"
fit="cover"
// src="https://img.yzcdn.cn/vant/cat.jpeg"
src={dataSource?.images?.[0]?.url}
/>
<View>
{Object.keys(dataSource)?.length>0? <View className={`detailContent`}>
<View>
<Cell
icon="clock"
title={`开始时间 ${
dataSource?.startTime
? moment(dataSource?.startTime).format("YYYY-MM-DD HH:mm:ss")
: ""
}`}
// isLink
// linkType="navigateTo"
// url="/pages/dashboard/index"
/>
<Cell
icon="clock"
title={`结束时间 ${
dataSource?.endTime
? moment(dataSource?.endTime).format("YYYY-MM-DD HH:mm:ss")
: ""
}`}
// isLink
// linkType="navigateTo"
// url="/pages/dashboard/index"
/>
<Cell
isLink
icon="location"
title={`${dataSource?.address}`}
linkType="navigateTo"
url="/pages/dashboard/index"
onClick={() => {
Taro.openLocation({
latitude: dataSource?.latitude,
longitude: dataSource?.longitude,
scale: 18,
});
}}
<View>{dataSource?.title}</View>
<Image
width="100%"
height="180px"
fit="cover"
// src="https://img.yzcdn.cn/vant/cat.jpeg"
src={dataSource?.images?.[0]?.url}
/>
<View>
<Cell
icon="clock"
title={`开始时间 ${
dataSource?.startTime
? moment(dataSource?.startTime).format("YYYY-MM-DD HH:mm:ss")
: ""
}`}
// isLink
// linkType="navigateTo"
// url="/pages/dashboard/index"
/>
<Cell
icon="clock"
title={`结束时间 ${
dataSource?.endTime
? moment(dataSource?.endTime).format("YYYY-MM-DD HH:mm:ss")
: ""
}`}
// isLink
// linkType="navigateTo"
// url="/pages/dashboard/index"
/>
<Cell
isLink
icon="location"
title={`${dataSource?.address}`}
linkType="navigateTo"
url="/pages/dashboard/index"
onClick={() => {
Taro.openLocation({
latitude: dataSource?.latitude,
longitude: dataSource?.longitude,
scale: 18,
});
}}
/>
<Cell
icon="friends"
// title={`已报名人数 ${dataSource?.useridArr?.length ?? 0}`}
title={`已报名人数 ${(dataSource?.peopleArr??[]).filter((item:any)=>{
return item?.status ==='2'
})?.length>>0}`}
<Cell
icon="friends"
// title={`已报名人数 ${dataSource?.useridArr?.length ?? 0}`}
title={`已报名人数 ${
(dataSource?.peopleArr ?? []).filter((item: any) => {
return item?.status === "2";
})?.length >> 0
}`}
// isLink
// linkType="navigateTo"
// url="/pages/dashboard/index"
/>
</View>
// isLink
// linkType="navigateTo"
// url="/pages/dashboard/index"
/>
</View>
{/* 头像列表 */}
{/* <View className="imagesArr">
{/* 头像列表 */}
{/* <View className="imagesArr">
{[1, 2, 3, 4].map((item: any) => {
return (
<Image
@@ -261,207 +319,160 @@ const details = () => {
);
})}
</View> */}
</View>
{/* 富文本 */}
<View onClick={() => {}} className="RichText">
{/* <View>{dataSource?.[0]?.actTitle}</View> */}
</View>
{/* 富文本 */}
<View onClick={() => {}} className="RichText">
{/* <View>{dataSource?.[0]?.actTitle}</View> */}
<RichText nodes={dataSource?.richText} />
</View>
<RichText nodes={dataSource?.richText} />
</View>
<View>
<Dialog
id="vanDialog3"
title="长按二维码识别"
showCancelButton={false}
showConfirmButton={false}
// confirmButtonOpenType="getUserInfo"
show={show}
onClose={() => setShow(false)}
>
<View className="wechatCode">
<Image
showMenuByLongpress={true}
width={300}
height={300}
src={dataSource?.qrCode}
// src='cloud://citynew-0givkbre03955d8c.6369-citynew-0givkbre03955d8c-1253655588/images/touxiang/download-1.jpg'
></Image>
<Button
style={{ width: "130px", marginTop: "20px" }}
type="primary"
round
size="small"
onClick={() => {
setShow(false);
}}
>
关闭
</Button>
</View>
</Dialog>
</View>
{/* 调试按钮 */}
{/* <Cell title="组件调用" onClick={() => setShow(true)} /> */}
<View
className={`detailBtn`}
style={{ bottom: `${bottomheight ?? 0}px` }}
>
{/* style={{width:'375px'}} */}
<Button
type={disable ? "warning" : "primary"}
block
// disabled={disable}
onClick={() => {
if (disable) {
setShow(true);
return false;
}
// if (isCheckin) {
if (status === "2") {
// 取消报名
canelActive();
return false;
}
// 放鸽子
if (status === "4") {
Toast.fail({
message: "再次报名需审核!",
selector: "#vanToast-demo2",
duration: 2000,
onClose: () => {
// 跳转到目的页面，打开新页面
setShow(true);
},
});
return false;
}
let isin: any = phoneLogin();
if (!isin) {
//重新登录- 跳转到我的页面
Toast.fail({
message: "请先登录",
selector: "#vanToast-demo2",
duration: 2000,
onClose: () => {
// 跳转到目的页面，打开新页面
Taro.navigateTo({
url: "/pages/my/index",
});
},
});
} else {
console.log("id", id);
// 立即报名
let postData = {
// env: "any",
id: id,
tableName: "details",
objData: {
// ..._.cloneDeep(dataSource),
useridArr: [
..._.cloneDeep(dataSource?.useridArr ?? []),
openId,
],
peopleArr: [
..._.cloneDeep(dataSource?.peopleArr ?? []),
{
openid: openId,
status: "1", //待审核
},
],
},
okFun: (res: any) => {
console.log("res333", res);
// 报名成功
Toast.success({
message: "报名成功,审核中",
selector: "#vanToast-demo2",
onClose: () => {
setShow(true);
// 刷新数据
getDetail();
// 返回首页 [上一页]
// Taro.navigateBack({
// // url: "/pages/home/index",
// delta: 1,
// });
},
});
},
};
console.log("postData", postData);
updateTableid({ ...postData });
}
}}
>
{/* 立即参加 */}
{btnContent()}
{/* {`立即报名`} */}
</Button>
<Toast id="vanToast-demo2" />
</View>
</View>
:
<View>
<Dialog
id="vanDialog3"
title="长按二维码识别"
showCancelButton={false}
showConfirmButton={false}
// confirmButtonOpenType="getUserInfo"
show={show}
onClose={() => setShow(false)}
>
<View className="wechatCode">
<Image
showMenuByLongpress={true}
width={300}
height={300}
src={dataSource?.qrCode}
// src='cloud://citynew-0givkbre03955d8c.6369-citynew-0givkbre03955d8c-1253655588/images/touxiang/download-1.jpg'
></Image>
<Button
style={{ width: "130px", marginTop: "20px" }}
type="primary"
round
size="small"
onClick={() => {
setShow(false);
}}
>
关闭
</Button>
</View>
</Dialog>
</View>
{/* 调试按钮 */}
{/* <Cell title="组件调用" onClick={() => setShow(true)} /> */}
<View
className={`detailBtn`}
style={{ bottom: `${bottomheight ?? 0}px` }}
>
{/* style={{width:'375px'}} */}
<Button
type={disable ? "warning" : "primary"}
block
// disabled={disable}
onClick={() => {
if (disable) {
setShow(true);
return false;
}
// if (isCheckin) {
if (status === "2") {
// 取消报名
let peopleArrItem = (dataSource?.peopleArr ?? []).map(
(item, index, arr) => {
if (item?.openid === openId) {
return {
...item,
status: "4", //报名后取消
};
} else {
return {
...item,
};
}
}
);
updateTableid({
tableName: "details",
id: id,
objData: {
// 删除用户报名记录
// useridArr: [
// ...(dataSource?.useridArr ?? []).filter(
// (value, index, arr) => {
// return value !== openId;
// }
// ),
// ],
// peopleArr: [
// ...(dataSource?.peopleArr ?? []).filter(
// (item, index, arr) => {
// return item?.openid !== openId;
// }
// ),
// ],
peopleArr: [
...peopleArrItem
],
},
okFun: (res: any) => {
Toast.success({
message: "取消成功",
selector: "#vanToast-demo2",
onClose: () => {
// 刷新数据
getDetail();
// 返回首页 [上一页]
// Taro.navigateBack({
// // url: "/pages/home/index",
// delta: 1,
// });
},
});
},
});
return false;
}
// 放鸽子
if (status === "4") {
Toast.fail({
message: "再次报名需审核!",
selector: "#vanToast-demo2",
duration: 2000,
onClose: () => {
// 跳转到目的页面，打开新页面
setShow(true)
},
});
return false
}
let isin: any = phoneLogin();
if (!isin) {
//重新登录- 跳转到我的页面
Toast.fail({
message: "请先登录",
selector: "#vanToast-demo2",
duration: 2000,
onClose: () => {
// 跳转到目的页面，打开新页面
Taro.navigateTo({
url: "/pages/my/index",
});
},
});
} else {
console.log("id", id);
// 立即报名
let postData = {
// env: "any",
id: id,
tableName: "details",
objData: {
// ..._.cloneDeep(dataSource),
useridArr: [
..._.cloneDeep(dataSource?.useridArr ?? []),
openId,
],
peopleArr: [
..._.cloneDeep(dataSource?.peopleArr ?? []),
{
openid: openId,
status: "1", //待审核
},
],
},
okFun: (res: any) => {
console.log("res333", res);
// 报名成功
Toast.success({
message: "报名成功,审核中",
selector: "#vanToast-demo2",
onClose: () => {
setShow(true);
// 刷新数据
getDetail();
// 返回首页 [上一页]
// Taro.navigateBack({
// // url: "/pages/home/index",
// delta: 1,
// });
},
});
},
};
console.log("postData", postData);
updateTableid({ ...postData });
}
}}
>
{/* 立即参加 */}
{btnContent()}
{/* {`立即报名`} */}
</Button>
<Toast id="vanToast-demo2" />
</View>
{/* 骨架屏 */}
<Skeleton title={true} row={16} />
</View>}
</View>
);
};

38
src/pages/home/index.tsx
View File

@@ -6,6 +6,7 @@ import {
Grid,
GridItem,
Row,
Skeleton,
Tab,
Tabs,
Tag,
@@ -487,24 +488,28 @@ const Home = () => {
</Tabs> */}
{/* 截取数组2个活动 */}
{details?.length > 0 && (
{details?.length > 0 ? (
<View>
{(details?.reverse()?.splice(0, 2) ?? []).map((item: any, index: any) => {
return (
<View
onClick={() => {
console.log("Card");
Taro.navigateTo({
url: `/pages/activityList/components/details/index?id=${item?._id}`,
});
}}
>
{/* 活动卡片 */}
<ActiveCard dataSource={item} />
</View>
);
})}
{(details?.reverse()?.splice(0, 2) ?? []).map(
(item: any, index: any) => {
return (
<View
onClick={() => {
console.log("Card");
Taro.navigateTo({
url: `/pages/activityList/components/details/index?id=${item?._id}`,
});
}}
>
{/* 活动卡片 */}
<ActiveCard dataSource={item} />
</View>
);
}
)}
</View>
) : (
<Skeleton title={true} row={4} />
)}
{/* 直播live专区 */}
@@ -557,7 +562,6 @@ const Home = () => {
})
}}>订阅消息</View> */}
<Toast id="vanToast-demo2" />
<TabbarCom active={0} />