Skip to content

R
risk-monitor
提交 648a175e authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

智库轮播

上级 09e34f76
隐藏空白字符变更
内嵌 并排
正在显示 包含 106 行增加 和 142 行删除
src/views/thinkTank/index.vue
浏览文件 @ 648a175e
...@@ -85,17 +85,12 @@ ...@@ -85,17 +85,12 @@
</el-popover> </el-popover>
<div class="tag-box"> <div class="tag-box">
<div <div class="tag" :class="{
class="tag" tag1: val.status === 1,
:class="{ tag2: val.status === 2,
tag1: val.status === 1, tag3: val.status === 3,
tag2: val.status === 2, tag4: val.status === 4
tag3: val.status === 3, }" v-for="(val, idx) in item.tagList" :key="idx">
tag4: val.status === 4
}"
v-for="(val, idx) in item.tagList"
:key="idx"
>
{{ val.industryName }} {{ val.industryName }}
</div> </div>
</div> </div>
...@@ -111,6 +106,16 @@ ...@@ -111,6 +106,16 @@
<DivideHeader id="position1" class="divide-header" :titleText="'最新动态'"></DivideHeader> <DivideHeader id="position1" class="divide-header" :titleText="'最新动态'"></DivideHeader>
<div class="center-top"> <div class="center-top">
<div class="box1"> <div class="box1">
<div class="box1-left" @click="handleSwithCurDecree('left')">
<div class="icon">
<img src="./assets/images/box1-left.png" alt="" />
</div>
</div>
<div class="box1-right" @click="handleSwithCurDecree('right')">
<div class="icon">
<img src="./assets/images/box1-right.png" alt="" />
</div>
</div>
<div class="box1-header"> <div class="box1-header">
<div class="box1-header-left"> <div class="box1-header-left">
<div class="icon"> <div class="icon">
...@@ -118,50 +123,38 @@ ...@@ -118,50 +123,38 @@
</div> </div>
<div class="title">{{ "智库发布" }}</div> <div class="title">{{ "智库发布" }}</div>
</div> </div>
<div class="box1-header-right" @click="toDetaile()">查看详情 ></div> <div class="box1-header-right" @click="handleClickToDetail">查看详情 ></div>
</div> </div>
<div style="display: flex"> <el-carousel ref="carouselRef" height="395px" :autoplay="true" :interval="3000" arrow="never"
<img indicator-position="none">
src="./assets/images/right-left-icon1.png" <el-carousel-item v-for="(itemData, indexData) in box1Data" :key="index">
alt="" <div class="box1-main">
style="margin-top: 174px; width: 24px; height: 48px" <div class="box1-main-left">
@click="changeBox1Data('previous')" <img :src="itemData?.imageUrl" alt="" />
/>
<div class="box1-main">
<div class="box1-main-left">
<img :src="box1Data[box1DataIndex]?.imageUrl" alt="" />
</div>
<div class="box1-main-right">
<div class="title">{{ box1Data[box1DataIndex]?.reportName }}</div>
<div class="tag-box">
<div
class="tag"
v-for="(item, index) in box1Data[box1DataIndex]?.industryVOList"
:key="index"
>
{{ item.industryName }}
</div>
</div> </div>
<div class="content">{{ box1Data[box1DataIndex]?.summary }}</div> <div class="box1-main-right">
<div class="box1-right-footer"> <div class="title">{{ itemData?.reportName }}</div>
<div class="time">{{ box1Data[box1DataIndex]?.time }}</div> <div class="tag-box">
<div class="name"> <div class="tag" v-for="(item, index) in itemData?.industryVOList" :key="index">
<div class="logo"> {{ item.industryName }}
<img :src="box1Data[box1DataIndex]?.thinkTankImage" alt="" /> </div>
</div>
<div class="content">{{ itemData?.summary }}</div>
<div class="box1-right-footer">
<div class="time">{{ itemData?.time }}</div>
<div class="name">
<div class="logo">
<img :src="itemData?.thinkTankImage" alt="" />
</div>
<div class="text">{{ itemData?.thinkTankName }}</div>
<div class="text">{{ itemData?.reportDate }}</div>
</div> </div>
<div class="text">{{ box1Data[box1DataIndex]?.thinkTankName }}</div>
<div class="text">{{ box1Data[box1DataIndex]?.reportDate }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-carousel-item>
<img </el-carousel>
src="./assets/images/right-left-icon2.png"
alt=""
style="margin-top: 174px; width: 24px; height: 48px"
@click="changeBox1Data('next')"
/>
</div>
</div> </div>
<div class="box2"> <div class="box2">
<div class="box2-header"> <div class="box2-header">
...@@ -175,14 +168,11 @@ ...@@ -175,14 +168,11 @@
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index"> <div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div <div class="item-left" :class="{
class="item-left" itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
:class="{ itemLeftStatus2: item.status === '重大风险',
itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值', itemLeftStatus3: item.status === '特别重大'
itemLeftStatus2: item.status === '重大风险', }">
itemLeftStatus3: item.status === '特别重大'
}"
>
{{ item.status || "一般风险" }} {{ item.status || "一般风险" }}
</div> </div>
<div class="item-right"> <div class="item-right">
...@@ -219,12 +209,7 @@ ...@@ -219,12 +209,7 @@
</div> </div>
</div> </div>
<div class="box3-main"> <div class="box3-main">
<div <div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)">
class="box3-item"
v-for="(news, index) in newsList"
:key="index"
@click="handleToNewsAnalysis(news)"
>
<div class="left"> <div class="left">
<img :src="news.newsImage !== null ? news.newsImage : defaultNewsIcon" /> <img :src="news.newsImage !== null ? news.newsImage : defaultNewsIcon" />
</div> </div>
...@@ -290,13 +275,8 @@ ...@@ -290,13 +275,8 @@
</div> </div>
<div class="box5-select-box"> <div class="box5-select-box">
<el-select v-model="box5selectetedMonths" placeholder="选择时间" style="width: 120px"> <el-select v-model="box5selectetedMonths" placeholder="选择时间" style="width: 120px">
<el-option <el-option v-for="item in box5MonthsList" :key="item.value" :label="item.label" :value="item.value"
v-for="item in box5MonthsList" @click="changeBox5Data(item.value)" />
:key="item.value"
:label="item.label"
:value="item.value"
@click="changeBox5Data(item.value)"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -310,13 +290,8 @@ ...@@ -310,13 +290,8 @@
<div class="header-title">{{ "政策建议领域分布" }}</div> <div class="header-title">{{ "政策建议领域分布" }}</div>
<div class="box6-select-box"> <div class="box6-select-box">
<el-select v-model="box6selectetedYear" placeholder="选择时间" style="width: 120px"> <el-select v-model="box6selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option <el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value"
v-for="item in box6YearList" @click="handleBox6()" />
:key="item.value"
:label="item.label"
:value="item.value"
@click="handleBox6()"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -345,30 +320,21 @@ ...@@ -345,30 +320,21 @@
</div> </div>
<div class="box8-select-box"> <div class="box8-select-box">
<el-select v-model="box8selectetedYear" placeholder="选择时间" style="width: 120px"> <el-select v-model="box8selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option <el-option v-for="item in box8YearList" :key="item.value" :label="item.label" :value="item.value"
v-for="item in box8YearList" @click="changeBox8Data(item.value)" />
:key="item.value"
:label="item.label"
:value="item.value"
@click="changeBox8Data(item.value)"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="box8-main"> <div class="box8-main">
<div class="box8-item" v-for="(item, index) in box8Data" :key="index"> <div class="box8-item" v-for="(item, index) in box8Data" :key="index">
<div <div class="item-left"
class="item-left" :class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
{{ index + 1 }} {{ index + 1 }}
</div> </div>
<!-- <el-popover effect="dark" :content="item.clause" placement="top-start"> <!-- <el-popover effect="dark" :content="item.clause" placement="top-start">
<template #reference> --> <template #reference> -->
<div <div class="item-center"
class="item-center" :class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
{{ item.clause }} {{ item.clause }}
</div> </div>
<!-- </template> <!-- </template>
...@@ -385,13 +351,8 @@ ...@@ -385,13 +351,8 @@
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader> <DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header"> <div class="home-main-footer-header">
<div class="btn-box"> <div class="btn-box">
<div <div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
class="btn" :key="index" @click="handleClickCate(cate)">
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate }} {{ cate }}
</div> </div>
</div> </div>
...@@ -409,22 +370,12 @@ ...@@ -409,22 +370,12 @@
</div> </div>
<div class="select-main"> <div class="select-main">
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="all-checkbox"
v-model="checkAll" @change="handleCheckAllChange">
:indeterminate="isIndeterminate"
class="all-checkbox"
@change="handleCheckAllChange"
>
全部领域 全部领域
</el-checkbox> </el-checkbox>
<el-checkbox <el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList"
v-for="research in areaList" :label="research.id" @change="handleCheckedAreaChange()" class="filter-checkbox">
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
@change="handleCheckedAreaChange()"
class="filter-checkbox"
>
{{ research.name }} {{ research.name }}
</el-checkbox> </el-checkbox>
</div> </div>
...@@ -438,22 +389,13 @@ ...@@ -438,22 +389,13 @@
</div> </div>
<div class="select-main"> <div class="select-main">
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox <el-checkbox v-model="checkAllTime" class="all-checkbox" :indeterminate="isIndeterminateTime"
v-model="checkAllTime" @change="handleCheckAllChangeTime">
class="all-checkbox"
:indeterminate="isIndeterminateTime"
@change="handleCheckAllChangeTime"
>
全部时间 全部时间
</el-checkbox> </el-checkbox>
<el-checkbox-group v-model="selectedPubTimeList"> <el-checkbox-group v-model="selectedPubTimeList">
<el-checkbox <el-checkbox v-for="time in pubTimeList" :key="time.id" :label="time.id" class="filter-checkbox"
v-for="time in pubTimeList" @change="handleCheckedAreaChangeTime()">
:key="time.id"
:label="time.id"
class="filter-checkbox"
@change="handleCheckedAreaChangeTime()"
>
{{ time.name }} {{ time.name }}
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
...@@ -463,12 +405,8 @@ ...@@ -463,12 +405,8 @@
</div> </div>
<div class="right"> <div class="right">
<div class="card-box"> <div class="card-box">
<div <div class="footer-card" v-for="(item, index) in curFooterList" :key="index"
class="footer-card" @click="handleToReportDetail(item.id)">
v-for="(item, index) in curFooterList"
:key="index"
@click="handleToReportDetail(item.id)"
>
<div class="footer-card-top"> <div class="footer-card-top">
<img :src="item.imageUrl" alt="" /> <img :src="item.imageUrl" alt="" />
</div> </div>
...@@ -489,14 +427,8 @@ ...@@ -489,14 +427,8 @@
<div class="right-footer"> <div class="right-footer">
<div class="info">共{{ total }}项智库报告</div> <div class="info">共{{ total }}项智库报告</div>
<div class="page-box"> <div class="page-box">
<el-pagination <el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
:page-size="12" @current-change="handleCurrentChange" :current-page="currentPage" />
background
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
:current-page="currentPage"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -664,6 +596,22 @@ function changeBox1Data(type) { ...@@ -664,6 +596,22 @@ function changeBox1Data(type) {
} }
} }
const carouselRef = ref(null);
// 点击查看详情
const handleClickToDetail = () => {
let activeIndex = 0;
if (carouselRef.value) {
activeIndex = carouselRef.value.activeIndex;
}
console.log("当前 Carousel 激活索引:", activeIndex);
const id = box1Data.value[activeIndex].id;
box1DataIndex.value = activeIndex
toDetaile()
};
const toDetaile = () => { const toDetaile = () => {
const route = router.resolve({ const route = router.resolve({
name: "ReportDetail", name: "ReportDetail",
...@@ -673,6 +621,16 @@ const toDetaile = () => { ...@@ -673,6 +621,16 @@ const toDetaile = () => {
}); });
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
// 切换当前智库
const handleSwithCurDecree = name => {
console.log(name, carouselRef.value)
if (name === "left") {
carouselRef.value.prev();
} else {
carouselRef.value.next();
}
};
// 风险信号 // 风险信号
const warningList = ref([ const warningList = ref([
{ {
...@@ -1542,7 +1500,7 @@ const handleClickPerson = async item => { ...@@ -1542,7 +1500,7 @@ const handleClickPerson = async item => {
ElMessage.warning("找不到当前人员的类型值！"); ElMessage.warning("找不到当前人员的类型值！");
return; return;
} }
} catch (error) {} } catch (error) { }
}; };
// 点击新闻条目，跳转到新闻分析页 // 点击新闻条目，跳转到新闻分析页
...@@ -1575,7 +1533,7 @@ const handleSearch = () => { ...@@ -1575,7 +1533,7 @@ const handleSearch = () => {
} }
}); });
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
} }
onMounted(async () => { onMounted(async () => {
...@@ -1746,6 +1704,7 @@ onMounted(async () => { ...@@ -1746,6 +1704,7 @@ onMounted(async () => {
margin-top: 39px; margin-top: 39px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn { .btn {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1758,9 +1717,11 @@ onMounted(async () => { ...@@ -1758,9 +1717,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);
...@@ -1771,12 +1732,14 @@ onMounted(async () => { ...@@ -1771,12 +1732,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%;
...@@ -2021,6 +1984,7 @@ onMounted(async () => { ...@@ -2021,6 +1984,7 @@ onMounted(async () => {
width: 24px; width: 24px;
height: 48px; height: 48px;
cursor: pointer; cursor: pointer;
z-index: 10000;
img { img {
width: 100%; width: 100%;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论