331 lines
7.8 KiB
Vue
331 lines
7.8 KiB
Vue
<template>
|
|
<div
|
|
class="box"
|
|
style="background-size: cover; background-color: #fff"
|
|
:style="{ backgroundImage: state.banner ? `url(${state.banner})` : '' }"
|
|
>
|
|
<div>
|
|
<el-row>
|
|
<!-- <el-col :push="4" :sm="10" :md="16">-->
|
|
<el-col :push="4" :md="20">
|
|
<div class="tab">
|
|
<div
|
|
v-for="(v, index) in state.tabList"
|
|
:class="{ active: state.tabIndex == index }"
|
|
@click="switchTab(index)"
|
|
>
|
|
<!-- :style="v === '找实验室' ? `display:none` : ''" -->
|
|
{{ t(`webSearch.${v}`) }}
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div style="height: 16px"></div>
|
|
<el-form
|
|
:model="queryParams"
|
|
:rules="queryRules"
|
|
ref="queryRef"
|
|
@submit.prevent
|
|
>
|
|
<el-row>
|
|
<el-col :push="4" :sm="10" :md="12">
|
|
<el-form-item prop="keyword">
|
|
<el-input
|
|
v-model.trim="queryParams.keyword"
|
|
:placeholder="t('webSearch.placeholder')"
|
|
@keyup.enter="handleQuery"
|
|
>
|
|
<!-- <template #suffix v-if="false">-->
|
|
<!-- <el-form-item prop="queryType">-->
|
|
<!-- <el-select-->
|
|
<!-- v-model="queryParams.queryType"-->
|
|
<!-- placeholder="请选择搜索类型"-->
|
|
<!-- class="search-type-select"-->
|
|
<!-- >-->
|
|
<!-- <el-option-->
|
|
<!-- v-for="item in queryTypeList[state.tabIndex]"-->
|
|
<!-- :key="item.value"-->
|
|
<!-- :label="item.label"-->
|
|
<!-- :value="item.value"-->
|
|
<!-- />-->
|
|
<!-- </el-select>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </template>-->
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :push="4" :sm="10" :md="8">
|
|
<div class="btnsWrap">
|
|
<el-button
|
|
class="x_btns"
|
|
type="primary"
|
|
icon="Search"
|
|
@click="handleQuery"
|
|
>{{ t("webSearch.search") }}
|
|
</el-button>
|
|
<!-- <el-button class="x_btns" @click="handleQuery"
|
|
>{{ t("admin.table.publishDemand") }}</el-button
|
|
> -->
|
|
<!-- <el-button class="x_btns" @click="handleQuery"
|
|
>专家机构录入</el-button
|
|
> -->
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div style="height: 15vh"></div>
|
|
<el-row>
|
|
<el-col :push="3" :pull="3" :span="18">
|
|
<div class="numBox">
|
|
<div>
|
|
<div class="val">{{ state.data.patent_count }}</div>
|
|
<div class="des">{{ t("quantityOverview.patent") }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="val">{{ state.data.expert_count }}</div>
|
|
<div class="des">
|
|
{{ t("quantityOverview.expert") }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="val">
|
|
{{ state.data.laboratory_count }}
|
|
</div>
|
|
<div class="des">
|
|
{{ t("quantityOverview.lab") }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="val">{{ state.data.demand_count }}</div>
|
|
<div class="des">
|
|
{{ t("quantityOverview.demand") }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="val">{{ state.data.company_count }}</div>
|
|
<div class="des">
|
|
{{ t("quantityOverview.company") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// TODO:成果搜索添加按成果介绍搜索，需求搜索添加按需求描述搜索,添加实验室搜索
|
|
import { computed, onMounted, reactive, ref } from "vue";
|
|
import { banner, getAllCount } from "@/api/website/home";
|
|
import { useRouter } from "vue-router";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
const router = useRouter();
|
|
|
|
const { t } = useI18n();
|
|
const testEnter = (ev) => {
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
console.log("rere");
|
|
};
|
|
const queryParams = reactive({
|
|
keyword: "",
|
|
queryType: "2",
|
|
});
|
|
const queryRules = reactive({
|
|
keyword: [
|
|
{
|
|
required: true,
|
|
trigger: "blur",
|
|
message: computed(() => t("webSearch.pleaseSelectSearchKeyword")),
|
|
},
|
|
],
|
|
});
|
|
const queryRef = ref();
|
|
const searchTypeList = ref([
|
|
"enterprise",
|
|
"achievement",
|
|
"lab",
|
|
"patent",
|
|
"expert",
|
|
"technologyDemand",
|
|
]);
|
|
|
|
const handleDetail = async (mode, keyword, queryType) => {
|
|
console.log(mode);
|
|
await queryRef.value.validate();
|
|
const routeData = router.resolve({
|
|
path: `/searchList/${mode}`,
|
|
query: { keyword, queryType },
|
|
});
|
|
void router.push(routeData);
|
|
};
|
|
|
|
function handleQuery() {
|
|
handleDetail(
|
|
searchTypeList.value[state.tabIndex],
|
|
queryParams.keyword,
|
|
queryParams.queryType
|
|
);
|
|
}
|
|
|
|
const state = reactive({
|
|
keyword: "",
|
|
tabList: [
|
|
"findCompany",
|
|
"findAchievement",
|
|
"findLab",
|
|
"findPatent",
|
|
"findExpert",
|
|
"findDemand",
|
|
],
|
|
tabIndex: 0,
|
|
banner: "",
|
|
data: {
|
|
expert_count: 0,
|
|
company_count: 0,
|
|
patent_count: 0,
|
|
achievement_count: 0,
|
|
laboratory_count: 0,
|
|
demand_count: 0,
|
|
docking_count: 0,
|
|
},
|
|
});
|
|
|
|
const switchTab = (index) => {
|
|
state.tabIndex = index;
|
|
queryRef.value.resetFields("queryType");
|
|
};
|
|
|
|
onMounted(() => {
|
|
banner({ locals: "首页背景" }).then((resp) => {
|
|
state.banner = resp.data[0].images;
|
|
});
|
|
|
|
getAllCount().then((res) => {
|
|
state.data = res.data;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.x_btns {
|
|
font-size: 14px !important;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.box {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
& > div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.btnsWrap {
|
|
margin: 0 0 0 40px;
|
|
|
|
.el-button {
|
|
height: 36px;
|
|
padding: 10px 25px;
|
|
}
|
|
}
|
|
|
|
.numBox {
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
|
|
& > div {
|
|
flex: 1;
|
|
height: 200px;
|
|
display: -webkit-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.val {
|
|
font-size: 36px;
|
|
font-family: DIN, sans-serif;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.des {
|
|
font-size: 16px;
|
|
font-family: Source Han Sans CN, sans-serif;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
//width: 630px;
|
|
height: 42px;
|
|
overflow: hidden;
|
|
|
|
& > div {
|
|
//width: 90px;
|
|
padding: 0 12px;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
float: left;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
& > div.active {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 38px;
|
|
background-image: url(./img/index1-bg1.png);
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
.wrap {
|
|
padding-left: 460px;
|
|
}
|
|
|
|
.search {
|
|
width: 720px;
|
|
}
|
|
|
|
.icp-beian {
|
|
width: 100vw;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
}
|
|
|
|
// :deep(.el-input__inner) {
|
|
// border: 0px solid blueviolet !important;
|
|
// }
|
|
.search-type-select {
|
|
margin: 1px 0;
|
|
|
|
:deep(.el-input__inner) {
|
|
// border: 0px solid blueviolet !important;
|
|
height: 30px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
:deep(.el-input.is-focus .el-input__inner) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|