星图&版权市场

src/components/product/productSelect.vue

@@ -165,6 +165,8 @@ export default {
         showBanner(settingId) {
             this.settingId = settingId;
             this.bannerName = '';
+            this.classification = false;
+            this.selectOptions = [];
             this.rarityLabel = '';
             this.productId = '';
             this.$http

src/views/StarMap.vue

@@ -9,31 +9,34 @@
         pageType="light"
     >
         <div class="bg">
-            <img src="https://cdn.raex.vip/image/png-xingtu-bg.png" alt="" />
-        </div>
-        <div class="top">
-            <div class="text1">欢迎您！探索者！</div>
-            <div class="text2">这里是“绿洲链上星图” ！</div>
-            <van-button
-                @click="$router.push('/starCreate')"
-                type="primary"
-                :icon="require('@assets/icon-zhuzaoxinghe.png')"
-                >立即铸造星图</van-button
-            >
+            <img src="@assets/png-xingtu-bg.png" alt="" />
+            <div class="top">
+                <div class="text1">WELCOME TO</div>
+                <div class="text2">链上星图</div>
+                <!---->
+            </div>
         </div>
 
-        <div class="tips">
-            <div class="text1">绿洲链上星图是什么</div>
-            <div class="text2">
-                <p>
-                    绿洲链上星图是属于每一个人的元宇宙物资铸造中心！在这里，每一个人都可以铸造自己的元宇宙物资，在OASISMETA绿洲元宇宙里进行展示与流通！
-                </p>
-                <p>
-                    绿洲链上星图也是使用“IPFS全球分布式存储技术”与“区块链确权技术”的永恒纪念之地！在这里，可以自由上传对您拥有重大意义的照片，比如全家福、孩子的满月照、宠物的Q萌形象、团队聚会的瞬间...让这些具有历史意义的照片，让他们在链上永存！
-                </p>
-                <p>
-                    当然！绿洲链上星图，欢迎优秀的艺术家与创作者！在这里，每一位艺术家都可以上传自己的艺术作品！在未来，绿洲星库将全面开放铸造与流通，更将从优秀的作品中选拔出最为优秀的作品，以绿洲名义进行全球发行！每一名艺术家与创作者都可以参与到OASISMETA绿洲元宇宙的共创未来！
-                </p>
+        <div class="content">
+            <div class="tips">
+                <div class="text1">绿洲链上星图是什么?</div>
+                <div class="text2">
+                    <p>
+                        绿洲链上星图是属于每一个人的元宇宙物资铸造中心！在这里，每一个人都可以铸造自己的元宇宙物资，在OASISMETA绿洲元宇宙里进行展示与流通！
+                    </p>
+                    <p>
+                        绿洲链上星图也是使用“IPFS全球分布式存储技术”与“区块链确权技术”的永恒纪念之地！在这里，可以自由上传对您拥有重大意义的照片，比如全家福、孩子的满月照、宠物的Q萌形象、团队聚会的瞬间...让这些具有历史意义的照片，让他们在链上永存！
+                    </p>
+                    <p>
+                        当然！绿洲链上星图，欢迎优秀的艺术家与创作者！在这里，每一位艺术家都可以上传自己的艺术作品！在未来，绿洲星库将全面开放铸造与流通，更将从优秀的作品中选拔出最为优秀的作品，以绿洲名义进行全球发行！每一名艺术家与创作者都可以参与到OASISMETA绿洲元宇宙的共创未来！
+                    </p>
+                </div>
+            </div>
+
+            <div class="create">
+                <van-button color="#00B897" round @click="$router.push('/starCreate')" block>
+                    点击立即铸造链上星图
+                </van-button>
             </div>
         </div>
 
@@ -93,7 +96,7 @@ export default {
 
 <style lang="less" scoped>
 .container {
-    background-color: #272b2e;
+    background-color: #030001;
     position: relative;
     min-height: var(--app-height);
     padding-top: var(--safe-top);
@@ -108,22 +111,36 @@ export default {
     }
 }
 
+.content {
+    padding-top: 74.6vw;
+}
+
 .top {
     padding: 16px;
-    position: relative;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     z-index: 1;
+    .flex-col();
+    align-items: center;
     .text1 {
-        font-size: 14px;
+        font-size: 10px;
+        font-family: SourceHanSans-Medium;
         font-weight: bold;
-        color: rgba(255, 255, 255, 0.5);
-        line-height: 24px;
+        color: #ffffff;
+        line-height: 10px;
+        letter-spacing: 6px;
     }
     .text2 {
-        font-size: 26px;
+        font-size: 36px;
+        font-family: SourceHanSans-Medium;
         font-weight: bold;
         color: #ffffff;
-        line-height: 40px;
-        text-shadow: 0px 0px 0px #000000;
+        line-height: 36px;
+        text-shadow: 0px 0px 4px #00503f;
+        white-space: nowrap;
+        margin-top: 6px;
     }
     .van-button {
         border-radius: 8px;
@@ -138,34 +155,37 @@ export default {
 }
 
 .tips {
-    background: rgba(0, 0, 0, 0.04);
-    border-radius: 8px;
-    border: 1px solid #ffffff20;
-    backdrop-filter: blur(40px);
-    margin: 8px 16px 0;
-    padding: 14px 16px;
+    margin: 0 16px 0;
+    padding: 0px 40px 20px;
     .text1 {
-        text-align: center;
         font-size: 14px;
         font-weight: bold;
-        color: #ffffff;
+        color: #72ffb4;
         line-height: 24px;
+        text-shadow: 0px 0px 4px #1fcf71;
+        text-align: center;
     }
 
     .text2 {
         margin-top: 8px;
-        font-size: 12px;
-        color: rgba(255, 255, 255, 0.6);
-        line-height: 18px;
+        font-size: 11px;
+        color: #fff;
+        line-height: 16px;
+        text-align: center;
         p {
             margin: 0;
         }
         p + p {
-            margin-top: 10px;
+            margin-top: 14px;
         }
     }
 }
 
+.create {
+    padding: 0 48px;
+    --van-button-default-height: 40px;
+}
+
 .bg {
     position: absolute;
     top: 0;
@@ -175,15 +195,15 @@ export default {
         width: 100%;
         display: block;
     }
-    &::after {
-        position: absolute;
-        content: '';
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 100px;
-        background: linear-gradient(180deg, rgba(39, 43, 46, 0) 0%, #272b2e 100px);
-    }
+    // &::after {
+    //     position: absolute;
+    //     content: '';
+    //     left: 0;
+    //     right: 0;
+    //     bottom: 0;
+    //     height: 100px;
+    //     background: linear-gradient(180deg, rgba(39, 43, 46, 0) 0%, #272b2e 100px);
+    // }
 }
 .list {
     padding: 20px 8px 100px;

src/views/product/HopeMarket.vue

@@ -172,6 +172,20 @@
                 :immediate-check="false"
                 @load="getData"
             >
+                <div class="classify-list" v-if="search">
+                    <div class="classify-info">
+                        <div class="text1">发行量</div>
+                        <div class="text2">{{ displayInformation.totalNum }}</div>
+                    </div>
+                    <div class="classify-info">
+                        <div class="text1">流通量</div>
+                        <div class="text2">{{ displayInformation.tranferingNum }}</div>
+                    </div>
+                    <div class="classify-info">
+                        <div class="text1">寄售中</div>
+                        <div class="text2">{{ displayInformation.consignmentNum }}</div>
+                    </div>
+                </div>
                 <template v-for="(item, index) in showList" :key="index">
                     <product-info dark v-model:info="list[index]" @update:info="init"></product-info>
                 </template>
@@ -262,7 +276,8 @@ export default {
             show: false,
             productName: '',
             rarityLabel: '',
-            search: ''
+            search: '',
+            displayInformation: {}
         };
     },
     computed: {
@@ -375,6 +390,23 @@ export default {
             this.rarityLabel = info.rarityLabel;
             this.productName = info.productName;
             this.getData(true);
+            this.getCount();
+        },
+        getCount() {
+            if (this.search) {
+                this.$http
+                    .get('/collection/count', {
+                        search: this.search
+                    })
+                    .then(res => {
+                        this.displayInformation = res;
+                    })
+                    .catch(() => {
+                        this.displayInformation = {};
+                    });
+            } else {
+                this.displayInformation = {};
+            }
         },
         onRefresh() {
             this.getData(true).then(() => {
@@ -891,4 +923,52 @@ export default {
         }
     }
 }
+
+.classify-list {
+    .flex();
+    justify-content: space-between;
+    background: #373b3e;
+    border-radius: 8px;
+    margin: 8px;
+
+    .classify-info {
+        width: 33%;
+        .flex-col();
+        padding: 10px 12px 12px;
+        position: relative;
+        &:nth-child(1) {
+            align-items: flex-start;
+        }
+        &:nth-child(2) {
+            align-items: center;
+        }
+        &:nth-child(3) {
+            align-items: flex-end;
+        }
+        .text1 {
+            font-size: 12px;
+            color: #939599;
+            line-height: 24px;
+        }
+
+        .text2 {
+            font-size: 16px;
+            font-weight: bold;
+            color: #f4f4f4;
+            line-height: 24px;
+        }
+
+        &:not(:last-child) {
+            &::after {
+                content: '';
+                position: absolute;
+                width: 2px;
+                height: 38px;
+                background: rgba(255, 255, 255, 0.04);
+                right: 0;
+                top: 16px;
+            }
+        }
+    }
+}
 </style>