79 lines
2.6 KiB
Vue
79 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
import Search from '@vicons/carbon/Search'
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<header>
|
|
<nav class="container">
|
|
<div class="start">
|
|
<svg fill="currentColor" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M158.165333 499.498667A42.496 42.496 0 0 0 170.666667 469.333333V256a42.666667 42.666667 0 0 1 42.666666-42.666667 42.666667 42.666667 0 0 0 0-85.333333C142.762667 128 85.333333 185.429333 85.333333 256v195.669333l-30.165333 30.165334a42.666667 42.666667 0 0 0 0 60.330666l30.165333 30.165334V768c0 70.570667 57.429333 128 128 128a42.666667 42.666667 0 0 0 0-85.333333 42.666667 42.666667 0 0 1-42.666666-42.666667v-213.333333a42.496 42.496 0 0 0-12.501334-30.165334L145.664 512l12.501333-12.501333zM978.090667 495.658667a42.709333 42.709333 0 0 0-9.258667-13.824L938.666667 451.669333V256c0-70.570667-57.429333-128-128-128a42.666667 42.666667 0 1 0 0 85.333333 42.666667 42.666667 0 0 1 42.666666 42.666667v213.333333a42.581333 42.581333 0 0 0 12.501334 30.165334l12.501333 12.501333-12.501333 12.501333A42.496 42.496 0 0 0 853.333333 554.666667v213.333333a42.666667 42.666667 0 0 1-42.666666 42.666667 42.666667 42.666667 0 1 0 0 85.333333c70.570667 0 128-57.429333 128-128v-195.669333l30.165333-30.165334a42.709333 42.709333 0 0 0 9.258667-46.506666zM669.738667 225.450667a42.752 42.752 0 0 0-69.546667 14.762666l-255.829333 512a42.624 42.624 0 0 0 23.893333 55.424 42.922667 42.922667 0 0 0 55.552-23.765333l255.786667-512a42.538667 42.538667 0 0 0-9.813334-46.421333z">
|
|
</path>
|
|
</svg>
|
|
<span>Backset</span>
|
|
</div>
|
|
<div class="middle">
|
|
<div class="search">
|
|
<a-input-search :style="{ width: '320px' }" placeholder="搜索" />
|
|
</div>
|
|
</div>
|
|
<div class="end">
|
|
<span>注册</span>
|
|
<span>登录</span>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
header {
|
|
height: 60px;
|
|
background: #24292f;
|
|
color: #d7d7d7;
|
|
|
|
nav {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr 1fr;
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
.start {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
width: 28px;
|
|
}
|
|
|
|
span {
|
|
padding-left: 10px;
|
|
font-size: 20px;
|
|
font-family: 'bs';
|
|
}
|
|
}
|
|
|
|
.middle {
|
|
text-align: right;
|
|
.arco-input-search{
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.end {
|
|
text-align: right;
|
|
|
|
span {
|
|
cursor: pointer;
|
|
margin-left: 30px;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |