流通

src/styles/app.less

@@ -178,11 +178,6 @@ 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;
@@ -306,6 +301,18 @@ input:-webkit-autofill {
     }
 }
 
+.statisticTab {
+    .van-tab.van-tab--active {
+        color: #00fe1e !important;
+    }
+    .van-tabs__line {
+        background-color: #00fe1e !important;
+    }
+    .van-tabs__nav--line.van-tabs__nav--complete {
+        border-top-width: 0;
+    }
+}
+
 .van-action-sheet {
     .van-action-sheet__header {
         border-bottom: 1px solid #f2f4f5;

src/views/DomainName.vue

@@ -26,7 +26,10 @@
                             />
                             <div>市场</div>
                         </div>
-                        <div class="meta_domain_name_top_one_con_tip" @click="$router.push('/ranking')">
+                        <div
+                            class="meta_domain_name_top_one_con_tip meta_domain_name_top_one_con_tips"
+                            @click="$router.push('/ranking')"
+                        >
                             <img
                                 :src="require('@assets/icon_paihang@3x.png')"
                                 alt=""
@@ -34,6 +37,14 @@
                             />
                             <div>排行</div>
                         </div>
+                        <div class="meta_domain_name_top_one_con_tip" @click="$router.push('/statistics')">
+                            <img
+                                :src="require('@assets/icon_liutong.png')"
+                                alt=""
+                                class="meta_domain_name_top_img_right"
+                            />
+                            <div>流通</div>
+                        </div>
                     </div>
                 </div>
                 <div class="meta_domain_name_top_ones" v-if="action != 1">
@@ -795,7 +806,6 @@ export default {
         // background-size: 100% 100%;
         // background-repeat: no-repeat;
         // background: #030001;
-        position: relative;
         transition: 0.5s;
         z-index: 2;
 
@@ -823,8 +833,9 @@ export default {
             justify-content: space-between;
             box-sizing: border-box;
             // margin-bottom: 51px;
-            position: relative;
-            z-index: 3;
+            position: absolute;
+            z-index: 4;
+            right: 0;
 
             .meta_domain_name_top_img_left {
                 width: 24px;
@@ -873,7 +884,8 @@ export default {
             justify-content: center;
             margin-bottom: 54px;
             z-index: 3;
-            margin-top: -11px;
+            // margin-top: -11px;
+            padding-top: 120px;
 
             .meta_domain_name_top_two_img {
                 width: 220px;

src/views/domain/Statistics.vue

@@ -7,12 +7,13 @@
                 line-width="16"
                 line-height="2"
                 :ellipsis="false"
+                @change="changeType"
             >
                 <van-tab :title="item.label" :name="item.value" :key="index" v-for="(item, index) in typeOptions">
                 </van-tab>
             </van-tabs>
 
-            <div class="price-sort">
+            <div class="price-sort" :class="[{ prim: sort === 'price' }, priceSort]" @click="changeSort">
                 <span>价格排序</span>
                 <van-icon size="8" name="arrow-up" />
                 <van-icon size="8" name="arrow-down" />
@@ -86,7 +87,8 @@ export default {
             url: '/order/newestOrder',
             isFormData: true,
             size: 2,
-            sort: 'payTime,desc'
+            sort: 'payTime,desc',
+            priceSort: 'asc'
         };
     },
     mixins: [list, product],
@@ -94,6 +96,12 @@ export default {
         this.getStatics();
     },
     methods: {
+        changeType(type) {
+            console.log(type);
+            this.sort = 'payTime,desc';
+            this.getData(true);
+            this.getStatics();
+        },
         getStatics() {
             this.$http
                 .post('/order/domainOrderStatistic', {
@@ -106,8 +114,22 @@ export default {
         beforeData() {
             return {
                 type: this.type,
-                sort: this.sort
+                sort: this.sort === 'price' ? this.sort + ',' + this.priceSort : this.sort
             };
+        },
+        changeSort() {
+            console.log(this.sort);
+            if (this.sort === 'price') {
+                if (this.priceSort === 'asc') {
+                    this.priceSort = 'desc';
+                } else {
+                    this.sort = 'payTime,desc';
+                    this.priceSort = 'asc';
+                }
+            } else {
+                this.sort = 'price';
+            }
+            this.getData(true);
         }
     }
 };
@@ -122,7 +144,9 @@ export default {
     background-color: #161414;
 }
 .tabs {
-    position: relative;
+    position: sticky;
+    z-index: 20;
+    top: calc(var(--safe-top) + 46px);
 }
 .price-sort {
     position: absolute;
@@ -146,6 +170,31 @@ export default {
             bottom: 12px;
         }
     }
+
+    &.prim {
+        color: #00fe1e;
+        font-weight: bold;
+
+        &.desc {
+            .van-icon {
+                &.van-icon-arrow-down {
+                    color: #00fe1e;
+                }
+            }
+        }
+
+        &.asc {
+            .van-icon {
+                &.van-icon-arrow-up {
+                    color: #00fe1e;
+                }
+            }
+        }
+
+        &::after {
+            width: 34px;
+        }
+    }
 }
 
 .datas-box {