65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="web-header">
|
||
|
|
<div class="content-wrap">
|
||
|
|
<div class="title-wrap">
|
||
|
|
<h1>{{ title }}</h1>
|
||
|
|
<h2>{{ subTitle }}</h2>
|
||
|
|
</div>
|
||
|
|
<div class="search-wrap">
|
||
|
|
<SearchInput/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import SearchInput from './SearchInput'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'WebHeader',
|
||
|
|
components: { SearchInput },
|
||
|
|
async setup () {
|
||
|
|
return {
|
||
|
|
title: import.meta.env.VITE_SITE_TITLE,
|
||
|
|
subTitle: import.meta.env.VITE_SITE_SUB_TITLE
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.web-header {
|
||
|
|
padding: 50px 0;
|
||
|
|
background: linear-gradient(to bottom, var(--primary-color), var(--primary-color-light));
|
||
|
|
color: var(--color-white);
|
||
|
|
.content-wrap {
|
||
|
|
width: var(--page-width);
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
background-color: transparent;
|
||
|
|
// 标题
|
||
|
|
.title-wrap {
|
||
|
|
flex-grow: 1;
|
||
|
|
h1,h2 {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
font-size: 42px;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
color: var(--primary-color-light-deep);
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
color: var(--primary-color-light-deep);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 搜索
|
||
|
|
.search-wrap {
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|