QR/laws_chery_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【update 首页】首页样式及高级搜索

Browse Source
This commit is contained in:
danshihao
2024-06-26 18:59:58 +08:00
parent e40a403d16
commit 87c76abddc
58 changed files with 1043 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboard/modules/QuickEnterCard.vue
+26 -56
View File
@@ -3,7 +3,7 @@
<a-spin :spinning="loading">
<div class="top-wrapper">
<p class="left-p"><i class="iconfont icon-rukou left-icon"></i>{{ this.$t('dashboard.quickEnter.quickEnter') }}</p>
<p class="right-p" @click="menuManage" v-has="'dashboard:quickEnter:menuManage'"><i class="iconfont icon-settings"></i>{{ this.$t('dashboard.quickEnter.menuManage') }}</p>
<p class="right-p" @click="menuManage" v-has="'dashboard:quickEnter:menuManage'"><i class="iconfont icon-settings" style="font-size: 20px;"></i></p>
</div>
<div class="content-wrapper">
<div class="content-div" v-for="item in dataSource" :key="item.id" @click="handleTo(item.url)">
@@ -14,8 +14,12 @@
<p>{{ item.name }}</p>
</a-tooltip>
</div>
<div class="plus-div" @click="menuManage" v-if="dataSource.length < 9" v-has="'dashboard:quickEnter:menuManage'">
<a-icon type="plus" class="text-primary-color" />
<div class="plus-div" @click="menuManage" v-if="dataSource.length < 14" v-has="'dashboard:quickEnter:menuManage'">
<img class="icon-img" :src="require('@assets/image/dashboard/quickEnter/plus.png')" :alt="$t('dashboard.quickEnter.newFunction')">
<a-tooltip placement="top">
<template slot="title">{{ $t('dashboard.quickEnter.newFunction') }}</template>
<p>{{ $t('dashboard.quickEnter.newFunction') }}</p>
</a-tooltip>
</div>
</div>
</a-spin>
@@ -84,7 +88,7 @@ export default {
// { iconName: 'a-fagui1', name: '国内法规' },
// { iconName: 'a-moxingkuaisuchaifen1', name: '征求意见' },
// { iconName: 'jiaoseguanli', name: '角色管理' },
// { iconName: 'wenda1', name: '我的问答' }
{ src: require(`@/assets/image/dashboard/quickEnter/new-process.png`), name: '新建流程' }
]
}
},
@@ -102,7 +106,7 @@ export default {
// 如果能找到菜单名，就用对应图标
const findMap = map.find(m => m.id === item.id || m.name === item.name)
if (findMap) {
item.src = require(`@/assets/image/dashboard/${findMap.srcName}.png`)
item.src = require(`@/assets/image/dashboard/quickEnter/${findMap.srcName}.png`)
}
return item
})
@@ -135,73 +139,39 @@ export default {
<style scoped lang="less">
.content-wrapper {
//display: flex;
//flex-direction: row;
//flex-wrap: wrap;
//justify-content: space-between;
display: grid;
grid-template-columns: repeat(auto-fill, calc((100% - 20px) / 3));
grid-gap: 10px;
grid-auto-flow: row;
margin-top: 10px;
& > div {
//width: 100px;
//height: 100px;
min-height: 50px;
border-radius: 8px 8px 8px 8px;
margin-top: 12px;
grid-template-columns: repeat(auto-fill, calc(100% / 14));
& > .content-div,
& > .plus-div {
padding: 9px 16px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content-div {
// （总高度 - 内边距 - 标题 - 上下边距） / 3
height: calc((306px - 48px - 31px - 20px) / 3);
cursor: pointer;
background: rgba(213,44,38,0.08);
.icon-img {
width: 27px;
}
.iconfont {
font-size: 27px;
color: @primary-color;
border-radius: 8px;
width: 52px;
height: 52px;
margin-bottom: 12px;
}
p {
width: 90%;
height: 24px;
line-height: 24px;
margin: 0;
color: #333333;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0;
font-size: 16px;
font-family: PingFang SC, PingFang SC, sans-serif;
font-weight: 400;
color: #000000;
line-height: 28px;
}
}
.plus-div {
// （总高度 - 内边距 - 标题 - 上下边距） / 3
height: calc((306px - 48px - 31px - 20px) / 3);
cursor: pointer;
border: 1px dashed @primary-color;
box-sizing: border-box;
.anticon {
font-size: 28px;
}
}
}
.text-primary-color {
color: @primary-color
}
@media screen and (max-width: 1366px) {
.content-wrapper {
.content-div {
p {
font-size: 14px;
}
}
}
color: #666666;
}
</style>