123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <style lang="less" scoped>
- .has-person {
- margin-left: 24rpx;
- height: 40rpx;
- width: 110rpx;
- border-radius: 20rpx;
- background: #edf1f5;
- display: flex;
- justify-content: center;
- align-items: center;
- .img-box {
- height: 32rpx;
- width: 32rpx;
- }
- .text-box {
- margin-left: 4rpx;
- font-family: Inter;
- font-size: 24rpx;
- font-weight: 400;
- line-height: 32rpx;
- color: #626c78;
- .notHas {
- color: #8b949e;
- }
- }
- }
- </style>
- <template>
- <div class="has-person">
- <image
- lazyload
- class="img-box"
- :src="imgType"
- />
- <div
- class="text-box"
- :class="{'notHas': !isPassengerPass}"
- >
- <span>{{isPassengerPass?'有人':'无人'}} </span>
- </div>
- </div>
- </template>
- <script>
- import wepy from '@wepy/core';
- import config from '@/config';
- wepy.component({
- props: {
- isPassengerPass: Boolean
- },
- data: {
- h5StaticPath: config.h5StaticPath + '/page-officehome/',
- imgType: ''
- },
- watch: {
- isPassengerPass: {
- handler(val) {
- this.imgType = val ? `${this.h5StaticPath}has_person.svg` : `${this.h5StaticPath}not_has_person.svg`
- },
- immediate: true
- }
- }
- })
- </script>
|