.fun(@w, @h, @back) { width: @w; height: @h; background: @back; } .just(@flex, @just, @items) { display: @flex; justify-content: @just; align-items: @items; } .wrapPage { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fbfbfb; header { .fun(100%, 50px, #fa402d); .just(flex, space-between, center); >span { &:nth-child(1) { .fun(50px, 50px, rgba(0, 0, 0, 0)); .just(flex, center, center); font-size: 24px; font-weight: bolder; position: absolute; left: 0; top: 0; } &:nth-child(2) { flex: 1; .just(flex, center, center); font-size: 18px; font-weight: bold; } &:nth-child(3) { .fun(50px, 50px, rgba(0, 0, 0, 0)); .just(flex, center, center); font-size: 24px; font-weight: bolder; } } .searchBlock { .fun(100%, 50px, #fa402d); display: flex; justify-content: space-between; align-items: center; ::v-deep .van-search { background: transparent; width: 100%; height: 28px; padding-right: 0; padding-left: 0; .van-search__content { border-radius: 5px; } } .msgTips { display: block; width: 22px; height: 22px; background: url('../../assets/img/digitalPartyBuilding/messageTips.png') no-repeat center; background-size: 100%; margin: 0 16px; } .cancelOut { display: block; width: 22px; height: 22px; background: url('../../assets/img/digitalPartyBuilding/cancelOut.png') no-repeat center; background-size: 100%; margin: 0 16px; } ::v-deep .van-icon { display: block; font-size: 26px; margin: 0 16px; color: #fff; } } } section { flex: 1; // display: flex; flex-direction: column; overflow: auto; padding-bottom: 10px; } .backGo { font-size: 15px; height: 35px; line-height: 35px; padding: 0 12px; color: #fff; background: #fa402d; font-weight: bold; position: relative; border-bottom: 1px solid #c5c5c5; .arrowLeft { display: block; position: absolute; left: 5px; .van-icon { height: 35px; width: 35px; font-size: 20px; line-height: 35px; } } } }