618 lines
16 KiB
Vue
618 lines
16 KiB
Vue
<template>
|
|
<div class="navigation bg-pan-bl">
|
|
<div class="main" v-if="qeihuan">
|
|
<div class="top">
|
|
<span
|
|
v-for="name in topList"
|
|
:key="name"
|
|
:class="name == select ? 'select' : ''"
|
|
@click="changeCard(name)"
|
|
>
|
|
{{ name }}
|
|
</span>
|
|
</div>
|
|
<div class="bottom">
|
|
<a-input-search
|
|
v-model:value="text"
|
|
placeholder="请输入要查询的内容"
|
|
enter-button="开始搜索"
|
|
size="large"
|
|
@search="onSearch"
|
|
/>
|
|
<!-- <div class="search" @click="gaojisousuo">
|
|
<span></span>
|
|
<span>高级搜索</span>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="gaoji-main" v-if="!qeihuan">
|
|
<div class="gaoji-top">
|
|
<a-form-item label="类型">
|
|
<a-select
|
|
ref="select"
|
|
style="width: 1.8rem; height: 0.4rem"
|
|
placeholder="请选择类型"
|
|
@change="selectCard"
|
|
>
|
|
<a-select-option v-for="item in topList" :key="item" :value="item">
|
|
{{ item }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="应用领域">
|
|
<a-select
|
|
ref="select"
|
|
style="width: 1.8rem; height: 0.4rem"
|
|
placeholder="请选择应用领域"
|
|
@change="selectCard"
|
|
:key="applicationDataList"
|
|
>
|
|
<a-select-option
|
|
v-for="item in applicationDataList"
|
|
:key="item.id"
|
|
:value="item.dict_label"
|
|
>
|
|
{{ item.dict_label }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<!-- <a-form-item label="技术领域">
|
|
<a-select
|
|
ref="select"
|
|
style="width: 1.8rem; height: 0.4rem"
|
|
placeholder="请选择技术领域"
|
|
@change="selectCard"
|
|
:key="technosphereDataList"
|
|
>
|
|
<a-select-option
|
|
v-for="item in technosphereDataList"
|
|
:key="item"
|
|
:value="item.dict_label"
|
|
>
|
|
{{ item.dict_label }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item> -->
|
|
</div>
|
|
<div class="qushi-class-father">
|
|
<!-- <div class="qushi-class">
|
|
<a-form-item label="发布部门" class="gaojisousuo">
|
|
<a-select
|
|
ref="select"
|
|
style="width: 1.4rem; height: 0.4rem"
|
|
placeholder="请选择省份"
|
|
@change="qushijiedao"
|
|
:key="fabubumen"
|
|
>
|
|
<a-select-option
|
|
:value="item.name"
|
|
v-model="item.value"
|
|
v-for="item in fabubumen"
|
|
:key="item"
|
|
>
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-select
|
|
ref="select"
|
|
style="width: 1.4rem; height: 0.4rem"
|
|
@change="qushijiedao"
|
|
placeholder="请选择市"
|
|
:key="shi"
|
|
>
|
|
<a-select-option
|
|
:value="item.name"
|
|
v-model:value="item.value"
|
|
v-for="item in shi"
|
|
:key="item"
|
|
>
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-select
|
|
ref="select"
|
|
style="width: 1.4rem; height: 0.4rem"
|
|
@change="qushijiedao"
|
|
placeholder="请选择区划"
|
|
:key="qu"
|
|
>
|
|
<a-select-option
|
|
:value="item.name"
|
|
v-for="item in qu"
|
|
:key="item"
|
|
>
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-select
|
|
ref="select"
|
|
style="width: 1.4rem; height: 0.4rem"
|
|
placeholder="请选择街道"
|
|
:key="jiedao"
|
|
>
|
|
<a-select-option
|
|
:value="item.name"
|
|
v-for="item in jiedao"
|
|
:key="item"
|
|
>
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</div> -->
|
|
<div class="sousuo" @click="onSearch(mohuchaxun)">搜索</div>
|
|
<div @click="gaojisousuo" class="mohusousuo">
|
|
<div class="mohusousuo-tupian"></div>
|
|
模糊搜索
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="imgBox tracking-in-expand">
|
|
<img src="~@/assets/newHome/slogan.png" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { treesList, selectDicStoreAll } from '@/api/home.js'
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useStore } from 'vuex'
|
|
import { message } from 'ant-design-vue'
|
|
const store = useStore()
|
|
const router = useRouter()
|
|
const topList = ref([
|
|
'应用资源',
|
|
'组件服务',
|
|
'基础设施',
|
|
'数据资源',
|
|
'知识库',
|
|
])
|
|
const select = ref(whoShow.itShowQingDao ? '' : '应用资源')
|
|
let applicationDataList = ref([])
|
|
let technosphereDataList = ref([])
|
|
const fabubumen = ref([
|
|
{
|
|
name: '山东省',
|
|
value: '',
|
|
id: '100001',
|
|
},
|
|
])
|
|
let shi = ref([])
|
|
let qu = ref([])
|
|
let jiedao = ref([])
|
|
function qushijiedao(value) {
|
|
let danwei = value.substr(-1)
|
|
// name.substr(-1)
|
|
let id = 100001
|
|
let param = {
|
|
pid: id,
|
|
}
|
|
switch (danwei) {
|
|
case '省':
|
|
treesList(param).then((res) => {
|
|
shi.value = res.data.data
|
|
})
|
|
break
|
|
case '市':
|
|
shi.value.map((item) => {
|
|
if (item.name == value) {
|
|
id = item.id
|
|
param = {
|
|
pid: id,
|
|
}
|
|
treesList(param).then((res) => {
|
|
qu.value = res.data.data
|
|
})
|
|
}
|
|
})
|
|
break
|
|
case '区':
|
|
qu.value.map((item) => {
|
|
if (item.name == value) {
|
|
id = item.id
|
|
param = {
|
|
pid: id,
|
|
}
|
|
treesList(param).then((res) => {
|
|
jiedao.value = res.data.data
|
|
})
|
|
}
|
|
})
|
|
break
|
|
}
|
|
}
|
|
let text = ref('')
|
|
let snum = ref({
|
|
select: select.value,
|
|
str: text.value,
|
|
tecHnosphere: '',
|
|
appLiCation: '',
|
|
})
|
|
const changeCard = (name) => {
|
|
if (select.value == name && whoShow.itShowQingDao) {
|
|
select.value = ''
|
|
} else {
|
|
select.value = name
|
|
}
|
|
snum.value.select = select.value
|
|
}
|
|
function selectCard(value) {
|
|
console.log('res.data.data', value)
|
|
//调用高级搜索接口
|
|
topList.value.map((itemFather) => {
|
|
if (itemFather == value) {
|
|
select.value = value
|
|
snum.value.select = value
|
|
const params = {
|
|
topCategoryName: select.value,
|
|
}
|
|
selectDicStoreAll(params).then((res) => {
|
|
res.data.data.map((item) => {
|
|
if (item.name == '应用领域') {
|
|
applicationDataList.value = []
|
|
technosphereDataList.value = []
|
|
applicationDataList.value = item.typeList
|
|
}
|
|
if (item.name == '技术领域') {
|
|
technosphereDataList.value = []
|
|
technosphereDataList.value = item.typeList
|
|
}
|
|
})
|
|
console.log('res.data.data', applicationDataList.value)
|
|
})
|
|
}
|
|
})
|
|
applicationDataList.value.map((item) => {
|
|
if (item.dict_label == value) {
|
|
snum.value.appLiCation = value
|
|
}
|
|
})
|
|
technosphereDataList.value.map((item) => {
|
|
if (item.dict_label == value) {
|
|
snum.value.tecHnosphere = value
|
|
}
|
|
})
|
|
console.log('选中===================>', snum.value)
|
|
}
|
|
let qeihuan = ref(true)
|
|
//高级搜索与模糊搜索切换
|
|
function gaojisousuo() {
|
|
applicationDataList.value = []
|
|
technosphereDataList.value = []
|
|
qeihuan.value = !qeihuan.value
|
|
}
|
|
const mohuchaxun = ref('组件服务')
|
|
function onSearch() {
|
|
// if (text.value) {
|
|
snum.value.str = text.value
|
|
console.log('===================>', text.value)
|
|
store.commit('home/selectCardsData', snum.value)
|
|
router.push({
|
|
path: '/DetailsPageconetent',
|
|
query: snum.value,
|
|
})
|
|
// } else {
|
|
// message.warning('请输入查询内容！')
|
|
// }
|
|
// router.push({ path: '/DetailsPageconetent' })
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.navigation {
|
|
height: 5.8rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
background: url('~@/assets/newHome/banner-main.jpg') no-repeat;
|
|
background-size: 150%;
|
|
:deep(.ant-btn) > span {
|
|
font-size: 0.16rem;
|
|
}
|
|
.main {
|
|
width: 8.8rem;
|
|
height: 1.48rem;
|
|
// background: rgba(255, 255, 255, 0.18);
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 0.02rem;
|
|
margin-top: 1.36rem;
|
|
.top {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
span {
|
|
cursor: pointer;
|
|
padding: 0.1rem 0;
|
|
width: 1.2rem;
|
|
text-align: center;
|
|
margin: 0 0.1rem;
|
|
font-size: 0.18rem;
|
|
// background: linear-gradient(
|
|
// to right,
|
|
// rgba(68, 107, 164, 0.4) 0%,
|
|
// rgba(68, 107, 164, 0) 100%
|
|
// );
|
|
color: white;
|
|
// border-left: 0.02rem solid rgb(108, 147, 204);
|
|
}
|
|
span:nth-of-type(1) {
|
|
margin-left: 0;
|
|
}
|
|
// span:hover {
|
|
// background: linear-gradient(
|
|
// to right,
|
|
// rgba(68, 107, 164, 0.5) 0%,
|
|
// rgba(68, 107, 164, 0.1) 100%
|
|
// );
|
|
// }
|
|
.select {
|
|
// background: linear-gradient(
|
|
// to bottom,
|
|
// rgba(255, 255, 255, 0.6) 0%,
|
|
// rgba(31, 116, 243, 0.8) 20%,
|
|
// rgba(0, 102, 255, 0.8) 50%,
|
|
// rgba(61, 122, 214, 0.8) 80%,
|
|
// rgba(255, 255, 255, 0.6) 100%
|
|
// ) !important;
|
|
background: url('~@/assets/home/top-select.png') no-repeat;
|
|
background-size: 95%;
|
|
background-position: 50% 40%;
|
|
// border-radius: 0.5rem;
|
|
font-weight: 600;
|
|
// border-left: 0.02rem solid #fff;
|
|
}
|
|
}
|
|
.bottom {
|
|
width: 8rem;
|
|
height: 0.54rem;
|
|
margin-top: 0.12rem;
|
|
position: relative;
|
|
font-size: 0.14rem;
|
|
:deep(.ant-input-search) {
|
|
max-width: 8rem;
|
|
.ant-input {
|
|
height: 0.54rem;
|
|
}
|
|
.ant-btn {
|
|
width: 1rem;
|
|
height: 0.54rem;
|
|
background: linear-gradient(to bottom, #f88e4e, #ef6341);
|
|
}
|
|
}
|
|
.search {
|
|
position: absolute;
|
|
right: 0;
|
|
top: -0.3rem;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
span {
|
|
margin-left: 0.04rem;
|
|
font-size: 0.14rem;
|
|
}
|
|
span:nth-of-type(1) {
|
|
width: 0.16rem;
|
|
height: 0.16rem;
|
|
background: url('~@/assets/newHome/search.png') no-repeat;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.gaoji-main {
|
|
width: 9.1rem;
|
|
height: 1.48rem;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
padding: 0.24rem 0.2rem;
|
|
border-radius: 0.02rem;
|
|
margin-top: 1.36rem;
|
|
.gaoji-top {
|
|
width: 8.7rem;
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
:deep(.ant-col) {
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: text-typeface;
|
|
font-size: 0.18rem;
|
|
}
|
|
:deep(.ant-select-selector) {
|
|
height: 0.4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: text-typeface;
|
|
font-size: 0.18rem;
|
|
width: 2rem;
|
|
}
|
|
:deep(.ant-form-item-label) > label {
|
|
font-family: text-typeface;
|
|
font-size: 0.18rem;
|
|
color: #fff;
|
|
}
|
|
:deep(.ant-form-item) {
|
|
margin-bottom: 0.2rem;
|
|
margin-left: 0.42rem;
|
|
}
|
|
:deep(.ant-form-item):first-child {
|
|
margin-bottom: 0.2rem;
|
|
margin-left: 0rem;
|
|
}
|
|
}
|
|
.qushi-class-father {
|
|
position: relative;
|
|
.sousuo {
|
|
width: 0.74rem;
|
|
height: 0.4rem;
|
|
background: linear-gradient(to bottom, #f88e4e, #ef6341);
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 6.85rem;
|
|
top: 0rem;
|
|
font-family: text-typeface;
|
|
font-size: 0.18rem;
|
|
color: #fff;
|
|
border-radius: 0.02rem;
|
|
}
|
|
.mohusousuo {
|
|
height: 0.4rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 0rem;
|
|
top: 0rem;
|
|
font-family: text-typeface;
|
|
font-size: 0.18rem;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
.mohusousuo-tupian {
|
|
height: 0.16rem;
|
|
width: 0.16rem;
|
|
background: url('~@/assets/newHome/mohu.png');
|
|
margin-right: 0.05rem;
|
|
}
|
|
}
|
|
}
|
|
.qushi-class {
|
|
display: flex;
|
|
:deep(.ant-form-item-control-input-content) > div {
|
|
margin-right: 0.1rem;
|
|
}
|
|
:deep(.ant-form-item-label) > label {
|
|
font-family: text-typeface;
|
|
font-size: 0.18rem;
|
|
color: #fff;
|
|
}
|
|
:deep(.ant-col) {
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: text-typeface;
|
|
font-size: 0.18rem;
|
|
}
|
|
:deep(.ant-select-selector) {
|
|
height: 0.4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: text-typeface;
|
|
font-size: 0.18rem;
|
|
}
|
|
}
|
|
}
|
|
.imgBox {
|
|
width: 8rem;
|
|
margin-top: 0.18rem;
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.tracking-in-expand {
|
|
-webkit-animation: tracking-in-expand 0.7s
|
|
cubic-bezier(0.215, 0.61, 0.355, 1) both;
|
|
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1)
|
|
both;
|
|
}
|
|
/* ----------------------------------------------
|
|
* Generated by Animista on 2022-8-15 14:3:51
|
|
* Licensed under FreeBSD License.
|
|
* See http://animista.net/license for more info.
|
|
* w: http://animista.net, t: @cssanimista
|
|
* ---------------------------------------------- */
|
|
|
|
/**
|
|
* ----------------------------------------
|
|
* animation tracking-in-expand
|
|
* ----------------------------------------
|
|
*/
|
|
@-webkit-keyframes tracking-in-expand {
|
|
0% {
|
|
letter-spacing: -0.5em;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes tracking-in-expand {
|
|
0% {
|
|
letter-spacing: -0.5em;
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.bg-pan-bl {
|
|
-webkit-animation: bg-pan-bl 2s both;
|
|
animation: bg-pan-bl 2s both;
|
|
}
|
|
/* ----------------------------------------------
|
|
* Generated by Animista on 2022-8-15 15:8:37
|
|
* Licensed under FreeBSD License.
|
|
* See http://animista.net/license for more info.
|
|
* w: http://animista.net, t: @cssanimista
|
|
* ---------------------------------------------- */
|
|
|
|
/**
|
|
* ----------------------------------------
|
|
* animation bg-pan-bl
|
|
* ----------------------------------------
|
|
*/
|
|
@-webkit-keyframes bg-pan-bl {
|
|
0% {
|
|
background-size: 130%;
|
|
}
|
|
100% {
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
@keyframes bg-pan-bl {
|
|
0% {
|
|
background-size: 130%;
|
|
}
|
|
100% {
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.rc-virtual-list-holder {
|
|
overflow: unset;
|
|
overflow-y: unset;
|
|
}
|
|
.rc-virtual-list-holder > div {
|
|
overflow: auto;
|
|
height: 2.56rem;
|
|
}
|
|
.ant-select-item-option-content {
|
|
font-size: 0.18rem;
|
|
font-family: text-typeface;
|
|
height: 0.32rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
|
|
font-weight: unset;
|
|
background-color: #0058e1;
|
|
color: #fff;
|
|
margin-top: 0.01rem;
|
|
margin-bottom: 0.01rem;
|
|
}
|
|
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
|
|
background-color: #0058e1;
|
|
color: #fff;
|
|
margin-top: 0.01rem;
|
|
margin-bottom: 0.01rem;
|
|
}
|
|
</style>
|