Skip to content

R
risk-monitor
提交 340f15da authored 作者: 李郝虎's avatar 李郝虎
浏览文件
操作

feat:替换页面中的搜索框组件

上级 4c3f7e40
隐藏空白字符变更
内嵌 并排
正在显示 包含 460 行增加 和 863 行删除
src/components/SearchBar.vue
浏览文件 @ 340f15da
......@@ -57,7 +57,7 @@ const handleSearch = () => {
path: "/searchResults",
query: {
searchText: store.searchBillText,
areaName: "法案"
areaName: store.searchData.areaName
}
});
window.open(curRoute.href, "_blank");
......
src/components/SearchContainer.vue
浏览文件 @ 340f15da
<template>
<div class="search" v-show="!isShow">
<div class="search-container" v-show="!isShow">
<div class="search-main">
<input v-model="store.searchBillText" :placeholder="placeholder" @keyup.enter="handleSearch" class="search-input" />
<div class="search-btn" @click="handleSearch">
......@@ -43,7 +43,7 @@
</template>
<script setup>
import { ref, nextTick, watchEffect } from "vue";
import { ref, nextTick, watchEffect, onMounted } from "vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import { useRouter } from "vue-router";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
......@@ -62,7 +62,7 @@ let { countInfo, containerRef, placeholder, areaName } = defineProps({
},
placeholder: {
type: String,
default: "123"
default: ""
},
areaName: {
type: String,
......@@ -85,12 +85,18 @@ const handleSearch = () => {
let homeMainRef = ref(containerRef);
const { isShow } = useContainerScroll(homeMainRef);
watchEffect(() => {
if (isShow.value) {
homeMainRef.value.classList.add("scroll-main");
homeMainRef.value.classList.add("scrollHomeMain");
} else {
homeMainRef.value.classList.remove("scroll-main");
homeMainRef.value.classList.remove("scrollHomeMain");
}
store.changeIsShowSearchBar(isShow.value);
});
......@@ -121,7 +127,7 @@ const handleToPosi = id => {
</script>
<style lang="scss" scoped>
.search {
.search-container {
width: 960px;
height: 168px;
margin: 0 auto 68px auto;
......@@ -134,7 +140,7 @@ const handleToPosi = id => {
justify-content: space-between;
.search-item {
width: 120px;
width: 130px;
height: 57px;
display: flex;
flex-direction: column;
......
src/views/coopRestriction/index.vue
浏览文件 @ 340f15da
<template>
<div class="coop-page">
<!-- 吸顶简易搜索框 -->
<div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<input v-model="input" class="search-input" placeholder="搜索合作限制" />
<div class="search-btn-small" @click="handleSearch">
<div class="search-icon">
<img src="./assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">最新动态</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">咨询要闻</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">数据总览</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">资源库</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
<!-- 面包屑 -->
<!-- <div class="breadcrumb" v-show="!isShow">
......@@ -51,55 +14,13 @@
<!-- 主页面 -->
<div class="main-content" ref="homeMainRef" :class="{ 'scroll-main': isShow }">
<!-- 搜索栏部分 -->
<div class="search" v-show="!isShow">
<div class="search-main">
<input v-model="input" placeholder="搜索合作限制" class="search-input" />
<div class="search-btn">
<img src="./assets/icons/search-icon.png" alt="" />
搜索
</div>
</div>
<!-- <div class="search-center">
<div class="search-item">
<div class="search-item-num">32</div>
<div class="search-item-name">相关法案</div>
</div>
<div class="search-item">
<div class="search-item-num">9</div>
<div class="search-item-name">相关政令</div>
</div>
<div class="search-item">
<div class="search-item-num">41</div>
<div class="search-item-name">相关政府公告</div>
</div>
</div> -->
<div class="search-bottom">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">最新动态</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">咨询要闻</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">数据总览</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">资源库</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
<SearchContainer
v-if="homeMainRef"
placeholder="搜索合作限制"
:containerRef="homeMainRef"
areaName=""
/>
<!-- 最新动态 -->
<div class="newdata" id="position1">
<com-title title="最新动态" />
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 340f15da
<template>
<div class="home-wrapper">
<div class="search-header" v-show="isShow">
<div class="search-header-container">
<div class="home-main-header-center">
<el-input v-model="searchDecreeText" @keyup.enter="handleSearch" style="width: 680px; height: 100%"
placeholder="搜索科技政令" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
<div class="home-main" ref="containerRef">
<div class="home-top-bg"></div>
<div class="home-main-header">
<!-- <div class="home-main-header-top" v-show="!isShow">
<div class="header-left">
<HeaderMenu></HeaderMenu>
......@@ -54,15 +11,23 @@
<headerInfo curTitleName="政令"></headerInfo>
</div>
</div> -->
<div class="home-main-header-center" v-show="!isShow">
<el-input v-model="searchDecreeText" @keyup.enter="handleSearch" style="width: 838px; height: 100%"
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0; margin-top: 48px; height: fit-content"
v-if="containerRef"
placeholder="搜索政令"
:containerRef="containerRef"
areaName="政令"
/>
<!-- <el-input v-model="searchDecreeText" @keyup.enter="handleSearch" style="width: 838px; height: 100%"
placeholder="搜索政令" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div> -->
</div>
<!-- <div class="home-main-header-footer" v-show="!isShow">
<div class="home-main-header-footer-item">
......@@ -86,7 +51,7 @@
<div class="item-footer">分析报告</div>
</div>
</div> -->
<div class="home-main-header-btn-box" v-show="!isShow">
<!-- <div class="home-main-header-btn-box" v-show="!isShow">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
......@@ -111,7 +76,7 @@
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div> -->
<div class="home-main-header-item-box">
<div class="item" v-for="(item, index) in govInsList" :key="index" @click="handleToInstitution(item)">
<div class="item-left">
......@@ -146,14 +111,20 @@
{{ "查看详情 >" }}
</div>
</div>
<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none">
<el-carousel
ref="carouselRef"
height="395px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
>
<el-carousel-item v-for="(item, index) in box1DataList" :key="index">
<div class="box1-main">
<div class="box1-main-left">
<img v-if="item.imageUrl" :src="item.imageUrl" alt="" />
<div v-else class="box1-main-left-img-mock">
<img class="img-mock-badge-img" src="./assets/images/badge.png">
<img class="img-mock-badge-img" src="./assets/images/badge.png" />
<p class="img-mock-badge-title">行政令</p>
<p class="img-mock-badge-title">{{ item.name }}</p>
<!-- <p class="img-mock-badge-org">The White House</p> -->
......@@ -164,11 +135,16 @@
{{ item.name }}
</div>
<div class="box1-main-right-info">
<div class="tag" :class="{
tag1: tag.status == 1,
tag2: tag.status == 2,
tag3: tag.status == 3
}" v-for="(tag, index) in item.industryList" :key="index">
<div
class="tag"
:class="{
tag1: tag.status == 1,
tag2: tag.status == 2,
tag3: tag.status == 3
}"
v-for="(tag, index) in item.industryList"
:key="index"
>
{{ tag.industryName }}
</div>
</div>
......@@ -202,12 +178,19 @@
</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index"
@click="handleClickToDetail()">
<div class="item-left" :class="{
itemLeftStatus3: item.riskLevel === '特别重大',
itemLeftStatus2: item.riskLevel === '重大风险'
}">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleClickToDetail()"
>
<div
class="item-left"
:class="{
itemLeftStatus3: item.riskLevel === '特别重大',
itemLeftStatus2: item.riskLevel === '重大风险'
}"
>
{{ item.riskLevel ? item.riskLevel : "暂无数据" }}
</div>
<div class="item-right">
......@@ -239,7 +222,12 @@
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)">
<div
class="box3-item"
v-for="(news, index) in newsList"
:key="index"
@click="handleToNewsAnalysis(news)"
>
<div class="left">
<img :src="news.img ? news.img : DefaultIconNews" alt="" />
</div>
......@@ -266,9 +254,17 @@
<div class="header-title">{{ "社交媒体" }}</div>
</div>
<div class="box4-main">
<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)"
@info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1"
:name="item.name" :time="item.time" :source="item.source" :content="item.content" />
<MessageBubble
v-for="(item, index) in messageList"
@click="handleClickPerson(item)"
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.img ? item.img : DefaultIcon1"
:name="item.name"
:time="item.time"
:source="item.source"
:content="item.content"
/>
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
......@@ -295,9 +291,18 @@
<div class="box5-header-title">{{ "行政令发布频度" }}</div>
</div>
<div class="box5-selectbox">
<el-select @change="handleBox5YearChange" v-model="box5SelectedYear" placeholder="选择时间"
style="width: 120px">
<el-option v-for="item in box5YearList" :key="item.value" :label="item.label" :value="item.value" />
<el-select
@change="handleBox5YearChange"
v-model="box5SelectedYear"
placeholder="选择时间"
style="width: 120px"
>
<el-option
v-for="item in box5YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
......@@ -313,9 +318,18 @@
</div>
<div class="header-title">{{ "政令涉及领域" }}</div>
<div class="box6-selectbox">
<el-select @change="handleBox6YearChange" v-model="box6SelectedYear" placeholder="选择时间"
style="width: 120px">
<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value" />
<el-select
@change="handleBox6YearChange"
v-model="box6SelectedYear"
placeholder="选择时间"
style="width: 120px"
>
<el-option
v-for="item in box6YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
......@@ -331,7 +345,12 @@
<div class="header-title">{{ "关键行政令" }}</div>
</div>
<div class="box7-main">
<div class="box7-item" v-for="(item, index) in keyDecreeList" :key="index" @click="handleKeyDecree(item)">
<div
class="box7-item"
v-for="(item, index) in keyDecreeList"
:key="index"
@click="handleKeyDecree(item)"
>
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
......@@ -387,9 +406,15 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="type in decreeTypeList" :key="type.id" v-model="checkedDecreeType"
:label="type.typeId" style="width: 180px" class="filter-checkbox"
@change="handleChangeCheckedDecreeType">
<el-checkbox
v-for="type in decreeTypeList"
:key="type.id"
v-model="checkedDecreeType"
:label="type.typeId"
style="width: 180px"
class="filter-checkbox"
@change="handleChangeCheckedDecreeType"
>
{{ type.typeName }}
</el-checkbox>
</div>
......@@ -402,8 +427,15 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="cate in govInsList" :key="cate.id" v-model="checkedGovIns" :label="cate.id"
style="width: 180px" class="filter-checkbox" @change="handleChangeCheckedGovIns">
<el-checkbox
v-for="cate in govInsList"
:key="cate.id"
v-model="checkedGovIns"
:label="cate.id"
style="width: 180px"
class="filter-checkbox"
@change="handleChangeCheckedGovIns"
>
{{ cate.name }}
</el-checkbox>
</div>
......@@ -416,9 +448,15 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-for="time in pubTime" :key="time.id" v-model="activePubTime" :label="time.id"
style="width: 100px" class="filter-checkbox"
@change="(checked) => handlePubTimeChange(time.id, checked)">
<el-checkbox
v-for="time in pubTime"
:key="time.id"
v-model="activePubTime"
:label="time.id"
style="width: 100px"
class="filter-checkbox"
@change="checked => handlePubTimeChange(time.id, checked)"
>
{{ time.name }}
</el-checkbox>
</div>
......@@ -431,8 +469,14 @@
</div>
<div class="select-main select-main1">
<div class="checkbox-group">
<el-checkbox v-for="area in areaList" :key="area.id" v-model="activeAreaList" :label="area.id"
style="width: 100px" @change="(checked) => handleAreaChange(area.id, checked)">
<el-checkbox
v-for="area in areaList"
:key="area.id"
v-model="activeAreaList"
:label="area.id"
style="width: 100px"
@change="checked => handleAreaChange(area.id, checked)"
>
{{ area.name }}
</el-checkbox>
</div>
......@@ -447,12 +491,18 @@
<div class="title">{{ "政令库" }}</div>
</div>
<div class="content-box" v-show="decreeList">
<div class="main-item" v-for="(item, index) in decreeList" :key="index"
@click="handleClickDecree(item)">
<div
class="main-item"
v-for="(item, index) in decreeList"
:key="index"
@click="handleClickDecree(item)"
>
<div class="main-item-left">
<div class="left-left">{{ item.time.split('-')[0] }}<br>{{ item.time.split('-')[1] }}月{{
item.time.split('-')[2] }}日</div>
<div class="left-left">
{{ item.time.split("-")[0] }}<br />{{ item.time.split("-")[1] }}月{{
item.time.split("-")[2]
}}日
</div>
<div class="left-right">
<div class="icon">
<img :src="item.orgImage ? item.orgImage : DefaultIcon2" alt="" />
......@@ -488,8 +538,14 @@
{{ `共 ${totalDecreesNum} 项` }}
</div>
<div class="footer-right">
<el-pagination @current-change="handleCurrentChange" :pageSize="10" :current-page="currentPage"
background layout="prev, pager, next" :total="totalDecreesNum" />
<el-pagination
@current-change="handleCurrentChange"
:pageSize="10"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="totalDecreesNum"
/>
</div>
</div>
</div>
......@@ -585,7 +641,7 @@ const pageSize = ref(10);
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
handleGetDecreeOrderList()
handleGetDecreeOrderList();
};
// 页面 header
......@@ -601,7 +657,7 @@ const govInsList = ref([
]);
const checkedGovIns = ref([]);
const handleChangeCheckedGovIns = val => { };
const handleChangeCheckedGovIns = val => {};
const handleGetDepartmentList = async () => {
try {
......@@ -822,7 +878,7 @@ const handleGetMessage = async () => {
remarksId: item.remarksId
};
});
} catch (error) { }
} catch (error) {}
};
handleGetMessage();
......@@ -880,7 +936,7 @@ const handleClickPerson = async item => {
ElMessage.warning("找不到当前人员的类型值！");
return;
}
} catch (error) { }
} catch (error) {}
};
// 行政令发布频度
......@@ -1034,7 +1090,7 @@ const handleGetKeyDecree = async () => {
};
});
}
} catch (error) { }
} catch (error) {}
};
handleGetKeyDecree();
......@@ -1135,12 +1191,12 @@ const handleGetDecreeTypeList = async () => {
if (res.code === 200 && res.data) {
decreeTypeList.value = res.data;
}
} catch (error) { }
} catch (error) {}
};
const handleChangeCheckedDecreeType = () => {
handleGetDecreeOrderList()
}
handleGetDecreeOrderList();
};
const pubTime = ref([
{ id: "all", name: "全选" },
......@@ -1155,40 +1211,37 @@ const pubTime = ref([
const activePubTime = ref(["2026"]);
// 处理发布时间全选逻辑
const handlePubTimeChange = (id, checked) => {
const allIds = pubTime.value.filter(item => item.id !== 'all').map(item => item.id);
const allIds = pubTime.value.filter(item => item.id !== "all").map(item => item.id);
if (id === 'all') {
if (id === "all") {
// 点击全选：选中所有或清空所有
activePubTime.value = checked ? ['all', ...allIds] : [];
activePubTime.value = checked ? ["all", ...allIds] : [];
} else {
const selectedIds = activePubTime.value.filter(itemId => itemId !== 'all');
const selectedIds = activePubTime.value.filter(itemId => itemId !== "all");
const isAllSelected = selectedIds.length === allIds.length;
if (isAllSelected && !activePubTime.value.includes('all')) {
if (isAllSelected && !activePubTime.value.includes("all")) {
// 手动选中了所有年份，自动勾选全选
activePubTime.value = ['all', ...allIds];
} else if (!isAllSelected && activePubTime.value.includes('all')) {
activePubTime.value = ["all", ...allIds];
} else if (!isAllSelected && activePubTime.value.includes("all")) {
// 取消某个选项，取消全选状态
activePubTime.value = selectedIds;
}
}
};
const handleAreaChange = (id, checked) => {
const allIds = areaList.value.filter(item => item.id !== 'all').map(item => item.id);
const allIds = areaList.value.filter(item => item.id !== "all").map(item => item.id);
if (id === 'all') {
activeAreaList.value = checked ? ['all', ...allIds] : [];
if (id === "all") {
activeAreaList.value = checked ? ["all", ...allIds] : [];
} else {
const selectedIds = activeAreaList.value.filter(itemId => itemId !== 'all');
const selectedIds = activeAreaList.value.filter(itemId => itemId !== "all");
const isAllSelected = selectedIds.length === allIds.length;
if (isAllSelected && !activeAreaList.value.includes('all')) {
activeAreaList.value = ['all', ...allIds];
} else if (!isAllSelected && activeAreaList.value.includes('all')) {
if (isAllSelected && !activeAreaList.value.includes("all")) {
activeAreaList.value = ["all", ...allIds];
} else if (!isAllSelected && activeAreaList.value.includes("all")) {
activeAreaList.value = selectedIds;
}
}
......@@ -1210,12 +1263,12 @@ const handleGetAreaList = async () => {
})
];
// 设置默认全选
activeAreaList.value = ['all', ...res.data.map(item => item.id)];
activeAreaList.value = ["all", ...res.data.map(item => item.id)];
console.log("areaList", areaList.value);
// 获取列表后重新查询
handleGetDecreeOrderList();
}
} catch (error) { }
} catch (error) {}
};
const totalDecreesNum = ref(0);
......@@ -1227,32 +1280,36 @@ const handleGetDecreeOrderList = async () => {
const p0 = checkedGovIns.value.join(",");
// 处理涉及领域：如果包含 all 或全选，则 researchTypeIds 为空（不传）
let p1 = '';
const allAreaIds = areaList.value.filter(item => item.id !== 'all').map(item => item.id);
const selectedAreaIds = activeAreaList.value.filter(id => id !== 'all');
let p1 = "";
const allAreaIds = areaList.value.filter(item => item.id !== "all").map(item => item.id);
const selectedAreaIds = activeAreaList.value.filter(id => id !== "all");
if (!activeAreaList.value.includes('all') && selectedAreaIds.length > 0 && selectedAreaIds.length < allAreaIds.length) {
if (!activeAreaList.value.includes("all") && selectedAreaIds.length > 0 && selectedAreaIds.length < allAreaIds.length) {
p1 = selectedAreaIds.join(",");
}
// 其他情况（包含all、长度为0、全部选中）p1保持为空，即不传researchTypeIds
// 处理发布时间：如果包含 all 或全选，则 years 为空（不传）
let p2 = '';
const allPubTimeIds = pubTime.value.filter(item => item.id !== 'all').map(item => item.id);
const selectedPubTimeIds = activePubTime.value.filter(id => id !== 'all');
if (!activePubTime.value.includes('all') && selectedPubTimeIds.length > 0 && selectedPubTimeIds.length < allPubTimeIds.length) {
let p2 = "";
const allPubTimeIds = pubTime.value.filter(item => item.id !== "all").map(item => item.id);
const selectedPubTimeIds = activePubTime.value.filter(id => id !== "all");
if (
!activePubTime.value.includes("all") &&
selectedPubTimeIds.length > 0 &&
selectedPubTimeIds.length < allPubTimeIds.length
) {
p2 = selectedPubTimeIds.join(",");
}
// 其他情况（包含all、长度为0、全部选中）p2保持为空，即不传years
console.log(activePubTime.value, 'activePubTime.value')
console.log(activePubTime.value, "activePubTime.value");
const params = {
currentPage: currentPage.value,
pageSize: pageSize.value,
proposeName: p0,
researchTypeIds: p1, // 全选时不传（为空）
researchTypeIds: p1, // 全选时不传（为空）
sortFun: isSort.value,
years: p2, // 全选时不传（为空）
years: p2, // 全选时不传（为空）
typeIds: checkedDecreeType.value.toString()
};
......@@ -1444,7 +1501,6 @@ onMounted(async () => {
}
.btn-text {
width: 80px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
......@@ -1485,7 +1541,9 @@ onMounted(async () => {
// background-size: 100% 100%;
.home-top-bg {
background: url("./assets/images/background.png"), linear-gradient(180.00deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background:
url("./assets/images/background.png"),
linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%;
position: absolute;
width: 100%;
......@@ -1509,57 +1567,6 @@ onMounted(async () => {
padding: 0 160px;
}
.home-main-header-center {
margin-top: 48px;
width: 960px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 0.65);
box-sizing: border-box;
padding: 1px;
position: relative;
border: 1px solid rgba(255, 255, 255, 1);
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 960px;
......@@ -1664,7 +1671,9 @@ onMounted(async () => {
gap: 17px;
margin: 0 6px 16px 6px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
&:hover {
transform: translateY(-3px);
......@@ -1864,7 +1873,6 @@ onMounted(async () => {
display: flex;
flex-direction: column;
justify-content: space-between;
.box1-main-right-title {
width: 100%;
......@@ -1876,10 +1884,10 @@ onMounted(async () => {
line-height: 26px;
display: -webkit-box; /* 将元素设置为弹性盒模型 */
-webkit-line-clamp: 2; /* 限制文本显示的行数 */
-webkit-box-orient: vertical; /* 设置弹性盒子的子元素垂直排列 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
-webkit-line-clamp: 2; /* 限制文本显示的行数 */
-webkit-box-orient: vertical; /* 设置弹性盒子的子元素垂直排列 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}
.box1-main-right-info {
......@@ -1933,9 +1941,8 @@ onMounted(async () => {
font-weight: 400;
line-height: 30px;
display: -webkit-box; /* 将元素设置为弹性盒模型 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}
.box1-main-right-footer {
......@@ -3602,7 +3609,7 @@ onMounted(async () => {
text-align: justify;
}
:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
color: rgba(95, 101, 108, 1);
}
</style>
src/views/exportControl/index.vue
浏览文件 @ 340f15da
<template>
<div class="home-wrapper">
<div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<el-input
v-model="searchExportControlText"
@keyup.enter="handleSearch"
style="width: 800px; height: 100%"
placeholder="搜索出口管制"
/>
<div class="search">
<div class="search-icon">
<img src="@/assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
<!-- <div class="home-header" v-show="!isShow">
<div class="header-left">
<HeaderMenu></HeaderMenu>
......@@ -50,43 +9,15 @@
<headerInfo curTitleName="出口管制"></headerInfo>
</div>
</div> -->
<div class="home-main" ref="homeMainRef" :class="{ 'scroll-main': isShow }">
<div class="home-main" ref="homeMainRef" >
<div class="home-main-header">
<div class="home-main-header-center" v-show="!isShow">
<el-input v-model="searchExportControlText" style="width: 800px; height: 100%" placeholder="搜索出口管制" />
<div class="search">
<div class="search-icon">
<img src="@/assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box" v-show="!isShow">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
<SearchContainer
style="margin-bottom: 0; margin-top: 48px; height: fit-content"
v-if="homeMainRef"
placeholder="搜索出口管制"
:containerRef="homeMainRef"
areaName="实体清单"
/>
<div class="home-main-header-footer-info">
<InfoCard
v-for="(item, index) in infoList"
......
src/views/finance/index.vue
浏览文件 @ 340f15da
......@@ -8,9 +8,16 @@
<headerInfo curTitleName="投融资限制"></headerInfo>
</div>
</div> -->
<div class="home-main">
<div class="home-main" ref="containerRef">
<div class="home-main-header">
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0; height: fit-content"
v-if="containerRef"
placeholder="搜索投融资限制政策"
:containerRef="containerRef"
areaName=""
/>
<!-- <el-input
v-model="searchKey"
style="width: 100%; height: 48px"
......@@ -18,13 +25,13 @@
placeholder="搜索出口管制调查"
:suffix-icon="Search"
/> -->
<el-input v-model="searchKey" style="width: 800px; height: 100%" placeholder="搜索出口管制政策" />
<!-- <el-input v-model="searchKey" style="width: 800px; height: 100%" placeholder="搜索出口管制政策" />
<div class="search">
<div class="search-icon">
<img src="@/assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div> -->
</div>
<!-- <div class="home-main-header-footer">
<div class="home-main-header-footer-item">
......@@ -40,7 +47,7 @@
<div class="item-footer">关键和新型技术清单</div>
</div>
</div> -->
<div class="home-main-header-btn-box">
<!-- <div class="home-main-header-btn-box">
<div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
......@@ -65,7 +72,7 @@
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div> -->
<!-- <div class="home-main-header-footer-link">
<ClickableCard text="最新动态" @click="scrollToTop('position1')" target="_blank" />
<ClickableCard text="资讯要闻" @click="scrollToTop('position2')" target="_blank" />
......@@ -590,7 +597,7 @@ const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
let containerRef = ref(null);
const billList = ref([]);
const curBillListIndex = ref(0);
......@@ -1702,52 +1709,7 @@ onMounted(async () => {
line-height: 30px;
margin-top: 43px;
}
.home-main-header-center {
margin: 0 auto;
margin-top: 20px;
width: 800px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 700px;
......
src/views/innovationSubject/index.vue
浏览文件 @ 340f15da
<!--创新主体主页-->
<template>
<div class="home-wrapper">
<div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<el-input v-model="input" style="width: 680px; height: 100%" placeholder="搜索创新主体" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="scrollToTop('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="scrollToTop('position3')">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="scrollToTop('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
<div class="home-main" ref="containerRef">
<div class="home-main-header">
<!-- <div class="home-main-header-top" v-show="!isShow">
<div class="header-left">
......@@ -48,14 +12,21 @@
<headerInfo curTitleName="主要创新主体"></headerInfo>
</div>
</div> -->
<div class="home-main-header-center" v-show="!isShow">
<el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索创新主体" />
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0;margin-top: 48px; "
v-if="containerRef"
placeholder="搜索创新主体"
:containerRef="containerRef"
areaName=""
/>
<!-- <el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索创新主体" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div> -->
</div>
<!-- <div class="home-main-header-footer" v-show="!isShow">
<div class="home-main-header-footer-item">
......@@ -79,7 +50,7 @@
<div class="item-footer">重要技术进展数量</div>
</div>
</div> -->
<div class="home-main-header-btn-box" v-show="!isShow">
<!-- <div class="home-main-header-btn-box" v-show="!isShow">
<div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
......@@ -104,7 +75,7 @@
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div> -->
</div>
<DivideHeader id="position1" class="divide" :titleText="'最新动态'" style="margin-top: 50px"></DivideHeader>
<div class="home-main-center">
......@@ -1285,56 +1256,7 @@ onMounted(async () => {
justify-content: space-between;
}
.home-main-header-center {
margin-top: 48px;
width: 960px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 340f15da
<template>
<div class="home-wrapper">
<div class="home-main">
<div class="home-main" ref="containerRef">
<div class="home-main-header">
<!-- <div class="home-main-header-top">
<div class="header-left">
......@@ -11,13 +11,13 @@
</div>
</div> -->
<div class="home-main-header-center">
<el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索市场准入限制调查" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
<SearchContainer
style="margin-bottom: 0;margin-top: 48px; height: fit-content"
v-if="containerRef"
placeholder="搜索市场准入限制调查"
:containerRef="containerRef"
areaName=""
/>
</div>
<!-- <div class="home-main-header-footer">
<div class="home-main-header-footer-item">
......@@ -41,7 +41,7 @@
<div class="item-footer">分析报告</div>
</div>
</div> -->
<div class="home-main-header-btn-box">
<!-- <div class="home-main-header-btn-box">
<div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
......@@ -66,7 +66,7 @@
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div> -->
<div class="home-main-header-card-box">
<div
class="home-main-header-card-box-box1 card"
......@@ -724,7 +724,7 @@ import DefaultUserIcon from "@/assets/icons/default-icon1.png";
import DefaultCompanyIcon from "@/assets/icons/default-icon2.png";
import DefaultNewsIcon from "@/assets/icons/default-icon-news.png";
import { reduce } from "lodash";
let containerRef = ref(null);
// 首页分类
const sortInfo = ref([{}]);
const handleGetStatSort = async () => {
......@@ -1672,51 +1672,7 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
}
.home-main-header-center {
margin-top: 48px;
width: 960px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 688px;
......
src/views/scientificFunding/index.vue
浏览文件 @ 340f15da
......@@ -11,10 +11,19 @@
</div>
</div> -->
<!-- 主页面 -->
<div class="main-content">
<div class="main-content" ref="containerRef">
<!-- 搜索栏部分 -->
<div class="search">
<div class="search-main">
<SearchContainer
style="margin-bottom: 48px;height: fit-content;"
v-if="containerRef"
:countInfo="countInfo"
placeholder="搜索科研资助实体、资助记录"
:containerRef="containerRef"
areaName=""
/>
<!-- <div class="search"> -->
<!-- <div class="search-main">
<input v-model="input" placeholder="搜索科研资助实体、资助记录" class="search-input" />
<div class="search-btn">
<img src="./assets/icons/search-icon.png" alt="" />
......@@ -64,8 +73,8 @@
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div> -->
<!-- </div> -->
<!-- 6个数据 -->
<div class="data">
<div v-for="(item, index) in dataList" :key="item.id" class="data-item">
......@@ -136,7 +145,25 @@ import img03 from "./assets/images/img03.png";
import img04 from "./assets/images/img04.png";
import img05 from "./assets/images/img05.png";
import img06 from "./assets/images/img06.png";
let containerRef = ref(null);
let countInfo = ref([
{
name:'科研资助机构',
count:18
},
{
name:'科研资助动态',
count:633
},
{
name:'科研资助项目',
count:312
},
{
name:'经费总额(亿美元)',
count:'15,556'
},
]);
// 搜索框
const input = ref("");
......
src/views/technologyFigures/index.vue
浏览文件 @ 340f15da
<template>
<div class="home-wrapper">
<div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<el-input v-model="input" style="width: 680px; height: 100%" placeholder="搜索科技人物及观点" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "言论动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
<div class="home-box" :class="{ scrollHomeBox: isShow }" ref="containerRef">
<!-- <div class="home-header" v-show="!isShow">
<div class="header-item">国家科技安全</div>
......@@ -55,13 +19,20 @@
<div class="header-item">科技人物观点</div>
</div> -->
<div class="home-main-header-center">
<el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索科技人物及观点" />
<SearchContainer
style="margin-bottom: 0;margin-top: 48px; "
v-if="containerRef"
placeholder="搜索科技人物及观点"
:containerRef="containerRef"
areaName="人物"
/>
<!-- <el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索科技人物及观点" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div> -->
</div>
<!-- <div class="home-main-header-footer">
<div class="home-main-header-footer-item">
......@@ -81,7 +52,7 @@
<div class="item-footer">国会议员</div>
</div>
</div> -->
<div class="home-main-header-btn-box">
<!-- <div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
......@@ -106,7 +77,7 @@
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div> -->
</div>
<div class="home-main-center">
<DivideHeader id="position1" class="divide-header" :titleText="'最新动态'"></DivideHeader>
......@@ -1174,56 +1145,7 @@ onMounted(async () => {
}
}
.home-main-header-center {
margin-top: 48px;
width: 960px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
......
src/views/thinkTank/index.vue
浏览文件 @ 340f15da
<template>
<div class="home-wrapper">
<div class="search-header" v-show="isShow">
<div class="search-header-container">
<div class="home-main-header-center">
<el-input v-model="searchThinktankText" @keyup.enter="handleSearch"
style="width: 680px; height: 100%" placeholder="搜索智库报告" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
<div class="home-main" ref="containerRef">
<div class="home-top-bg"></div>
<div class="home-main-header">
<!-- <div class="home-main-header-top" v-show="!isShow">
<!-- <div class="home-main-header-top">
<div class="header-left">
<HeaderMenu></HeaderMenu>
</div>
......@@ -53,15 +12,22 @@
</div>
</div> -->
<div class="home-main-header-center" v-show="!isShow">
<el-input v-model="searchThinktankText" @keyup.enter="handleSearch"
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0; margin-top: 48px; height: fit-content"
v-if="containerRef"
placeholder="搜索智库报告"
:containerRef="containerRef"
areaName="智库"
/>
<!-- <el-input v-model="searchThinktankText" @keyup.enter="handleSearch"
style="width: 838px; height: 100%" placeholder="搜索智库报告" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text" @click="handleSearch">搜索</div>
</div>
</div> -->
</div>
<!-- <div class="home-main-header-footer">
<div class="home-main-header-footer-item">
......@@ -81,40 +47,14 @@
<div class="item-footer">热点科技领域</div>
</div>
</div> -->
<div class="home-main-header-btn-box" v-show="!isShow">
<div class="btn" @click="handleToPosi('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position3')">
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
<div class="btn" @click="handleToPosi('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="home-main-header-card-box">
<div class="card" v-for="(item, index) in cardList" :key="index" @click="handleClick(item)">
<div class="card-header">
<div class="icon">
<img :src="item.logo" alt="" />
</div>
<div class="rank"
:class="{ rank1: item.rank === 1, rank2: item.rank === 2, rank3: item.rank === 3 }">
<div class="rank" :class="{ rank1: item.rank === 1, rank2: item.rank === 2, rank3: item.rank === 3 }">
{{ "No." + (index + 1) }}
</div>
</div>
......@@ -131,12 +71,17 @@
</el-popover> -->
<div class="content">{{ item.desc }}</div>
<div class="tag-box">
<div class="tag" :class="{
tag1: val.status === 1,
tag2: val.status === 2,
tag3: val.status === 3,
tag4: val.status === 4
}" v-for="(val, idx) in item.tagList" :key="idx">
<div
class="tag"
:class="{
tag1: val.status === 1,
tag2: val.status === 2,
tag3: val.status === 3,
tag4: val.status === 4
}"
v-for="(val, idx) in item.tagList"
:key="idx"
>
{{ val.industryName }}
</div>
</div>
......@@ -171,8 +116,14 @@
</div>
<div class="box1-header-right" @click="handleClickToDetail">查看详情 ></div>
</div>
<el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
indicator-position="none">
<el-carousel
ref="carouselRef"
height="395px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
>
<el-carousel-item v-for="(itemData, index) in box1Data" :key="index">
<div class="box1-main">
<div class="box1-main-left">
......@@ -181,8 +132,7 @@
<div class="box1-main-right">
<div class="title">{{ itemData?.reportName }}</div>
<div class="tag-box">
<div class="tag" v-for="(item, index) in itemData?.industryVOList"
:key="index">
<div class="tag" v-for="(item, index) in itemData?.industryVOList" :key="index">
{{ item.industryName }}
</div>
</div>
......@@ -213,13 +163,20 @@
</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index"
@click="handleClickToDetail()">
<div class="item-left" :class="{
itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
itemLeftStatus2: item.status === '重大风险',
itemLeftStatus3: item.status === '特别重大'
}">
<div
class="box2-main-item"
v-for="(item, index) in warningList"
:key="index"
@click="handleClickToDetail()"
>
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
itemLeftStatus2: item.status === '重大风险',
itemLeftStatus3: item.status === '特别重大'
}"
>
{{ item.status || "一般风险" }}
</div>
<div class="item-right">
......@@ -258,8 +215,12 @@
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index"
@click="handleToNewsAnalysis(news)">
<div
class="box3-item"
v-for="(news, index) in newsList"
:key="index"
@click="handleToNewsAnalysis(news)"
>
<div class="left">
<img :src="news.newsImage !== null ? news.newsImage : defaultNewsIcon" />
</div>
......@@ -299,10 +260,16 @@
</div>
</div> -->
<div class="box4-main">
<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)"
:key="index" :avatar="item.personImage ? item.personImage : defaultHeaderIcin"
:name="item.personName" :time="item.time" :source="item.orgName"
:content="item.remarks" />
<MessageBubble
v-for="(item, index) in messageList"
@click="handleClickPerson(item)"
:key="index"
:avatar="item.personImage ? item.personImage : defaultHeaderIcin"
:name="item.personName"
:time="item.time"
:source="item.orgName"
:content="item.remarks"
/>
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.personImage ? item.personImage : defaultHeaderIcin" alt="" />
......@@ -330,8 +297,13 @@
</div>
<div class="box5-select-box">
<el-select v-model="box5selectetedMonths" placeholder="选择时间" style="width: 120px">
<el-option v-for="item in box5MonthsList" :key="item.value" :label="item.label"
:value="item.value" @click="changeBox5Data(item.value)" />
<el-option
v-for="item in box5MonthsList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="changeBox5Data(item.value)"
/>
</el-select>
</div>
</div>
......@@ -345,8 +317,13 @@
<div class="header-title">{{ "政策建议领域分布" }}</div>
<div class="box6-select-box">
<el-select v-model="box6selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option v-for="item in box6YearList" :key="item.value" :label="item.label"
:value="item.value" @click="handleBox6()" />
<el-option
v-for="item in box6YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="handleBox6()"
/>
</el-select>
</div>
</div>
......@@ -375,21 +352,30 @@
</div>
<div class="box8-select-box">
<el-select v-model="box8selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option v-for="item in box8YearList" :key="item.value" :label="item.label"
:value="item.value" @click="changeBox8Data(item.value)" />
<el-option
v-for="item in box8YearList"
:key="item.value"
:label="item.label"
:value="item.value"
@click="changeBox8Data(item.value)"
/>
</el-select>
</div>
</div>
<div class="box8-main">
<div class="box8-item" v-for="(item, index) in box8Data" :key="index">
<div class="item-left"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
<div
class="item-left"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
{{ index + 1 }}
</div>
<!-- <el-popover effect="dark" :content="item.clause" placement="top-start">
<template #reference> -->
<div class="item-center"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
<div
class="item-center"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
{{ item.clause }}
</div>
<!-- </template>
......@@ -407,8 +393,13 @@
<div class="home-main-footer-header">
<div class="btn-box">
<div class="btn" :class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList" :key="index" @click="handleClickCate(cate)">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate }}
</div>
</div>
......@@ -439,13 +430,22 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
class="all-checkbox" @change="handleCheckAllChange">
<el-checkbox
v-model="checkAll"
:indeterminate="isIndeterminate"
class="all-checkbox"
@change="handleCheckAllChange"
>
全部领域
</el-checkbox>
<el-checkbox v-for="research in areaList" :key="research.id"
v-model="selectedAreaList" :label="research.id"
@change="handleCheckedAreaChange()" class="filter-checkbox">
<el-checkbox
v-for="research in areaList"
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
@change="handleCheckedAreaChange()"
class="filter-checkbox"
>
{{ research.name }}
</el-checkbox>
</div>
......@@ -459,13 +459,22 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-model="checkAllTime" class="all-checkbox"
:indeterminate="isIndeterminateTime" @change="handleCheckAllChangeTime">
<el-checkbox
v-model="checkAllTime"
class="all-checkbox"
:indeterminate="isIndeterminateTime"
@change="handleCheckAllChangeTime"
>
全部时间
</el-checkbox>
<el-checkbox-group v-model="selectedPubTimeList">
<el-checkbox v-for="time in pubTimeList" :key="time.id" :label="time.id"
class="filter-checkbox" @change="handleCheckedAreaChangeTime()">
<el-checkbox
v-for="time in pubTimeList"
:key="time.id"
:label="time.id"
class="filter-checkbox"
@change="handleCheckedAreaChangeTime()"
>
{{ time.name }}
</el-checkbox>
</el-checkbox-group>
......@@ -475,8 +484,12 @@
</div>
<div class="right">
<div class="card-box">
<div class="footer-card" v-for="(item, index) in curFooterList" :key="index"
@click="handleToReportDetail(item)">
<div
class="footer-card"
v-for="(item, index) in curFooterList"
:key="index"
@click="handleToReportDetail(item)"
>
<div class="footer-card-top">
<img :src="item.imageUrl" alt="" />
</div>
......@@ -499,8 +512,14 @@
<div class="right-footer">
<div class="info">共 {{ total }} 项</div>
<div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" />
<el-pagination
:page-size="12"
background
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
:current-page="currentPage"
/>
</div>
</div>
</div>
......@@ -571,33 +590,9 @@ import Box1Img from "./assets/images/box1-img.png";
import Box1Logo from "./assets/images/box1-logo.png";
import { setCanvasCreator } from "echarts/core";
import { ElMessage } from "element-plus";
import { useContainerScroll } from "@/hooks/useScrollShow";
const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef);
const handleToPosi = id => {
const element = document.getElementById(id);
if (element && containerRef.value) {
// 1. 如果是从完整搜索框跳转，先强制切换状态稳定布局
if (!isShow.value) {
isShow.value = true;
}
// 2. 使用 nextTick 等待 DOM 布局（如高度切换）完成后再进行坐标计算
nextTick(() => {
const containerRect = containerRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离，不受嵌套布局影响
const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;
containerRef.value.scrollTo({
top: top,
behavior: "smooth"
});
});
}
};
const searchThinktankText = ref(""); //搜索科技人物及观点
// 智库列表
......@@ -1604,7 +1599,7 @@ const handleClickPerson = async item => {
ElMessage.warning("找不到当前人员的类型值！");
return;
}
} catch (error) { }
} catch (error) {}
};
// 点击新闻条目，跳转到新闻分析页
......@@ -1746,7 +1741,6 @@ onMounted(async () => {
gap: 16px;
.btn {
display: flex;
align-items: center;
gap: 9px;
......@@ -1764,7 +1758,6 @@ onMounted(async () => {
}
.btn-text {
width: 80px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
......@@ -1799,7 +1792,9 @@ onMounted(async () => {
background-size: 100% 100%;
.home-top-bg {
background: url("./assets/images/background.png"), linear-gradient(180.00deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background:
url("./assets/images/background.png"),
linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%;
position: absolute;
width: 100%;
......@@ -1823,59 +1818,7 @@ onMounted(async () => {
padding: 0 160px;
}
.home-main-header-center {
margin-top: 48px;
width: 960px;
height: 48px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 0.65);
box-sizing: border-box;
padding: 1px;
position: relative;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 10px;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论