From a9ee346ed0b68df8c9a84cf485bf50dcccb97bfe Mon Sep 17 00:00:00 2001
From: wanglei <wl2666675>
Date: Wed, 19 Jun 2024 15:12:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E5=AE=A4=E5=AF=86=E9=9B=86?=
 =?UTF-8?q?=E6=9F=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dangan-ui/src/views/dangan/bookcase/index.vue | 329 ++++++++++++++++++
 1 file changed, 329 insertions(+)
 create mode 100644 dangan-ui/src/views/dangan/bookcase/index.vue

diff --git a/dangan-ui/src/views/dangan/bookcase/index.vue b/dangan-ui/src/views/dangan/bookcase/index.vue
new file mode 100644
index 0000000..7a67f08
--- /dev/null
+++ b/dangan-ui/src/views/dangan/bookcase/index.vue
@@ -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>