273 lines
7.9 KiB
Vue
273 lines
7.9 KiB
Vue
<template>
|
||
<!-- PC端布局 -->
|
||
<div class="flex justify-between w-full h-full" >
|
||
<!-- 左边导航栏 -->
|
||
|
||
<!-- 右边内容栏 -->
|
||
<div class="rightcon">
|
||
<div class="flex top_search ">
|
||
<div style="width: 572px;height: 69px;margin-left: 415px;">
|
||
<img :src="`/img/index/dlogo.png`" alt="" style="width: 100%;height: 100%;object-fit: cover;">
|
||
</div>
|
||
<div class="inputform">
|
||
<input v-model="inputSearch" class="contactInput w-full md:w-[337px]"
|
||
type="text" placeholder="请输入搜索关键字" />
|
||
<div class="search_rinput">
|
||
<img src="/img/index/hmsearch.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="re_top">
|
||
<div class="re_col"></div>
|
||
<div class="re_tit">团务百科</div>
|
||
<div class="re_col"></div>
|
||
</div>
|
||
<!-- 列表 -->
|
||
<div class="re_box">
|
||
<div class="re_box_item" v-for="(item,index) in BksList" :key="index">
|
||
<div class="re_title one-line-ellipsis">
|
||
{{ item.title }}
|
||
</div>
|
||
<div class="re_text three-line-ellipsis">
|
||
{{ item.subtitle }}
|
||
</div>
|
||
<div class="re_date">
|
||
<div>发布日期：{{item.release_time_text.slice(0,10)}}</div>
|
||
<div class="re_more">
|
||
<span>查看更多</span>
|
||
<img class="re_more_img" src="/img/rightmore.png" alt="" srcset="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 分页 -->
|
||
<div class="flex flex-row justify-center pages_tsw" style="margin-top: 20px;">
|
||
<n-pagination v-model:page="page" :page-sizes="[9]" :item-count="total" size="medium"
|
||
@update:page="getPageList" show-quick-jumper>
|
||
<template #goto>
|
||
到第
|
||
</template>
|
||
<template #prefix="{ itemCount}">
|
||
共 {{ itemCount }} 条
|
||
</template>
|
||
</n-pagination>
|
||
</div>
|
||
<!-- 右分享 -->
|
||
<!-- <div class="flex flex-col fiximg" style="position: absolute;top: 100px;right:36px;align-items: center;" >
|
||
<img :src="`/img/qiqiu.png`" alt=""></img>
|
||
<img class="imgs" :src="`/img/index/douyin.png`" alt="">
|
||
<img class="imgs" :src="`/img/index/wb.png`" alt="">
|
||
<img class="imgs" :src="`/img/index/wx.png`" alt="">
|
||
<img class="imgs" :src="`/img/index/blbl.png`" alt="">
|
||
</div> -->
|
||
<!-- 底部鼠标 -->
|
||
<div style="position: absolute;bottom: 30px;right:30px;">
|
||
<img :src="`/img/index/hmouse.png`" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { NPagination } from 'naive-ui'
|
||
import $api from '@/service/webRequest'
|
||
const inputSearch = ref('');
|
||
const BksList = ref([]);
|
||
const page = ref(1);
|
||
const total = ref(0);
|
||
// 团务百科
|
||
onMounted(() => {
|
||
getBksList();
|
||
})
|
||
const getPageList = async () => {
|
||
page.value = page.value;
|
||
getBksList();
|
||
}
|
||
const getBksList = async () => {
|
||
const res = await $api.post('/api/home.encyclopedia/index',
|
||
{
|
||
limit:9,
|
||
page:page.value
|
||
}
|
||
)
|
||
total.value = res.data.data.count;
|
||
BksList.value = res.data.data.list;
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/assets/index.scss';
|
||
|
||
|
||
/* pc端样式 */
|
||
|
||
.rightcon{
|
||
width:1920px;
|
||
height: 919px;
|
||
background-image: url('/img/twbk.jpg');
|
||
background-size: 100% 100%;
|
||
.fiximg{
|
||
.imgs{
|
||
width: 63px;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
.top_search{
|
||
margin-top: 50px;
|
||
height: 70px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.inputform {
|
||
position: relative;
|
||
width: 340px;
|
||
margin-right: 319px;
|
||
}
|
||
.contactInput {
|
||
width: 337px;
|
||
height: 50px;
|
||
background: #FFFFFF;
|
||
border-radius: 8px;
|
||
border: 1px solid #DEE4E8;
|
||
padding-left: 15px;
|
||
}
|
||
|
||
.contactInput::placeholder {
|
||
color: #999999;
|
||
}
|
||
|
||
.contactInput:focus {
|
||
outline: none;
|
||
}
|
||
.search_rinput{
|
||
width: 68px;
|
||
height: 50px;
|
||
background: #E6E6E6;
|
||
border-radius: 0px 8px 8px 0px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.re_top{
|
||
width: 100%;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
.re_tit{
|
||
font-family: Microsoft YaHei;
|
||
font-weight: bold;
|
||
font-size: 36px;
|
||
color: #4E3C3C;
|
||
margin: 0 30px;
|
||
}
|
||
.re_col{
|
||
width: 78px;
|
||
height: 3px;
|
||
background: #348CDD;
|
||
}
|
||
}
|
||
.re_box{
|
||
width: 1280px;
|
||
// height: 600px;
|
||
margin: 0 auto;
|
||
margin-top:40px;
|
||
padding-left: 80px;
|
||
display: flex;
|
||
flex-wrap: wrap; /* 允许换行 */
|
||
justify-content: flex-start; /* 项目左对齐 */
|
||
// align-items: flex-start;
|
||
align-content: flex-start;
|
||
gap: 20px;
|
||
.re_box_item{
|
||
width: 32%;
|
||
// height: 190px;
|
||
background: #FFFFFF;
|
||
border: 1px solid #EEF7FF;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
.re_title{
|
||
// width: 100%;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color: #323232;
|
||
|
||
}
|
||
.re_text{
|
||
height: 62px;
|
||
margin-top: 15px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #999999;
|
||
}
|
||
.re_date{
|
||
margin-top: 15px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #368BDB;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.re_more{
|
||
display: flex;
|
||
align-items: center;
|
||
.re_more_img{
|
||
padding-left: 10px;
|
||
// width: 7px;
|
||
height: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
&:after {
|
||
content: "";
|
||
width: 100%;
|
||
height: 0;
|
||
margin-top: -20px;
|
||
}
|
||
}
|
||
.pages_tsw{
|
||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active) {
|
||
color: #ffffff;
|
||
background-color: #388FDF;
|
||
border: 1px solid #388FDF;
|
||
}
|
||
|
||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button) {
|
||
color: #999999;
|
||
}
|
||
|
||
:deep(.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover) {
|
||
color: #388FDF;
|
||
// border: 1px solid #388FDF;
|
||
}
|
||
:deep(.n-pagination .n-pagination-item--active:hover) {
|
||
color: #ffffff !important;
|
||
// border: 1px solid #388FDF;
|
||
}
|
||
|
||
:deep(.n-pagination .n-pagination-item) {
|
||
border: none;
|
||
width: 42px;
|
||
height: 30px;
|
||
font-size: 18px;
|
||
background: #FFFFFF;
|
||
}
|
||
:deep(.n-pagination-quick-jumper){
|
||
&:after {
|
||
content: '页'
|
||
}
|
||
}
|
||
}
|
||
</style>
|