Skip to content

R
risk-monitor
提交 ccc591ba authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

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

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