50 lines
2.7 KiB
Vue
50 lines
2.7 KiB
Vue
<template>
|
|
<header class="flexacenter" id="pageHeader">
|
|
<div class="flexacenter top">
|
|
<a href="./index.html"><img class="logo" @click="handleLogo" alt="寄托问答" src="./img/logo.png" /></a>
|
|
<div class="right flexacenter flex1">
|
|
<div class="searchInput flexacenter">
|
|
<input class="input flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" />
|
|
<div class="clear-search flexacenter" v-if="isSearchMode">
|
|
<img class="cross-circle-black" @click="handleClickClear()" src="./img/cross-circle-black.png" />
|
|
<div class="halving-line"></div>
|
|
</div>
|
|
<img class="input-icon" src="./img/input-icon.png" @click="searchClick()" />
|
|
<div class="history-box" v-if="historicalSearchState" @click.stop="">
|
|
<div class="history-title">
|
|
历史搜索
|
|
</div>
|
|
<div class="history-list">
|
|
<div class="history-item ellipsis" v-for="(item, index) in historicalSearchList" :key="index" @click.stop="handleClickHistoricalItem(item)">{{ item }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn-list flexacenter">
|
|
<div class="item flex1" @click="handleMy('collect')">
|
|
我的收藏
|
|
</div>
|
|
<div class="item flex1" @click="handleMy('questions')">
|
|
我的提问
|
|
</div>
|
|
<div class="item flex1" @click="handleMy('answers')">
|
|
我的回答
|
|
</div>
|
|
</div>
|
|
<div class="add-btn flexcenter" @click="questionsInit()">
|
|
<img class="add-icon" src="./img/add-icon.svg" />
|
|
我要提问
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-box flexcenter" :class="{'tab-list-fixed': tabListFixeState}">
|
|
<div class="tab-list flexacenter">
|
|
<div class="item flexcenter" :class="{pitch: typePitch == null}" @click="cutType(null)">All</div>
|
|
<template v-for="(item, index) in typeList" :key="index">
|
|
<div class="halving-line">|</div>
|
|
<div class="item flexcenter" :class="{pitch: typePitch == it['id']}" v-for="it in item" :key="it" @click="cutType(it.id)">{{ it["name"] }}</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|