@import "common/area-common.scss";
@import "common/swiper.scss";

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

    &.width-pc {
        padding-bottom: 0;
    }

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

    .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%;
    }

    .price {
        height: 45px;
        line-height: 45px;
        font-size: 26px;

        .cny {
            font-weight: bold;
            padding-right: 5px;
        }
    }

    .star-icon {
        display: inline-block;
        width: 210px;
        height: 23px;

        div {
            margin-right: 10px;
            float: left;
            width: 30px;
            height: 23px;

            @include sprite-image($crown-n);
            @include sprite-position($crown-n);
        }

        div.active {
            @include sprite-image($crown);
            @include sprite-position($crown);
        }
    }

    .comment-shop {
        height: 190px;
        margin-bottom: 20px;

        .left {
            float: left;
            position: relative;

            img {
                width: 190px;
                height: 190px;
            }

            .tag {
                width: 190px;
                height: 60px;
                line-height: 60px;
                font-size: 20px;
                color: #fff;
                position: absolute;
                top: 0;
                right: 0;
                padding-right: 15px;
                text-align: right;
                background-image: url("../images/area/top-bg.png");
                background-size: 100% 100%;
            }
        }

        .right {
            padding: 25px 30px;
            width: 500px;
            height: 140px;
            float: left;
            background-color: #fff;
            font-size: 26px;
            color: #1a1a1a;

            .name {
                font-size: 30px;
                height: 50px;
                line-height: 50px;
                color: #1a1a1a;
            }

            .location {
                height: 45px;
                line-height: 45px;
            }
        }
    }

    .comment-item-c {
        margin-bottom: 20px;
        background-color: #fff;
    }

    .comment-item {
        padding: 30px 35px 10px 0;
        border-bottom: solid 1px #e0e0e0;

        .left {
            width: 130px;
            float: left;
            min-height: 66px;

            .head-pic {
                width: 66px;
                height: 66px;
                border-radius: 33px;
                border: solid 2px #f6f6f6;
                margin-left: 30px;
            }
        }

        .right {
            float: left;
            width: 585px;

            .name {
                font-size: 30px;
                color: #1a1a1a;
                font-weight: bold;
                height: 66px;
                line-height: 66px;

                .ufo {
                    width: 52px;
                    height: 30px;
                    display: inline-block !important;
                    margin-left: 15px;
                }

                .time {
                    font-size: 20px;
                    color: #b0b0b0;
                    float: right;
                    font-weight: normal;
                }

                .clock-icon {
                    display: inline-block;
                    width: 18px;
                    height: 18px;

                    @include sprite-image($clock);
                    @include sprite-position($clock);
                }
            }

            .comment-words {
                margin-top: 10px;
                color: #1a1a1a;
                font-size: 26px;
                line-height: 40px;
                margin-bottom: 25px;
            }

            .pic-list {
                img {
                    width: 180px;
                    height: 180px;
                    float: left;
                    margin-right: 20px;
                    margin-bottom: 20px;
                }

                img:nth-child(3n) {
                    margin-right: 0;
                }
            }

            .pic-list.single {
                img {
                    width: 400px;
                    height: auto;
                }
            }
        }
    }

    .comment-follow {
        .comment-item {
            border-bottom: 0;
            padding-right: 0;
            padding-bottom: 0;

            .name {
                font-size: 30px;
                color: #89b374;
                height: 30px;
                line-height: 30px;
                font-weight: normal;
            }

            .head-pic {
                width: 76px;
                height: 76px;
                border-radius: 38px;
            }

            .right {
                border-bottom: solid 1px #e0e0e0;
                padding-right: 35px;
            }

            .time {
                font-size: 24px !important;
            }
        }
    }

    .more-comment {
        text-align: center;
        height: 60px;
        line-height: 60px;
        color: #1a1a1a;
        font-size: 26px;
    }

    .close-more {
        display: none;
    }
}

.big-pic-c {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #000;
        opacity: 0.6;
    }

    img {
        width: 690px;
        height: 690px;
        margin: 0 30px;
    }
}

.swiper-container {
    position: absolute;
    width: 750px;
    height: 690px;
    top: 50%;
    left: 0;
    margin-top: -345px;

    .swiper-slide {
        width: 750px;
        height: 690px;
    }
}