wanglei
2 years ago
parent
ec00dfeeb0
commit
a9ee346ed0
@ -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>
|
||||
Loading…
Reference in new issue