ruanfa
/
dangan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

档案室密集柜

Browse Source
master
wanglei 2 years ago
parent ec00dfeeb0
commit a9ee346ed0
1 changed files with 329 additions and 0 deletions
Show Stats Download Patch File Download Diff File

329
dangan-ui/src/views/dangan/bookcase/index.vue
Unescape View File

@ -0,0 +1,329 @@
<template>
<div class="app-container">
<div>
<el-button type="primary" @click="clickEdit">编辑</el-button>
<el-button type="primary" @click="clickSubmit">提交</el-button>
</div>
<el-carousel :autoplay="false" height="850px" arrow="always">
<el-carousel-item v-for="item in gui" :key="item.id">
<p style="text-align: center;font-size: 20px">{{ item.title }}</p>
<div class="whole">
<div class="grid" v-for="item1 in item.list" :key="item1.text">
<div class="grid_text" v-show="!isEdit">
<div class="adress">{{ item1.address }}</div>
<div class="info">{{ item1.info }}</div>
</div>
<div v-show="isEdit" class="grid_input">
<el-input v-model="item1.address" placeholder="请输入内容"></el-input>
<el-input style="width:100%;margin-top:2px;"
resize="none"
type="textarea"
placeholder="请输入内容"
v-model="item1.info"
>
</el-input>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
name: "Bookcase",
data() {
return {
isEdit: false,
gui:[
{
title:'1号柜 正面',
id: 1,
list:[
{
address: '1号柜 1层1列',
info: '文书档案、科技档案、人事档案、专业档案文书档案、科技档案、人事档案、专业档案文书档案、科技档案、人事档案、'
},
{
address: '1号柜 1层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 1层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 1层4列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 2层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 2层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 2层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 2层4列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 3层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 3层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 3层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 3层4列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 4层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 4层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 4层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 4层4列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 5层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 5层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 5层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 5层4列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 6层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 6层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 6层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 6层4列',
info: '文书档案、科技档案、人事档案、专业档案'
}]
},
{
title:'1号柜 反面',
id: 2,
list:[
{
address: '1号柜 1层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 1层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 1层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 1层4列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 2层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 2层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 2层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 2层4列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 3层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 3层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 3层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 3层4列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 4层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 4层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 4层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 4层4列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 5层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 5层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 5层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 5层4列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 6层1列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 6层2列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 6层3列',
info: '文书档案、科技档案、人事档案、专业档案'
},
{
address: '1号柜 6层4列',
info: '文书档案、科技档案、人事档案、专业档案'
}]
}
]
};
},
methods: {
clickEdit(){
this.isEdit = true
},
clickSubmit(){
this.isEdit = false
}
}
}
</script>
<style scoped lang="scss">
.el-carousel{
min-width: 1000px;
margin: 0 auto;
.el-carousel__item{
.whole{
width: 100%;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
overflow: hidden;
font-size: 14px;
.grid{
width: 25%;
height: 130px;
padding: 5px;
box-sizing: border-box;
.grid_text{
width: 100%;
height: 100%;
padding: 5px 10px;
box-sizing: border-box;
border-radius: 5px;
background: #d3dce6;
.adress{
font-weight: bold;
}
.info{
margin-top: 5px;
font-size: 14px;
height: 75px;
overflow-y: auto;
}
}
.grid_input{
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
border-radius: 5px;
background: #d3dce6;
::v-deep.el-textarea__inner {
height: 72px;
}
}
}
}
}
::v-deep.el-carousel__arrow {
height: 50px;
width: 50px;
background-color: rgb(31 45 61 / 20%);
font-size: 24px;
}
::v-deep.el-carousel__arrow:hover{
background-color: rgb(31 45 61 / 50%);
}
}
</style>
Write Preview
Loading…
Cancel
Save