123 lines
3.1 KiB
Plaintext
123 lines
3.1 KiB
Plaintext
<script setup lang="ts">
|
|
import HomeHead from "@/views/home/components/HomeHead.vue";
|
|
import { useDate } from "@/views/home/hooks/useDate";
|
|
import { getArticlePage } from "@/api/daikin/base";
|
|
|
|
const { day, week } = useDate();
|
|
const { push } = useRouter();
|
|
const pageInfo = reactive({
|
|
currentPage: 1,
|
|
pageSize: 13,
|
|
total: 10,
|
|
});
|
|
const listData = ref();
|
|
async function getPageList() {
|
|
const { rows, total } = await getArticlePage({
|
|
pageNum: pageInfo.currentPage,
|
|
pageSize: pageInfo.pageSize,
|
|
type: 2,
|
|
position: "homePage",
|
|
} as any);
|
|
pageInfo.total = total;
|
|
listData.value = rows;
|
|
}
|
|
getPageList();
|
|
|
|
const handleSizeChange = (e) => {
|
|
console.log(e);
|
|
};
|
|
|
|
const handleCurrentChange = (e) => {
|
|
console.log(e);
|
|
};
|
|
const lazyState = computed(() => [pageInfo.currentPage]);
|
|
watch(
|
|
() => unref(lazyState),
|
|
async (v) => {
|
|
getPageList();
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<HomeHead class="top"> </HomeHead>
|
|
<div class="h-full relative flex flex-col">
|
|
<div class="font-600 flex items-end mt30px">
|
|
<div class="text-36px">News列表</div>
|
|
<div class="text-18px ml40px mr25px">{{ day }}</div>
|
|
<div class="text-18px">{{ week }}</div>
|
|
</div>
|
|
<div
|
|
class="q-wrapper flex-1 mt30px text-#142142 flex flex-col bg-#fff p30px"
|
|
>
|
|
<div
|
|
v-if="listData && listData.length > 0"
|
|
v-for="i in listData"
|
|
:key="i"
|
|
class="mt8px cursor-pointer flex items-center p15px pl20px text-18px max-w-1205px"
|
|
>
|
|
<span
|
|
class="truncate flex-1 w0 text-#142142 hover:underline w600px max-w600px min-w600px"
|
|
>
|
|
<a :href="i.url" class="no-underline text-#142142">
|
|
{{ i.title }}
|
|
</a>
|
|
</span>
|
|
|
|
<span class="shrink-0 ml90px text-#808696 w-200px">{{
|
|
i.publishTime
|
|
}}</span>
|
|
<span class="ml20px text-#808696 text-16px w-250px"
|
|
>来自: {{ i.source }}</span
|
|
>
|
|
</div>
|
|
<div v-else class="w-full h-hull">
|
|
<el-empty :image-size="200" />
|
|
</div>
|
|
</div>
|
|
<div class="float-right absolute bottom-20px right-30px">
|
|
<el-pagination
|
|
v-model:current-page="pageInfo.currentPage"
|
|
v-model:page-size="pageInfo.pageSize"
|
|
layout="prev, pager, next, jumper"
|
|
:total="pageInfo.total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.top {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: -92px;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 1px;
|
|
}
|
|
|
|
.q-wrapper {
|
|
border-radius: 18px;
|
|
border: 1px solid #e7ebf5;
|
|
box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
|
|
overflow: auto;
|
|
&::after {
|
|
content: " ";
|
|
background-image: url("@/assets/images/bg-card.svg");
|
|
pointer-events: none;
|
|
display: block;
|
|
width: 100%;
|
|
height: 127px;
|
|
background-repeat: no-repeat; /* 阻止图片平铺 */
|
|
background-position: right top;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
</style>
|