wux-weapp/src/image/index.less

一套组件化、可复用、易扩展的微信小程序 UI 组件库

@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-image {
    position: relative;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;

    &--rounded {
        border-radius: @border-radius-base;
    }

    &--circle {
        border-radius: 50%;
    }

    &--thumbnail {
        background-color: @component-background;
        border-radius: @border-radius-base;

        &::after {
            .hairline(@border-color-split);

            border-width: @border-width-base;
            border-radius: 8px;
        }
    }

    &--thumbnail &__inner,
    &--thumbnail &__mask {
        top: 4px;
        right: 4px;
        bottom: 4px;
        left: 4px;
        width: calc(~"100% - 8px") !important;
        height: calc(~"100% - 8px") !important;
    }

    &--widthFix &__inner {
        position: relative;
    }

    image,
    &__thumb {
        display: inline-block;
        overflow: hidden;
        width: 100%;
        height: 100%;
        vertical-align: middle;
    }

    &__inner {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    &--loaded &__inner {
        opacity: 1;
    }

    &__mask {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;

        &--text {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    &__text {
        color: @text-color-secondary;
        text-align: center;
        padding: 10px;
    }
}