epmet-work-pc-chengyang/src/views/dataBoard/cpts/bread.vue

<template>
	<div>
		<div class="m-bread">
			<div class="line">
				<div class="line-left"></div>
				<div class="line-right"></div>
			</div>
			<div class="bread">
				<el-breadcrumb :separator="separator">
					<el-breadcrumb-item
						v-for="item in breadList"
						:key="item.path"
						:to="{ path: item.path }"
					>
						<span @click="handleClickItem(item)">{{
							item.meta.title
						}}</span>
					</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="line">
				<div class="line-left"></div>
				<div class="line-right"></div>
			</div>
		</div>
	</div>
</template>

<script>
import ScreenLoading from "./loading";
import { mapGetters } from "vuex";

export default {
	name: "bread",
	components: {
		ScreenLoading,
	},
	props: {
		//分隔符
		separator: {
			type: String,
			default: "/",
		},

		//面包屑列表
		breadList: {
			type: Array,
			default: () => {
				return [];
			},
		},
	},
	data() {
		return {
			pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
			pageNo: 1,
		};
	},
	watch: {},
	computed: {
		...mapGetters(["clientHeight", "iframeHeight"]),
	},
	mounted() {},

	created() {},

	methods: {
		handleClickItem(item) {
			this.$emit("tap", { item });
		},
	},
};
</script>

<style lang="scss" scoped>
.m-bread {
	padding: 0 0 15px 0;

	.bread {
		margin: 4px 0;
		padding: 8px 16px;
		height: 40px;
		background: rgba(26, 149, 255, 0.15);
		width: 100%;

		/deep/ .el-breadcrumb__item {
			line-height: 25px;
			font-size: 14px;
		}

		/deep/ .el-breadcrumb__item .el-breadcrumb__inner {
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}

		/deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner {
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.65);
		}

		.router_parents {
			line-height: 25px;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.65);

			.arrow {
				padding: 0 5px;
			}
		}
		.router_parents:hover {
			cursor: pointer;
		}

		.router_child {
			line-height: 25px;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.line {
		display: flex;
		width: 100%;

		.line-left {
			flex-grow: 0;
			flex-shrink: 0;
			flex-basis: 16px;
			height: 1px;
			background: #1a95ff;
		}
		.line-right {
			flex-grow: 1;
			flex-shrink: 1;
			flex-basis: 0px;
			height: 1px;
			background: rgba(26, 149, 255, 0.45);
		}
	}
}
</style>