Skip to content

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

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

上级 4c3f7e40
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 115 行增加 和 468 行删除
src/components/SearchBar.vue
浏览文件 @ 340f15da
...@@ -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");
......
src/components/SearchContainer.vue
浏览文件 @ 340f15da
<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;
......
src/views/coopRestriction/index.vue
浏览文件 @ 340f15da
<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="最新动态" />
......
src/views/exportControl/index.vue
浏览文件 @ 340f15da
<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"
......
src/views/finance/index.vue
浏览文件 @ 340f15da
...@@ -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;
......
src/views/innovationSubject/index.vue
浏览文件 @ 340f15da
<!--创新主体主页--> <!--创新主体主页-->
<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;
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 340f15da
<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;
......
src/views/scientificFunding/index.vue
浏览文件 @ 340f15da
...@@ -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("");
......
src/views/technologyFigures/index.vue
浏览文件 @ 340f15da
<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;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论