提交 340f15da authored 作者: 李郝虎's avatar 李郝虎

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

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