254 lines
8.1 KiB
Plaintext
254 lines
8.1 KiB
Plaintext
<script setup lang="ts">
|
|
import { getArticlePage,report } from '@/api/daikin/base'
|
|
import { message } from '@/utils/message'
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
|
|
import { NCarousel } from 'naive-ui';
|
|
|
|
const route = useRoute()
|
|
const { push } = useRouter()
|
|
const listData = ref<any[]>([])
|
|
async function getPageList() {
|
|
const { code } = report({ moduleCode:'App_Article' })
|
|
const { rows } = await getArticlePage({ pageNum: 1, pageSize: 10, type: 2, position: 'homePage' } as any);
|
|
// console.log(rows)
|
|
// for (let index = 0; index < 50; index++) {
|
|
listData.value.push(...rows)
|
|
|
|
// }
|
|
console.log(listData.value.length)
|
|
}
|
|
onMounted(getPageList)
|
|
|
|
|
|
// console.log(listData)
|
|
|
|
// const toDetail2 =(n: { id: any; })=>{
|
|
// // console.log(route,route.path,n.id)
|
|
// if(n.id===0) return
|
|
// if(n.isSelect===1){
|
|
// push(`${route.path.replace('/Home','')}/intelligence/within/${n.id}`)
|
|
// }
|
|
// else{
|
|
// message.info("您没有权限查看！")
|
|
// }
|
|
// }
|
|
|
|
const modules = [Autoplay, Pagination, Navigation, A11y]
|
|
|
|
</script>
|
|
<template>
|
|
<div class="card news cursor-pointer">
|
|
<div class="card_title" @click="push({ name: 'Intelligence' })">外部情报</div>
|
|
<div class="card_sub-title">责任者：调达研究院 研究企画T</div>
|
|
<div class="card_content">
|
|
<div class="news_card w-437px flex items-end gap-12px text-#fff/80">
|
|
<img src="@/assets/images/bg-card6-text.svg"
|
|
class="h26px absolute left-16px top-16px animate__animated animate__zoomIn animate__delay-2s animate__slower animate__repeat-2" />
|
|
<div class="news_card_item i1 flex-1 w0 h100px p10px pt56px flex flex-col justify-around">
|
|
<img src="@/assets/images/WATCHING@2x.png"
|
|
class="w41px h47px absolute left-40px top-25px animate__animated animate__infinite animate__heartBeat" />
|
|
<img src="@/assets/images/WATCHING2@2x.png" class="w80px left-10px top-10px" />
|
|
<!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 0" v-for="i in listData.slice(0,2)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
|
|
</div>
|
|
<div class="news_card_item i2 flex-1 w0 h120px p10px pt56px flex flex-col justify-around">
|
|
<img src="@/assets/images/ALARM@2x.png"
|
|
class="w61px h63px absolute left-28px top-30px animate__animated animate__infinite animate__fadeIn" />
|
|
<img src="@/assets/images/ALARM2@2x.png" class="w70px left-15px top-14px" />
|
|
<!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 2" v-for="i in listData.slice(2,4)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
|
|
</div>
|
|
<div class="news_card_item i3 w140px h160px p10px pt70px flex flex-col justify-around">
|
|
<img src="@/assets/images/WARNING@2x.png"
|
|
class="w82px h66px absolute left-30px top-45px animate__animated animate__infinite animate__flipOutY" />
|
|
<img src="@/assets/images//WARNING2@2x.png" class="w100px left-8px top-20px" />
|
|
<!-- <p class="truncate" v-if="listData && Array.isArray(listData) && listData.length > 4" v-for="i in listData.slice(4,7)" :key="i" @click="toDetail2(i)">{{ i.title }}</p> -->
|
|
</div>
|
|
</div>
|
|
<div class="card_title !pl0 !pt0" @click="push({ name: 'News' })">最新News</div>
|
|
<div class="font-16px h-100px overflow-y-auto mt10px">
|
|
<!-- <n-carousel direction="vertical" dot-placement="right" style="width: 100%; height: 100px" autoplay :interval="1200"
|
|
:slides-per-view="2" :space-between="0" :loop="false" mousewheel>
|
|
<div class="mt-10px" v-if="listData && Array.isArray(listData) && listData.length > 0" v-for="i in listData"
|
|
:key="i">
|
|
<div class="text-#142142 truncate text-16px"> <a :href="i.url" class="no-underline text-#142142">{{ i.title
|
|
}}</a></div>
|
|
<div class="text-#808696 mt-8px text-14px"><span>来源于: {{ i.source }}</span> <span>{{
|
|
i.publishTime }}</span></div>
|
|
</div>
|
|
</n-carousel> -->
|
|
|
|
<swiper id="swiperList2" v-if="listData" :slides-per-view="2"
|
|
:autoplay="{ delay: 1000, disableOnInteraction: false }" :speed="500" :space-between="0" :direction="'vertical'"
|
|
:scrollbar="{ draggable: false }" :loop="true" :modules="modules" style="height: 100px">
|
|
<swiper-slide v-for="(i, index) in listData" :key="index">
|
|
<div class="mt-10px" >
|
|
<div class="text-#142142 truncate text-16px">
|
|
<a :href="i.url" class="no-underline text-#142142">{{ i.title}}</a>
|
|
</div>
|
|
<div class="text-#808696 mt-8px text-14px">
|
|
<span>来源于: {{ i.source }}</span> <span>{{i.publishTime }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</swiper-slide>
|
|
</swiper>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="less">
|
|
::-webkit-scrollbar {
|
|
width: 1px;
|
|
}
|
|
|
|
.card {
|
|
// width: 480px;
|
|
// height: 428px;
|
|
width: 480px;
|
|
height: 395px;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
|
|
background-color: #fff;
|
|
// border: 1px solid #e7ebf5;
|
|
box-shadow: 1px 2px 12px rgba(14, 86, 221, 0.32);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: ' ';
|
|
background-image: url('@/assets/images/bg-card.svg');
|
|
pointer-events: none;
|
|
display: block;
|
|
width: 100%;
|
|
height: 127px;
|
|
background-size: cover;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.card_title {
|
|
flex-shrink: 0;
|
|
font-size: 28px;
|
|
color: #142142;
|
|
padding: 20px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.card_sub-title {
|
|
color: rgba(128, 134, 150, 0.8);
|
|
font-size: 16px;
|
|
padding: 0 20px;
|
|
padding-bottom: 0;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.topics {
|
|
.item {
|
|
border-radius: 8px;
|
|
width: 210px;
|
|
height: 155px;
|
|
box-shadow: inset 1.4px 1.4px 0px 0px rgba(255, 255, 255, 0.004);
|
|
overflow: hidden;
|
|
|
|
background-image: url('@/assets/images/bg-card4.svg');
|
|
background-position: -2px -2px;
|
|
background-repeat: no-repeat;
|
|
background-size: 215px 165px;
|
|
position: relative;
|
|
|
|
.item_title {
|
|
padding-left: 16px;
|
|
padding-top: 22px;
|
|
color: #002fa7;
|
|
position: relative;
|
|
// z-index: 9;
|
|
}
|
|
|
|
.item_sub-title {
|
|
color: rgba(128, 134, 150, 0.8);
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
padding: 0 16px;
|
|
padding-bottom: 0;
|
|
margin-top: 10px;
|
|
z-index: 9;
|
|
}
|
|
|
|
.item_img {
|
|
position: absolute;
|
|
bottom: -10px;
|
|
right: 0;
|
|
// z-index: 5;
|
|
transition: transform 0.3s;
|
|
|
|
&:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.news {
|
|
.card_content {
|
|
padding: 20px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.news_card {
|
|
// width: 442px;
|
|
height: 180px;
|
|
padding: 16px;
|
|
font-size: 14px;
|
|
|
|
// background-image: url('./images/bg-card6.png');
|
|
background-repeat: no-repeat;
|
|
// background-position: 0 0;
|
|
// background-size: cover;
|
|
background-size: 100% 100%;
|
|
|
|
// border: 0px solid;
|
|
// // padding: 0;
|
|
// border-width: 4px;
|
|
// border-image-outset: 4px;
|
|
// // box-sizing: content-box;
|
|
|
|
// border-image-source: url('@/assets/images/bg-card6.svg');
|
|
// border-image-slice: 4 4 4 4;
|
|
// border-image-repeat: round repeat;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
.news_card_item {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
border-radius: 10px;
|
|
background-position: 0 4px;
|
|
|
|
&.i1 {
|
|
background-image: url('@/assets/images/bg-card6-11.svg');
|
|
}
|
|
|
|
&.i2 {
|
|
background-image: url('@/assets/images/bg-card6-21.svg');
|
|
}
|
|
|
|
&.i3 {
|
|
background-image: url('@/assets/images/bg-card6-31.svg');
|
|
background-position: 0 10px;
|
|
}
|
|
}
|
|
}
|
|
</style> |