流通

src/styles/app.less

@@ -178,6 +178,12 @@ input:-webkit-autofill {
     border-top: 1px solid #202122;
     background-color: transparent;
 }
+.statisticTab {
+    .van-tabs__nav--line.van-tabs__nav--complete {
+        border-top-width: 0;
+    }
+}
+
 .van-tabs__line {
     bottom: 20px;
 }
@@ -354,4 +360,3 @@ input:-webkit-autofill {
     position: relative;
     z-index: 99;
 }
-

src/views/domain/Statistics.vue

@@ -1,18 +1,69 @@
 <template>
     <div class="page">
-        <div class="tab-bar">
-            <div class="tabs">
-                <van-tabs class="darkTabs" v-model:active="type" line-width="16" line-height="2" :ellipsis="false">
-                    <van-tab :title="item.label" :name="item.value" :key="index" v-for="(item, index) in typeOptions">
-                        <template v-if="item.type === 'select'" #title>
-                            <div class="tab">
-                                <span>{{ item.label }}</span>
-                                <van-icon size="8" name="arrow-up" />
-                                <van-icon size="8" name="arrow-down" />
-                            </div>
-                        </template>
-                    </van-tab>
-                </van-tabs>
+        <div class="tabs">
+            <van-tabs
+                class="darkTabs statisticTab"
+                v-model:active="type"
+                line-width="16"
+                line-height="2"
+                :ellipsis="false"
+            >
+                <van-tab :title="item.label" :name="item.value" :key="index" v-for="(item, index) in typeOptions">
+                </van-tab>
+            </van-tabs>
+
+            <div class="price-sort">
+                <span>价格排序</span>
+                <van-icon size="8" name="arrow-up" />
+                <van-icon size="8" name="arrow-down" />
+            </div>
+        </div>
+
+        <div class="datas-box">
+            <div class="datas-card">
+                <div class="datas-item">
+                    <div class="text1">流通量</div>
+                    <div class="text2">1000</div>
+                </div>
+                <div class="datas-item">
+                    <div class="text1">流通量</div>
+                    <div class="text2">1000</div>
+                </div>
+                <div class="datas-item">
+                    <div class="text1">流通量</div>
+                    <div class="text2">1000</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="van-list">
+            <div class="collection">
+                <van-image
+                    width="128"
+                    height="128"
+                    fit="cover"
+                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                />
+                <div class="collection-info">
+                    <div class="text1">北京荣宝网络文物拍卖拍卖北京荣宝网络文物拍卖拍卖</div>
+                    <div class="minter">
+                        <van-image
+                            width="18"
+                            height="18"
+                            fit="cover"
+                            round
+                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+                        />
+                        <span>持有者名称</span>
+                    </div>
+                    <div class="time">成交时间：2023.03.20</div>
+                    <div class="flex1"></div>
+                    <div class="price">
+                        <span>成交价</span>
+                        <img src="@assets/icon_jiage_lv.png" alt="" />
+                        <span>1000</span>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -53,4 +104,130 @@ export default {
 .darkTabs {
     background-color: #161414;
 }
+.tabs {
+    position: relative;
+}
+.price-sort {
+    position: absolute;
+    right: 6px;
+    font-size: 14px;
+    color: #939599;
+    line-height: 24px;
+    padding: 0 20px;
+    top: 10px;
+
+    .van-icon {
+        position: absolute;
+        right: 10px;
+        color: #939599;
+
+        &.van-icon-arrow-down {
+            top: 12px;
+        }
+
+        &.van-icon-arrow-up {
+            bottom: 12px;
+        }
+    }
+}
+
+.datas-box {
+    padding: 10px 16px 16px;
+    background-color: #161414;
+    .datas-card {
+        padding: 10px 12px 12px;
+        background: #1f1d1d;
+        border-radius: 8px;
+        .flex();
+        justify-content: space-between;
+        .text1 {
+            font-size: 12px;
+            color: #939599;
+            line-height: 24px;
+        }
+        .text2 {
+            font-size: 16px;
+            font-weight: bold;
+            color: #f4f4f4;
+            line-height: 24px;
+        }
+    }
+}
+.van-list {
+    padding: 16px;
+}
+.collection + .collection {
+    margin-top: 16px;
+}
+.collection {
+    .flex();
+    overflow: hidden;
+    align-items: stretch;
+    background: #161414;
+    border-radius: 8px;
+
+    .van-image {
+        flex-shrink: 0;
+    }
+
+    .collection-info {
+        padding: 10px 12px 12px;
+        .flex-col();
+        overflow: hidden;
+        flex-grow: 1;
+        .text1 {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 20px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .minter {
+            .flex();
+            margin-top: 8px;
+            span {
+                font-size: 12px;
+                color: #939599;
+                line-height: 22px;
+                margin-left: 2px;
+            }
+        }
+
+        .time {
+            font-size: 10px;
+            color: #939599;
+            line-height: 18px;
+            background: rgba(255, 255, 255, 0.04);
+            border-radius: 4px;
+            padding: 0 4px;
+            align-self: flex-start;
+            margin-top: 10px;
+        }
+
+        .price {
+            font-size: 12px;
+            font-weight: bold;
+            color: #00fe1e;
+            line-height: 12px;
+
+            img {
+                width: 8px;
+                height: 8px;
+            }
+
+            span {
+                &:nth-child(3) {
+                    font-size: 20px;
+                    font-family: OSP;
+                    font-weight: normal;
+                }
+            }
+        }
+        .flex1 {
+            flex-grow: 1;
+        }
+    }
+}
 </style>