|
|
@@ -9,12 +9,14 @@
|
|
|
<div class="text2">虚实结合，探索未知，让你的数字藏品更有价值</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-tabs v-model="active">
|
|
|
- <van-tab title="标签1">内容 1</van-tab>
|
|
|
- <van-tab title="标签2">内容 2</van-tab>
|
|
|
- <van-tab title="标签3">内容 3</van-tab>
|
|
|
- <van-tab title="标签4">内容 4</van-tab>
|
|
|
- </van-tabs>
|
|
|
+ <van-sticky>
|
|
|
+ <van-tabs v-model="active">
|
|
|
+ <van-tab title="活动中"></van-tab>
|
|
|
+ <van-tab title="待开始"></van-tab>
|
|
|
+ <van-tab title="已结束"></van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ </van-sticky>
|
|
|
+
|
|
|
<van-pull-refresh
|
|
|
success-text="加载成功"
|
|
|
success-duration="500"
|
|
|
@@ -36,21 +38,23 @@
|
|
|
}"
|
|
|
class="activity"
|
|
|
>
|
|
|
- <van-image
|
|
|
- width="calc(100vw - 32px)"
|
|
|
- height=" calc(40vw - 12.8px)"
|
|
|
- radius="4"
|
|
|
- :src="getImg(item.cover)"
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
+ <van-image width="96" height="96" radius="8" :src="getImg(item.cover)" fit="cover" />
|
|
|
<div class="content">
|
|
|
<div class="text1">{{ item.name }}</div>
|
|
|
- <div class="btn">
|
|
|
- <span>立即兑换</span>
|
|
|
- <img src="../../assets/icon-jiantou.png" alt="" />
|
|
|
+ <div class="minter">
|
|
|
+ <van-image width="16" height="16" radius="16" :src="item.minterAvatar" fit="cover" />
|
|
|
+ <span class="van-ellipsis">{{ item.minter }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex1"></div>
|
|
|
+ <div class="text2">
|
|
|
+ <span> 开始时间：04-05 16:00</span>
|
|
|
+ <div class="flex1"></div>
|
|
|
+ <div class="btn">
|
|
|
+ <span>立即兑换</span>
|
|
|
+ <van-icon name="icon-icon-jiantou" class-prefix="font_family" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <img src="../../assets/png-diwen1.png" alt="" class="img1" />
|
|
|
</router-link>
|
|
|
</template>
|
|
|
|
|
|
@@ -176,13 +180,15 @@ export default {
|
|
|
}
|
|
|
.activity {
|
|
|
margin: 16px;
|
|
|
- display: block;
|
|
|
+ .flex();
|
|
|
background-color: #1c1e25;
|
|
|
- border-radius: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
+ padding: 12px;
|
|
|
.van-image {
|
|
|
z-index: 2;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
}
|
|
|
.img1 {
|
|
|
@@ -194,24 +200,47 @@ export default {
|
|
|
z-index: 1;
|
|
|
}
|
|
|
.content {
|
|
|
- padding: 5px 16px;
|
|
|
+ padding: 2px 0 2px 12px;
|
|
|
position: relative;
|
|
|
+ align-self: stretch;
|
|
|
+ flex-grow: 1;
|
|
|
+ .flex-col();
|
|
|
.text1 {
|
|
|
- color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
- .text2 {
|
|
|
- color: @text3;
|
|
|
+
|
|
|
+ .flex1 {
|
|
|
+ flex-grow: 1;
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
- color: @prim;
|
|
|
- position: absolute;
|
|
|
- right: 14px;
|
|
|
- bottom: 5px;
|
|
|
.flex();
|
|
|
- img {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+
|
|
|
+ .minter {
|
|
|
+ margin-top: 6px;
|
|
|
+ .flex();
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 17px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ align-self: stretch;
|
|
|
+ .flex();
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ .flex();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -244,4 +273,24 @@ export default {
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
}
|
|
|
+/deep/.van-tabs {
|
|
|
+ --van-tabs-nav-background-color: transparent;
|
|
|
+ --van-tabs-bottom-bar-color: #00fe1e;
|
|
|
+ --van-tabs-bottom-bar-width: 28px;
|
|
|
+ --van-tabs-bottom-bar-height: 2px;
|
|
|
+ .van-tab {
|
|
|
+ flex-grow: 1 !important;
|
|
|
+ margin-right: 0 !important;
|
|
|
+ color: #6f6f70 !important;
|
|
|
+
|
|
|
+ &.van-tab--active {
|
|
|
+ color: #00fe1e !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.van-sticky--fixed {
|
|
|
+ padding-top: var(--safe-top);
|
|
|
+ background-color: #0f1014;
|
|
|
+}
|
|
|
</style>
|
