<template>
    <div class="title-top-box">
        <div class="breadcrumb-box">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item v-for="(item, i) in storeData" :key="i" :to="{ path: item.path }">
                    <span class="breadcrumb-text">
                        {{ item.title }}
                    </span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="dis-f al-item jus-bet title-box">
            <div class="detail-title">
                房东直租 | 中城浸教公大理公，近地铁，新装修，两房一厅，采光通风好，设备齐全拎包入住
            </div>
            <div class="tool-btn-box dis-f al-item">
                <div class="btn-s dis-f al-item jus-x">
                    <img src="../../assets/img/detail/collect.png" class="img" alt="">
                    <img src="../../assets/img/detail/collectT.png" v-show="false" class="img" alt="">
                    <span class="mg-l-5">
                        {{'收藏'}}
                    </span>
                </div>
                <div class="line">

                </div>
                <div class="btn-s dis-f al-item jus-x">
                    <img src="../../assets/img/detail/forward.png" class="img" alt="">
                    <span class="mg-l-5">
                        转发
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, onMounted, ref, defineProps } from 'vue'
import store from '@/store'

defineProps({
    data: {
        type: Array,
        default: function () {
            return []
        }
    }
})

//导航数据
let storeData = store.state.routeList
console.log(storeData)

</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;
}

.title-top-box {
    width: 1200px;
    height: 186px;
    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;
    transform: translateY(-38px);

    .breadcrumb-box {
        padding: 20px;
        border-bottom: 1px solid #ebebeb;

        .breadcrumb-text {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            color: #AAAAAA;
        }
    }

    .title-box {
        padding: 20px 20px 25px 20px;

        .detail-title {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 24px;
            color: #000000;
            line-height: 35px;
            width: 820px;
        }

        .tool-btn-box {
            width: 244px;
            height: 48px;
            background: inherit;
            background-color: rgba(246, 246, 246, 1);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(235, 235, 235, 1);
            border-radius: 9px;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            font-size: 14px;
            justify-content: center;

            .mg-l-5{
                margin-left: 5px;
            }

            .btn-s {
                color: #333333;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                text-align: center;
                width:80px;
                height:40px;
                line-height:40px;
                cursor: pointer;
                .img{
                    width:20px;
                    height:20px;
                }
            }

            .line {
                width: 1px;
                height: 21px;
                background: #d7d7d7;
                margin:0 15px;
            }
        }
    }


}
</style>
  