<template> <div class="breadcrumb-t"> <div class="breadcrumb"> <div class="br-top"> <el-breadcrumb separator="/" v-if="$route.path != '/index'" separator-class="el-icon-arrow-right" > <el-breadcrumb-item ><a href="https://szzf.qingtian.gov.cn:18080" target="_parent" >首页</a ></el-breadcrumb-item > <el-breadcrumb-item>{{ breadData.page_name }}</el-breadcrumb-item> </el-breadcrumb> <div> <i class="iconfont icon-chengshi"></i> <span>牵头单位:{{ breadData.leading }}</span> </div> </div> </div> <div class="line" v-if="show"></div> <div class="breadcrumb-text" v-if="show"> <div class="breadcrumb-title"> <img src="../assets/images/target.png" alt="" /> <span>年度目标</span> <div class="s-line"></div> {{ breadData.annual_target }} </div> </div> <div class="flex acenter jcenter shoez" @click="shows"> <div class="flex acenter jcenter showt"> <div>年度目标</div> <!-- <img :src="show?'../assets/images/bottom.png': '../assets/images/topArrow.png'" alt="" /> --> <img src="../assets/images/bottom.png" alt="" v-if="!show"> <img src="../assets/images/topArrow.png" alt="" v-else> </div> </div> </div> </template> <script> export default { name: "breadcrumb", props: { breadData: { type: Object, }, }, data() { return { show: true }; }, methods: { shows() { this.show = ! this.show } } }; </script> <style lang='scss' scoped> .breadcrumb-t { position: relative; background:#fff; border-radius: 6px; } .breadcrumb { width: 100%; box-sizing: border-box; background-color: #fff; border-radius: 4px; padding: 16px 20px 0; margin-bottom: 16px; >>> .el-breadcrumb__inner { color: #333; font-weight: bold; font-size: 18px; a { font-weight: 400; font-size: 16px; } } .br-top { display: flex; justify-content: space-between; align-items: center; } } .breadcrumb-text { padding: 16px 20px 0; } .breadcrumb-title { display: flex; align-items: center; color: #333; span { color: #1492ff; margin-right: 8px; font-size: 18px; } .s-line { width: 1px; height: 15px; background: #ddd; margin-right: 10px; } } .breadcrumb-title img { width: 24px; height: auto; } .breadcrumb-title h2 { font-weight: 600; font-size: 24px; margin-right: 20px; } .line { width: 100%; height: 1px; background: #ddd; transform: scaleY(0.5); } .shoet { width: 150px; height: 24px; position: relative; } .shoez { // position: absolute; bottom: 0; height: 24px; } .showt { color: #999; background: #eee; position: relative; bottom: -1px; img { width: 15px; height: 15px; margin-left: 5px; z-index: 10; } } .showt:after { position: absolute; left: 0; top: -19px; width: 0; height: 0; margin-left: -20px; content: " "; border-bottom: 20px solid #eee; border-left: 20px solid transparent; border-top: 20px solid transparent; } .showt:before { position: absolute; right: 0; top: -19px; width: 0; height: 0; margin-right: -20px; content: " "; border-bottom: 20px solid #eee; border-right: 20px solid transparent; border-top: 20px solid transparent; } </style>