|
|
@@ -1,13 +1,242 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="container">
|
|
|
+ <div class="head-bg" />
|
|
|
+ <div class="head-nav-bar">探索</div>
|
|
|
|
|
|
+ <div class="search-box">
|
|
|
+ <svg-icon class="search-icon" name="search" />
|
|
|
+ <span>输入DApp名称或网址</span>
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script setup>
|
|
|
-
|
|
|
- </script>
|
|
|
-
|
|
|
- <style lang="less" scoped>
|
|
|
-
|
|
|
- </style>
|
|
|
+
|
|
|
+ <van-swipe class="swipe-box" :autoplay="3000" lazy-render>
|
|
|
+ <van-swipe-item v-for="image in images" :key="image">
|
|
|
+ <div class="swipe-item">
|
|
|
+ <van-image class="swipe-image" :src="image" />
|
|
|
+ </div>
|
|
|
+ </van-swipe-item>
|
|
|
+
|
|
|
+ <template #indicator="{ active, total }">
|
|
|
+ <div class="custom-indicator">
|
|
|
+ <div
|
|
|
+ v-for="item in total"
|
|
|
+ :key="item"
|
|
|
+ class="custom-indicator-item"
|
|
|
+ :class="{ active: item === active + 1 }"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-swipe>
|
|
|
+
|
|
|
+ <van-tabs class="tabs-wrapper-card" type="card">
|
|
|
+ <van-tab v-for="(item,index) in tabsAppConfig" :title="item.title" :key="index">
|
|
|
+ <div class="tabs-content-body">
|
|
|
+ <div v-for="cItem in item.children" class="tabs-content-item">
|
|
|
+ <van-image class="tabs-content-item-icon" round :src="cItem.icon" />
|
|
|
+ <span>{{ cItem.table }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+
|
|
|
+
|
|
|
+ <van-tabs class="tabs-wrapper" >
|
|
|
+ <van-tab title="标签">内容</van-tab>
|
|
|
+ <van-tab title="标签">内容 2</van-tab>
|
|
|
+ <van-tab title="标签">内容 3</van-tab>
|
|
|
+ <van-tab title="标签">内容 4</van-tab>
|
|
|
+ <van-tab title="标签">内容 4</van-tab>
|
|
|
+ <van-tab title="标签">内容 4</van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue";
|
|
|
+
|
|
|
+const images = [
|
|
|
+ "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
|
|
|
+ "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
|
|
|
+];
|
|
|
+
|
|
|
+const tabsAppConfig = [
|
|
|
+ {
|
|
|
+ title: "热门推荐",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ table: "雷霆战机",
|
|
|
+ icon: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
|
|
|
+ to: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ table: "天使商城",
|
|
|
+ icon: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
|
|
|
+ to: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ table: "STT",
|
|
|
+ icon: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
|
|
|
+ to: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "浏览记录",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ table: "雷霆战机",
|
|
|
+ icon: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
|
|
|
+ to: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ table: "STT",
|
|
|
+ icon: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
|
|
|
+ to: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.head-bg {
|
|
|
+ .fn-head-bg();
|
|
|
+}
|
|
|
+.head-nav-bar {
|
|
|
+ width: 100%;
|
|
|
+ height: 26px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 40px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 19px;
|
|
|
+ color: #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.search-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 33px;
|
|
|
+ margin: 15px 17px 0 17px;
|
|
|
+ border-radius: 23px 23px 23px 23px;
|
|
|
+ background-color: @bg-color1;
|
|
|
+ opacity: 0.5;
|
|
|
+ color: #95a9ed;
|
|
|
+ .search-icon {
|
|
|
+ height: 25px;
|
|
|
+ width: 25px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 15px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.swipe-box {
|
|
|
+ height: 180px;
|
|
|
+ margin: 17px 17px 0 17px;
|
|
|
+ border-radius: 17px 17px 17px 17px;
|
|
|
+ .swipe-item {
|
|
|
+ height: 160px;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 17px 17px 17px 17px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .swipe-image {
|
|
|
+ height: 160px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .custom-indicator {
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background: @theme-color1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .custom-indicator-item {
|
|
|
+ display: flex;
|
|
|
+ width: 15px;
|
|
|
+ height: 2px;
|
|
|
+ background: @theme-color2;
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ margin: 0 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tabs-wrapper-card {
|
|
|
+
|
|
|
+ height: 130px;
|
|
|
+ margin-top: 40px;
|
|
|
+
|
|
|
+ :deep(.van-tabs__nav) {
|
|
|
+ padding: 3px;
|
|
|
+ background: #f2f2f2;
|
|
|
+ border: 0px;
|
|
|
+ }
|
|
|
+ :deep(.van-tabs__nav--card) {
|
|
|
+ border-radius: 32px 32px 32px 32px;
|
|
|
+ }
|
|
|
+ :deep(.van-tab--active) {
|
|
|
+ border-radius: 32px 32px 32px 32px;
|
|
|
+ color: @theme-color1 !important;
|
|
|
+ background-color: @bg-color1;
|
|
|
+ }
|
|
|
+ :deep(.van-tab--card) {
|
|
|
+ color: @font-color2;
|
|
|
+ border-right: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tabs-content-body {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ margin: 20px 0 0 17px;
|
|
|
+ .tabs-content-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 50px;
|
|
|
+ min-width: 50px;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-right: 26px;
|
|
|
+ span {
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-content-item-icon {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.tabs-wrapper{
|
|
|
+ padding: 0 12px;
|
|
|
+ :deep(.van-tabs__nav) {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ :deep(.van-tab){
|
|
|
+ border-bottom: 1px solid #D8D8D8;
|
|
|
+ }
|
|
|
+ :deep(.van-tabs__line){
|
|
|
+ height: 1px;
|
|
|
+ width: 58px;
|
|
|
+ }
|
|
|
+ :deep(.van-tabs__wrap){
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ :deep(.van-tab--active){
|
|
|
+ color: @theme-color1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
