98 lines
2.1 KiB
Vue
98 lines
2.1 KiB
Vue
<template>
|
||
<div class="web-header">
|
||
<!-- 菜单窗口 d-block d-sm-none"：在xs(默认宽度576px)展示 -->
|
||
<div class="categories-window-wrap d-block d-sm-none">
|
||
<CategoriesStarterButton :categories="categories"/>
|
||
</div>
|
||
<div class="content-wrap row">
|
||
<div class="title-wrap col-12 col-lg-6">
|
||
<h1>{{ title }}</h1>
|
||
<h2>{{ subTitle }}</h2>
|
||
</div>
|
||
<div class="search-wrap col-12 col-lg-6">
|
||
<SearchInput/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import SearchInput from './SearchInput'
|
||
import CategoriesStarterButton from './CategoriesStarterButton.vue'
|
||
|
||
export default {
|
||
name: 'WebHeader',
|
||
components: { CategoriesStarterButton, SearchInput },
|
||
props: {
|
||
categories: {
|
||
required: true
|
||
}
|
||
},
|
||
async setup () {
|
||
return {
|
||
title: import.meta.env.VITE_SITE_TITLE,
|
||
subTitle: import.meta.env.VITE_SITE_SUB_TITLE
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "@/assets/style/variables";
|
||
.web-header {
|
||
padding: 50px 0;
|
||
background: linear-gradient(to bottom, var(--primary-color), var(--primary-color-light));
|
||
color: var(--color-white);
|
||
position: relative;
|
||
.content-wrap {
|
||
max-width: var(--page-width);
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
background-color: transparent;
|
||
// 标题
|
||
.title-wrap {
|
||
flex-grow: 1;
|
||
text-align: center;
|
||
h1,h2 {
|
||
margin: 0;
|
||
}
|
||
h1 {
|
||
font-size: 42px;
|
||
}
|
||
h2 {
|
||
color: var(--primary-color-light-deep);
|
||
font-size: var(--font-size-base)
|
||
}
|
||
a {
|
||
color: var(--primary-color-light-deep);
|
||
}
|
||
}
|
||
// 搜索
|
||
.search-wrap {
|
||
flex-shrink: 0;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
.categories-window-wrap {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
}
|
||
}
|
||
@media (max-width: $--mobile-max-width) {
|
||
.web-header {
|
||
background-size: auto 100%;
|
||
}
|
||
.title-wrap {
|
||
h1 {
|
||
font-size: 26px!important;
|
||
}
|
||
h2 {
|
||
font-size: 12px!important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|