<template>
<div class="libraryPgae">
<div class="document-list">
<div
v-for="(item, index) in tableList"
class="document-item"
:key="index"
v-hasPermi="[item.hasPermi]"
@click="clickItem(item)"
@mouseover="setHoverStyle(item)"
:style="{
'--boder-color': boderColor,
'--title-color': titleColor,
'--backgroundImage': backgroundImage,
}"
:class="{ 'my-div-hover': true }"
>
<div>
<img
v-if="item.icon"
width="56"
height="56"
:src="require(`@/assets/baseLibrary/${item.icon}`)"
alt=""
/>
<img v-else width="56" height="56" src="" alt="" />
</div>
<div class="document-item-content" v-if="item.name">
<span class="document-item-content-title">{{ item.name }}</span>
</div>
<div class="document-item-description" v-if="item.description">
<span class="document-item-description-remark">{{
item.description
}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
titleColor: "#000000",
boderColor: "#e6e6e6",
backgroundImage: "",
publicPath: process.env.BASE_URL,
tableList: [
{
name: "知识产权",
path: "/knowledgeBaseManage/repository/DocumentLibrary",
hasPermi: "knowledgeBaseManage:index",
icon: "ico_zscq.png",
description: "知识产权资料描述",
backgroundUrl: `url(${require("@/assets/baseLibrary/Group_198.png")})`,
color: "#2077FF",
boderColor: "#2077FF ",
},
{
name: "投诉工单省级直查",
path: "/knowledgeBaseManage/complaintWorkOrder/DocumentLibrary",
hasPermi: "complaintWorkOrder:list",
icon: "ico_tsgd.png",
description: "投诉工单资料描述",
backgroundUrl: `url(${require("@/assets/baseLibrary/Group_197.png")})`,
color: "#FE3260",
boderColor: "#FD5476",
},
{
name: "技术资料管理",
path: "/knowledgeBaseManage/fileManager/DocumentLibrary",
hasPermi: "fileManager:list",
icon: "ico_jszl.png",
description: "技术相关资料",
backgroundUrl: `url(${require("@/assets/baseLibrary/Group_196.png")})`,
color: "#009280",
boderColor: "#65BB83",
},
{
name: "工作资料管理",
path: "/knowledgeBaseManage/supervisingFile/DocumentLibrary",
hasPermi: "supervisingFile:list",
icon: "ico_gzzl.png",
description: "工作资料描述",
backgroundUrl: `url(${require("@/assets/baseLibrary/Group_195.png")})`,
color: "#D07810",
boderColor: "#FFA63D",
},
{
name: "通知会议文件",
path: "/knowledgeBaseManage/meetingNotice/DocumentLibrary",
hasPermi: "meetingNotice:list",
icon: "ico_hytzd.png",
description: "通知会议资料描述",
backgroundUrl: `url(${require("@/assets/baseLibrary/Group_194.png")})`,
color: "#308AFF",
boderColor: "#1C76EA",
},
],
};
},
created() {},
methods: {
clickItem(data) {
if (!data.path) return this.$message.warning("该功能目前还在开发...");
this.$router.push(data.path);
},
setHoverStyle(item) {
this.boderColor = item.boderColor;
this.titleColor = item.color;
this.backgroundImage = item.backgroundUrl;
},
},
};
</script>
<style lang="scss" scoped>
.libraryPgae {
border-radius: 10px 10px 10px 10px;
padding: 20px 10px;
background: #fff;
height: calc(100vh - 130px);
display: flex;
justify-content: center;
align-content: center;
.document-list {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
height: calc(100vh - 160px);
overflow-y: auto;
.document-item {
padding: 25px 20px;
width: 210px;
height: 248px;
margin: 10px 15px;
background: #fbfbfb;
border-radius: 8px 8px 8px 8px;
border: 1px solid #e6e6e6;
cursor: pointer;
.document-item-content {
padding-top: 20px;
width: 170px;
.document-item-content-title {
font-size: 16px;
color: #000000;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
}
}
.document-item-description {
padding-top: 10px;
width: 170px;
.document-item-description-remark {
font-size: 14px;
color: #9b9b9b;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.my-div-hover:hover {
background-image: var(--backgroundImage);
background-size: cover;
background-position: center; /* 居中显示背景图 */
background-repeat: no-repeat; /* 不重复平铺背景图 */
.document-item-content-title {
color: var(--title-color);
}
border: 1px solid var(--boder-color);
box-shadow: 20px 20px 20px #e2e2e2;
// transform: translateY(4px);
}
}
}
</style>
08-02
11-12
3422