40d06c180f
新增项目库组件item-project，包含学校、专业、学费等信息的展示 优化搜索页面样式，调整分类项宽度和间距 修复搜索页面滚动定位问题，完善分页和URL参数处理 添加本地开发服务器脚本serve.ps1 更新public.css和public.less样式文件
89 lines
3.9 KiB
HTML
89 lines
3.9 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-project v-if="item.type == 'programs'" :itemdata="item"></item-project>
|
|
<item-offer v-else-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> |