|
|
|
@ -7,12 +7,14 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="fr"> |
|
|
|
<div class="fr"> |
|
|
|
<ul> |
|
|
|
<ul> |
|
|
|
<li v-for="item in topNewList" :key="item.id" @click="goToNewInfo(item)"> {{ item.title }}</li> |
|
|
|
<li> 向着航天强国目标勇毅前进————以习近平通知为核心的党中央关心引领探月工程纪实 </li> |
|
|
|
|
|
|
|
<li> 在第七个“中国农民丰收节”到来之际，习近平向全国广大农民和工作在“三农”战线上的同志们致以节日... </li> |
|
|
|
|
|
|
|
<li>李强会见马来西亚最高元首易卜拉欣</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="more"> |
|
|
|
<div class="more"> |
|
|
|
<p @click="goToNewList">更多</p> |
|
|
|
<p>更多</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="box2"> |
|
|
|
<div class="box2"> |
|
|
|
@ -93,22 +95,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="box5"> |
|
|
|
<div class="box5"> |
|
|
|
<div class="item"> |
|
|
|
<img src="../../../../../assets/images/image3.png" alt="" style="width: 100%" /> |
|
|
|
<SvgIcon name="yiqi" size="40px" /> |
|
|
|
|
|
|
|
<div class="sum">10584</div> |
|
|
|
|
|
|
|
<div class="text">仪器数量（套）</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item"> |
|
|
|
|
|
|
|
<SvgIcon name="jigou" size="40px" /> |
|
|
|
|
|
|
|
<div class="sum">801</div> |
|
|
|
|
|
|
|
<div class="text">加盟机构（家）</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item"> |
|
|
|
|
|
|
|
<SvgIcon name="quan" size="40px" /> |
|
|
|
|
|
|
|
<div class="sum">437</div> |
|
|
|
|
|
|
|
<div class="text">科研平台数量（套）</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="box6"> |
|
|
|
<div class="box6"> |
|
|
|
<div class="share1"> |
|
|
|
<div class="share1"> |
|
|
|
@ -150,10 +137,6 @@ |
|
|
|
import { ref, reactive } from 'vue'; |
|
|
|
import { ref, reactive } from 'vue'; |
|
|
|
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'; |
|
|
|
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'; |
|
|
|
import {getindexnews} from '/@/api/mainHome'; |
|
|
|
import {getindexnews} from '/@/api/mainHome'; |
|
|
|
import { useRoute, useRouter } from 'vue-router'; |
|
|
|
|
|
|
|
import SvgIcon from '/@/components/Icon/src/SvgIcon.vue'; |
|
|
|
|
|
|
|
const route = useRoute(); |
|
|
|
|
|
|
|
const router = useRouter(); |
|
|
|
|
|
|
|
let list = reactive([1, 2, 3, 4, 5, 6]); |
|
|
|
let list = reactive([1, 2, 3, 4, 5, 6]); |
|
|
|
const classOptions = { |
|
|
|
const classOptions = { |
|
|
|
limitMoveNum: 2, |
|
|
|
limitMoveNum: 2, |
|
|
|
@ -163,24 +146,12 @@ |
|
|
|
'https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', |
|
|
|
'https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', |
|
|
|
'https://tse1-mm.cn.bing.net/th/id/OIP-C.DOOxGtkUiW8QevWtAxsRtAHaEK?rs=1&pid=ImgDetMain', |
|
|
|
'https://tse1-mm.cn.bing.net/th/id/OIP-C.DOOxGtkUiW8QevWtAxsRtAHaEK?rs=1&pid=ImgDetMain', |
|
|
|
]); |
|
|
|
]); |
|
|
|
const topNewList = ref([]); |
|
|
|
|
|
|
|
const getlist = async () => { |
|
|
|
const getlist = async () => { |
|
|
|
const res = await getindexnews(); |
|
|
|
const res = await getindexnews(); |
|
|
|
console.log(res); |
|
|
|
console.log(res); |
|
|
|
topNewList.value = res.records; |
|
|
|
} |
|
|
|
}; |
|
|
|
getlist() |
|
|
|
getlist(); |
|
|
|
|
|
|
|
const goToNewList = () => { |
|
|
|
|
|
|
|
router.push('/main-home/newsList'); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
const goToNewInfo = (item) => { |
|
|
|
|
|
|
|
router.push({ |
|
|
|
|
|
|
|
path: '/main-home/newsInfo', |
|
|
|
|
|
|
|
query: { |
|
|
|
|
|
|
|
id: item.id, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
|
<style scoped lang="less"> |
|
|
|
@ -204,40 +175,33 @@ |
|
|
|
|
|
|
|
|
|
|
|
.paper { |
|
|
|
.paper { |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.paper .fl { |
|
|
|
.paper .fl { |
|
|
|
width: 110px; |
|
|
|
width: 110px; |
|
|
|
// float: left; |
|
|
|
float: left; |
|
|
|
margin-left: 30px; |
|
|
|
margin-left: 30px; |
|
|
|
padding-top: 28px; |
|
|
|
padding-top: 28px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.paper .fr { |
|
|
|
.paper .fr { |
|
|
|
// float: right; |
|
|
|
float: right; |
|
|
|
padding: 38px 170px 0 0; |
|
|
|
padding: 38px 170px 0 0; |
|
|
|
margin-left: 30px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.fr ul li { |
|
|
|
.fr ul li { |
|
|
|
list-style: disc; |
|
|
|
list-style: disc; |
|
|
|
font-size: 20px; |
|
|
|
font-size: 20px; |
|
|
|
padding-bottom: 12px; |
|
|
|
padding-bottom: 12px; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.fr ul li::marker { |
|
|
|
.fr ul li::marker { |
|
|
|
color: #1b4290; |
|
|
|
color: #1b4290; |
|
|
|
} |
|
|
|
} |
|
|
|
.fr ul li:hover { |
|
|
|
|
|
|
|
color: #1b4290; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.box1 .more { |
|
|
|
.box1 .more { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
right: 50px; |
|
|
|
right: 50px; |
|
|
|
bottom: 5px; |
|
|
|
bottom: 5px; |
|
|
|
color: #1b4290; |
|
|
|
color: #1b4290; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box2 { |
|
|
|
.box2 { |
|
|
|
@ -320,28 +284,6 @@ |
|
|
|
|
|
|
|
|
|
|
|
.box5 { |
|
|
|
.box5 { |
|
|
|
height: 134px; |
|
|
|
height: 134px; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
background-color: #F2F7FB; |
|
|
|
|
|
|
|
.item { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.sum { |
|
|
|
|
|
|
|
font-size: 30px; |
|
|
|
|
|
|
|
font-weight: 700; |
|
|
|
|
|
|
|
color: #ff0000; |
|
|
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.text{ |
|
|
|
|
|
|
|
color: #333333; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
span{ |
|
|
|
|
|
|
|
vertical-align: bottom; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.box6 { |
|
|
|
.box6 { |
|
|
|
padding: 20px 0; |
|
|
|
padding: 20px 0; |
|
|
|
|
