refactor(components): 拆分 Top 组件

This commit is contained in:
xiongxiaoyang 2022-05-15 12:14:38 +08:00
parent 22076d1286
commit 1c344bd329
2 changed files with 51 additions and 38 deletions

View File

@ -1,49 +1,18 @@
<template> <template>
<div class="header"> <div class="header">
<Top />
<div class="topMain"> <Navbar />
<div class="box_center cf">
<a href="/" class="logo fl"><img :src="logo" alt="小说精品屋" /></a>
<div class="searchBar fl">
<div class="search cf">
<input
type="text"
placeholder="书名、作者、关键字"
class="s_int"
name="searchKey"
id="searchKey"
/>
<label class="search_btn" id="btnSearch" onclick="searchByK()"
><i class="icon"></i
></label>
</div>
</div>
<div class="bookShelf fr" id="headerUserInfo">
<a class="sj_link" href="/user/favorites.html">我的书架</a>
<span class="user_link"
><i class="line mr20">|</i
><a href="/user/login.html" class="mr15">登录</a
><a href="/user/register.html">注册</a></span
>
</div>
</div>
</div>
<Navbar/>
</div> </div>
</template> </template>
<script> <script>
import logo from "@/assets/images/logo.png"; import Navbar from "@/components/common/Navbar";
import Navbar from "@/components/common/Navbar" import Top from "@/components/common/Top";
export default { export default {
name: "Header", name: "Header",
components:{ components: {
Navbar Navbar,
}, Top,
setup() {
return {
logo
};
}, },
}; };
</script> </script>

View File

@ -0,0 +1,44 @@
<template>
<div class="topMain">
<div class="box_center cf">
<a href="/" class="logo fl"><img :src="logo" alt="小说精品屋" /></a>
<div class="searchBar fl">
<div class="search cf">
<input
type="text"
placeholder="书名、作者、关键字"
class="s_int"
name="searchKey"
id="searchKey"
/>
<label class="search_btn" id="btnSearch" onclick="searchByK()"
><i class="icon"></i
></label>
</div>
</div>
<div class="bookShelf fr" id="headerUserInfo">
<a class="sj_link" href="/user/favorites.html">我的书架</a>
<span class="user_link"
><i class="line mr20">|</i
><a href="/user/login.html" class="mr15">登录</a
><a href="/user/register.html">注册</a></span
>
</div>
</div>
</div>
</template>
<script>
import logo from "@/assets/images/logo.png";
export default {
name: "Top",
setup() {
return {
logo
};
},
};
</script>