|
@@ -1,342 +1,417 @@
|
|
|
<template>
|
|
|
- <div class="container">
|
|
|
- <div class="head-bg" />
|
|
|
- <div class="head-nav-bar">探索</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>
|
|
|
-
|
|
|
- <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 class="search-box">
|
|
|
+ <svg-icon class="search-icon" name="search" />
|
|
|
+ <van-field v-model="searchValue" placeholder="输入DApp名称或网址" />
|
|
|
</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-swipe class="swipe-box" :autoplay="3000" lazy-render>
|
|
|
+ <van-swipe-item v-for="item in slidesList" :key="item.id">
|
|
|
+ <div class="swipe-item">
|
|
|
+ <van-image class="swipe-image" :src="item.pic" />
|
|
|
+ </div>
|
|
|
+ </van-swipe-item>
|
|
|
|
|
|
- <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>
|
|
|
+ <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.logo"
|
|
|
+ />
|
|
|
+ <span>{{ cItem.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
|
|
|
- <van-tabs class="tabs-wrapper" >
|
|
|
- <van-tab title="标签">
|
|
|
- <div class="tab-box">
|
|
|
- <div class="tab-box-label">ACC</div>
|
|
|
- <div class="tab-box-list" v-for="item in 10">
|
|
|
- <van-image class="tab-box-list-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
|
|
|
- <div class="tab-box-ri">
|
|
|
- <div>
|
|
|
- <text>雷霆战机</text>
|
|
|
- <svg-icon class="hot-icon" name="hot" />
|
|
|
- <svg-icon class="rm-icon" name="rm" />
|
|
|
- </div>
|
|
|
- <div class="tab-box-ri-cont">ACC主网上与钱包账户的飞机经济为游戏</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </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>
|
|
|
+ <van-tabs
|
|
|
+ v-model="activeTab"
|
|
|
+ @change="onTabChange"
|
|
|
+ class="tabs-wrapper"
|
|
|
+ >
|
|
|
+ <!-- 全部 -->
|
|
|
+ <van-tab title="全部" name="ALL">
|
|
|
+ <template #default>
|
|
|
+ <div class="tab-box">
|
|
|
+ <div v-for="group in groupedList" :key="group.chain">
|
|
|
+ <div class="tab-box-label">{{ group.chain }}</div>
|
|
|
+ <div
|
|
|
+ class="tab-box-list"
|
|
|
+ v-for="item in group.items"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <van-image
|
|
|
+ class="tab-box-list-img"
|
|
|
+ :src="item.logo || defaultImg"
|
|
|
+ round
|
|
|
+ />
|
|
|
+ <div class="tab-box-ri">
|
|
|
+ <div class="tab-box-ri-title">
|
|
|
+ <text>{{ item.name }}</text>
|
|
|
+ <svg-icon v-if="item.is_hot == 1" class="hot-icon" name="hot" />
|
|
|
+ <svg-icon v-if="item.is_hot == 1" class="rm-icon" name="rm" />
|
|
|
+ </div>
|
|
|
+ <div class="tab-box-ri-cont">
|
|
|
+ {{
|
|
|
+ item.desc ||
|
|
|
+ item.chain + '链上的应用'
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-tab>
|
|
|
+
|
|
|
+ <!-- 单链标签 -->
|
|
|
+ <van-tab
|
|
|
+ v-for="chain in chainTypes"
|
|
|
+ :title="chain"
|
|
|
+ :name="chain"
|
|
|
+ :key="chain"
|
|
|
+ >
|
|
|
+ <template #default>
|
|
|
+ <div class="tab-box">
|
|
|
+ <div class="tab-box-label">{{ chain }}</div>
|
|
|
+ <div
|
|
|
+ class="tab-box-list"
|
|
|
+ v-for="item in filteredList"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <van-image
|
|
|
+ class="tab-box-list-img"
|
|
|
+ :src="item.logo || defaultImg"
|
|
|
+ round
|
|
|
+ />
|
|
|
+ <div class="tab-box-ri">
|
|
|
+ <div class="tab-box-ri-title">
|
|
|
+ <text>{{ item.name }}</text>
|
|
|
+ <svg-icon v-if="item.is_hot == 1" class="hot-icon" name="hot" />
|
|
|
+ <svg-icon v-if="item.is_hot == 1" class="rm-icon" name="rm" />
|
|
|
+ </div>
|
|
|
+ <div class="tab-box-ri-cont">
|
|
|
+ {{ item.desc || item.chain + '链上的应用' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup>
|
|
|
+<script setup>
|
|
|
+import { dappSlides, dappList } from '@/api/path/dapp.api';
|
|
|
+const slidesList = ref([]);
|
|
|
+const tabsAppConfig = ref([
|
|
|
+ {
|
|
|
+ title: '热门推荐',
|
|
|
+ children: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '浏览记录',
|
|
|
+ children: []
|
|
|
+ }
|
|
|
+]);
|
|
|
+const rawList = ref([]); // 全部后端返回的数据
|
|
|
+const activeTab = ref('ALL'); // 当前选中的 tab:ALL 或 chain 名
|
|
|
+const searchValue = ref('');
|
|
|
|
|
|
-const images = [
|
|
|
- "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
|
|
|
- "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
|
|
|
-];
|
|
|
+// 获取轮播图
|
|
|
+const getdappSlides = async () => {
|
|
|
+ const res = await dappSlides();
|
|
|
+ slidesList.value = res.data.list;
|
|
|
+};
|
|
|
+// 热门推荐
|
|
|
+const gethotlist = async () => {
|
|
|
+ const res = await dappList({ is_hot: 1 });
|
|
|
+ tabsAppConfig.value[0].children = res.data.list;
|
|
|
+};
|
|
|
|
|
|
-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: "",
|
|
|
- },
|
|
|
- {
|
|
|
- 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: "",
|
|
|
- },
|
|
|
- {
|
|
|
- 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: "",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
-];
|
|
|
+// 从数据中提取所有链类型(比如 ETH、BSC、TRON、ACC…)
|
|
|
+const chainTypes = computed(() => {
|
|
|
+ const types = rawList.value.map(item => item.chain);
|
|
|
+ return [...new Set(types)];
|
|
|
+});
|
|
|
|
|
|
+// “全部”模式下:按链分组
|
|
|
+const groupedList = computed(() => {
|
|
|
+ const groups = {};
|
|
|
+ for (const item of rawList.value) {
|
|
|
+ if (!groups[item.chain]) {
|
|
|
+ groups[item.chain] = [];
|
|
|
+ }
|
|
|
+ groups[item.chain].push(item);
|
|
|
+ }
|
|
|
+ const sortedChains = Object.keys(groups).sort((a, b) => {
|
|
|
+ return a === 'ACC' ? -1 : b === 'ACC' ? 1 : 0;
|
|
|
+ });
|
|
|
+
|
|
|
+ return sortedChains.map(chain => ({
|
|
|
+ chain,
|
|
|
+ items: groups[chain]
|
|
|
+ }));
|
|
|
+});
|
|
|
+
|
|
|
+// 单链模式
|
|
|
+const filteredList = computed(() => {
|
|
|
+ return rawList.value.filter(item => item.chain === activeTab.value);
|
|
|
+});
|
|
|
+
|
|
|
+// tab 切换时触发
|
|
|
+const onTabChange = name => {
|
|
|
+ activeTab.value = name;
|
|
|
+};
|
|
|
+// 获取列表
|
|
|
+const getdappList = async () => {
|
|
|
+ const res = await dappList();
|
|
|
+ rawList.value = res.data.list;
|
|
|
+};
|
|
|
|
|
|
+onMounted(async () => {
|
|
|
+ getdappSlides();
|
|
|
+ gethotlist();
|
|
|
+ getdappList();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.container{
|
|
|
- height: calc(100vh - 50px);
|
|
|
- overflow: auto;
|
|
|
+.container {
|
|
|
+ height: calc(100vh - 50px);
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
-.container::-webkit-scrollbar{
|
|
|
- width: 0;
|
|
|
+.container::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
}
|
|
|
.head-bg {
|
|
|
- .fn-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;
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 33px;
|
|
|
+ margin: 15px 17px 0 17px;
|
|
|
+ border-radius: 23px 23px 23px 23px;
|
|
|
+ background-color: #e3edfd;
|
|
|
+ color: #95a9ed;
|
|
|
+ .search-icon {
|
|
|
+ height: 25px;
|
|
|
+ width: 25px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ :deep(.van-cell) {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 15px;
|
|
|
+ margin: 0 6px;
|
|
|
+ padding: 0 !important;
|
|
|
+ background: #e3edfd !important;
|
|
|
+ line-height: 25px !important;
|
|
|
+ width: initial !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ :deep(.van-field__control) {
|
|
|
+ color: #95a9ed !important;
|
|
|
+ }
|
|
|
+ :deep(.van-field__control::placeholder) {
|
|
|
+ color: #95a9ed;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.swipe-box {
|
|
|
- height: 180px;
|
|
|
- margin: 17px 17px 0 17px;
|
|
|
- border-radius: 17px 17px 17px 17px;
|
|
|
- .swipe-item {
|
|
|
- height: 160px;
|
|
|
- width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ margin: 17px 17px 0 17px;
|
|
|
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;
|
|
|
+ .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;
|
|
|
+ .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;
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ :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%;
|
|
|
- padding: 20px 0 0 17px;
|
|
|
- overflow: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- .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;
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 0 0 17px;
|
|
|
+ overflow: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .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-content-item-icon {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
-.tabs-content-body::-webkit-scrollbar{
|
|
|
- height: 0;
|
|
|
+.tabs-content-body::-webkit-scrollbar {
|
|
|
+ height: 0;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-.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;
|
|
|
- }
|
|
|
- :deep(.van-tabs__line){
|
|
|
- background: @theme-color1 !important;
|
|
|
- }
|
|
|
- .tab-box{
|
|
|
- padding: 16px 4px 0;
|
|
|
- .tab-box-label{
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 15px;
|
|
|
- color: #000000;
|
|
|
- margin-bottom: 12px;
|
|
|
+.tabs-wrapper {
|
|
|
+ padding: 0 12px;
|
|
|
+ :deep(.van-tabs__nav) {
|
|
|
+ background: transparent;
|
|
|
}
|
|
|
- .tab-box-list{
|
|
|
- display: flex;
|
|
|
- margin-bottom: 17px;
|
|
|
- .tab-box-list-img{
|
|
|
- width: 42px;
|
|
|
- height: 42px;
|
|
|
- margin-right: 9px;
|
|
|
- }
|
|
|
- .tab-box-ri{
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 15px;
|
|
|
- color: @font-color2;
|
|
|
- .hot-icon{
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
- margin-right: 4px;
|
|
|
- position: relative;
|
|
|
- top:-3px;
|
|
|
- }
|
|
|
- .rm-icon{
|
|
|
- width: 33px;
|
|
|
- height: 15px;
|
|
|
+ :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;
|
|
|
+ }
|
|
|
+ :deep(.van-tabs__line) {
|
|
|
+ background: @theme-color1 !important;
|
|
|
+ }
|
|
|
+ .tab-box {
|
|
|
+ padding: 16px 4px 0;
|
|
|
+ .tab-box-label {
|
|
|
+ font-family:
|
|
|
+ PingFang SC,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 12px;
|
|
|
}
|
|
|
- .tab-box-ri-cont{
|
|
|
- margin-top: 3px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: #8D8D8D;
|
|
|
+ .tab-box-list {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 17px;
|
|
|
+ align-items: center;
|
|
|
+ .tab-box-list-img {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ margin-right: 9px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .tab-box-ri {
|
|
|
+ font-family:
|
|
|
+ PingFang SC,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ color: @font-color2;
|
|
|
+ .hot-icon {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ margin-right: 4px;
|
|
|
+ position: relative;
|
|
|
+ top: -3px;
|
|
|
+ }
|
|
|
+ .rm-icon {
|
|
|
+ width: 33px;
|
|
|
+ height: 15px;
|
|
|
+ }
|
|
|
+ .tab-box-ri-cont {
|
|
|
+ margin-top: 3px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #8d8d8d;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|