This commit is contained in:
gongjiale 2022-11-30 17:04:25 +08:00
parent 7c7ac61f77
commit 329fa49062
3 changed files with 119 additions and 59 deletions

View File

@ -687,7 +687,7 @@
}
}
}
.item:nth-child(2n) {
.item:nth-(2n) {
margin-left: 0.4rem;
}
}

View File

@ -4,7 +4,11 @@
<div class="main">
<div class="left">
<a-layout-sider>
<a-menu v-model:selectedKeys="selectedKeys" mode="inline" @click="handleClick">
<a-menu
v-model:selectedKeys="selectedKeys"
mode="inline"
@click="handleClick"
>
<a-menu-item v-for="item in menuList" :key="item.key">
<img :src="item.img" alt="" style="margin-right: 10px" />
<span>{{ item.title }}</span>
@ -14,31 +18,45 @@
</div>
<div class="right">
<!-- <div class="title">数据需求</div> -->
<a-list class="demo-loadmore-list" :loading="initLoading" item-layout="horizontal" :data-source="list"
:key="showKey">
<a-list
class="demo-loadmore-list"
:loading="initLoading"
item-layout="horizontal"
:data-source="list"
:key="showKey"
>
<template #renderItem="{ item }">
<a-list-item>
<a-skeleton avatar :title="false" :loading="!!item.loading" active>
<a-tooltip placement="topLeft" arrow-point-at-center mouseEnterDelay="1"
overlayClassName="demandCenter-tooltip-card">
<template #title>
<div class="tooltip-desc">{{ item.demandDetails || '--' }}</div>
</template>
<a-list-item-meta :description="'描述:' + (item.demandDetails || '--')">
<template #title>
<span @click="showDetail(item)" style="cursor: pointer" class="name">
{{ item.demandSubject }}
</span>
<span class="time">{{ item.createDate }}</span>
</template>
</a-list-item-meta>
<div class="toptitle">
<a-tooltip placement="topLeft">
<template #title>{{ item.demandSubject }}</template>
<span
@click="showDetail(item)"
style="cursor: pointer"
class="name"
>
{{ item.demandSubject }}
</span>
</a-tooltip>
</a-skeleton>
<span class="time">{{ item.createDate }}</span>
</div>
<a-tooltip placement="topLeft">
<template #title>描述 {{ item.demandDetails }}</template>
<div class="bottomdesc">
描述 {{ item.demandDetails || '--' }}
</div>
</a-tooltip>
</a-list-item>
</template>
</a-list>
<a-pagination v-model:current="pageNum" v-model:page-size="pageSize" :total="total" @change="pageChange"
:key="showKey">
<a-pagination
v-model:current="pageNum"
v-model:page-size="pageSize"
:total="total"
@change="pageChange"
:key="showKey"
>
<template #buildOptionText="props">
<span>{{ props.value }}/</span>
</template>
@ -72,10 +90,8 @@ const whoShow1 = ref(whoShow)
const selectedKeys = ref(['0'])
const menuList = [
{
{
key: '0',
title: '全部需求',
num: '0',
@ -124,7 +140,7 @@ const handleClick = (item) => {
detailsType.value = '应用资源'
} else if (item.key === '5') {
detailsType.value = '知识库'
}else{
} else {
detailsType.value = ''
}
pageNum.value = 1
@ -151,7 +167,6 @@ const getApplyList = () => {
}
const showDetail = (item) => {
router.push({
path: '/demandDetails',
query: {
@ -176,7 +191,6 @@ onMounted(() => {
list.value = res.data.data.list
total.value = res.data.data.total
})
})
</script>
<style lang="less" scoped>
@ -245,6 +259,45 @@ onMounted(() => {
background-color: #ffffff;
box-shadow: 10px 8px 10px 3px #9dc6ea;
padding: 20px;
.toptitle {
margin-bottom: 10px;
& > span:first-child {
display: -webkit-box;
/*设置为弹性盒子*/
-webkit-line-clamp: 1;
/*最多显示2行*/
overflow: hidden;
/*超出隐藏*/
text-overflow: ellipsis;
/*超出显示为省略号*/
-webkit-box-orient: vertical;
word-break: break-all;
width: 600px;
font-size: 14px;
color: #1492ff;
font-size: 18px;
}
& > span:first-child:hover {
color: #0b5392;
}
& > span:last-child {
float: right;
}
}
.bottomdesc {
display: -webkit-box;
/*设置为弹性盒子*/
-webkit-line-clamp: 1;
/*最多显示2行*/
overflow: hidden;
/*超出隐藏*/
text-overflow: ellipsis;
/*超出显示为省略号*/
-webkit-box-orient: vertical;
word-break: break-all;
width: 800px;
font-size: 14px;
}
.title {
font-size: 22px;
@ -255,40 +308,42 @@ onMounted(() => {
.ant-list {
height: 730px;
overflow-y: scroll;
:deep(.ant-list-item-meta-title) {
display: flex;
justify-content: space-between;
.name {
width: 800px;
font-size: 18px;
color: #1492ff;
display: -webkit-box;
/*设置为弹性盒子*/
-webkit-line-clamp: 1;
/*最多显示2行*/
overflow: hidden;
/*超出隐藏*/
text-overflow: ellipsis;
/*超出显示为省略号*/
-webkit-box-orient: vertical;
word-break: break-all;
}
.ant-list-item {
display: list-item;
}
// :deep(.ant-list-item-meta-title) {
// // display: flex;
// justify-content: space-between;
:deep(.ant-list-item-meta-description) {
display: -webkit-box;
/*设置为弹性盒子*/
-webkit-line-clamp: 2;
/*最多显示2行*/
overflow: hidden;
/*超出隐藏*/
text-overflow: ellipsis;
/*超出显示为省略号*/
-webkit-box-orient: vertical;
word-break: break-all;
}
// .name {
// width: 800px;
// font-size: 18px;
// color: #1492ff;
// display: -webkit-box;
// /**/
// -webkit-line-clamp: 1;
// /*2*/
// overflow: hidden;
// /**/
// text-overflow: ellipsis;
// /**/
// -webkit-box-orient: vertical;
// word-break: break-all;
// }
// }
// :deep(.ant-list-item-meta-description) {
// display: -webkit-box;
// /**/
// -webkit-line-clamp: 2;
// /*2*/
// overflow: hidden;
// /**/
// text-overflow: ellipsis;
// /**/
// -webkit-box-orient: vertical;
// word-break: break-all;
// }
}
//

View File

@ -152,6 +152,7 @@
>
查看详情
</a-button>
<!-- <div class="btn" v-if="val.type == '组件服务'">技术文档</div> -->
</div>
<div class="ability-bottom">
@ -174,9 +175,11 @@
</a-button>
</div>
</div>
<div v-if="item.approveStatus === '通过'" style=" margin-top: 15px;font-size: 16px; color: #ee4457;font-weight: bold;">说明已申请成功使用方式及联系人请点击"查看详情"按钮查看</div>
</div>
</div>
</div>
<div class="box" v-if="item.list2.length > 0">
<div class="ability" v-for="val in item.list2" :key="val.channelId">
<div class="left sxt"></div>
@ -277,7 +280,9 @@
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 单个预览弹窗 -->