intellioa
/
super-fusion-platform
mirror of http://10.10.14.221/feiliming/oa-project-vue.git
6
0
Fork 0
Code Issues Projects Releases Wiki Activity

电子资料库tab样式

Browse Source
init
zhusiyu 3 years ago
parent e429814025
commit fb8bf676f6
3 changed files with 126 additions and 108 deletions
Show Stats Download Patch File Download Diff File

220
src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/electronicdDatabases/component/dataBaseTitle.vue
Unescape View File

@ -1,27 +1,34 @@
<template>
<div class="dataBaseTitle">
<a-row style="position: relative;" class="dataBaseTitleRow" type="flex" justify="space-between">
<a-col :key="1" :class="{'file-tab':!isActive1,'file-tab-active':isActive1}"
@click.native="tabChange(1)">
<span class="title-tab-title">机构文件</span>
<a-icon type="hdd" class="title-tab-icon"/>
<span class="tile-tab-cricle"></span>
</a-col>
<a-icon type="caret-down" class="active-icon1" v-show="isActive1"/>
<a-col :key="2" :class="{'file-tab':!isActive2,'file-tab-active':isActive2}"
@click.native="tabChange(2)">
<span class="title-tab-title">个人文件</span>
<a-icon type="user" class="title-tab-icon"/>
<span class="tile-tab-cricle"></span>
</a-col>
<a-icon type="caret-down" class="active-icon2" v-show="isActive2"/>
<a-col :key="3" :class="{'file-tab':!isActive3,'file-tab-active':isActive3}"
@click.native="tabChange(3)">
<span class="title-tab-title">分享文件</span>
<a-icon type="share-alt" class="title-tab-icon"/>
<span class="tile-tab-cricle"></span>
</a-col>
<a-icon type="caret-down" class="active-icon3" v-show="isActive3"/>
<a-row style="position: relative;" class="dataBaseTitleRow">
<div class="col-item-style" v-if="orgPower">
<a-col :key="1" :class="{'file-tab':!isActive1,'file-tab-active':isActive1}"
@click.native="tabChange(1)">
<span class="title-tab-title">机构文件</span>
<a-icon type="hdd" class="title-tab-icon"/>
<span class="tile-tab-cricle"></span>
</a-col>
<a-icon type="caret-down" class="active-icon" v-show="isActive1"/>
</div>
<div class="col-item-style" v-if="personalPower">
<a-col :key="2" :class="{'file-tab':!isActive2,'file-tab-active':isActive2}"
@click.native="tabChange(2)">
<span class="title-tab-title">个人文件</span>
<a-icon type="user" class="title-tab-icon"/>
<span class="tile-tab-cricle"></span>
</a-col>
<a-icon type="caret-down" class="active-icon" v-show="isActive2"/>
</div>
<div class="col-item-style" v-if="sharePower">
<a-col :key="3" :class="{'file-tab':!isActive3,'file-tab-active':isActive3}"
@click.native="tabChange(3)">
<span class="title-tab-title">分享文件</span>
<a-icon type="share-alt" class="title-tab-icon"/>
<span class="tile-tab-cricle"></span>
</a-col>
<a-icon type="caret-down" class="active-icon" v-show="isActive3"/>
</div>
</a-row>
<div class="tabContent">
<InstitutionalDocuments v-if="isActive1"/>
@ -36,10 +43,11 @@
import personalDocument from './personalDocument.vue';
import shareDocuments from './shareDocuments.vue';
import OfficeMenuConfig from '../../../../../../../../../src/utils/officeMenuConfig';
export default ({
data() {
return {
isActive1: true,
isActive1: false,
isActive2: false,
isActive3: false,
orgPower: false,//机构文件权限
@ -47,13 +55,23 @@
sharePower: false,//分享文件权限
}
},
created(){
created() {
//机构文件权限
this.orgPower = OfficeMenuConfig.menuIsExist(["electronicMaterials", "agencyDocuments1"]);
//个人文件权限
this.personalPower = OfficeMenuConfig.menuIsExist(["electronicMaterials", "personalFiles"]);
//分享文件权限
this.sharePower = OfficeMenuConfig.menuIsExist(["electronicMaterials", "shareFiles"]);
if (this.orgPower) {
this.isActive1 = true;
} else {
if (this.personalPower) {
this.isActive2 = true;
} else {
this.isActive3 = true;
}
}
},
components: {
AIcon: Icon,
@ -90,93 +108,99 @@
.dataBaseTitle {
width: 100%;
.dataBaseTitleRow {
display: flex;
justify-content: space-around;
width: 100%;
padding-right: 8px;
margin-right: 26px;
margin-bottom: 20px;
/deep/ .ant-row:nth-last-child {
margin-bottom: 0;
}
.file-tab {
.col-item-style {
width: 32%;
height: 4rem;
background: #20337E;
border-radius: 10px;
color: #80F9F0;
position: relative;
cursor: pointer;
overflow: hidden;
.title-tab-title {
display: inline-block;
.active-icon {
position: absolute;
bottom: 4px;
right: 19px;
z-index: 99;
font-size: 13px;
}
.title-tab-icon {
display: inline-block;
position: absolute;
top: 11px;
left: 10px;
font-size: 25px;
}
.tile-tab-cricle {
width: 84px;
height: 84px;
border-radius: 50%;
background: #02618A;
display: inline-block;
position: absolute;
bottom: -42px;
right: 4px;
}
}
.file-tab-active {
width: 32%;
height: 4rem;
background: #027DB3;
border-radius: 10px;
color: #80F9F0;
position: relative;
cursor: pointer;
overflow: hidden;
.title-tab-title {
bottom: -22px;
left: 52px;
font-size: 22px;
color: #027DB3;
display: inline-block;
position: absolute;
bottom: 4px;
right: 19px;
z-index: 99;
font-size: 13px;
float: left;
}
.title-tab-icon {
display: inline-block;
position: absolute;
top: 11px;
left: 10px;
font-size: 25px;
.file-tab {
width: 100%;
height: 4rem;
background: #20337E;
border-radius: 10px;
color: #80F9F0;
position: relative;
cursor: pointer;
overflow: hidden;
.title-tab-title {
display: inline-block;
position: absolute;
bottom: 4px;
right: 19px;
z-index: 99;
font-size: 13px;
}
.title-tab-icon {
display: inline-block;
position: absolute;
top: 11px;
left: 10px;
font-size: 25px;
}
.tile-tab-cricle {
width: 84px;
height: 84px;
border-radius: 50%;
background: #02618A;
display: inline-block;
position: absolute;
bottom: -42px;
right: 4px;
}
}
.tile-tab-cricle {
width: 84px;
height: 84px;
border-radius: 50%;
background: #02618A;
display: inline-block;
position: absolute;
bottom: -42px;
right: 4px;
.file-tab-active {
width: 100%;
height: 4rem;
background: #027DB3;
border-radius: 10px;
color: #80F9F0;
position: relative;
cursor: pointer;
overflow: hidden;
.title-tab-title {
display: inline-block;
position: absolute;
bottom: 4px;
right: 19px;
z-index: 99;
font-size: 13px;
}
.title-tab-icon {
display: inline-block;
position: absolute;
top: 11px;
left: 10px;
font-size: 25px;
}
.tile-tab-cricle {
width: 84px;
height: 84px;
border-radius: 50%;
background: #02618A;
display: inline-block;
position: absolute;
bottom: -42px;
right: 4px;
}
}
}
.active-icon1 {
position: absolute;
bottom: -22px;
left: 52px;
font-size: 22px;
color: #027DB3;
display: inline-block;
float: left;
/deep/ .ant-row:nth-last-child {
margin-bottom: 0;
}
.active-icon2 {
position: absolute;
bottom: -22px;

9
src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/electronicdDatabases/component/shareDocuments.vue
Unescape View File

@ -9,12 +9,9 @@
<vue-scroll :ops="listScroll" :style="showPage?'height:19rem':'height:19rem'"
class="score-list-div" v-if="!dataSouresEmpty">
<a-row v-for="(item,i) in dataSoures" :key="i">
<a-col v-if="item.file_type == 0" :span="1">
<a-col :span="1">
<a-icon type="file-text" style="color:#576499;"/>
</a-col>
<a-col v-else-if="item.file_type == 1" :span="1">
<a-icon type="folder-open" style="color:#F2F2F2;"/>
</a-col>
<a-col :span="14" style="margin-left: 4px;margin-right: 8px;cursor: pointer"
@click.native="showFiles(item)">{{item.file_name}}
</a-col>
@ -27,10 +24,10 @@
<vue-scroll :ops="listScroll" :style="showPage?'height:19rem':'height:19rem'"
class="score-list-div" v-if="!dataSouresEmpty">
<a-row v-for="(item,i) in dataSoures" :key="i">
<a-col v-if="item.file_type == 0" :span="1">
<a-col v-if="item.file_type == 1" :span="1">
<a-icon type="file-text" style="color:#576499;"/>
</a-col>
<a-col v-else-if="item.file_type == 1" :span="1">
<a-col v-else-if="item.file_type == 0" :span="1">
<a-icon type="folder-open" style="color:#F2F2F2;"/>
</a-col>
<a-col :span="14" style="margin-left: 4px;margin-right: 8px;cursor: pointer"

5
src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/electronicdDatabases/component/shareDocumentsLarge.vue
Unescape View File

@ -9,12 +9,9 @@
:style="showPage?'height:16rem':'height:16rem'"
class="score-list-div">
<a-row v-for="(item,i) in dataSoures" :key="i">
<a-col v-if="item.file_type == 1" :span="1">
<a-col :span="1">
<a-icon type="file-text" style="color:#576499;"/>
</a-col>
<a-col v-else-if="item.file_type == 0" :span="1">
<a-icon type="folder-open" style="color:#F2F2F2;"/>
</a-col>
<a-col :span="11" style="cursor: pointer" @click.native="showFiles(item)">
{{item.file_name}}
</a-col>

Write Preview
Loading…
Cancel
Save