update
This commit is contained in:
parent
31a770ebe4
commit
f8f7249465
@ -180,6 +180,8 @@ body.light-mode .video-bg:before {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.header-menu {
|
.header-menu {
|
||||||
|
width: 734px;
|
||||||
|
overflow-x: scroll;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
src/assets/img/null.png
Normal file
BIN
src/assets/img/null.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@ -6,17 +6,36 @@
|
|||||||
v-if="tabList.length>0" :key="item.index" :to="item.path">{{ item.libel }}
|
v-if="tabList.length>0" :key="item.index" :to="item.path">{{ item.libel }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<div class="search-bar">
|
<!-- <div class="search-bar">-->
|
||||||
<input type="text" placeholder="Search">
|
<!-- <input type="text" placeholder="Search">-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<el-dialog
|
||||||
|
class="dialog"
|
||||||
|
center
|
||||||
|
:show-close="false"
|
||||||
|
:visible.sync="searchDialog"
|
||||||
|
width="360px"
|
||||||
|
append-to-body
|
||||||
|
:close-on-click-modal="true" >
|
||||||
|
<div style="display: flex;align-items: center">
|
||||||
|
<SearchInput></SearchInput>
|
||||||
</div>
|
</div>
|
||||||
|
</el-dialog>
|
||||||
<div class="header-profile">
|
<div class="header-profile">
|
||||||
|
|
||||||
|
<el-tooltip class="item" effect="dark" content="搜索" placement="bottom">
|
||||||
|
<div class="search-div">
|
||||||
|
<i class="search el-icon-search" @click="openSearchDialog"></i>
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip class="item" effect="dark" content="公告" placement="bottom">
|
||||||
<div class="notification">
|
<div class="notification">
|
||||||
<span class="notification-number">3</span>
|
<span class="notification-number">3</span>
|
||||||
<div class="notice-div">
|
<div class="notice-div">
|
||||||
<i class="notice el-icon-message-solid"></i>
|
<i class="notice el-icon-message-solid"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
<el-tooltip class="item" effect="dark" content="上传书签" placement="bottom">
|
<el-tooltip class="item" effect="dark" content="上传书签" placement="bottom">
|
||||||
<div class="upload-div" @click="upload">
|
<div class="upload-div" @click="upload">
|
||||||
<i class="upload el-icon-upload"></i>
|
<i class="upload el-icon-upload"></i>
|
||||||
@ -253,11 +272,11 @@ import $ from 'jquery'
|
|||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import {mapMutations} from "vuex";
|
import {mapMutations} from "vuex";
|
||||||
// import {getUserIP} from '@/utils/getIp'
|
import SearchInput from "@/components/home/SearchInput.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "HomeHeader",
|
name: "HomeHeader",
|
||||||
components: {},
|
components: {SearchInput},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
visible: false,
|
||||||
@ -319,13 +338,14 @@ export default {
|
|||||||
},
|
},
|
||||||
userToken: '',
|
userToken: '',
|
||||||
isLogin: true,
|
isLogin: true,
|
||||||
ip:'',
|
searchDialog:false,
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.isLogin = !localStorage.getItem("Authorization");
|
this.isLogin = !localStorage.getItem("Authorization");
|
||||||
this.toggleActive();
|
this.toggleActive();
|
||||||
this.reacherBarFun();
|
// this.reacherBarFun();
|
||||||
this.changeImg();
|
this.changeImg();
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -333,6 +353,20 @@ export default {
|
|||||||
computed: {},
|
computed: {},
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(['changeLogin', 'setUserId', 'setUserRole']),
|
...mapMutations(['changeLogin', 'setUserId', 'setUserRole']),
|
||||||
|
openSearchDialog(){
|
||||||
|
if(localStorage.getItem('userId') && localStorage.getItem('Authorization')){
|
||||||
|
this.searchDialog=true;
|
||||||
|
}else{
|
||||||
|
Vue.prototype.$notify.info({
|
||||||
|
title: '提示',
|
||||||
|
message: "登录状态失效，请重新登录！",
|
||||||
|
offset: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
upload(){
|
upload(){
|
||||||
if(localStorage.getItem('Authorization')&&localStorage.getItem('userId')){
|
if(localStorage.getItem('Authorization')&&localStorage.getItem('userId')){
|
||||||
@ -340,7 +374,7 @@ export default {
|
|||||||
path:'/importExport',
|
path:'/importExport',
|
||||||
})
|
})
|
||||||
}else {
|
}else {
|
||||||
Vue.prototype.$notify.error({
|
Vue.prototype.$notify.info({
|
||||||
title: '错误',
|
title: '错误',
|
||||||
message: "登录状态失效，请重新登录！",
|
message: "登录状态失效，请重新登录！",
|
||||||
offset: 0
|
offset: 0
|
||||||
@ -412,13 +446,13 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 搜索框
|
// 搜索框
|
||||||
reacherBarFun() {
|
// reacherBarFun() {
|
||||||
$(".search-bar input").focus(function () {
|
// $(".search-bar input").focus(function () {
|
||||||
$(".header").addClass("wide");
|
// $(".header").addClass("wide");
|
||||||
}).blur(function () {
|
// }).blur(function () {
|
||||||
$(".header").removeClass("wide");
|
// $(".header").removeClass("wide");
|
||||||
});
|
// });
|
||||||
},
|
// },
|
||||||
// 显示密码
|
// 显示密码
|
||||||
showPass() {
|
showPass() {
|
||||||
if (this.passwordVisible === "text") {
|
if (this.passwordVisible === "text") {
|
||||||
@ -696,6 +730,15 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
|
::v-deep .el-dialog{
|
||||||
|
background: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
box-shadow: transparent;
|
||||||
|
}
|
||||||
|
::v-deep .el-dialog__header{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.dialog {
|
.dialog {
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
color: var(--theme-color);
|
color: var(--theme-color);
|
||||||
@ -776,4 +819,22 @@ export default {
|
|||||||
.avatar-div:hover {
|
.avatar-div:hover {
|
||||||
border: 2px solid var(--theme-color);
|
border: 2px solid var(--theme-color);
|
||||||
}
|
}
|
||||||
|
.search {
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--theme-color);
|
||||||
|
}
|
||||||
|
.search-div {
|
||||||
|
border-radius: 50px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.search-div:hover {
|
||||||
|
border: 2px solid var(--theme-color);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
394
src/components/home/SearchInput.vue
Normal file
394
src/components/home/SearchInput.vue
Normal file
@ -0,0 +1,394 @@
|
|||||||
|
<template>
|
||||||
|
<div class="search-item">
|
||||||
|
<el-popover
|
||||||
|
placement="bottom"
|
||||||
|
width="300"
|
||||||
|
ref="popover"
|
||||||
|
trigger="focus"
|
||||||
|
:visible-arrow="false"
|
||||||
|
style="padding-top: 0"
|
||||||
|
v-model="visible"
|
||||||
|
>
|
||||||
|
<div class="search-content">
|
||||||
|
<div class="search-his">
|
||||||
|
<div>
|
||||||
|
<span class="title">热搜榜</span>
|
||||||
|
<!-- <span class="clear" @click="clearHistory" v-show="isShowClearHistory"><i class="el-icon-circle-close"></i>清空</span>-->
|
||||||
|
</div>
|
||||||
|
<div v-if="hotSearchKeyWords.length===0" v-show="isShowClearHistory">
|
||||||
|
<el-tag
|
||||||
|
:v-if="hotSearchKeyWords.length!==0"
|
||||||
|
v-for="(tag,index) in hotSearchKeyWords"
|
||||||
|
:key="index"
|
||||||
|
size="small"
|
||||||
|
closable
|
||||||
|
@close="handleClose(tag)"
|
||||||
|
style="margin-right: 10px; margin-top: 10px; cursor: pointer"
|
||||||
|
@click="handleSearch(tag)"
|
||||||
|
>
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
<div v-if="hotSearchKeyWords.length===0" v-show="isShowClearHistory">
|
||||||
|
<span v-show="searchResults.length===0" >暂无搜索结果...</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-show="!isShowClearHistory">
|
||||||
|
<span style="font-size: 15px">你还没有登录哦~</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="search-his">
|
||||||
|
<div>
|
||||||
|
<span class="title">搜索历史</span>
|
||||||
|
<span class="clear" @click="clearHistory" v-show="isShowClearHistory"><i class="el-icon-circle-close"></i>清空</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="historySearch.length===0" v-show="isShowClearHistory">
|
||||||
|
<el-tag
|
||||||
|
:v-if="historySearch.length!==0"
|
||||||
|
v-for="(tag,index) in historySearch"
|
||||||
|
:key="index"
|
||||||
|
size="small"
|
||||||
|
closable
|
||||||
|
@close="handleClose(tag)"
|
||||||
|
style="margin-right: 10px; margin-top: 10px; cursor: pointer"
|
||||||
|
@click="handleSearch(tag)"
|
||||||
|
>
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
<div v-if="historySearch.length===0" v-show="isShowClearHistory">
|
||||||
|
<span v-show="searchResults.length===0" >暂无搜索结果...</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-show="!isShowClearHistory">
|
||||||
|
<span style="color: var(--theme-color);font-size: 15px">你还没有登录哦~</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 10px">
|
||||||
|
<div style="display: flex;flex-direction: row;justify-content: space-between">
|
||||||
|
<span class="title">搜索结果: {{searchResults.length}} 条</span>
|
||||||
|
<span class="clear" @click="clearSearchResults"><i class="el-icon-circle-close"></i>清空</span>
|
||||||
|
</div>
|
||||||
|
<div style="max-height: 300px;overflow-y: scroll">
|
||||||
|
<el-scrollbar v-show="searchResults.length!==0">
|
||||||
|
<div v-for="(item,index) in searchResults" :key="index">
|
||||||
|
<SearchResults :search-results="item"></SearchResults>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
<span v-show="searchResults.length===0" >暂无搜索结果...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</el-popover>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
size="medium"
|
||||||
|
:placeholder="tipsWord"
|
||||||
|
style="width: 310px"
|
||||||
|
clearable
|
||||||
|
v-popover:popover
|
||||||
|
@keyup.enter.native="searchByInput"
|
||||||
|
v-model="search">
|
||||||
|
<i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchByInput"></i>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
import Vue from "vue";
|
||||||
|
import SearchResults from "@/components/home/SearchResults.vue";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {SearchResults},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
visible: false,
|
||||||
|
isMouseOver: false,
|
||||||
|
search: '',
|
||||||
|
tipsWord: '',
|
||||||
|
historySearch: [],
|
||||||
|
searchResults:[],
|
||||||
|
update:true,
|
||||||
|
|
||||||
|
hotSearchKeyWords:[],
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
isShowClearHistory(){
|
||||||
|
return !!(localStorage.getItem('Authorization') && localStorage.getItem('userId'));
|
||||||
|
},
|
||||||
|
handleSearch(word) {
|
||||||
|
this.search = word
|
||||||
|
this.searchByInput()
|
||||||
|
},
|
||||||
|
clearSearchResults(){
|
||||||
|
this.searchResults=[];
|
||||||
|
},
|
||||||
|
clearHistory() {
|
||||||
|
// var that=this;
|
||||||
|
// axios({
|
||||||
|
// method: 'post',
|
||||||
|
// // 请求的地址
|
||||||
|
// url: 'http://localhost:8082/helloGithub_war_exploded/deleteAllLabel',
|
||||||
|
// // URL 中的查询参数
|
||||||
|
// params: {
|
||||||
|
// }
|
||||||
|
// }).then((res)=>{
|
||||||
|
// if (res.data.code === 200) {
|
||||||
|
// Vue.prototype.$notify({
|
||||||
|
// title: '成功',
|
||||||
|
// message: ('i', {style: 'color: teal'}, res.data.msg),
|
||||||
|
// type: 'success',
|
||||||
|
// offset: 50
|
||||||
|
// });
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// that.gethistorySearch();
|
||||||
|
// })
|
||||||
|
// } else {
|
||||||
|
// Vue.prototype.$notify.error({
|
||||||
|
// title: '错误',
|
||||||
|
// message: res.data.msg,
|
||||||
|
// offset: 50
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// }).catch((error)=>{
|
||||||
|
// Vue.prototype.$notify.error({
|
||||||
|
// title: '错误',
|
||||||
|
// message: error,
|
||||||
|
// offset: 50
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
// searchRequest() {
|
||||||
|
// const params = {
|
||||||
|
// word: this.search || this.tipsWord
|
||||||
|
// }
|
||||||
|
// const queryString = new URLSearchParams(params).toString();
|
||||||
|
// const url = `${window.location.origin}/video/search?${queryString}`;
|
||||||
|
// window.open(url, '_blank');
|
||||||
|
// },
|
||||||
|
gethistorySearch(){
|
||||||
|
// var that=this;
|
||||||
|
// axios({
|
||||||
|
// method: 'post',
|
||||||
|
// // 请求的地址
|
||||||
|
// url: 'http://localhost:8082/helloGithub_war_exploded/selectUserLabel',
|
||||||
|
// // URL 中的查询参数
|
||||||
|
// params: {
|
||||||
|
// }
|
||||||
|
// }).then((res)=>{
|
||||||
|
// that.historySearch=res.data;
|
||||||
|
//
|
||||||
|
// }).catch((error)=>{
|
||||||
|
// Vue.prototype.$notify.error({
|
||||||
|
// title: '错误',
|
||||||
|
// message: error,
|
||||||
|
// offset: 50
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
handleClose(tag){
|
||||||
|
// var that=this;
|
||||||
|
// axios({
|
||||||
|
// method: 'post',
|
||||||
|
// // 请求的地址
|
||||||
|
// url: 'http://localhost:8082/helloGithub_war_exploded/deletelabel',
|
||||||
|
// // URL 中的查询参数
|
||||||
|
// params: {
|
||||||
|
// tag:tag
|
||||||
|
// }
|
||||||
|
// }).then((res)=>{
|
||||||
|
// if(res.data.code===200){
|
||||||
|
// Vue.prototype.$notify({
|
||||||
|
// title: '成功',
|
||||||
|
// message: ('i', {style: 'color: teal'}, res.data.msg),
|
||||||
|
// type: 'success',
|
||||||
|
// offset: 50
|
||||||
|
// });
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// that.gethistorySearch();
|
||||||
|
// })
|
||||||
|
// }else{
|
||||||
|
// Vue.prototype.$notify.error({
|
||||||
|
// title: '错误',
|
||||||
|
// message: res.data.msg,
|
||||||
|
// offset: 50
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// }).catch((error)=>{
|
||||||
|
// Vue.prototype.$notify.error({
|
||||||
|
// title: '错误',
|
||||||
|
// message: error,
|
||||||
|
// offset: 50
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
searchByInput(){
|
||||||
|
var that=this;
|
||||||
|
if(localStorage.getItem('userId')&& localStorage.getItem('Authorization') ){
|
||||||
|
if(this.search!==''){
|
||||||
|
axios({
|
||||||
|
method: 'post',
|
||||||
|
// 请求的地址
|
||||||
|
url: '/api/Search/searchByInput',
|
||||||
|
// URL 中的查询参数
|
||||||
|
params: {
|
||||||
|
searchKey:this.search,
|
||||||
|
userId:localStorage.getItem('userId')
|
||||||
|
}
|
||||||
|
}).then((res)=>{
|
||||||
|
if(res.data.code!==200){
|
||||||
|
Vue.prototype.$notify.error({
|
||||||
|
title: '错误',
|
||||||
|
message: "查询失败！",
|
||||||
|
offset: 0
|
||||||
|
});
|
||||||
|
that.reload()
|
||||||
|
}else{
|
||||||
|
Vue.prototype.$notify({
|
||||||
|
title: '成功',
|
||||||
|
message: ('i', {style: 'color: teal'}, "查询成功"),
|
||||||
|
type:"success",
|
||||||
|
offset: 50
|
||||||
|
});
|
||||||
|
that.searchResults=res.data.data;
|
||||||
|
setTimeout(() => {
|
||||||
|
that.visible = true;
|
||||||
|
that.gethistorySearch();
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
}).catch((error)=>{
|
||||||
|
Vue.prototype.$notify.error({
|
||||||
|
title: '错误',
|
||||||
|
message: error,
|
||||||
|
offset: 50
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
Vue.prototype.$notify.info({
|
||||||
|
title: '提示',
|
||||||
|
message: '请输入搜索内容',
|
||||||
|
offset: 50
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
Vue.prototype.$notify.info({
|
||||||
|
title: '提示',
|
||||||
|
message: "登录状态失效，请重新登录！",
|
||||||
|
offset: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
reload() {
|
||||||
|
// 移除组件
|
||||||
|
this.update = false
|
||||||
|
// 在组件移除后，重新渲染组件
|
||||||
|
// this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.update = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.tipsWord = "搜索书签";
|
||||||
|
this.gethistorySearch();
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.search-item ::v-deep .el-input .el-input__inner {
|
||||||
|
border-radius: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.search-content span.title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-content .search-his span.clear {
|
||||||
|
float: right;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-content .search-his span.clear:hover {
|
||||||
|
color: #ec0014;
|
||||||
|
}
|
||||||
|
.clear{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.clear:hover{
|
||||||
|
color: #ec0014;
|
||||||
|
}
|
||||||
|
.search-content .mt {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-content .search-hot {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-content .search-hot ul.hot-list {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 5px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-content .search-hot ul.hot-list li.hot-item {
|
||||||
|
width: 50%;
|
||||||
|
height: 30px;
|
||||||
|
font-size: 15px;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-content .search-hot ul.hot-list li.hot-item span:first-child {
|
||||||
|
width: 10%;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-content .search-hot ul.hot-list li.hot-item span:last-child {
|
||||||
|
margin-left: 5px;
|
||||||
|
width: 80%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-content .search-hot ul.hot-list li.hot-item span.top {
|
||||||
|
color: #EA322BFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-content .search-hot ul.hot-list li.hot-item:hover {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
85
src/components/home/SearchResults.vue
Normal file
85
src/components/home/SearchResults.vue
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<div class="main" >
|
||||||
|
<div style="display: flex;align-items: center;">
|
||||||
|
<el-image style="width: 30px" :src="searchResults.icon">
|
||||||
|
<div slot="error" class="image-slot">
|
||||||
|
<img style="width: 28px" src="@/assets/img/null.png">
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;margin-left: 10px;flex-direction: row;align-items: center;width: 200px">
|
||||||
|
<el-tooltip v-if="searchResults.name" class="item" effect="dark" :content="searchResults.name" placement="top">
|
||||||
|
<span style="font-size: 18px;font-weight: bold;overflow-x: scroll;width: 200px;white-space: nowrap;">
|
||||||
|
{{ searchResults.name }}
|
||||||
|
</span>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="dark" content="详情" placement="right" @click="goToDetail(searchResults.id)">
|
||||||
|
<i style="margin-left: 10px" class="card-icon el-icon-d-arrow-right"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="dark" :content="'【'+searchResults.name+'】'+'手机二维码'" placement="bottom">
|
||||||
|
<i style="margin-left: 10px" class="qr el-icon-s-grid"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SearchResults",
|
||||||
|
props: {
|
||||||
|
searchResults: Object,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
goToDetail(id){
|
||||||
|
if(id){
|
||||||
|
let pathInfo = this.$router.resolve({
|
||||||
|
path: '/nav',
|
||||||
|
query: {
|
||||||
|
uid: id,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
window.open(pathInfo.href, '_self');
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
width: 270px;
|
||||||
|
background-color: var(--content-bg);
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid var(--theme-bg-color);
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s ease;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.card-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon:hover {
|
||||||
|
color: #5ddcff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr:hover {
|
||||||
|
color: #5ddcff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -127,6 +127,7 @@ export default {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--theme-color);
|
color: var(--theme-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-div {
|
.upload-div {
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
@ -141,6 +142,7 @@ export default {
|
|||||||
border: 2px solid var(--theme-color);
|
border: 2px solid var(--theme-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-div {
|
.notice-div {
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user