Merge branch 'master' of http://git.izouma.com/xiongzhu/9th

src/main/pc-space/src/styles/common.less

@@ -15,6 +15,7 @@
 @bg: #f5f7fa;
 @red: #fd4d49;
 @menuFont: 16px;
+@menuFont1: 12px;
 .flex1 {
     flex-grow: 1;
 }

src/main/pc-space/src/views/CollectionDetail.vue

@@ -15,9 +15,9 @@
                         </video>
                         <el-image
                             v-else
-                            :src="getImg(item.url, '', 800)"
+                            :src="getImg(item.url, '', 1800)"
                             :preview-src-list="bannerList"
-                            style="width: 460px; height: 460px"
+                            style="width: 100%; height: 100%"
                             fit="scale-down"
                         />
                     </swiper-slide>
@@ -63,6 +63,20 @@
                         <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
                     </router-link>
                 </div>
+                <div class="content topcontent">
+                    <el-collapse v-model="activeNames" :accordion="false">
+                        <el-collapse-item name="2">
+                            <template slot="title">
+                                <img class="imgs" src="../assets/icon-miaoshu.png" alt="" />
+                                <span>作品描述</span>
+                            </template>
+                            <div class="info5">
+                                <div v-html="info.detail"></div>
+                            </div>
+                        </el-collapse-item>
+                    </el-collapse>
+                </div>
+
                 <div class="time" v-if="info.salable">
                     <div class="time1">卖家定价</div>
                     <div class="time2" v-if="info.isAppointment">
@@ -100,17 +114,14 @@
                         >
                     </div>
                     <div class="price1 num">
-                        <div class="num1">
-                            <div class="price2 num2">单次限购 1 件</div>
-                            <!-- <span class="span">{{ info.total }}</span> -->
-                        </div>
+                        <div class="price2 num2">单次限购 1 件</div>
                         <div class="price2 num2">已售 {{ info.sale }} / 剩余 {{ info.stock }}</div>
                     </div>
                 </div>
                 <div class="init">
-                    <div class="name">类型</div>
-                    <div class="name name1">悄悄话<span>（灰色表示已使用）</span></div>
-                    <div class="name name2">持有特权<span>（灰色表示已使用）</span></div>
+                    <div class="type">类型</div>
+                    <div class="type type1">悄悄话<span>（灰色表示已使用）</span></div>
+                    <div class="type type2">持有特权<span>（灰色表示已使用）</span></div>
                 </div>
                 <div class="init1">
                     <div class="name" v-if="info.category">{{ info.category }}</div>
@@ -184,7 +195,7 @@
                 <el-collapse-item name="2">
                     <template slot="title">
                         <img class="imgs" src="../assets/icon-miaoshu.png" alt="" />
-                        <span>作品描述</span>
+                        <span>盲盒信息</span>
                     </template>
                     <div class="info4">
                         <swiper class="boxs" :options="boxOptions">
@@ -192,7 +203,7 @@
                                 <el-image :src="item" :preview-src-list="boxs" fit="scale-down" />
                             </swiper-slide>
                         </swiper>
-                        <div v-html="info.detail"></div>
+                        <!-- <div v-html="info.detail"></div> -->
                     </div>
                 </el-collapse-item>
                 <!-- v-if="tableData.length != 0" -->
@@ -446,14 +457,16 @@ export default {
     background: #1a1a1a;
     .top {
         display: flex;
+        justify-content: space-between;
         .top-left {
-            width: 460px;
+            width: 520px;
             flex-shrink: 0;
         }
 
         .top-info {
-            flex-grow: 1;
-            margin-left: 30px;
+            // flex-grow: 1;
+            width: 650px;
+            // margin-left: 30px;
         }
 
         .works {
@@ -476,7 +489,7 @@ export default {
         }
         .title {
             display: flex;
-            margin-top: 10px;
+            // margin-top: 10px;
             padding-right: 100px;
             position: relative;
             .title1 {
@@ -514,7 +527,7 @@ export default {
         }
         .name-list {
             display: flex;
-            padding: 12px 0;
+            margin: 20px 0 10px;
         }
         .name {
             display: flex;
@@ -554,10 +567,11 @@ export default {
             justify-content: space-between;
             background: #1c1e26;
             border-radius: 8px 8px 0px 0px;
-            height: 56px;
+            height: 44px;
             padding: 0 16px;
+            margin-top: 20px;
             .time1 {
-                font-size: 18px;
+                font-size: 16px;
                 font-weight: bold;
                 color: #ffffff;
                 line-height: 24px;
@@ -577,10 +591,10 @@ export default {
             }
         }
         .price {
-            padding: 0 16px;
+            padding: 0 23px 0 18px;
             background: #1f2230;
             border-radius: 0px 0px 8px 8px;
-            margin-bottom: 30px;
+            margin-bottom: 20px;
             .top2 {
                 display: flex;
                 align-items: center;
@@ -589,15 +603,11 @@ export default {
             }
             .price1 {
                 display: flex;
-                padding: 18px 0 24px 0;
-                // border-bottom: 1px solid #2b2e3e;
+                padding: 23px 0 20px 0;
                 &.num {
                     justify-content: space-between;
                     border-bottom: 0;
-                }
-                .num1 {
-                    display: flex;
-                    align-items: center;
+                    padding: 0;
                 }
                 .span {
                     font-size: 14px;
@@ -611,7 +621,8 @@ export default {
                     font-weight: 400;
                     color: #939599;
                     line-height: 24px;
-                    padding-top: 12px;
+                    // padding-top: 12px;
+                    margin-top: 16px;
                     &.num2 {
                         padding-top: 0;
                     }
@@ -648,19 +659,20 @@ export default {
             background: #1c1e26;
             border-radius: 8px 8px 0px 0px;
             display: flex;
+            height: 44px;
             align-items: center;
-            .name {
-                font-size: 18px;
+            .type {
+                font-size: @menuFont;
                 font-weight: bold;
                 color: #ffffff;
                 line-height: 28px;
                 margin: 0 !important;
                 padding-left: 16px;
                 width: 130px;
-                &.name1 {
+                &.type1 {
                     width: 220px;
                 }
-                &.name2 {
+                &.type2 {
                     width: 313px;
                 }
             }
@@ -687,9 +699,8 @@ export default {
         .init1 {
             display: flex;
             align-items: center;
-            height: 102px;
+            height: 64px;
             background: #1f2230;
-            margin-bottom: 30px;
             border-radius: 0px 0px 8px 8px;
             .Notset {
                 font-size: 14px;
@@ -710,7 +721,7 @@ export default {
             }
             .bor {
                 width: 1px;
-                height: 62px;
+                height: 16px;
                 background: #2b2e3e;
                 border-radius: 1px;
             }
@@ -794,10 +805,10 @@ export default {
             }
         }
         .card {
-            height: 112px;
+            height: 66px;
             border-radius: 0px 0px 8px 8px;
             background: #1f2230;
-            padding: 0 40px;
+            padding: 0 30px;
             display: flex;
             align-items: center;
             // justify-content: space-between;
@@ -806,23 +817,21 @@ export default {
                 width: 100%;
                 flex-wrap: wrap;
                 .box1 {
-                    width: 120px;
-                    height: 62px;
+                    width: 94px;
+                    height: 46px;
                     text-align: center;
-                    margin-left: 20px;
                     .line();
                     .box2 {
-                        font-size: 14px;
+                        font-size: @menuFont1;
                         font-weight: 400;
                         color: #939599;
-                        line-height: 24px;
-                        margin-top: 5px;
+                        line-height: 22px;
                     }
                     .box3 {
-                        font-size: 14px;
+                        font-size: @menuFont1;
                         font-weight: 400;
                         color: #ffffff;
-                        line-height: 24px;
+                        line-height: 22px;
                     }
                 }
             }
@@ -855,6 +864,9 @@ export default {
         /deep/ .el-collapse-item__content {
             padding-bottom: 1px !important;
         }
+        /deep/ .el-collapse {
+            border-radius: 8px;
+        }
         .info {
             display: flex;
             align-items: center;
@@ -897,6 +909,14 @@ export default {
             color: #fff;
             padding: 16px;
         }
+        .info5 {
+            padding: 16px;
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #939599;
+            line-height: 24px;
+        }
     }
     .nft {
         display: flex;
@@ -939,7 +959,7 @@ export default {
     }
 }
 .mySwiper {
-    width: 462px;
+    width: 520px;
     display: inline-block;
     .line();
     /deep/.el-image {
@@ -951,9 +971,9 @@ export default {
 }
 .buy {
     // width: 100%;
-    width: 324px;
+    width: 280px;
+    height: 50px;
     display: block;
-    height: 52px;
     font-size: 16px;
     background: linear-gradient(135deg, @prim 0%, @warn 100%);
     border-radius: 8px;
@@ -970,7 +990,10 @@ export default {
 }
 
 /deep/.content {
-    margin-top: 30px;
+    margin-top: 20px;
+    &.topcontent {
+        margin-top: 0;
+    }
     .el-collapse-item__wrap {
         // border-bottom: 1px solid #494a4d;
         border-bottom-width: 0;
@@ -982,7 +1005,7 @@ export default {
     .el-collapse-item__header {
         background-color: #1c1e26;
         padding-left: 16px;
-        height: 68px;
+        height: 44px;
         border-bottom-width: 0;
         img {
             width: 24px;