藏品详情

src/router/index.js

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

src/views/sets/collectionDetails.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="container">
+        <h3 class="title">藏品详情</h3>
+        <div class="content">
+            <el-row>
+                <el-col :span="24">
+                    <div class="grid-content-title bg-title">藏品图片</div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="24">
+                    <div class="grid-content-content bg-img">
+                        <img src="../../assets/images/邮票6.png" alt="">
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="10">
+                    <div class="grid-content-title bg-title">藏品名称</div>
+                </el-col>
+                <el-col :span="7">
+                    <div class="grid-content-title bg-title">藏品价格</div>
+                </el-col>
+                <el-col :span="7">
+                    <div class="grid-content-title bg-title">藏品数量</div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="10">
+                    <div class="grid-content-title bg-content">可邮寄藏品</div>
+                </el-col>
+                <el-col :span="7">
+                    <div class="grid-content-title bg-content">0.01元</div>
+                </el-col>
+                <el-col :span="7">
+                    <div class="grid-content-title bg-content">16份</div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="10">
+                    <div class="grid-content-title bg-title">发行方</div>
+                </el-col>
+                <el-col :span="14">
+                    <div class="grid-content-title bg-title">售卖时间</div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="10">
+                    <div class="grid-content-title bg-content">北京原创三色广告有限公司</div>
+                </el-col>
+                <el-col :span="14">
+                    <div class="grid-content-title bg-content">2023-02-15 10:10:10 - 2023-02-17 00:00:00</div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="10">
+                    <div class="grid-content-title bg-title">实体邮品邮寄</div>
+                </el-col>
+                <el-col :span="7">
+                    <div class="grid-content-title bg-title">积分返佣</div>
+                </el-col>
+                <el-col :span="7">
+                    <div class="grid-content-title bg-title">返利百分比</div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="10">
+                    <div class="grid-content-title bg-content">邮寄</div>
+                </el-col>
+                <el-col :span="7">
+                    <div class="grid-content-title bg-content">返佣</div>
+                </el-col>
+                <el-col :span="7">
+                    <div class="grid-content-title bg-content">100%</div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="24">
+                    <div class="grid-content-title bg-title">作品故事</div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="24">
+                    <div class="grid-content-content bg-img2">
+                        <img src="../../assets/images/邮票6详情.png" alt="">
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+
+    }
+}
+</script>
+
+<style scoped>
+.container {
+    width: 1220px;
+    height: 660px;
+    border: 2px solid #FAFAFA;
+    border-radius: 2px;
+    margin: 20px auto;
+    padding: 0 24px;
+}
+
+.grid-content-title {
+    height: 38px;
+    border: 1px solid #EBEEF5;
+}
+.grid-content-content {
+    min-height: 126px;
+    padding: 20px 60px;
+}
+.grid-content-content img {
+    height: 86px;
+}
+
+.content {
+    height: 580px;
+    border: 2px solid #FAFAFA;
+}
+
+.bg-title {
+    background-color: #FAFAFA;
+    color: #909399;
+    font-size: 14px;
+    line-height: 38px;
+    padding-left: 10px;
+}
+.bg-content {
+    font-size: 13px;
+    line-height: 38px;
+    padding-left: 10px;
+}
+.bg-img2 {
+    margin-left: 32px;
+}
+</style>