提交 37a0a678 authored 作者: coderBryanFu's avatar coderBryanFu

规则限制、科研资助体系概览页细节优化

上级 43fc652c
...@@ -315,7 +315,7 @@ ...@@ -315,7 +315,7 @@
</div> </div>
<div class="box6-main"> <div class="box6-main">
<div class="box6-main-select-box"> <div class="box6-main-select-box">
<el-select v-model="box6SelectedYear" placeholder="选择发布时间" style="width: 120px"> <el-select v-model="box6SelectedYear" placeholder="选择时间" style="width: 120px">
<el-option <el-option
v-for="item in box6YearList" v-for="item in box6YearList"
:key="item.value" :key="item.value"
...@@ -348,9 +348,9 @@ ...@@ -348,9 +348,9 @@
<div class="box7-main-left" id="box7Chart1"></div> <div class="box7-main-left" id="box7Chart1"></div>
<div class="box7-main-right"> <div class="box7-main-right">
<div class="box7-main-right-top"> <div class="box7-main-right-top">
<el-select v-model="curAreaYear" placeholder="选择发布时间" style="width: 120px"> <el-select v-model="box7SelectedYear" placeholder="选择时间" style="width: 120px">
<el-option <el-option
v-for="item in areaYearList" v-for="item in box7YearList"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
...@@ -661,7 +661,7 @@ const chart1Data = ref({ ...@@ -661,7 +661,7 @@ const chart1Data = ref({
] ]
}); });
const areaYearList = ref([ const box7YearList = ref([
{ {
label: "2025", label: "2025",
value: "2025" value: "2025"
...@@ -688,7 +688,7 @@ const areaYearList = ref([ ...@@ -688,7 +688,7 @@ const areaYearList = ref([
} }
]); ]);
const curAreaYear = ref("2025"); const box7SelectedYear = ref("2025");
const surveyYearList = ref([ const surveyYearList = ref([
{ {
......
...@@ -295,7 +295,25 @@ const totalDistribution = ref([ ...@@ -295,7 +295,25 @@ const totalDistribution = ref([
change: "较上个月+3", change: "较上个月+3",
path: "/cooperationRestrictions", path: "/cooperationRestrictions",
color: ["rgba(139,69,19,0.4)", "rgba(139,69,19,0.5)", "rgba(139,69,19,0.3)", "rgba(139,69,19,1)"] color: ["rgba(139,69,19,0.4)", "rgba(139,69,19,0.5)", "rgba(139,69,19,0.3)", "rgba(139,69,19,1)"]
} },
{
titlle: "规则限制",
value: 24,
text: "724",
unit: "个",
change: "较上月+5",
path: "/ruleRestrictions",
color: ["#9AC8FF", "#BCDCFF", "#E7F4FF", "#0F5EDB"]
},
{
titlle: "科研资助体系",
value: 64,
text: "128",
unit: "个",
change: "较上月+8",
path: "/scientificFunding",
color: ["#FDE19A", "#FEECBD", "#FFFBE6", "#D68E16"]
},
]); ]);
const startIndex = ref(0); const startIndex = ref(0);
...@@ -486,11 +504,11 @@ const handleChangeSwiper = (val) => { ...@@ -486,11 +504,11 @@ const handleChangeSwiper = (val) => {
} }
onMounted(() => { onMounted(() => {
// swiper.value = setInterval(() => { swiper.value = setInterval(() => {
// if (isOnSwiper.value) { if (isOnSwiper.value) {
// handleSwitch("right"); handleSwitch("right");
// } }
// }, 3500); }, 3600);
let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true); let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="left-title"> <div class="left-title">
<img src="./assets/icon01.png" alt=""> <img src="./assets/icon01.png" alt="">
<div class="tit">新闻资讯</div> <div class="tit">新闻资讯</div>
<div class="more">更多 +</div> <div class="more" @click="handleToMoreNews">更多 +</div>
</div> </div>
<div class="left-main"> <div class="left-main">
<div v-for="item in leftList" :key="item.id" class="main-item"> <div v-for="item in leftList" :key="item.id" class="main-item">
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import router from "@/router"
import image01 from './assets/image01.png' import image01 from './assets/image01.png'
import image02 from './assets/image02.png' import image02 from './assets/image02.png'
import image03 from './assets/image03.png' import image03 from './assets/image03.png'
...@@ -128,6 +129,12 @@ const rightList = ref([ ...@@ -128,6 +129,12 @@ const rightList = ref([
} }
]) ])
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
...@@ -35,7 +35,6 @@ ...@@ -35,7 +35,6 @@
<span class="ul-title">限制实体:</span> <span class="ul-title">限制实体:</span>
<span class="ul-content">重庆信息通信研究院</span> <span class="ul-content">重庆信息通信研究院</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -59,7 +58,7 @@ ...@@ -59,7 +58,7 @@
</div> </div>
</div> </div>
<div style="margin: 6px 34px 0 23px"> <div style="margin: 6px 34px 0 23px">
<div v-for="item in list" :key="item.id" class="right-main"> <div v-for="item in list" :key="item.id" class="right-main" @click="handleClickToDetail">
<div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }"> <div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' }">
{{ item.title }} {{ item.title }}
</div> </div>
...@@ -67,7 +66,7 @@ ...@@ -67,7 +66,7 @@
<div class="main-right">{{ item.time }}</div> <div class="main-right">{{ item.time }}</div>
</div> </div>
</div> </div>
<div class="right-mainbtn"> <div class="right-mainbtn" @click="handleToMoreRiskSignal">
<img src="./assets/btn.png" alt="" /> <img src="./assets/btn.png" alt="" />
查看更多 查看更多
</div> </div>
...@@ -77,6 +76,7 @@ ...@@ -77,6 +76,7 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import router from "@/router";
const list = ref([ const list = ref([
{ {
...@@ -104,6 +104,19 @@ const list = ref([ ...@@ -104,6 +104,19 @@ const list = ref([
time: "一天前" time: "一天前"
} }
]); ]);
// 跳转详情
const handleClickToDetail = () => {
// router.push("/decreeLayout");
const route = router.resolve("/ruleRestrictions/detail");
window.open(route.href, "_blank");
};
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -346,11 +359,16 @@ const list = ref([ ...@@ -346,11 +359,16 @@ const list = ref([
} }
} }
.right-main { .right-main {
width: 463px; width: 468px;
padding-right: 5px;
height: 47px; height: 47px;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.main-left { .main-left {
width: 40px; width: 40px;
height: 40px; height: 40px;
......
...@@ -40,47 +40,47 @@ ...@@ -40,47 +40,47 @@
</div> </div>
</div> </div>
<div class="search-bottom"> <div class="search-bottom">
<div class="btn"> <div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">最新动态</div> <div class="btn-text">最新动态</div>
<div class="btn-icon">></div> <div class="btn-icon">></div>
</div> </div>
<div class="btn"> <div class="btn" @click="scrollToTop('position2')">
<div class="btn-text">咨询要闻</div> <div class="btn-text">咨询要闻</div>
<div class="btn-icon">></div> <div class="btn-icon">></div>
</div> </div>
<div class="btn"> <div class="btn" @click="scrollToTop('position3')">
<div class="btn-text">数据总览</div> <div class="btn-text">数据总览</div>
<div class="btn-icon">></div> <div class="btn-icon">></div>
</div> </div>
<div class="btn"> <div class="btn" @click="scrollToTop('position4')">
<div class="btn-text">资源库</div> <div class="btn-text">资源库</div>
<div class="btn-icon">></div> <div class="btn-icon">></div>
</div> </div>
</div> </div>
</div> </div>
<!-- 最新动态 --> <!-- 最新动态 -->
<div class="newdata"> <div class="newdata" id="position1">
<com-title title="最新动态" /> <com-title title="最新动态" />
<div class="newdata-main"> <div class="newdata-main">
<newData /> <newData />
</div> </div>
</div> </div>
<!-- 资讯要问 --> <!-- 资讯要问 -->
<div class="ask"> <div class="ask" id="position2">
<com-title title="咨询要闻" /> <com-title title="咨询要闻" />
<div class="ask-main"> <div class="ask-main">
<askPage /> <askPage />
</div> </div>
</div> </div>
<!-- 数据总览 --> <!-- 数据总览 -->
<div class="datasub"> <div class="datasub" id="position3">
<com-title title="数据总览" /> <com-title title="数据总览" />
<div class="datasub-main"> <div class="datasub-main">
<dataSub /> <dataSub />
</div> </div>
</div> </div>
<!-- 资源库 --> <!-- 资源库 -->
<div class="reslib"> <div class="reslib" id="position4">
<com-title title="资源库" /> <com-title title="资源库" />
<div class="reslib-main"> <div class="reslib-main">
<resLib /> <resLib />
...@@ -99,6 +99,8 @@ import askPage from "./components/askPage/index.vue"; ...@@ -99,6 +99,8 @@ import askPage from "./components/askPage/index.vue";
import dataSub from "./components/dataSub/index.vue"; import dataSub from "./components/dataSub/index.vue";
import resLib from "./components/resLib/index.vue"; import resLib from "./components/resLib/index.vue";
import scrollToTop from "@/utils/scrollToTop";
import { useContainerScroll } from "@/hooks/useScrollShow"; import { useContainerScroll } from "@/hooks/useScrollShow";
// 搜索框 // 搜索框
...@@ -168,6 +170,9 @@ const handleBackHome = () => { ...@@ -168,6 +170,9 @@ const handleBackHome = () => {
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{
border: 1px solid var(--color-main-active);
}
.search-input { .search-input {
border: none; border: none;
outline: none; outline: none;
...@@ -187,7 +192,8 @@ const handleBackHome = () => { ...@@ -187,7 +192,8 @@ const handleBackHome = () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 120px; width: 120px;
height: 42px; height: 46px;
margin-right: -3px;
border-radius: 8px; border-radius: 8px;
background-color: rgb(5, 95, 194); background-color: rgb(5, 95, 194);
font-size: 18px; font-size: 18px;
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="left-title"> <div class="left-title">
<img src="./assets/icon01.png" alt=""> <img src="./assets/icon01.png" alt="">
<div class="tit">新闻资讯</div> <div class="tit">新闻资讯</div>
<div class="more">更多 +</div> <div class="more" @click="handleToMoreNews">更多 +</div>
</div> </div>
<div class="left-main"> <div class="left-main">
<div v-for="item in leftList" :key="item.id" class="main-item"> <div v-for="item in leftList" :key="item.id" class="main-item">
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import router from "@/router"
import image01 from './assets/image01.png' import image01 from './assets/image01.png'
import image02 from './assets/image02.png' import image02 from './assets/image02.png'
import image03 from './assets/image03.png' import image03 from './assets/image03.png'
...@@ -128,6 +129,13 @@ const rightList = ref([ ...@@ -128,6 +129,13 @@ const rightList = ref([
} }
]) ])
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
...@@ -39,7 +39,6 @@ ...@@ -39,7 +39,6 @@
<span class="ul-title">资助对象:</span> <span class="ul-title">资助对象:</span>
<span class="ul-content">蒙大拿理工大学、博伊西州立大学、路易斯安那州立大学等6个资助对象</span> <span class="ul-content">蒙大拿理工大学、博伊西州立大学、路易斯安那州立大学等6个资助对象</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -50,7 +49,9 @@ ...@@ -50,7 +49,9 @@
<li class="left-bottom-li">内容摘要:</li> <li class="left-bottom-li">内容摘要:</li>
</ul> </ul>
<div class="left-bottom-content"> <div class="left-bottom-content">
美国国家科学基金会正在蒙大拿州、爱达荷州和路易斯安那州投资约 3000 万美元,建立 NSF EPSCoR 科学与技术卓越研究中心(NSF EPSCoR CREST 中心)。这些中心旨在扩展 STEM 知识,提升科研产出,并吸引更多来自这些地区的学生进入 STEM 领域。 美国国家科学基金会正在蒙大拿州、爱达荷州和路易斯安那州投资约 3000 万美元,建立 NSF EPSCoR
科学与技术卓越研究中心(NSF EPSCoR CREST 中心)。这些中心旨在扩展 STEM
知识,提升科研产出,并吸引更多来自这些地区的学生进入 STEM 领域。
</div> </div>
</div> </div>
</div> </div>
...@@ -64,14 +65,21 @@ ...@@ -64,14 +65,21 @@
</div> </div>
<div style="margin: 6px 34px 0 23px"> <div style="margin: 6px 34px 0 23px">
<div v-for="item in list" :key="item.id" class="right-main"> <div v-for="item in list" :key="item.id" class="right-main">
<div class="main-left" :class="{ cl4: item.title === '特别重大', cl5: item.title === '重大风险' ,cl6: item.title === '一般风险'}"> <div
class="main-left"
:class="{
cl4: item.title === '特别重大',
cl5: item.title === '重大风险',
cl6: item.title === '一般风险'
}"
>
{{ item.title }} {{ item.title }}
</div> </div>
<div class="main-center">{{ item.content }}</div> <div class="main-center">{{ item.content }}</div>
<div class="main-right">{{ item.time }}</div> <div class="main-right">{{ item.time }}</div>
</div> </div>
</div> </div>
<div class="right-mainbtn"> <div class="right-mainbtn" @click="handleToMoreRiskSignal">
<img src="./assets/btn.png" alt="" /> <img src="./assets/btn.png" alt="" />
查看更多 查看更多
</div> </div>
...@@ -81,6 +89,7 @@ ...@@ -81,6 +89,7 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import router from "@/router";
const list = ref([ const list = ref([
{ {
...@@ -120,6 +129,12 @@ const list = ref([ ...@@ -120,6 +129,12 @@ const list = ref([
time: "一天前" time: "一天前"
} }
]); ]);
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -362,11 +377,16 @@ const list = ref([ ...@@ -362,11 +377,16 @@ const list = ref([
} }
} }
.right-main { .right-main {
width: 463px; width: 468px;
padding-right: 5px;
height: 47px; height: 47px;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.main-left { .main-left {
width: 40px; width: 40px;
height: 40px; height: 40px;
......
...@@ -40,19 +40,19 @@ ...@@ -40,19 +40,19 @@
</div> </div>
</div> </div>
<div class="search-bottom"> <div class="search-bottom">
<div class="btn"> <div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">最新动态</div> <div class="btn-text">最新动态</div>
<div class="btn-icon">></div> <div class="btn-icon">></div>
</div> </div>
<div class="btn"> <div class="btn" @click="scrollToTop('position2')">
<div class="btn-text">咨询要闻</div> <div class="btn-text">咨询要闻</div>
<div class="btn-icon">></div> <div class="btn-icon">></div>
</div> </div>
<div class="btn"> <div class="btn" @click="scrollToTop('position3')">
<div class="btn-text">数据总览</div> <div class="btn-text">数据总览</div>
<div class="btn-icon">></div> <div class="btn-icon">></div>
</div> </div>
<div class="btn"> <div class="btn" @click="scrollToTop('position4')">
<div class="btn-text">资源库</div> <div class="btn-text">资源库</div>
<div class="btn-icon">></div> <div class="btn-icon">></div>
</div> </div>
...@@ -69,28 +69,28 @@ ...@@ -69,28 +69,28 @@
</div> </div>
</div> </div>
<!-- 最新动态 --> <!-- 最新动态 -->
<div class="newdata"> <div class="newdata" id="position1">
<com-title title="最新动态" /> <com-title title="最新动态" />
<div class="newdata-main"> <div class="newdata-main">
<newData /> <newData />
</div> </div>
</div> </div>
<!-- 资讯要问 --> <!-- 资讯要问 -->
<div class="ask"> <div class="ask" id="position2">
<com-title title="咨询要闻" /> <com-title title="咨询要闻" />
<div class="ask-main"> <div class="ask-main">
<askPage /> <askPage />
</div> </div>
</div> </div>
<!-- 数据总览 --> <!-- 数据总览 -->
<div class="datasub"> <div class="datasub" id="position3">
<com-title title="数据总览" /> <com-title title="数据总览" />
<div class="datasub-main"> <div class="datasub-main">
<dataSub /> <dataSub />
</div> </div>
</div> </div>
<!-- 资源库 --> <!-- 资源库 -->
<div class="reslib"> <div class="reslib" id="position4">
<com-title title="资源库" /> <com-title title="资源库" />
<div class="reslib-main"> <div class="reslib-main">
<resLib /> <resLib />
...@@ -109,6 +109,8 @@ import askPage from "./components/askPage/index.vue"; ...@@ -109,6 +109,8 @@ import askPage from "./components/askPage/index.vue";
import dataSub from "./components/dataSub/index.vue"; import dataSub from "./components/dataSub/index.vue";
import resLib from "./components/resLib/index.vue"; import resLib from "./components/resLib/index.vue";
import scrollToTop from "@/utils/scrollToTop";
import { useContainerScroll } from "@/hooks/useScrollShow"; import { useContainerScroll } from "@/hooks/useScrollShow";
import img01 from "./assets/images/img01.png"; import img01 from "./assets/images/img01.png";
...@@ -242,6 +244,9 @@ const dataList = ref([ ...@@ -242,6 +244,9 @@ const dataList = ref([
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 {
border: 1px solid var(--color-main-active);
}
.search-input { .search-input {
border: none; border: none;
outline: none; outline: none;
...@@ -261,7 +266,8 @@ const dataList = ref([ ...@@ -261,7 +266,8 @@ const dataList = ref([
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 120px; width: 120px;
height: 42px; height: 46px;
margin-right: -3px;
border-radius: 8px; border-radius: 8px;
background-color: rgb(5, 95, 194); background-color: rgb(5, 95, 194);
font-size: 18px; font-size: 18px;
...@@ -371,6 +377,11 @@ const dataList = ref([ ...@@ -371,6 +377,11 @@ const dataList = ref([
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
img { img {
width: 88px; width: 88px;
height: 88px; height: 88px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论