89 lines
1.5 KiB
Vue
89 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<section class="header" :style="{background: `url(${options.img}) no-repeat`}">
|
||
|
|
<h2 class="mb-0 mb-md-3">{{ options.title }}</h2>
|
||
|
|
<h4>{{ options.subTitle }}</h4>
|
||
|
|
<div class="crumbs d-none d-md-block">
|
||
|
|
<ul class="container d-flex align-items-center">
|
||
|
|
<li>
|
||
|
|
<nuxt-link to="/">{{ $t('menu.Home') }}</nuxt-link>
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
{{ options.title }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'BannerTop',
|
||
|
|
props: {
|
||
|
|
options: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {
|
||
|
|
return {
|
||
|
|
title: '',
|
||
|
|
subTitle: '',
|
||
|
|
img: undefined
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.header {
|
||
|
|
height: 15rem;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #ffffff;
|
||
|
|
background-size: 100% 100% !important;
|
||
|
|
overflow: hidden;
|
||
|
|
h2 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-family: 'SourceHanSansCN-Heavy';
|
||
|
|
}
|
||
|
|
h4 {
|
||
|
|
font-size: .875rem;
|
||
|
|
}
|
||
|
|
.crumbs {
|
||
|
|
width: 100%;
|
||
|
|
height: 2.125rem;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
background: rgba(255,255,255,0.52);
|
||
|
|
ul {
|
||
|
|
line-height: 2.125rem;
|
||
|
|
a, li {
|
||
|
|
color: #3a3a3a;
|
||
|
|
font-size: .875rem;
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
margin-right: .3125rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 特殊样式小屏幕处理
|
||
|
|
@media screen and (max-width:400px) {
|
||
|
|
.header {
|
||
|
|
height: 5.5rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|