5cdbeb249f
- 使用sticky定位替代fixed定位，提升滚动体验 - 添加视频播放图标和图片展示功能 - 实现搜索框热门关键词轮播效果 - 优化编辑器链接插入功能 - 调整组件样式和布局细节
85 lines
4.0 KiB
HTML
85 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>搜索</title>
|
|
<link rel="stylesheet" href="./css/public.css" />
|
|
<link rel="stylesheet" href="./css/search.css" />
|
|
<script src="./js/vue.global.js"></script>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container" id="search" v-cloak>
|
|
<div class="templateValue" ref="kwValue">香港</div>
|
|
<div class="templateValue" ref="typeValue"></div>
|
|
|
|
<div class="head-top flexacenter">
|
|
<img class="logo" src="https://oss.gter.net/logo" alt="" />
|
|
<div class="flex1"></div>
|
|
</div>
|
|
<div class="search-box flexacenter">
|
|
<input class="search-input flex1" placeholder="请输入搜索关键词" v-model="kw" @keyup.enter="startSearch" />
|
|
<img class="search-icon" src="./img/search-icon.svg" alt="" @click="startSearch" />
|
|
</div>
|
|
|
|
<div class="classify flexacenter">
|
|
<div class="item" :class="{'pitch': key == tabValue}" v-for="(item, key) in tabList" :key="key" @click="cutTab(key)">{{ item }}</div>
|
|
</div>
|
|
|
|
<div class="quantity flexacenter">
|
|
{{ tabList[tabValue] }}
|
|
<div class="line"></div>
|
|
共
|
|
<div class="num">{{ count }}</div>
|
|
条
|
|
</div>
|
|
|
|
<div class="matter flexflex">
|
|
<div class="matter-content flex1" :style="{'top': matterHeight + 'px'}">
|
|
<div class="list-box" v-if="list.length != 0">
|
|
<template v-for="(item,index) in list" :key="index">
|
|
<item-offer v-if=" item.type == 'offer'" :itemdata="item"></item-offer>
|
|
<item-summary v-else-if="item.type == 'offer_summary'" :itemdata="item"></item-summary>
|
|
<item-vote v-else-if="item.type == 'vote'" :itemdata="item"></item-vote>
|
|
<item-mj v-else-if="item.type == 'interviewexperience'" :itemdata="item"></item-mj>
|
|
<item-tenement v-else-if="item.type == 'tenement'" :itemdata="item"></item-tenement>
|
|
<item-forum v-else :itemdata="item"></item-forum>
|
|
</template>
|
|
</div>
|
|
|
|
<div v-if="list.length == 0 && page == null" class="empty flexcenter">
|
|
<img class="empty-icon" src="./img/empty-icon.png" />
|
|
<div class="empty-text">- 暂无内容 -</div>
|
|
</div>
|
|
|
|
<div class="pages-box flexcenter" v-if="pagination.length != 0">
|
|
<img v-if="page == 1" class="arrows" src="./img/arrows-gray-simple.svg" alt="" />
|
|
<img @click="prevPage" v-else class="arrows rotate180" src="./img/arrows-gray-deep.svg" alt="" />
|
|
|
|
<div class="item" :class="{'pitch': item == page }" v-for="(item, index) in pagination" @click="cutPage(item)">{{ item }}</div>
|
|
|
|
<img v-if="page == maxPage" class="arrows rotate180" src="./img/arrows-gray-simple.svg" alt="" />
|
|
<img @click="nextPage" v-else v-else class="arrows" src="./img/arrows-gray-deep.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-box" :style="{'top': sidebarHeight + 'px'}">
|
|
<hot-search></hot-search>
|
|
<hot-tag></hot-tag>
|
|
<slideshow-box></slideshow-box>
|
|
<latest-list></latest-list>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./js/axios.min.js"></script>
|
|
<script src="./js/public.js"></script>
|
|
<script type="module" src="./js/search.js"></script>
|
|
</body>
|
|
</html>
|