完成一些静态页面开发

src/router/index.js

@@ -44,6 +44,24 @@ const router = new VueRouter({
           component: () => import('@/views/holding/holding0.vue')
         },
         {
+          name: 'holding0_add',
+          path: 'holding0_add',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding0_add.vue')
+        },
+        {
+          name: 'holding0_audit',
+          path: 'holding0_audit',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding0_audit.vue')
+        },
+        {
+          name: 'holding0_result',
+          path: 'holding0_result',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding0_result.vue')
+        },
+        {
           name: 'holding1',
           path: 'holding1',
           meta: { myInd: 1 },

src/views/holding/holding0.vue

@@ -12,9 +12,9 @@
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
-          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <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">
@@ -46,7 +46,7 @@
       end-placeholder="结束日期">
     </el-date-picker>
             <el-button style="margin-left: 20px">查询</el-button>
-            <el-button type="primary">新增</el-button>
+            <el-button type="primary" @click="$router.push('holding0_add')">新增</el-button>
           </div>
           <!--表格 -->
           <div class="table">
@@ -72,8 +72,10 @@
               </el-table-column>
               <el-table-column label="操作" width="150">
                 <template #default>
-                  <el-button type="text">编辑</el-button>
+                  <!-- <el-button type="text">查看</el-button> -->
                   <el-button type="text">删除</el-button>
+                  <el-button type="text">编辑</el-button>
+                  <el-button type="text" @click="$router.push('/layout/holding0_audit')">审核</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -141,7 +143,7 @@ export default {
   // 方法集合
   methods: {
     skip (index) {
-      this.$router.push(`/layout/holding${index}`)
+      this.$router.push(`/layout/holding${index}`).catch(() => {})
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -161,6 +163,10 @@ export default {
 </script>
 <style lang='less' scoped>
 .holding {
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+
   display: flex;
   .left {
     width: 220px;

src/views/holding/holding0_Dialog.vue

@@ -0,0 +1,338 @@
+<template>
+  <el-dialog title="添加藏品" :visible="dialogFormVisible" @close="cancel()">
+    <!-- 表单内容 -->
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="120px"
+      class="demo-ruleForm"
+    >
+      <div class="row">
+        <el-form-item label="藏品名称：" prop="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="总登记号：" prop="number">
+          <el-input v-model="ruleForm.number" placeholder="请输入"></el-input>
+        </el-form-item>
+      </div>
+      <div class="row">
+        <el-form-item label="编号类型：">
+          <el-select
+            v-model="ruleForm.type"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="藏品编号：">
+          <el-input
+            v-model="ruleForm.control"
+            :placeholder="ruleForm.type ? '请输入' : '请先选择类型'"
+            :disabled="ruleForm.type ? false : true"
+          ></el-input>
+        </el-form-item>
+      </div>
+      <div class="row">
+        <el-form-item label="原名：">
+          <el-input v-model="ruleForm.oldName" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="年代：">
+          <el-input v-model="ruleForm.yeah" placeholder="请输入"></el-input>
+        </el-form-item>
+      </div>
+      <div class="row">
+        <el-form-item label="文物类别：">
+          <el-select
+            v-model="ruleForm.category"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="文物质地：">
+          <el-select
+            v-model="ruleForm.grain"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+      <div class="row">
+        <el-form-item label="数量：">
+          <el-input v-model="ruleForm.count" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="具体数量：">
+          <el-input
+            v-model="ruleForm.countOnly"
+            placeholder="请输入"
+          ></el-input>
+        </el-form-item>
+      </div>
+      <div class="row">
+        <el-form-item label="通长：">
+          <el-input v-model="ruleForm.long" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="通宽：">
+          <el-input v-model="ruleForm.wide" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="通高：">
+          <el-input v-model="ruleForm.tall" placeholder="请输入"></el-input>
+        </el-form-item>
+      </div>
+      <div class="row">
+        <el-form-item label="文物级别：">
+          <el-select
+            v-model="ruleForm.rank"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="具体质量：">
+          <el-input v-model="ruleForm.quality" placeholder="请输入"></el-input>
+        </el-form-item>
+      </div>
+      <div class="row">
+        <el-form-item label="文物价格：">
+          <el-input v-model="ruleForm.price" placeholder="请输入"></el-input>
+        </el-form-item>
+
+        <el-form-item label="完残程度：">
+          <el-select
+            v-model="ruleForm.cruel"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <div class="row">
+        <el-form-item label="保存状态：">
+          <el-select
+            v-model="ruleForm.state"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="入藏时间范围：">
+          <el-select
+            v-model="ruleForm.scope"
+            placeholder="请选择"
+            style="width: 100%"
+          >
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+      <!-- 图片和附件 -->
+      <el-form-item label="藏品图片：">
+        <el-upload action="#" list-type="picture-card" :auto-upload="false">
+          <i slot="default" class="el-icon-plus"></i>
+          <div slot="file" slot-scope="{ file }">
+            <img
+              class="el-upload-list__item-thumbnail"
+              :src="file.url"
+              alt=""
+            />
+            <span class="el-upload-list__item-actions">
+              <span
+                class="el-upload-list__item-preview"
+                @click="handlePictureCardPreview(file)"
+              >
+                <i class="el-icon-zoom-in"></i>
+              </span>
+              <span
+                v-if="!disabled"
+                class="el-upload-list__item-delete"
+                @click="handleDownload(file)"
+              >
+                <i class="el-icon-download"></i>
+              </span>
+              <span
+                v-if="!disabled"
+                class="el-upload-list__item-delete"
+                @click="handleRemove(file)"
+              >
+                <i class="el-icon-delete"></i>
+              </span>
+            </span>
+          </div>
+        </el-upload>
+        <span class="txt">支持上传jpg，png格式，最大10M</span>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+
+      <el-form-item label="上传附件：">
+        <el-select v-model="uploading" placeholder="请选择">
+          <el-option label="高清图片" value="GQpicture"></el-option>
+          <el-option label="高清视频" value="GQvideo"></el-option>
+        </el-select>
+        <el-button style="margin-left: 20px">上传附件</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 表格 -->
+    <el-table
+      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+      :data="tableData"
+      border
+      style="width: 100%"
+    >
+      <el-table-column label="缩略图" width="140">
+        <template #default>
+          <div class="smimg">
+            <img src="../../assets/img/user.png" alt="" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="附件名称">
+      </el-table-column>
+      <el-table-column prop="address" label="上传时间" width="150"> </el-table-column>
+      <el-table-column label="操作" width="150">
+        <template #default>
+          <el-button type="text" >重 传</el-button>
+          <el-button type="text">删 除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="cancel">取 消</el-button>
+      <el-button type="primary" @click="btnOK">提 交</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'Holding0_Dialog',
+  components: {},
+  props: {
+    dialogFormVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      ruleForm: {
+        name: '',
+        number: '',
+        type: '',
+        control: '',
+        oldName: '',
+        yeah: '',
+        category: '',
+        grain: '',
+        count: '',
+        countOnly: '',
+        long: '',
+        wide: '',
+        tall: '',
+        rank: '',
+        quality: '',
+        price: '',
+        cruel: '',
+        state: '',
+        scope: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        number: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      },
+      // 上传图片和文件
+      uploading: 'GQpicture',
+      dialogImageUrl: '',
+      dialogVisible: false,
+      disabled: false,
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 点击确定
+    btnOK () {
+      this.cancel()
+    },
+    // 点击取消
+    cancel () {
+      this.$emit('update:dialogFormVisible', false)
+    },
+    // 上传文件和图片
+    handleRemove (file) {
+      console.log(file)
+    },
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    handleDownload (file) {
+      console.log(file)
+    }
+  },
+  created () {},
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+/deep/.el-dialog__body {
+  overflow: auto;
+  max-height: 556px;
+}
+.row {
+  display: flex;
+  /deep/& > div {
+    flex: 1;
+  }
+}
+  .smimg{
+    height: 80px;
+    img {
+      width: 100%;
+      height: 100%;
+      border: 3px solid #ccc;
+    }
+  }
+
+</style>

src/views/holding/holding0_add.vue

@@ -0,0 +1,286 @@
+<!--  -->
+<template>
+  <div class="holdingAdd">
+    <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="{ path: '/' }">首页</el-breadcrumb-item> -->
+          <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">
+        <el-form
+          :model="fromData"
+          :rules="rules"
+          ref="fromData"
+          label-width="140px"
+          class="demo-ruleForm"
+        >
+          <div class="one_row">
+            <el-form-item label="登记编号" prop="number" style="width: 45%">
+              <el-input v-model="fromData.number" disabled></el-input>
+            </el-form-item>
+            <el-form-item label="登记人员" prop="people" style="width: 45%">
+              <el-input v-model="fromData.people" disabled></el-input>
+            </el-form-item>
+          </div>
+          <div class="tow_row">
+            <el-form-item label="藏品来源" prop="source" style="width: 45%">
+              <el-select v-model="fromData.source" placeholder="请选择" style="width: 100%">
+                <el-option label="区域一" value="shanghai"></el-option>
+                <el-option label="区域二" value="beijing"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="单位或个人" prop="unit" style="width: 45%">
+              <el-input v-model="fromData.unit" placeholder="请输入"></el-input>
+            </el-form-item>
+          </div>
+            <el-form-item label="登记说明" prop="textarea" style="width: 90%">
+                <el-input  type="textarea" :rows="4" v-model="fromData.textarea" placeholder="请输入"></el-input>
+            </el-form-item>
+        </el-form>
+        <!-- 藏品信息 -->
+        <div class="info">
+          <div class="title">
+             <h3>藏品信息</h3>
+             <div class="btn">
+               <el-button size="small" @click="isShow=true">添 加</el-button>
+               <el-button size="small">删 除</el-button>
+             </div>
+          </div>
+          <!--表格 -->
+          <div class="table">
+            <el-table
+              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+             <el-table-column
+      type="selection"
+      width="40">
+    </el-table-column>
+              <el-table-column label="缩略图" width="146">
+                <template #default>
+                  <div class="smimg">
+                    <img src="../../assets/img/user.png" alt="" />
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                label="总登记号"
+                width="235"
+              >
+              </el-table-column>
+              <el-table-column prop="address"  label="藏品名称">
+              </el-table-column>
+              <el-table-column prop="name"  label="类别" width="130">
+              </el-table-column>
+              <el-table-column prop="name"  label="完残程度" width="220">
+              </el-table-column>
+              <el-table-column prop="name" label="藏品年代" width="130">
+              </el-table-column>
+              <el-table-column label="操作" width="130">
+                <template #default>
+                  <el-button type="text" @click="isShow=true">编 辑</el-button>
+                  <el-button type="text">删 除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <!-- 最下面的2个按钮 -->
+        <div class="bot_btn">
+            <el-button type="primary">提 交</el-button>
+             <el-button @click="$router.go(-1)">返 回</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 点击添加或者编辑出现弹窗 -->
+    <Holding0Dialog :dialogFormVisible.sync='isShow'/>
+  </div>
+</template>
+
+<script>
+import Holding0Dialog from './holding0_Dialog.vue'
+export default {
+  name: 'HoldingAdd',
+  components: {
+    Holding0Dialog
+  },
+  data () {
+    return {
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ],
+      // 控制弹出层显示隐藏
+      isShow: false,
+      // 表单数据
+      fromData: {
+        number: 'DJ2021081701',
+        people: 'Admin',
+        source: '',
+        unit: '',
+        textarea: ''
+      },
+      // 表单验证
+      rules: {
+        number: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        people: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        source: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        unit: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }],
+        textarea: [{ max: 255, message: '不能超过255个字符', trigger: 'blur' }]
+      },
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+
+    }
+  },
+  // 监听属性 类似于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>
+//@import url(); 引入公共css类
+.holdingAdd {
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+  display: flex;
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 100vh;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(1) {
+        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%;
+    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 {
+    position: relative;
+    padding: 40px 0 0 20px;
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 125px;
+    .one_row {
+      display: flex;
+      justify-content: start;
+    }
+    .tow_row {
+      display: flex;
+      justify-content: start;
+    }
+    .info{
+      max-height: 390px;
+      overflow: auto;
+      width: 86%;
+      border: 1px solid #ccc;
+      margin-left: 70px;
+      .title{
+        color: black;
+        display: flex;
+        justify-content: space-between;
+        height: 52px;
+        align-items: center;
+        padding: 0 30px;
+      }
+      .table{
+        .smimg{
+          border: 3px solid #ccc;
+          height: 78px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+    .bot_btn{
+      display: flex;
+      justify-content: space-between;
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 230px;
+    }
+  }
+}
+</style>

src/views/holding/holding0_audit.vue

@@ -0,0 +1,292 @@
+<!--  -->
+<template>
+  <div class="holding0_audit">
+    <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="info">
+          <div>
+            <h4>登记编号：</h4>
+            <span>DJ2021081701</span>
+          </div>
+          <div>
+            <h4>登记人员：</h4>
+            <span>Admin</span>
+          </div>
+          <div>
+            <h4>藏品来源：</h4>
+            <span>考古发掘与采集</span>
+          </div>
+          <div>
+            <h4>单位或个人：</h4>
+            <span>个人</span>
+          </div>
+        </div>
+        <div class="explain">
+          <p>
+            <span>登记说明：</span
+            >考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集
+          </p>
+        </div>
+        <!-- 表格 -->
+        <div class="table">
+          <div class="title">
+            <h3>藏品信息</h3>
+          </div>
+          <el-table
+            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+            :data="tableData"
+            border
+            style="width: 100%"
+          >
+            <el-table-column label="缩略图" width="120">
+              <template #default>
+                <div class="smimg">
+                  <img src="../../assets/img/user.png" alt="" />
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="总登记号" width="235">
+            </el-table-column>
+            <el-table-column prop="address" label="藏品名称"> </el-table-column>
+            <el-table-column prop="name" label="类别" width="130">
+            </el-table-column>
+            <el-table-column prop="name" label="完残程度" width="220">
+            </el-table-column>
+            <el-table-column label="操作" width="130">
+              <template #default>
+                <el-button type="text" @click="isShow=true">查 看</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column label="审核结果" width="130">
+              <template #default>
+                <el-select
+                  v-model="auditResult"
+                  placeholder="请选择"
+                >
+                  <el-option label="入库" value="0"></el-option>
+                  <el-option label="不入库" value="1"></el-option>
+                  <el-option label="不通过" value="2"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="txt">
+            <el-form
+          :model="fromData"
+          :rules="rules"
+          ref="fromData"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="审核说明：" prop="textarea" style="width: 100%">
+            <el-input
+              type="textarea"
+              :rows="3"
+              v-model="fromData.textarea"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+            </el-form>
+        </div>
+        <!-- 最下面的按钮 -->
+          <div class="button">
+  <el-button type="primary">提交</el-button>
+              <el-button @click="$router.go(-1)">返回</el-button>
+          </div>
+      </div>
+    </div>
+    <!-- 点击查看显示弹窗 -->
+    <Holding0AuditDia :dialogFormVisible.sync='isShow'/>
+  </div>
+</template>
+
+<script>
+import Holding0AuditDia from './holding0_audit_Dia.vue'
+export default {
+  name: 'holding0_audit',
+  // import引入的组件需要注入到对象中才能使用
+  components: { Holding0AuditDia },
+  data () {
+    // 这里存放数据
+    return {
+      // 点击查看显示弹窗
+      isShow: false,
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ],
+      fromData: {
+        textarea: ''
+      },
+      rules: {
+        textarea: [{ max: 255, message: '不能超过255个字符', trigger: 'blur' }]
+      },
+      auditResult: '',
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于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>
+//@import url(); 引入公共css类
+.holding0_audit {
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+
+  display: flex;
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 100vh;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(1) {
+        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%;
+    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 {
+    position: relative;
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 125px;
+    padding: 35px;
+    .info {
+      display: flex;
+      flex-wrap: wrap;
+      & > div {
+        padding-left: 20px;
+        color: black;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        border: 1px solid #ccc;
+        width: 50%;
+      }
+    }
+    .explain {
+      border: 1px solid #ccc;
+      color: black;
+      padding: 30px 150px 30px 20px;
+      display: flex;
+      flex-wrap: wrap;
+      span {
+        font-weight: 700;
+      }
+    }
+    .table {
+      max-height: 288px;
+      overflow: auto;
+      .smimg {
+        border: 3px solid #ccc;
+        height: 50px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      margin-top: 38px;
+      border: 1px solid #ccc;
+      .title {
+        padding-left: 30px;
+        color: black;
+        height: 50px;
+        line-height: 50px;
+      }
+    }
+    .txt{
+      margin-top: 38px;
+    }
+    .button {
+      position: absolute;
+      left: 50%;
+      bottom: 20px;
+      transform: translateX(-50%);
+      width: 240px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

src/views/holding/holding0_audit_Dia.vue

@@ -0,0 +1,215 @@
+<!--  -->
+<template>
+  <el-dialog title="查看藏品" :visible="dialogFormVisible" @close="btnOK()">
+    <div class="title">
+      <div :class="{ active: index === 0 }" @click="change(0)">藏品信息</div>
+      <div :class="{ active: index === 1 }" @click="change(1)">附件</div>
+    </div>
+    <div class="info" v-if="!index">
+      <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>
+    <div class="affix" v-else>
+      <div class="row">
+        <span>藏品图片：</span
+        ><img class="img" src="../../assets/img/user.png" alt="" />
+      </div>
+      <div class="row row2">
+        <span>类型：</span>
+        <el-select v-model="select" style="width: 120px">
+          <el-option label="高清图片" value="GQpicture"></el-option>
+          <el-option label="高清视频" value="GQvido"></el-option>
+        </el-select>
+      </div>
+      <!-- 表格 -->
+      <el-table
+        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+        :data="tableData"
+        border
+        style="width: 100%"
+      >
+        <el-table-column label="缩略图" width="120">
+          <template #default>
+            <div class="smimg">
+              <img src="../../assets/img/user.png" alt="" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="附件名称" width="235">
+        </el-table-column>
+        <el-table-column prop="address" label="上传时间"> </el-table-column>
+      </el-table>
+    </div>
+    <el-button type="primary" class="confirm" @click="btnOK">确 定</el-button>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'Holding0_audit_Dia',
+  components: {},
+  props: {
+    dialogFormVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      index: 0,
+      select: 'GQpicture',
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 切换上面的信息和附件
+    change (index) {
+      this.index = index
+    },
+    // 点击确定
+    btnOK () {
+      this.$emit('update:dialogFormVisible', false)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.title {
+  height: 32px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  display: flex;
+  overflow: hidden;
+  & > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+  }
+  .active {
+    background-color: #409eff;
+    color: #fff;
+  }
+}
+.info {
+  margin: 20px;
+  width: 95%;
+  margin-bottom: 60px;
+  .row {
+    display: flex;
+    & > div {
+      padding-left: 20px;
+      flex: 1;
+      height: 50px;
+      line-height: 50px;
+      border: 1px solid #ccc;
+      font-size: 16px;
+      color: black;
+      span {
+        font-weight: 700;
+      }
+    }
+  }
+}
+.affix {
+  .smimg {
+    border: 3px solid #ccc;
+    height: 50px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  margin: 20px;
+  width: 95%;
+  margin-bottom: 60px;
+  .row2 {
+    margin: 30px 0;
+    align-items: center;
+  }
+  .row {
+    display: flex;
+    span {
+      display: block;
+      width: 80px;
+      text-align: right;
+    }
+    img {
+      margin-left: 15px;
+      width: 85px;
+      height: 85px;
+      border: 3px solid #ccc;
+    }
+  }
+}
+.confirm {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>

src/views/holding/holding0_result.vue

@@ -0,0 +1,290 @@
+<!--  -->
+<template>
+  <div class="holding0_result">
+    <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="info">
+          <div>
+            <h4>登记编号：</h4>
+            <span>DJ2021081701</span>
+          </div>
+          <div>
+            <h4>登记人员：</h4>
+            <span>Admin</span>
+          </div>
+          <div>
+            <h4>藏品来源：</h4>
+            <span>考古发掘与采集</span>
+          </div>
+          <div>
+            <h4>单位或个人：</h4>
+            <span>个人</span>
+          </div>
+        </div>
+        <div class="explain">
+          <p>
+            <span>登记说明：</span
+            >考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集
+          </p>
+        </div>
+        <!-- 表格 -->
+        <div class="table">
+          <div class="title">
+            <h3>藏品信息</h3>
+          </div>
+          <el-table
+            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+            :data="tableData"
+            border
+            style="width: 100%"
+          >
+            <el-table-column label="缩略图" width="120">
+              <template #default>
+                <div class="smimg">
+                  <img src="../../assets/img/user.png" alt="" />
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="总登记号" width="235">
+            </el-table-column>
+            <el-table-column prop="address" label="藏品名称"> </el-table-column>
+            <el-table-column prop="name" label="类别" width="130">
+            </el-table-column>
+            <el-table-column prop="name" label="完残程度" width="220">
+            </el-table-column>
+            <el-table-column label="操作" width="130">
+              <template #default>
+                <el-button type="text" @click="isShow=true">查 看</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column label="审核结果" width="130">
+              <template #default>
+                <el-select
+                  v-model="auditResult"
+                  placeholder="请选择"
+                >
+                  <el-option label="入库" value="0"></el-option>
+                  <el-option label="不入库" value="1"></el-option>
+                  <el-option label="不通过" value="2"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="txt">
+            <el-form
+          :model="fromData"
+          :rules="rules"
+          ref="fromData"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="审核说明：" prop="textarea" style="width: 100%">
+            <el-input
+              type="textarea"
+              :rows="3"
+              v-model="fromData.textarea"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+            </el-form>
+        </div>
+        <!-- 最下面的按钮 -->
+          <div class="button">
+  <el-button type="primary">提交</el-button>
+              <el-button @click="$router.go(-1)">返回</el-button>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'holding0_result',
+  // import引入的组件需要注入到对象中才能使用
+  components: { },
+  data () {
+    // 这里存放数据
+    return {
+      // 点击查看显示弹窗
+      isShow: false,
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ],
+      fromData: {
+        textarea: ''
+      },
+      rules: {
+        textarea: [{ max: 255, message: '不能超过255个字符', trigger: 'blur' }]
+      },
+      auditResult: '',
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于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>
+//@import url(); 引入公共css类
+.holding0_result {
+
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+
+  display: flex;
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 100vh;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(1) {
+        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%;
+    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 {
+    position: relative;
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 125px;
+    padding: 35px;
+    .info {
+      display: flex;
+      flex-wrap: wrap;
+      & > div {
+        padding-left: 20px;
+        color: black;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        border: 1px solid #ccc;
+        width: 50%;
+      }
+    }
+    .explain {
+      border: 1px solid #ccc;
+      color: black;
+      padding: 30px 150px 30px 20px;
+      display: flex;
+      flex-wrap: wrap;
+      span {
+        font-weight: 700;
+      }
+    }
+    .table {
+      max-height: 288px;
+      overflow: auto;
+      .smimg {
+        border: 3px solid #ccc;
+        height: 50px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      margin-top: 38px;
+      border: 1px solid #ccc;
+      .title {
+        padding-left: 30px;
+        color: black;
+        height: 50px;
+        line-height: 50px;
+      }
+    }
+    .txt{
+      margin-top: 38px;
+    }
+    .button {
+      position: absolute;
+      left: 50%;
+      bottom: 20px;
+      transform: translateX(-50%);
+      width: 240px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

src/views/holding/holding1.vue

@@ -12,9 +12,10 @@
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
-          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <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">
@@ -119,7 +120,7 @@ export default {
   // 方法集合
   methods: {
     skip (index) {
-      this.$router.push(`/layout/holding${index}`)
+      this.$router.push(`/layout/holding${index}`).catch(() => {})
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -139,6 +140,10 @@ export default {
 </script>
 <style lang='less' scoped>
 .holding {
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+
   display: flex;
   .left {
     width: 220px;

src/views/holding/holding2.vue

@@ -12,11 +12,9 @@
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
-          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-          <el-breadcrumb-item to=""
-            >馆藏管理</el-breadcrumb-item
-          >
-          <el-breadcrumb-item>出库管理</el-breadcrumb-item>
+          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">馆藏管理</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">出库管理</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
       <div class="conten">
@@ -121,7 +119,7 @@ export default {
   // 方法集合
   methods: {
     skip (index) {
-      this.$router.push(`/layout/holding${index}`)
+      this.$router.push(`/layout/holding${index}`).catch(() => {})
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -141,6 +139,9 @@ export default {
 </script>
 <style lang='less' scoped>
 .holding {
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
   display: flex;
   .left {
     width: 220px;

src/views/holding/holding3.vue

@@ -12,9 +12,9 @@
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
-          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <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">
@@ -176,7 +176,7 @@ export default {
   // 方法集合
   methods: {
     skip (index) {
-      this.$router.push(`/layout/holding${index}`)
+      this.$router.push(`/layout/holding${index}`).catch(() => {})
     },
     // 控制显示表格还是图片
     pattern (index) {
@@ -200,6 +200,10 @@ export default {
 </script>
 <style lang='less' scoped>
 .holding {
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+
   display: flex;
   .left {
     width: 220px;

src/views/holding/初始化.vue

@@ -0,0 +1,120 @@
+<!--  -->
+<template>
+  <div class="holdingAdd">
+    <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>
+    </div>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  name: 'HoldingAdd',
+  // 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>
+//@import url(); 引入公共css类
+.holdingAdd {
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+  display: flex;
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 100vh;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(1) {
+        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%;
+    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 {
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 125px;
+  }
+}
+</style>

src/views/home/News.vue

@@ -4,8 +4,8 @@
     <div class="top">
       <div class="ww">
         <el-breadcrumb separator="/">
-          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-          <el-breadcrumb-item>消息中心</el-breadcrumb-item>
+          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">消息中心</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
     </div>
@@ -96,6 +96,10 @@ export default {
 <style lang='less' scoped>
 //@import url(); 引入公共css类
 .News {
+      /deep/#mytitle>span{
+    font-weight: 800;
+  }
+
   .top {
     width: 100%;
     height: 40px;