提交 ccc591ba authored 作者: coderBryanFu's avatar coderBryanFu

统一更新每个模块概览页背景

上级 868c9f0a
......@@ -13,13 +13,9 @@
</div> -->
<!-- 主页面 -->
<div class="main-content" ref="homeMainRef" :class="{ 'scroll-main': isShow }">
<div class="home-top-bg"></div>
<!-- 搜索栏部分 -->
<SearchContainer
v-if="homeMainRef"
placeholder="搜索合作限制"
:containerRef="homeMainRef"
areaName=""
/>
<SearchContainer v-if="homeMainRef" placeholder="搜索合作限制" :containerRef="homeMainRef" areaName="" />
<!-- 最新动态 -->
<div class="newdata" id="position1">
......@@ -108,6 +104,7 @@ const handleToPosi = id => {
margin: 0;
padding: 0;
}
.coop-page {
width: 100%;
height: 100%;
......@@ -127,9 +124,22 @@ const handleToPosi = id => {
overflow-y: auto;
width: 100%;
height: 100%;
background: url("./assets/images/background.png");
// background: url("./assets/images/background.png");
// background-size: 100% 100%;
padding: 44px 0 30px 0;
.home-top-bg {
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%;
padding: 44px 160px 30px 160px;
position: absolute;
width: 100%;
height: 100%;
z-index: -100;
top: -64px;
}
.search {
width: 960px;
height: 168px;
......@@ -146,9 +156,11 @@ const handleToPosi = id => {
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search-input {
border: none;
outline: none;
......@@ -166,6 +178,7 @@ const handleToPosi = id => {
color: #a8abb2;
}
}
.search-btn {
margin-right: -3px;
cursor: pointer;
......@@ -181,6 +194,7 @@ const handleToPosi = id => {
font-family: "Microsoft YaHei";
line-height: 24px;
color: #fff;
img {
width: 22px;
height: 22px;
......@@ -188,6 +202,7 @@ const handleToPosi = id => {
}
}
}
.search-center {
width: 440px;
height: 57px;
......@@ -195,10 +210,12 @@ const handleToPosi = id => {
display: flex;
align-items: center;
justify-content: space-between;
.search-item {
box-sizing: border-box;
width: 120px;
height: 57px;
.search-item-num {
width: 120px;
height: 22px;
......@@ -210,6 +227,7 @@ const handleToPosi = id => {
text-align: center;
cursor: pointer;
}
.search-item-name {
width: 120px;
height: 24px;
......@@ -223,6 +241,7 @@ const handleToPosi = id => {
}
}
}
.search-bottom {
width: 688px;
height: 48px;
......@@ -230,6 +249,7 @@ const handleToPosi = id => {
margin-top: 36px;
display: flex;
justify-content: space-between;
// gap: 16px;
.btn {
display: flex;
......@@ -243,9 +263,11 @@ const handleToPosi = id => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -256,12 +278,14 @@ const handleToPosi = id => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -270,40 +294,48 @@ const handleToPosi = id => {
}
}
}
.newdata {
width: 1600px;
height: 538px;
margin: 36px auto 64px auto;
.newdata-main {
width: 1600px;
height: 460px;
margin-top: 36px;
}
}
.ask {
width: 1600px;
height: 528px;
margin: 0 auto 64px auto;
.ask-main {
width: 1600px;
height: 450px;
margin-top: 36px;
}
}
.datasub {
width: 1600px;
height: 538px;
margin: 0 auto 88px auto;
.datasub-main {
width: 1600px;
height: 460px;
margin-top: 36px;
}
}
.reslib {
width: 1600px;
height: 1633px;
margin: 0 auto 0px auto;
.reslib-main {
width: 1600px;
height: 1565px;
......@@ -368,6 +400,7 @@ const handleToPosi = id => {
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
......@@ -426,6 +459,7 @@ const handleToPosi = id => {
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......
......@@ -48,6 +48,7 @@
</div>
</div> -->
<div class="home-main" ref="homeMainRef">
<div class="home-top-bg"></div>
<div class="home-main-header">
<SearchContainer style="margin-bottom: 0; margin-top: 48px; height: fit-content" v-if="homeMainRef"
placeholder="搜索出口管制" :containerRef="homeMainRef" areaName="实体清单" />
......@@ -597,7 +598,7 @@
</template>
<script setup>
import NewsList from "@/components/NewsList/NewsList.vue";
import RiskSignal from "@/components/RiskSignal/RiskSignal.vue";
import { onMounted, ref, computed, reactive, shallowRef, watch, nextTick } from "vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
......@@ -2160,8 +2161,18 @@ const handleMediaClick = item => {
width: 100%;
height: 100%;
overflow-y: auto;
background: url("./assets/images/background.png");
.home-top-bg {
background:
url("./assets/images/background.png"),
linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%;
position: absolute;
width: 100%;
height: 100%;
z-index: -100;
top: -64px;
}
.home-main-header {
display: flex;
......
......@@ -9,6 +9,7 @@
</div>
</div> -->
<div class="home-main" ref="containerRef">
<div class="home-top-bg"></div>
<div class="home-main-header">
<div class="home-main-header-center">
<SearchContainer style="margin-bottom: 0; height: fit-content" v-if="containerRef" placeholder="搜索投融资限制政策"
......@@ -1713,11 +1714,24 @@ onMounted(async () => {
overflow-y: hidden;
.home-main {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
background: url("./assets/images/background.png");
// background: url("./assets/images/background.png");
// background-size: 100% 100%;
.home-top-bg {
background:
url("./assets/images/background.png"),
linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%;
position: absolute;
width: 100%;
height: 100%;
z-index: -100;
top: -64px;
}
.home-main-header {
margin-top: 43px;
......
......@@ -3,6 +3,7 @@
<div class="home-wrapper">
<div class="home-main" ref="containerRef">
<div class="home-top-bg"></div>
<div class="home-main-header">
<!-- <div class="home-main-header-top" v-show="!isShow">
<div class="header-left">
......@@ -1179,8 +1180,21 @@ onMounted(async () => {
width: 100%;
height: 100%;
overflow-y: auto;
background: url("./assets/images/background.png");
// background: url("./assets/images/background.png");
// background-size: 100% 100%;
position: relative;
.home-top-bg {
background:
url("./assets/images/background.png"),
linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%;
position: absolute;
width: 100%;
height: 100%;
z-index: -100;
top: -64px;
}
.home-main-header {
display: flex;
......
<template>
<div class="home-wrapper">
<div class="home-main" ref="containerRef">
<div class="home-top-bg"></div>
<div class="home-main-header">
<!-- <div class="home-main-header-top">
<div class="header-left">
......@@ -1572,8 +1573,21 @@ onMounted(async () => {
width: 100%;
height: 100%;
overflow-y: auto;
background: url("./assets/images/background.png");
// background: url("./assets/images/background.png");
// background-size: 100% 100%;
position: relative;
.home-top-bg {
background:
url("./assets/images/background.png"),
linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%;
position: absolute;
width: 100%;
height: 100%;
z-index: -100;
top: -64px;
}
.home-main-header {
display: flex;
......
<template>
<div class="coop-page">
<div class="main-content" ref="homeMainRef">
<div class="home-top-bg"></div>
<!-- 搜索栏部分 -->
<SearchContainer
v-if="homeMainRef"
:countInfo="statCountInfo"
placeholder="搜索规则限制"
:containerRef="homeMainRef"
areaName=""
/>
<SearchContainer v-if="homeMainRef" :countInfo="statCountInfo" placeholder="搜索规则限制" :containerRef="homeMainRef"
areaName="" />
<!-- 最新动态 -->
<div class="newdata" id="position1">
<com-title title="最新动态" />
......@@ -138,9 +134,11 @@ onMounted(async () => {
margin: 0;
padding: 0;
}
.coop-page {
width: 100%;
height: 100%;
// .breadcrumb {
// width: 100%;
// height: 64px;
......@@ -156,9 +154,21 @@ onMounted(async () => {
overflow-y: auto;
width: 100%;
height: 100%;
background: url("./assets/images/background.png");
// background: url("./assets/images/background.png");
// background-size: 100% 100%;
padding: 44px 0px 30px 0px;
.home-top-bg {
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%;
padding: 44px 160px 30px 160px;
position: absolute;
width: 100%;
height: 100%;
z-index: -100;
top: -64px;
}
&.scroll-main {
height: calc(100% - 144px);
......@@ -168,6 +178,7 @@ onMounted(async () => {
width: 960px;
height: 168px;
margin: 0 auto 68px auto;
.search-center {
width: 688px;
height: 48px;
......@@ -207,6 +218,7 @@ onMounted(async () => {
}
}
}
.search-main {
display: flex;
padding-right: 3px;
......@@ -218,9 +230,11 @@ onMounted(async () => {
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
border: 1px solid #fff;
&:hover {
border: 1px solid var(--color-main-active);
}
.search-input {
border: none;
outline: none;
......@@ -238,6 +252,7 @@ onMounted(async () => {
color: #a8abb2;
}
}
.search-btn {
cursor: pointer;
display: flex;
......@@ -253,6 +268,7 @@ onMounted(async () => {
font-family: "Microsoft YaHei";
line-height: 22px;
color: #fff;
img {
width: 18px;
height: 18px;
......@@ -260,6 +276,7 @@ onMounted(async () => {
}
}
}
.search-bottom {
width: 688px;
height: 48px;
......@@ -267,6 +284,7 @@ onMounted(async () => {
margin-top: 36px;
display: flex;
justify-content: space-between;
// gap: 16px;
.btn {
display: flex;
......@@ -280,9 +298,11 @@ onMounted(async () => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -293,12 +313,14 @@ onMounted(async () => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -307,40 +329,48 @@ onMounted(async () => {
}
}
}
.newdata {
width: 1600px;
height: 538px;
margin: 36px auto 64px auto;
.newdata-main {
width: 1600px;
height: 460px;
margin-top: 36px;
}
}
.ask {
width: 1600px;
height: 528px;
margin: 0 auto 64px auto;
.ask-main {
width: 1600px;
height: 450px;
margin-top: 36px;
}
}
.datasub {
width: 1600px;
height: 538px;
margin: 0 auto 88px auto;
.datasub-main {
width: 1600px;
height: 460px;
margin-top: 36px;
}
}
.reslib {
width: 1600px;
height: 1633px;
margin: 0 auto 0px auto;
.reslib-main {
width: 1600px;
height: 1565px;
......@@ -409,6 +439,7 @@ onMounted(async () => {
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
......@@ -445,9 +476,11 @@ onMounted(async () => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
color: var(--color-main-active);
......@@ -458,12 +491,14 @@ onMounted(async () => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......
......@@ -12,15 +12,10 @@
</div> -->
<!-- 主页面 -->
<div class="main-content" ref="containerRef">
<div class="home-top-bg"></div>
<!-- 搜索栏部分 -->
<SearchContainer
style="margin-bottom: 48px;height: fit-content;"
v-if="containerRef"
:countInfo="countInfo"
placeholder="搜索科研资助实体、资助记录"
:containerRef="containerRef"
areaName=""
/>
<SearchContainer style="margin-bottom: 48px;height: fit-content;" v-if="containerRef" :countInfo="countInfo"
placeholder="搜索科研资助实体、资助记录" :containerRef="containerRef" areaName="" />
<!-- <div class="search"> -->
<!-- <div class="search-main">
......@@ -148,20 +143,20 @@ import img06 from "./assets/images/img06.png";
let containerRef = ref(null);
let countInfo = ref([
{
name:'科研资助机构',
count:18
name: '科研资助机构',
count: 18
},
{
name:'科研资助动态',
count:633
name: '科研资助动态',
count: 633
},
{
name:'科研资助项目',
count:312
name: '科研资助项目',
count: 312
},
{
name:'经费总额(亿美元)',
count:'15,556'
name: '经费总额(亿美元)',
count: '15,556'
},
]);
// 搜索框
......@@ -282,9 +277,22 @@ onMounted(async () => {
overflow-y: auto;
width: 100%;
height: 100%;
background: url("./assets/images/background.png");
// background: url("./assets/images/background.png");
// background-size: 100% 100%;
padding: 44px 0 30px 0;
position: relative;
.home-top-bg {
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%;
padding: 44px 160px 30px 160px;
position: absolute;
width: 100%;
height: 100%;
z-index: -100;
top: -64px;
}
.search {
width: 960px;
......@@ -459,11 +467,13 @@ onMounted(async () => {
display: flex;
align-items: center;
padding: 0px 24px;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.data-text-item{
.data-text-item {
display: flex;
flex-direction: column;
justify-content: center;
......@@ -472,6 +482,7 @@ onMounted(async () => {
margin-left: 16px;
margin-bottom: 4px;
}
img {
width: 88px;
height: 88px;
......
......@@ -9,6 +9,7 @@
<div class="header-item">></div>
<div class="header-item">科技人物观点</div>
</div> -->
<div class="home-top-bg"></div>
<div class="home-main">
<div class="home-main-header" v-show="!isShow">
<!-- <div class="home-main-header-top">
......@@ -19,13 +20,8 @@
<div class="header-item">科技人物观点</div>
</div> -->
<div class="home-main-header-center">
<SearchContainer
style="margin-bottom: 0;margin-top: 48px; "
v-if="containerRef"
placeholder="搜索科技人物及观点"
:containerRef="containerRef"
areaName="人物"
/>
<SearchContainer style="margin-bottom: 0;margin-top: 48px; " v-if="containerRef" placeholder="搜索科技人物及观点"
:containerRef="containerRef" areaName="人物" />
<!-- <el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索科技人物及观点" />
<div class="search">
<div class="search-icon">
......@@ -1048,9 +1044,22 @@ onMounted(async () => {
.home-box {
width: 100%;
height: 100%;
background: url("./assets/images/background.png");
background-size: 100% 100%;
// background: url("./assets/images/background.png");
// background-size: 100% 100%;
overflow-y: auto;
position: relative;
.home-top-bg {
background:
url("./assets/images/background.png"),
linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%;
position: absolute;
width: 100%;
height: 100%;
z-index: -100;
top: -64px;
}
// .home-header {
// height: 64px;
......
......@@ -1603,6 +1603,7 @@ onMounted(async () => {
}
.home-main {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论