fd-gulp-convert-encoding/test/source/style-m-detail/modules/gallery/css/view.less

convert file to assigned charset

/**
 * 首屏大图
 */

@import "fav.less";
@import "share.less";

.swipe-img(){
    -webkit-user-drag: none;
    -webkit-user-select: none;
    max-width: 100%;
    // max-height: 100%;
}

.@{module}-gallery {
    .d-swipe {
        overflow: hidden;
        background-color: #fff;

        .swipe-content {
            .clearfix();
            min-height: rem(500);
            height: rem(500);
            overflow: hidden;
            text-align: center;
            // .flexbox();
            // .justify-content(center, center);
            // .align-items(center, center);

            .swipe-pane {
                position: relative;
                float: left;
                // .flexbox();
                // .justify-content(center, center);
                // .align-items(center, center);
                width: 100%;
                height: 310px;
                overflow: hidden;
                margin: -30px 0;
                line-height: 310px;
            }

            img {
                .swipe-img();
                margin: auto;
                // width: 100%;
                vertical-align: middle;
                visibility: hidden;
            }
        }

        .swipe-nav {
            .clearfix();
            position: relative;
            .flexbox();

            &.swipe-shadow {
                box-shadow: 0px -1px 16px #444;
            }

            li {
                .flex(1);
                height: rem(6);
                background-color: #ccc;

                &.active, &.activeSp {
                    background-color: #ff7300;
                }
            }
        }
    }

    .d-content {
        position: relative;

        // 无图
        .nopic {
            width: 100%;
            height: rem(500);
            background-color: #e6e6e6;
            line-height: rem(650);
            vertical-align: middle;
            text-align: center;

            img {
                width: rem(360);
                height: rem(180);
            }
        }

        // 伙拼icon、企业集采icon
        .icon-limited-group, .icon-centralized {
            display: block;
            position: absolute;
            top: 0;
            left: rem(30);
            background-size: contain;
            line-height: 200;
            overflow: hidden;

            &.icon-limited-group {
                width: rem(100);
                height: rem(62);
                background-image: url('../imgs/limited-group.png');
            }
            &.icon-centralized {
                width: rem(132);
                height: rem(53);
                background-image: url('../imgs/centralized.png');
            }
        }
    }
}

// 浮出层的轮播样式
.d-swipe-popup {
    overflow: hidden;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    .swipe-content {
        .flexbox();
        height: 100%;
        -webkit-box-lines: multiple;
        .align-items(center,center);
        text-align: center;
        
        .swipe-pane {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        img {
            .swipe-img();
        }
    }

    .swipe-nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;

        li {
            height: .375rem;
            width: .375rem;
            -webkit-border-radius: .375rem;
            border-radius: .375rem;
            margin: 0 .1rem;
            display: inline-block;
            background-color: rgba(100,100,100,.8);

            &.active {
                background-color: #ff7300;
            }
        }
    }

    .page-num {
        position: absolute;
        bottom: rem(30);
        right: rem(30);
        color: #fff;
        font-size: @sub-title-font-size;
    }
}