area-shop-detail.scss 3.8 KB
@import 'common/area-common.scss';

.shop-detail-page {
    width: 750px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #556f48;
    padding-bottom: 80px;

    .header {
        width: 750px;
        height: 355px;
        background-image: url('../images/area/shop_header.jpg');
        background-size: 100% 100%;
    }

    .city-list {
        line-height: 0;
        font-size: 0;
        padding: 17px 15px 17px;

        .list-item {
            display: inline-block;
            font-size: 18px;
            color: #fff;
            width: 130px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border: solid 2px #89b374;
            margin: 0 5px 10px;

            &.all {
                background-color: #89b374;
            }
        }
    }

    .shop-item {
        margin-bottom: 20px;

        .shop-pic {
            width: 750px;
            height: 300px;
            position: relative;

            img {
                width: 100%;
                height: 100%;
            }

            .name {
                width: 750px;
                height: 150px;
                text-align: center;
                color: #fff;
                position: absolute;
                left: 0;
                top: 0;
                padding: 75px 0;

                .en {
                    font-size: 62px;
                    line-height: 80px;
                    height: 80px;
                    overflow: hidden;
                }

                .ch {
                    font-size: 40px;
                    line-height: 70px;
                    height: 70px;
                    overflow: hidden;
                }
            }
        }

        .shop-list {
            line-height: 0;
            font-size: 0;
            padding-top: 20px;
            background-color: #fff;

            .more {
                .list-item {
                    background-color: #000;
                    color: #fff;
                    font-size: 46px;
                    line-height: 224px;
                    text-align: center;
                }
            }

            .list-item {
                margin-left: 20px;
                margin-bottom: 20px;
                display: inline-block;
                width: 224px;
                height: 224px;
                position: relative;
            }

            .new {
                width: 80px;
                height: 40px;
                background-image: url('../images/area/new.png');
                position: absolute;
                top: 10px;
                left: -4px;
                background-size: 100% 100%;
            }

            .pic {
                width: 100%;
                height: 100%;
            }

            .bg {
                height: 42px;
                width: 224px;
                background-color: #000;
                position: absolute;
                bottom: 0;
                left: 0;
                opacity: 0.5;
            }

            .title {
                font-size: 24px;
                height: 42px;
                line-height: 42px;
                width: 224px;
                color: #fff;
                overflow: hidden;
                text-align: center;
                position: absolute;
                bottom: 0;
                left: 0;
            }

            .type {
                font-size: 24px;
                color: #fff;
                line-height: 60px;
                position: absolute;
                right: 13px;
                top: 0;
            }
        }
    }

    .download {
        width: 750px;
        height: 155px;
        position: fixed;
        left: 50%;
        margin-left: -375px;
        bottom: 0;
        background-image: url('../images/area/download.png');
        background-size: 100% 100%;
    }
}