html52.com
我爱小程序-开发者交流社区

map中 conver-view通过slot=callout 里面的conver-view样式无效?

<map :scale="scale" style="width: 100%; height: 100%;" :enable-3D="false" :show-compass="false"
                layer-style="1" subkey="*****" enable-overlooking="false"
                :enable-satellite="false" :enable-traffic="false" :show-location="false" :latitude="latitude"
                :longitude="longitude" :markers="covers" @tap="tapMap" @callouttap="labeltap">
                <cover-view slot="callout">
                    <cover-view v-for="(item, index) in covers" :key="index">
                        <cover-view class="customCallout" :marker-id="item.id">
                            <cover-view class="content">
                                <cover-view>{{ item.title }}</cover-view>
                                <cover-view class="content-info">
                                        <cover-view class="content-enpty" v-if="!item.isFull">空:8个</cover-view>
                                        <cover-view class="content-full" v-if="item.isFull">满</cover-view>
                                        <cover-view class="content-price">¥1.22/度</cover-view>
                                </cover-view>
                            </cover-view>
                        </cover-view>
                    </cover-view>
                </cover-view>
            </map>
css 如下
.customCallout {
        background: linear-gradient(#5D75F5, #5d75f5d9);
        color: #fff;
        font-size: 12px;
        padding: 6px 7px 5px 7px;
        border-radius: 25rpx;
        .content-info{
        display: flex;
        padding: 10rpx 0 0 0;
        font-size: 14px;
        }
        .content-enpty {
            background: linear-gradient(#20BB2B , #78D67F);
            border-radius: 12px;
            padding: 0 8px;
            color: #fff;
            line-height: 24px;
        }


        .content-full {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(#F65353 , #F69F53 );
            text-align: center;
            line-height: 48rpx;
        }


        .content-price {
            line-height: 50rpx;
            padding-left: 10rpx;
        }
    }

模拟器上显示如图

模拟器上显示如图真机如图:

真机如图:

真机如图:

网友回复

茜茜又困了🐽:

cover-view 不支持使用背景渐变色,考虑使用渐变图代替吧

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付