gterFang/src/views/detail.vue

<template>
    <div>
        <pageTopBar></pageTopBar>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
                <breadcrumb></breadcrumb>
                <div class="dis-f jus-bet" style="transform: translateY(-15px);">
                    <div class="info-box">
                        <div class="detail-price-box">
                            <span class="unit">HK$</span><span class="rent">123456</span><span>/月</span>
                        </div>
                        <div class="dis-f al-item detail-condition-box">
                            <div class="condition condition-border">
                                <div class="dis-f al-item">
                                    <div class="icon">

                                    </div>
                                    整租
                                </div>
                                <div class="type-text">
                                    两房
                                </div>
                            </div>
                            <div class="condition condition-border">
                                <div class="dis-f al-item">
                                    <div class="icon">

                                    </div>
                                    租期
                                </div>
                                <div class="type-text">
                                    一年
                                </div>
                            </div>
                            <div class="condition condition-border">
                                <div class="dis-f al-item">
                                    <div class="icon">

                                    </div>
                                    起租日期
                                </div>
                                <div class="type-text">
                                    随时
                                </div>
                            </div>
                        </div>
                        <div class="image-box">
                            <div class="dis-f al-item">
                                <img src="../assets/img/detail/videoIcon.png" class="img-video" alt="">
                                <div class="num-box">1</div>
                                <img src="../assets/img/detail/imageIcon.png" class="img-icon" alt="">
                                <div class="num-box">2</div>
                            </div>
                            <div></div>
                        </div>
                    </div>
                    <div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>
        <footerTool></footerTool>
    </div>

    <!-- 右下角咨询 -->
    <circle-btn></circle-btn>
</template>
  
<script setup>
import { reactive, onMounted, ref } from 'vue'
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import circleBtn from '@/components/public/circle-btn.vue'
import api from "../utils/api";
import footerTool from '@/components/footer/footer.vue'
import breadcrumb from '../components/detail/breadcrumb.vue'



</script>
<style scoped>
img {
    object-fit: contain;
}

.dis-f {
    display: flex;
}

.jus-x {
    justify-content: center;
}

.al-item {
    align-items: center;
}

.pos-r {
    position: relative;
}

.body-maxWidth {
    width: 1200px;
    min-width: 1200px;
}

.s-w-100 {
    width: 100%;
}

.jus-bet {
    justify-content: space-between;
}

.info-box {
    width: 876px;
    height: 1650px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(235, 235, 235, 1);
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    font-size: 14px;
    padding: 30px 20px;

    .detail-price-box {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #555555;

        .rent {
            font-family: 'Arial-Black', 'Arial Black', sans-serif;
            font-weight: 900;
            font-size: 28px;
            color: #F95D5D;
            margin: 0 5px;
        }

        .unit {
            font-family: 'Arial-Black', 'Arial Black', sans-serif;
            font-weight: 900;
            color: #000000;
        }
    }

    .detail-condition-box {
        width: 816px;
        height: 80px;
        background: inherit;
        background-color: rgba(246, 246, 246, 1);
        border: none;
        border-radius: 12px;
        margin-top: 30px;

        .condition-border {
            border-right: 1px solid #ebebeb;
        }

        .condition {
            padding: 15px 0;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #7F7F7F;
            width: 272px;

            .icon {
                border: 6px solid #61b1fc;
                border-top: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 6px solid transparent;
                margin-right: 10px;
            }

            .type-text {
                margin-top: 8px;
                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                font-weight: 650;
                font-style: normal;
                font-size: 17px;
                color: #000000;
                margin-left: 22px;
            }
        }
    }

    .image-box {
        margin-top: 35px;

        .img-video {
            width: 26px;
            height: 26px;
            margin-right:5px;
        }

        .img-icon {
            width: 22px;
            height: 22px;
            margin:0 5px 0 10px
        }

        .num-box {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background:#fdda55;
            line-height:20px;
            text-align:center;
            color: #333333;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
        }
    }
}
</style>