|
@@ -0,0 +1,251 @@
|
|
|
|
|
+<!-- -->
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="holding3_look">
|
|
|
|
|
+ <div class="left">
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
|
|
|
|
|
+ <i class="el-icon-edit"></i>
|
|
|
|
|
+ {{ item }}
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="right">
|
|
|
|
|
+ <div class="top">
|
|
|
|
|
+ <el-breadcrumb separator="/">
|
|
|
|
|
+ <el-breadcrumb-item to="">首页</el-breadcrumb-item>
|
|
|
|
|
+ <el-breadcrumb-item to="">馆藏管理</el-breadcrumb-item>
|
|
|
|
|
+ <el-breadcrumb-item>藏品总账</el-breadcrumb-item>
|
|
|
|
|
+ <el-breadcrumb-item id="mytitle">查看</el-breadcrumb-item>
|
|
|
|
|
+ </el-breadcrumb>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="conten">
|
|
|
|
|
+ <div class="conten_left">
|
|
|
|
|
+ <img src="../../assets/img/user.png" alt="" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="conten_right">
|
|
|
|
|
+ <div class="title">
|
|
|
|
|
+ <h3>陶瓷花瓶</h3>
|
|
|
|
|
+ <div>已入库</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="info">
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div><span>藏品名称:</span>1111</div>
|
|
|
|
|
+ <div><span>总登记号:</span>1111</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div><span>编号类型:</span>1111</div>
|
|
|
|
|
+ <div><span>藏品编号:</span>1111</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div><span>原名:</span>1111</div>
|
|
|
|
|
+ <div><span>年代:</span>1111</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div><span>文物类别:</span>1111</div>
|
|
|
|
|
+ <div><span>文物质地:</span>1111</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div><span>数量:</span>1111</div>
|
|
|
|
|
+ <div><span>集体数量:</span>1111</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div><span>通长:</span>1111</div>
|
|
|
|
|
+ <div><span>通宽:</span>1111</div>
|
|
|
|
|
+ <div><span>通高:</span>1111</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div><span>文物类别:</span>1111</div>
|
|
|
|
|
+ <div><span>具体质量:</span>1111</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div><span>文物价格:</span>1111</div>
|
|
|
|
|
+ <div><span>完残程度:</span>1111</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div><span>保存状态:</span>1111</div>
|
|
|
|
|
+ <div><span>入藏时间范围:</span>1111</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row">
|
|
|
|
|
+ <div><span>藏品位置:</span>1111</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="conten_bot">
|
|
|
|
|
+ <div class="resource">
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
|
|
|
|
|
+// 例如:import 《组件名称》 from '《组件路径》';
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: 'Holding3_look',
|
|
|
|
|
+ // import引入的组件需要注入到对象中才能使用
|
|
|
|
|
+ components: {},
|
|
|
|
|
+ data () {
|
|
|
|
|
+ // 这里存放数据
|
|
|
|
|
+ return {
|
|
|
|
|
+ tabList: [
|
|
|
|
|
+ '藏品登记',
|
|
|
|
|
+ '入库管理',
|
|
|
|
|
+ '出库管理',
|
|
|
|
|
+ '藏品总账',
|
|
|
|
|
+ '藏品盘核',
|
|
|
|
|
+ '藏品注销'
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 监听属性 类似于data概念
|
|
|
|
|
+ computed: {},
|
|
|
|
|
+ // 监控data中的数据变化
|
|
|
|
|
+ watch: {},
|
|
|
|
|
+ // 方法集合
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ skip (index) {
|
|
|
|
|
+ this.$router.push(`/layout/holding${index}`).catch(() => {})
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 生命周期 - 创建完成(可以访问当前this实例)
|
|
|
|
|
+ created () {},
|
|
|
|
|
+ // 生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
|
|
+ mounted () {},
|
|
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
|
|
+ activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+<style lang='less' scoped>
|
|
|
|
|
+body {
|
|
|
|
|
+ overflow: auto;
|
|
|
|
|
+}
|
|
|
|
|
+//@import url(); 引入公共css类
|
|
|
|
|
+.holding3_look {
|
|
|
|
|
+ /deep/#mytitle > span {
|
|
|
|
|
+ font-weight: 800;
|
|
|
|
|
+ }
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ .left {
|
|
|
|
|
+ width: 220px;
|
|
|
|
|
+ min-width: 130px;
|
|
|
|
|
+ height: 868px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ box-shadow: 1px 1px 10px 1px;
|
|
|
|
|
+ ul {
|
|
|
|
|
+ li:nth-of-type(4) {
|
|
|
|
|
+ background-color: #e6f7ff;
|
|
|
|
|
+ }
|
|
|
|
|
+ li {
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ color: black;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ i {
|
|
|
|
|
+ margin: 0 18px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .right {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 868px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ .top {
|
|
|
|
|
+ padding-left: 35px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ box-shadow: 1px 1px 10px 1px;
|
|
|
|
|
+ margin-left: 2px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .conten {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ margin: 20px 20px 40px;
|
|
|
|
|
+ padding: 10px 0 0 40px;
|
|
|
|
|
+ .conten_left {
|
|
|
|
|
+ width: 465px;
|
|
|
|
|
+ height: 500px;
|
|
|
|
|
+ background-color: #fafafa;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 340px;
|
|
|
|
|
+ border: 15px solid #ccc;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .conten_right {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 500px;
|
|
|
|
|
+ .title {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ border-bottom: 2px solid #ccc;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin: 0 20px;
|
|
|
|
|
+ h3 {
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ color: black;
|
|
|
|
|
+ margin: 0 25px 0 35px;
|
|
|
|
|
+ }
|
|
|
|
|
+ &>div{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 50px;
|
|
|
|
|
+ height: 20px;
|
|
|
|
|
+ background-color: #40a9ff;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ border-radius: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .info {
|
|
|
|
|
+ margin: 20px 0 0 55px;
|
|
|
|
|
+ width: 90%;
|
|
|
|
|
+ // margin-bottom: 60px;
|
|
|
|
|
+ .row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ & > div {
|
|
|
|
|
+ padding-left: 20px;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 43px;
|
|
|
|
|
+ line-height: 43px;
|
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ color: black;
|
|
|
|
|
+ span {
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .conten_bot{
|
|
|
|
|
+ height: 250px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ .resource {
|
|
|
|
|
+ height: 200px;
|
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|