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

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

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