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>
|