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>
<div class="header">
<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>
<Navbar/>
<Top />
<Navbar />
</div>
</template>
<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 {
name: "Header",
components:{
Navbar
},
setup() {
return {
logo
};
components: {
Navbar,
Top,
},
};
</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>