代码拉取完成,页面将自动刷新
同步操作将从 openGauss/blog 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<script setup lang="ts">
import { toRefs } from 'vue';
import IconChevronRight from '~icons/app/icon-chevron-right.svg';
const props = defineProps({
bread1: {
type: String,
default: '',
},
bread2: {
type: String,
default: '',
},
link1: {
type: String,
default: '#',
},
link2: {
type: String,
default: '#',
},
});
const { bread1, bread2, link1, link2 } = toRefs(props);
</script>
<template>
<div class="bread-crumbs">
<span>
<a :href="link1">{{ bread1 }}</a>
</span>
<OIcon>
<IconChevronRight />
</OIcon>
<span
><a :href="link2" :class="link2 === '#' ? 'no-click' : ''">{{
bread2
}}</a></span
>
<slot></slot>
</div>
</template>
<style lang="scss" scoped>
.bread-crumbs {
width: 100%;
font-size: var(--o-font-size-tip);
line-height: var(--o-line-height-tip);
display: flex;
align-items: center;
// @media (max-width: 768px) {
// height: var(--o-spacing-h4);
// }
span {
display: inline-block;
}
span:nth-of-type(1) {
a {
color: var(--o-color-text4);
}
}
span:nth-of-type(2) {
margin: 0 4px;
font-size: var(--o-font-size-h8);
}
span:nth-of-type(2),
span:nth-of-type(3) {
color: var(--o-color-text1);
a {
color: var(--o-color-text1);
}
.no-click {
cursor: default;
}
}
span:nth-of-type(3) {
max-width: calc(100% - 50px);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
</style>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。