|
|
@@ -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>
|
