完成tab1静态页面

houtai/src/assets/css/base.css

@@ -11,7 +11,7 @@ ul li {
 }
 a {
   text-decoration:none ;
-  color: #66b1ff;
+  color: #b9412e;
 }
 .insideTop {
   position: relative;
@@ -126,4 +126,31 @@ input[type="number"] {
 .el-radio__input.is-checked .el-radio__inner{
   border-color: #964134;
   background: #964134;
+}
+.el-image__preview{
+  border: 10px solid #cccccc;
+}
+.el-pager li{
+  border-radius: 5px;
+  margin: 0 5px;
+  min-width: 28px;
+  background-color: #f4f4f5;
+}
+.el-pagination .btn-next, .el-pagination .btn-prev{
+  background-color: #f4f4f5;
+  padding: 0;
+  min-width: 28px;
+}
+.el-pagination__sizes .el-input .el-input__inner:hover{
+  border-color: #b9412e;
+}
+.el-pager li:hover{
+  color: #b9412e;
+}
+.el-pager li.active{
+  color: #fff;
+  background-color: #b9412e;
+}
+.el-pagination button:hover{
+  color: #b9412e;
 }

houtai/src/router/index.js

@@ -27,10 +27,16 @@ const routes = [
         component: () => import('../views/tab1/tab1Add.vue')
       },
       {
-        path: 'tab1Edit',
-        name: 'tab1Edit',
+        path: 'tab1Add2',
+        name: 'tab1Add2',
         meta: { myInd: 1 },
-        component: () => import('../views/tab1/edit.vue')
+        component: () => import('../views/tab1/tab1Add2.vue')
+      },
+      {
+        path: 'tab1Look',
+        name: 'tab1Look',
+        meta: { myInd: 1 },
+        component: () => import('../views/tab1/tab1Look.vue')
       },
       {
         path: 'tab2',

houtai/src/views/tab1/edit.vue

@@ -1,257 +0,0 @@
-<!--  -->
-<template>
-  <div class="tab1Edit">
-    <div class="top">
-      {{ ruleForm.id === "1" ? "园区概况" : "各楼宇人数统计" }}
-    </div>
-    <div class="from">
-      <el-form
-        :model="ruleForm"
-        :rules="rules"
-        ref="ruleForm"
-        label-width="130px"
-        class="demo-ruleForm"
-      >
-        <el-form-item label="综合大楼：" prop="complexBuilding">
-          <el-input
-            v-model.number="ruleForm.complexBuilding"
-            type="number"
-          ></el-input>
-          <span class="unit" v-if="ruleForm.id === '1'">m<sup>2</sup></span>
-          <span class="unit2" v-else>人</span>
-        </el-form-item>
-        <el-form-item label="学术交流中心：" prop="exchangeCentre">
-          <el-input
-            v-model.number="ruleForm.exchangeCentre"
-            type="number"
-          ></el-input>
-          <span class="unit" v-if="ruleForm.id === '1'">m<sup>2</sup></span>
-          <span class="unit2" v-else>人</span>
-        </el-form-item>
-        <el-form-item label="公寓楼：" prop="apartment">
-          <el-input
-            v-model.number="ruleForm.apartment"
-            type="number"
-          ></el-input>
-          <span class="unit" v-if="ruleForm.id === '1'">m<sup>2</sup></span>
-          <span class="unit2" v-else>人</span>
-        </el-form-item>
-        <el-form-item label="综合服务中心：" prop="serviceCentre">
-          <el-input
-            v-model.number="ruleForm.serviceCentre"
-            type="number"
-          ></el-input>
-          <span class="unit" v-if="ruleForm.id === '1'">m<sup>2</sup></span>
-          <span class="unit2" v-else>人</span>
-        </el-form-item>
-        <el-form-item label="科研楼：" prop="scientificBuilding">
-          <el-input
-            v-model.number="ruleForm.scientificBuilding"
-            type="number"
-          ></el-input>
-          <span class="unit" v-if="ruleForm.id === '1'">m<sup>2</sup></span>
-          <span class="unit2" v-else>人</span>
-        </el-form-item>
-        <el-form-item label="更新时间：">
-          <i class="biaoshi"></i>
-          <el-date-picker
-            v-model="time"
-            type="datetime"
-            placeholder="选择日期时间"
-            align="right"
-            :picker-options="pickerOptions"
-          >
-          </el-date-picker>
-        </el-form-item>
-      </el-form>
-    </div>
-    <!-- 下面的按钮 -->
-    <div class="btn">
-      <el-button @click="$router.push('/layout/tab1')">返 回</el-button>
-      <el-button type="primary" @click="btnOk">提 交</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { parkSave } from '@/apis/tab1'
-export default {
-  name: 'tab1Edit',
-  components: {},
-  data () {
-    // 这里存放数据
-    const validatePass = (rule, value, callback) => {
-      if (value > 99999999.99) {
-        callback(new Error('不能超过99999999.99'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      pickerOptions: {
-        shortcuts: [
-          {
-            text: '今天',
-            onClick (picker) {
-              picker.$emit('pick', new Date())
-            }
-          },
-          {
-            text: '昨天',
-            onClick (picker) {
-              const date = new Date()
-              date.setTime(date.getTime() - 3600 * 1000 * 24)
-              picker.$emit('pick', date)
-            }
-          },
-          {
-            text: '一周前',
-            onClick (picker) {
-              const date = new Date()
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-              picker.$emit('pick', date)
-            }
-          }
-        ]
-      },
-      disTime: '',
-      time: '',
-      ruleForm: {
-        complexBuilding: '', // 综合大楼
-        exchangeCentre: '', // 学术交流中心
-        apartment: '', // 公寓楼
-        serviceCentre: '', // 综合服务中心
-        scientificBuilding: '' // 科研楼
-      },
-      rules: {
-        complexBuilding: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        exchangeCentre: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        apartment: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        serviceCentre: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        scientificBuilding: [
-          { required: true, message: '不能为空', trigger: 'blur' },
-          { validator: validatePass, trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {
-    time (val) {
-      const temp = this.moment(val).format('YYYY-MM-DD HH:mm:ss')
-      this.disTime = temp
-    }
-  },
-  // 方法集合
-  methods: {
-    // 点击提交
-    async btnOk () {
-      if (this.time === null) return this.$message.warning('时间不能为空!')
-      try {
-        await this.$refs.ruleForm.validate()
-        const obj = {}
-        if (this.ruleForm.id === '1') {
-          obj.type = 'park'
-        } else if (this.ruleForm.id === '2') {
-          obj.type = 'building'
-        }
-        obj.id = Number(this.ruleForm.id)
-        obj.data = JSON.stringify(this.ruleForm)
-        obj.userUpdateTime = this.disTime
-        const res = await parkSave(obj)
-        if (res.code === 0) {
-          this.$message.success('修改成功')
-          this.$router.push('/layout/tab1')
-        }
-        // console.log(999, res)
-        // console.log(777777777777, obj)
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    getCurrentTime () {
-      // 获取当前时间并打印
-      var _this = this
-      const yy = new Date().getFullYear()
-      const mm = new Date().getMonth() + 1
-      const dd = new Date().getDate()
-      const hh = new Date().getHours()
-      const mf =
-        new Date().getMinutes() < 10
-          ? '0' + new Date().getMinutes()
-          : new Date().getMinutes()
-      const ss =
-        new Date().getSeconds() < 10
-          ? '0' + new Date().getSeconds()
-          : new Date().getSeconds()
-      _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
-      this.time = _this.gettime
-      // console.log(_this.gettime)
-    }
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  async created () {
-    this.ruleForm = this.$route.query
-    this.getCurrentTime()
-    // console.log(999, this.$route.query)
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-.tab1Edit {
-  height: 100%;
-  position: relative;
-  .top {
-    height: 40px;
-    line-height: 40px;
-    background-color: #fbfbfb;
-    padding-left: 20px;
-  }
-  .from {
-    margin-top: 30px;
-    width: 50%;
-    .unit {
-      position: absolute;
-      right: -40px;
-      top: -5px;
-    }
-    .unit2 {
-      position: absolute;
-      right: -40px;
-      top: 0;
-    }
-  }
-  .btn {
-    display: flex;
-    justify-content: space-between;
-    width: 200px;
-    position: absolute;
-    left: 50%;
-    bottom: 30px;
-    transform: translateX(-50%);
-  }
-}
-</style>

houtai/src/views/tab1/index.vue

@@ -83,7 +83,8 @@
             </el-table-column>
             <el-table-column prop="name1" label="阅读"> </el-table-column>
             <el-table-column prop="name1" label="发布人"> </el-table-column>
-            <el-table-column prop="name2" label="发布时间" width="200"> </el-table-column>
+            <el-table-column prop="name2" label="发布时间" width="200">
+            </el-table-column>
             <el-table-column prop="address" label="排序" width="80">
               <template #default="{ row }">
                 <el-input type="text" v-model="row.name1"></el-input>
@@ -91,24 +92,37 @@
             </el-table-column>
             <el-table-column prop="name3" label="是否显示">
               <template #default="{ row }">
-                <el-switch
-                  v-model="row.name3"
-                  active-color="#b9412e"
-                >
+                <el-switch v-model="row.name3" active-color="#b9412e">
                 </el-switch>
               </template>
             </el-table-column>
             <el-table-column label="操作">
-              <template #default>
-                <el-button type="text">查看</el-button>
-                <el-button type="text">编辑</el-button>
-                <el-button type="text">删除</el-button>
+              <template #default="{ row }">
+                <el-button
+                  type="text"
+                  v-if="row.name3"
+                  @click="lookGood(row.id)"
+                  >查看</el-button
+                >
+                <el-button type="text" v-if="!row.name3">编辑</el-button>
+                <el-button type="text" v-if="!row.name3">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
         </div>
       </div>
     </div>
+    <!-- 分页 -->
+    <div class="paging">
+      <el-pagination
+        layout="sizes,prev, pager, next,jumper"
+        :total="total"
+        :current-page="formData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+      >
+      </el-pagination>
+    </div>
   </div>
 </template>
 
@@ -119,6 +133,7 @@ export default {
   data () {
     // 这里存放数据
     return {
+      total: 100,
       conLeft: '1',
       time: '',
       conLeftArr: [
@@ -150,9 +165,28 @@ export default {
   },
   // 方法集合
   methods: {
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+    }, // 点击查看
+    lookGood (id) {
+      this.$router.push({
+        path: '/layout/tab1Look',
+        query: { conLeftId: this.conLeft }
+      })
+    },
     // 点击新增文物
     addGood () {
-      this.$router.push('/layout/tab1Add')
+      if (this.conLeft === '2') this.$router.push('/layout/tab1Add2')
+      else {
+        this.$router.push({
+          path: '/layout/tab1Add',
+          query: { conLeftId: this.conLeft }
+        })
+      }
     },
     // 点击左侧的tab栏
     cutLeft (type) {
@@ -193,7 +227,14 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 判断是第一次进来还是修改或者新增或者查看后返回
+    // 拿到路由跳转传过来的数据
+    if (this.$route.query.conLeftId) {
+      this.conLeft = this.$route.query.conLeftId
+    } else {
+    }
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -217,7 +258,6 @@ export default {
       height: 100%;
       border: 1px solid #ccc;
       .cutJT {
-        cursor: pointer;
         margin-bottom: 10px;
       }
       ul {
@@ -268,5 +308,11 @@ export default {
       }
     }
   }
+      .paging {
+      position: absolute;
+      bottom: 15px;
+      right: 50px;
+    }
+
 }
 </style>

houtai/src/views/tab1/tab1Add.vue

@@ -28,13 +28,13 @@
         </el-form-item>
         <el-form-item label="精品类型：">
           <i class="biaoshi biaoshi2"></i>
-          <el-radio v-model="radio" label="1">实物模型</el-radio>
-          <el-radio v-model="radio" label="2" disabled>专题图库</el-radio>
-          <el-radio v-model="radio" label="3" disabled>视频档案</el-radio>
+          <el-radio v-model="conLeftId" label="1" :disabled='conLeftId!=="1"'>实物模型</el-radio>
+          <el-radio v-model="conLeftId" label="2" disabled>专题图库</el-radio>
+          <el-radio v-model="conLeftId" label="3" :disabled='conLeftId!=="3"'>视频档案</el-radio>
         </el-form-item>
         <!-- 图片和附件 -->
-        <el-form-item label="模型封面图片：">
-          <i class="biaoshi biaoshi1"></i>
+        <el-form-item :label="conLeftId==='1'?'模型封面图片：':'封面图片：'">
+          <i class="biaoshi" :class="{biaoshi1:conLeftId==='1'}"></i>
           <el-upload
             class="avatar-uploader"
             :action="baseURL + '/cms/security/video/upload/img'"
@@ -61,10 +61,10 @@
           <p class="upHint">
             1、支持png、jpg、gif和jpeg的图片格式；最大支持20M。
           </p>
-          <p class="upHint">2、用于实物模型列表中进行展示。</p>
+          <p class="upHint">2、用于{{conLeftId==='1'?'实物模型':'视频档案'}}列表中进行展示。</p>
         </el-form-item>
         <!-- 上传附件 -->
-        <el-form-item label="模型文件：">
+        <el-form-item :label="conLeftId==='1'?'模型文件：':'视频文件：'">
           <i class="biaoshi"></i>
           <el-upload
             multiple
@@ -81,11 +81,16 @@
             :show-file-list="true"
           >
             <el-button size="small" type="primary">点击上传</el-button>
-            <div class="el-upload__tip" slot="tip">
+            <div class="el-upload__tip" slot="tip" v-if="conLeftId==='1'">
               <p class="upHint">格式要求：</p>
               <p class="upHint">1、仅支持.4dge格式的模型文件。</p>
               <p class="upHint">2、最大支持500M。</p>
             </div>
+            <div class="el-upload__tip" slot="tip" v-else>
+              <p class="upHint">格式要求：</p>
+              <p class="upHint">1、支持视频格式文件（例如：AVI、mov、rmvb、rm、FLV、mp4、3GP）。</p>
+              <p class="upHint">2、最大支持2G的视频文件。</p>
+            </div>
           </el-upload>
         </el-form-item>
       </el-form>
@@ -103,7 +108,7 @@ export default {
   components: {},
   data () {
     return {
-      radio: '1',
+      conLeftId: '',
       fileList: [],
       // 服务器前缀地址
       baseURL: '',
@@ -130,7 +135,10 @@ export default {
         type: 'warning'
       })
         .then(async () => {
-          this.$router.push('/layout/tab1')
+          this.$router.push({
+            path: '/layout/tab1',
+            query: { conLeftId: this.conLeftId }
+          })
         })
         .catch(() => {
           this.$message.info('已取消')
@@ -217,7 +225,10 @@ export default {
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 拿到路由跳转传过来的数据
+    this.conLeftId = this.$route.query.conLeftId
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前

houtai/src/views/tab1/tab1Add2.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="tab1Add2">
+    <div class="insideTop">
+      文物典藏管理 > 新增文物典藏
+      <div class="add">
+        <el-button type="primary" @click="goBack">返 回</el-button>
+      </div>
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容 -->
+    <div class="conten">
+      <div class="con_top">基本信息</div>
+      <!-- 表单 -->
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="120px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="标题：" prop="name">
+          <el-input
+            v-model="ruleForm.name"
+            maxlength="25"
+            show-word-limit
+            style="width: 500px"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="精品类型：">
+          <i class="biaoshi biaoshi2"></i>
+          <el-radio v-model="conLeftId" label="1" disabled>实物模型</el-radio>
+          <el-radio v-model="conLeftId" label="2" >专题图库</el-radio>
+          <el-radio v-model="conLeftId" label="3" disabled>视频档案</el-radio>
+        </el-form-item>
+        <!-- 图片 -->
+        <el-form-item label="图片：">
+          <i class="biaoshi biaoshi1"></i>
+          <el-upload
+            class="avatar-uploader"
+            :action="baseURL + '/cms/security/video/upload/img'"
+            :headers="{
+              token,
+            }"
+            :show-file-list="false"
+            :before-upload="beforethumbUpload"
+            :on-success="upload_thumb_success"
+          >
+            <div v-if="ruleForm.thumb" class="imgdiv">
+              <img
+                style="width: 100%; height: 100%"
+                :src="baseURL + ruleForm.thumb"
+              />
+              <i
+                class="el-icon-circle-close"
+                @click.stop="ruleForm.thumb = ''"
+              ></i>
+            </div>
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <p class="upHint">格式要求：</p>
+          <p class="upHint">
+            1、支持png、jpg、gif和jpeg的图片格式；最大支持20M。
+          </p>
+          <p class="upHint">2、最多可上传18张图片。</p>
+        </el-form-item>
+      </el-form>
+      <!-- 底部按钮 -->
+      <div class="con_btn">
+        <el-button type="primary">保 存</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tab1Add2',
+  components: {},
+  data () {
+    return {
+      conLeftId: '2',
+      fileList: [],
+      // 服务器前缀地址
+      baseURL: '',
+      token: '',
+      ruleForm: {
+        id: '',
+        name: '',
+        thumb: '',
+        video: '',
+        fileName: ''
+      },
+      rules: {
+        name: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    // 点击返回
+    goBack () {
+      this.$confirm('点击返回后，编辑的信息将无法保存，是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(async () => {
+          this.$router.push({
+            path: '/layout/tab1',
+            query: { conLeftId: '2' }
+          })
+        })
+        .catch(() => {
+          this.$message.info('已取消')
+        })
+    },
+    // 上传图片
+    beforethumbUpload (file) {
+      // console.log(998, file)
+      // 限制图片大小和格式
+      const sizeOk = file.size / 1024 / 1024 < 5
+      const typeOk =
+        file.type === 'image/png' ||
+        file.type === 'image/jpeg' ||
+        file.type === 'image/gif'
+
+      return new Promise((resolve, reject) => {
+        if (!typeOk) {
+          this.$message.error('照片格式有误！')
+          reject(file)
+        } else if (!sizeOk) {
+          this.$message.error('照片大小超过5M！')
+          reject(file)
+        } else if (file.name.length > 32) {
+          this.$message.error('照片名字不能超过32个字！')
+          reject(file)
+        } else {
+          this.$message.success('上传成功')
+          resolve(file)
+        }
+      })
+    },
+    upload_thumb_success (data) {
+      // console.log('图片上传成功', data.data.urlPath)
+      this.ruleForm.thumb = data.data.urlPath
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab1Add2 {
+  height: 100%;
+  .conten {
+    position: relative;
+    /deep/.el-icon-plus {
+      border: 1px dashed #ccc;
+    }
+    height: calc(100% - 32px);
+    .con_top {
+      margin-bottom: 12px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 20px;
+      background-color: #fbfbfb;
+    }
+    .biaoshi1::before {
+      left: -63px;
+    }
+    .biaoshi2::before {
+      top: -10px;
+    }
+    .avatar-uploader .el-upload {
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+      border-color: #3e5eb3;
+    }
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+    .con_btn {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 15px;
+    }
+  }
+}
+</style>

houtai/src/views/tab1/tab1Look.vue

@@ -0,0 +1,158 @@
+<!--  -->
+<template>
+  <div class="tab1Look">
+    <div class="insideTop">
+      文物典藏管理 > 查看文物典藏
+      <div class="add">
+        <el-button type="primary" @click="goBack"
+          >返 回</el-button
+        >
+      </div>
+    </div>
+    <div class="obstruct"></div>
+    <!-- 主要内容2 -->
+    <div class="conten" v-if="conLeftId === '2'">
+      <div class="con_top">基本信息</div>
+      <div class="row">
+        <div>标题：</div>
+        <span>123</span>
+      </div>
+      <div class="row">
+        <div>精品类型：</div>
+        <span>123</span>
+      </div>
+      <div class="row">
+        <div>显示设置：</div>
+        <el-switch disabled v-model="value" active-color="#b9412e"> </el-switch>
+      </div>
+      <div class="row">
+        <div>图片：</div>
+        <div class="imgList">
+        <el-image
+          v-for="i in 15"
+          :key="i"
+          style="width: 200px; height: 200px"
+          :src="srcList2[0]"
+          :preview-src-list="srcList2"
+        >
+        </el-image>
+        </div>
+      </div>
+    </div>
+    <!-- 主要内容1-3 -->
+    <div class="conten" v-else>
+      <div class="con_top">基本信息</div>
+      <div class="row">
+        <div>标题：</div>
+        <span>123</span>
+      </div>
+      <div class="row">
+        <div>精品类型：</div>
+        <span>123</span>
+      </div>
+      <div class="row">
+        <div>{{ conLeftId === "1" ? "实物图片" : "封面图片" }}：</div>
+        <el-image
+          style="width: 300px; height: 300px"
+          :src="srcList[0]"
+          :preview-src-list="srcList"
+        >
+        </el-image>
+      </div>
+      <div class="row">
+        <div>{{ conLeftId === "1" ? "模型文件" : "视频文件" }}：</div>
+        <a href="">视频文件.mp4</a>
+      </div>
+      <div class="row">
+        <div>显示设置：</div>
+        <el-switch disabled v-model="value" active-color="#b9412e"> </el-switch>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  name: 'tab1Look',
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      conLeftId: '',
+      value: true,
+      srcList: [
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643275872&t=6a91d1e33312fc0a70f0f48a6cf57f68'
+      ],
+      srcList2: [
+        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F5e%2F4e%2Ff0%2F5e4ef0e451852e0114d75eac14f60924.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643275872&t=6a91d1e33312fc0a70f0f48a6cf57f68',
+        'https://img2.baidu.com/it/u=395719964,2145680590&fm=26&fmt=auto'
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 点击返回
+    goBack () {
+      this.$router.push({
+        path: '/layout/tab1',
+        query: { conLeftId: this.conLeftId }
+      })
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+    // 拿到路由跳转传过来的数据
+    this.conLeftId = this.$route.query.conLeftId
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab1Look {
+  height: 100%;
+  .conten {
+    overflow-y: auto;
+    position: relative;
+    height: calc(100% - 32px);
+    .con_top {
+      margin-bottom: 12px;
+      height: 40px;
+      line-height: 40px;
+      padding-left: 20px;
+      background-color: #fbfbfb;
+    }
+    .row {
+      display: flex;
+      margin: 25px 0;
+      & > div {
+        width: 120px;
+        text-align: right;
+      }
+    .imgList{
+      width: 1500px;
+      display: flex;
+      flex-wrap: wrap;
+      /deep/.el-image{
+        margin-right: 30px;
+        margin-bottom: 30px;
+      }
+    }
+    }
+  }
+}
+</style>