.

src/main/nine-space/package-lock.json

@@ -1924,80 +1924,6 @@
         "webpack-chain": "^6.4.0",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^4.2.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -4614,6 +4540,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
+      "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+    },
     "debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -7802,6 +7733,11 @@
       "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==",
       "dev": true
     },
+    "lottie-web": {
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.8.1.tgz",
+      "integrity": "sha512-9gIizWADlaHC2GCt+D+yNpk5l2clZQFqnVWWIVdY0LnxC/uLa39dYltAe3fcmC/hrZ2IUQ8dLlY0O934Npjs7Q=="
+    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -12108,6 +12044,88 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "vue-lottie": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vue-lottie/-/vue-lottie-0.2.1.tgz",
+      "integrity": "sha512-zInUX69Ij8MhVR3XArpu4PqqBoufwKxS5UMutWCPm59VUaB5H6GtnaIzf9M+l6aYU+Kr8gF/W9dzWLgRuU6V+Q==",
+      "requires": {
+        "lottie-web": "^5.1.9"
+      }
+    },
     "vue-router": {
       "version": "4.0.12",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",

src/main/pc-space/src/components/AssetInfo.vue

@@ -77,51 +77,60 @@ export default {
 .collect {
     .line();
     width: 276px;
-    height: 416px;
+    height: 426px;
     display: inline-block;
     &::before {
         border-radius: 8px;
     }
     .imgBox {
-        height: 266px;
+        height: 274px;
         width: 100%;
         border-radius: 8px 8px 0px 0px;
     }
-
     &:hover {
-        .imgBox {
-            position: relative;
-            &::before {
-                content: '';
-                position: absolute;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                background-color: fade(@prim, 70%);
-            }
-
-            &::after {
-                padding: 0 22px;
-                content: '查看详情';
-                line-height: 30px;
-                font-size: 16px;
-                color: #1a1a1a;
-                background: #ffffff;
-                border-radius: 16px;
-                border: 1px solid #ffffff;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-            }
-        }
+        position: relative;
+        transition: transform 0.5s ease-out;
+        -o-transition: transform 0.5s ease-out;
+        -webkit-transition: transform 0.5s ease-out;
+        -moz-transition: transform 0.5s ease-out;
+        transform: scale(1.1);
+        -ms-transform: scale(1.1);
+        -webkit-transform: scale(1.1);
     }
+    // &:hover {
+    //     .imgBox {
+    //         position: relative;
+    //         &::before {
+    //             content: '';
+    //             position: absolute;
+    //             left: 0;
+    //             top: 0;
+    //             right: 0;
+    //             bottom: 0;
+    //             background-color: fade(@prim, 70%);
+    //         }
+
+    //         &::after {
+    //             padding: 0 22px;
+    //             content: '查看详情';
+    //             line-height: 30px;
+    //             font-size: 16px;
+    //             color: #1a1a1a;
+    //             background: #ffffff;
+    //             border-radius: 16px;
+    //             border: 1px solid #ffffff;
+    //             position: absolute;
+    //             top: 50%;
+    //             left: 50%;
+    //             transform: translate(-50%, -50%);
+    //         }
+    //     }
+    // }
 
     .introduce {
-        padding: 10px 16px 6px;
-        font-size: 14px;
-        font-weight: 400;
+        padding: 10px 16px 16px;
+        font-size: 16px;
+        font-weight: bold;
         color: #ffffff;
         line-height: 20px;
     }
@@ -161,10 +170,10 @@ export default {
         }
     }
     .status {
-        font-size: 18px;
+        font-size: 16px;
         color: #939599;
         line-height: 24px;
-        padding: 0 16px 16px;
+        padding: 0 16px 12px;
     }
     .border {
         height: 1px;
@@ -176,7 +185,7 @@ export default {
         display: flex;
         align-items: center;
         // justify-content: space-between;
-        padding: 19px 16px 20px;
+        padding: 19px 16px 22px;
         .text {
             display: flex;
             align-items: center;

src/main/pc-space/src/components/CollectionInfo.vue

@@ -1,7 +1,6 @@
 <template>
     <a :href="`collectionDetail?id=${info.id}`" class="collect" :target="target">
         <el-image class="imgBox" :src="getImg(changeImgs(info.pic))" fit="cover"></el-image>
-
         <div class="introduce">{{ info.name }}</div>
         <div class="price" v-if="info.salable">
             <img class="img1" src="../assets/img/icon_jiage@3x.png" alt="" />
@@ -11,7 +10,10 @@
             </div> -->
         </div>
         <div class="init" v-else>仅展示</div>
-        <div class="border"></div>
+        <div class="con">
+            <div class="border"></div>
+            <div class="price2" v-if="info.salable">已售 {{ info.sale }} / 剩余 {{ info.stock }}</div>
+        </div>
         <div class="fans">
             <div class="text">
                 <div class="text1 name1">
@@ -97,67 +99,93 @@ export default {
 .collect {
     .line();
     width: 276px;
-    height: 416px;
+    height: 426px;
     display: inline-block;
     &::before {
         border-radius: 8px !important;
     }
     .imgBox {
-        height: 266px;
+        height: 274px;
         width: 100%;
         border-radius: 8px 8px 0px 0px;
     }
 
     &:hover {
-        .imgBox {
-            position: relative;
-            &::before {
-                content: '';
-                position: absolute;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                background-color: fade(@prim, 70%);
-            }
+        // .imgBox {
+        position: relative;
+        transition: transform 0.5s ease-out;
+        -o-transition: transform 0.5s ease-out;
+        -webkit-transition: transform 0.5s ease-out;
+        -moz-transition: transform 0.5s ease-out;
+        transform: scale(1.1);
+        -ms-transform: scale(1.1);
+        -webkit-transform: scale(1.1);
+        // &::before {
+        //     content: '';
+        //     position: absolute;
+        //     left: 0;
+        //     top: 0;
+        //     right: 0;
+        //     bottom: 0;
+        //     background-color: fade(@prim, 70%);
+        // }
 
-            &::after {
-                padding: 0 22px;
-                content: '立即购买';
-                line-height: 30px;
-                font-size: 16px;
-                color: #1a1a1a;
-                background: #ffffff;
-                border-radius: 16px;
-                border: 1px solid #ffffff;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-            }
-        }
+        // &::after {
+        //     padding: 0 22px;
+        //     content: '立即购买';
+        //     line-height: 30px;
+        //     font-size: 16px;
+        //     color: #1a1a1a;
+        //     background: #ffffff;
+        //     border-radius: 16px;
+        //     border: 1px solid #ffffff;
+        //     position: absolute;
+        //     top: 50%;
+        //     left: 50%;
+        //     transform: translate(-50%, -50%);
+        // }
+        // }
     }
 
     .introduce {
-        padding: 10px 16px 10px;
-        font-size: 14px;
-        font-weight: 400;
+        padding: 10px 16px 14px;
+        font-size: 16px;
+        font-weight: bold;
         color: #ffffff;
         line-height: 20px;
     }
+    .con {
+        display: flex;
+        align-items: center;
+        .border {
+            width: 100%;
+            height: 1px;
+            background: #2b2e3e;
+            border-radius: 1px;
+            margin: 10px 16px;
+        }
+        .price2 {
+            width: 70%;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #939599;
+            line-height: 22px;
+        }
+    }
     .init {
-        font-size: 18px;
+        font-size: 16px;
         font-weight: 400;
         color: #939599;
         line-height: 24px;
-        padding: 0 16px 16px;
+        padding: 0 16px 1px;
         margin-top: 4px;
     }
     .price {
         display: flex;
         align-items: center;
         // justify-content: space-between;
-        padding: 0 16px 12px;
+        padding-left: 16px;
         .img1 {
             width: 10px;
             height: 11px;
@@ -188,17 +216,12 @@ export default {
             }
         }
     }
-    .border {
-        height: 1px;
-        background: #2b2e3e;
-        border-radius: 1px;
-        margin: 0 16px;
-    }
+
     .fans {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 19px 16px 20px;
+        padding: 9px 16px 0px;
         .text {
             display: flex;
             align-items: center;

src/main/pc-space/src/components/PageHeader.vue

@@ -327,7 +327,7 @@ export default {
         &.top-content {
             width: 100%;
             box-sizing: border-box;
-            padding: 0 45px;
+            // padding: 0 22px;
             // max-width: 1300px;
             // max-width: 1600px;
             margin: 0 auto;
@@ -339,12 +339,14 @@ export default {
         }
         .logo-link {
             padding: 15px 0px 15px 0px;
-            margin-left: 12.5%;
+            margin-left: 15%;
         }
         .content {
             display: flex;
             align-items: center;
             justify-content: space-between;
+            position: absolute;
+            right: 20px;
             .tabs {
                 display: flex;
                 align-items: center;

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

@@ -22,6 +22,7 @@
     margin: 0 16px;
 }
 .container {
+    
     background: #1a1a1a;
     .center-content();
 
@@ -35,6 +36,17 @@
     }
 
     .content {
+          &:hover {
+              // .imgBox {
+              position: relative;
+              transition: transform 0.5s ease-out;
+              -o-transition: transform 0.5s ease-out;
+              -webkit-transition: transform 0.5s ease-out;
+              -moz-transition: transform 0.5s ease-out;
+              transform: scale(1.1);
+              -ms-transform: scale(1.1);
+              -webkit-transform: scale(1.1);
+          }
         width: 276px;
         .line(@radius:8px);
         display: inline-block;
@@ -171,6 +183,7 @@
 }
 
 .list {
+    
     margin: -16px -16px;
     min-height: 800px;
     .content {

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

@@ -313,7 +313,7 @@ export default {
             // width: 100%;
             box-sizing: border-box;
             padding: 0 50px;
-            margin-left: 11.5%;
+            margin-left: 12%;
             .title {
                 height: 42px;
                 font-size: 32px;