feat: 添加项目库组件并优化搜索页面样式和功能
新增项目库组件item-project，包含学校、专业、学费等信息的展示 优化搜索页面样式，调整分类项宽度和间距 修复搜索页面滚动定位问题，完善分页和URL参数处理 添加本地开发服务器脚本serve.ps1 更新public.css和public.less样式文件
This commit is contained in:
DESKTOP-RQ919RC\Pc
159
search.html
159
search.html
@@ -1,84 +1,89 @@
|
||||
<!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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<body>
|
||||
<div class="container" id="search" v-cloak>
|
||||
<div class="templateValue" ref="kwValue">香港</div>
|
||||
<div class="templateValue" ref="typeValue"></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 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>
|
||||
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
<script type="module" src="./js/search.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<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>
|
||||
Reference in New Issue
Block a user