藏品详情页面

src/router/index.js

@@ -166,6 +166,13 @@ export const constantRoutes = [
         component: () => import('@/views/collection/addCollection'),
         name: 'addCollection',
         meta: { title: '创建套系', icon: 'collectionadd' }
+      },
+      {
+        path: 'collectionDetails',
+        component: () => import('@/views/collection/collectionDetails'),
+        name: 'collectionDetails',
+        meta: { title: '藏品详情', icon: 'list' },
+        hidden: true
       }
     ]
   },

src/views/collection/collectionDetails.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="app">
+    <el-button id="returnBtn" @click="returnBtn">返回</el-button>
+        <div class="collectionDetails">
+            <div class="title">藏品详情</div>
+            <div class="liebiao">
+                <el-descriptions  direction="vertical"  border>
+                    <el-descriptions-item label="藏品图片" :span="3">
+                        <img class="collectionImg" fit="fill" :src="require('@/assets/images/collection/邮票6.png')" />
+                    </el-descriptions-item>
+                    <el-descriptions-item label="藏品名称">{{ collectionName }}</el-descriptions-item>
+                        <el-descriptions-item label="藏品价格">{{ collectionPrice }}</el-descriptions-item>
+                        <el-descriptions-item label="藏品数量">{{ collectionNumber }}</el-descriptions-item>
+                        <el-descriptions-item label="发行方">{{ publisher }}</el-descriptions-item>
+                        <el-descriptions-item label="售卖时间" :span="2">{{ sellTime }}</el-descriptions-item>
+                        <el-descriptions-item label="实体邮品邮寄">{{ sendMethod }}</el-descriptions-item>
+                        <el-descriptions-item label="积分返佣">{{ bonusPoints }}</el-descriptions-item>
+                        <el-descriptions-item label="返利百分比" >{{ rebatePercentage }}</el-descriptions-item>
+                        <el-descriptions-item label="作品故事" :span="3">
+                            <img class="collectionStory" fit="fill" :src="require('@/assets/images/collection/邮票6详情.png')" />
+                        </el-descriptions-item>
+                </el-descriptions>      
+            </div>
+            
+        </div>
+    </div> 
+</template>
+
+<script>
+export default {
+    data () {
+      return {
+        collectionName :'可邮寄藏品333',
+        collectionPrice:'0.01元',
+        collectionNumber:'16份',
+        publisher:'北京原创三色广告有限公司',
+        sellTime:'2023-02-15 11:50:00 - 2023-02-17 00:00:00',
+        sendMethod:'邮寄',
+        bonusPoints:'返佣',
+        rebatePercentage:'100%'
+      };
+    },
+    methods: {
+    returnBtn(){
+        this.$router.go(-1)
+    }
+  }
+  }
+</script>
+
+<style scoped>
+
+#returnBtn {
+  margin-top: 10px;
+  margin-left: 10px;
+}
+
+.collectionDetails {
+  width: 1100px;
+  height: 4000px;
+  /* background: red; */
+  margin: 50px auto;
+  border: 1px solid #ebeef5;
+}
+
+.title {
+  font-size: 20px;
+  font-family: PingFang SC;
+  color: #333333;
+  font-weight: bolder;
+  margin-top: 10px;
+  margin-left: 10px;
+}
+
+.liebiao{
+    margin-top: 20px;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+.collectionImg{
+    width: 80px;
+    height:80px;
+    margin-left: 50px;
+}
+.collectionStory{
+    width: 40px;
+    height: 100px;
+    margin-left: 80px;
+}
+</style>