feat: dapp

src/App.vue

@@ -8,10 +8,11 @@ import { RouterView } from 'vue-router'
   <RouterView />
 </template>
 
-<style  >
+<style  lang="less">
 body {
   margin: 0 ;
   overflow: hidden;
-  background-color:#F7F8FA;
+  height: 100%;
+  background-color: @bg-color2;
 }
 </style>

src/assets/css/global.less

@@ -1,6 +1,11 @@
 :root {
   --root-layout-bg-color: #f0f6ff;
   --root-bg-login-color: #fbfdfc;
+
+
+
+  --theme-color1: @theme-color1;
+  --theme-color2: @theme-color2;
 }
 
 :root body[arco-theme="dark"] {
@@ -8,6 +13,21 @@
   --root-bg-login-color: var(--color-bg-1);
 }
 
+
+
+
+.fn-head-bg(@height: 197px){
+  height: @height;
+  width: 100%;
+  background: linear-gradient(90deg, #71c4ff85 0%, #6a92ff94 100%);
+  filter: blur(54px);
+  position: absolute;
+  top: 0;
+  z-index: -1;
+}
+
+
+
 /* 设置滚动条的样式 */
 ::-webkit-scrollbar {
   display: block;

src/assets/css/theme.less

@@ -1,12 +1,12 @@
-@layout-bg-color: var(--root-layout-bg-color);
-@bg-login-color: var(--root-bg-login-color);
 
 
+// 主题色
+@theme-color1: #4765dd;
+@theme-color2: #C4D0FF;
 
+// 背景色
+@bg-color1: #ffffff;
+@bg-color2: #F7F8FA; // 二次容器色
 
-
-@error-color: red;
-@success-color: rgb(111, 151, 42);
-
-
-@primary-color: rgb(22, 151, 215);
+// 字体次要颜色
+@font-color2: #4F4F4F;

src/assets/svg/search.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#144;&#156;&#231;&#180;&#162;">
+<g id="&#240;&#159;&#148;&#141;">
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;" fill-rule="evenodd" clip-rule="evenodd" d="M11.5 19C15.6421 19 19 15.6421 19 11.5C19 7.35788 15.6421 4 11.5 4C7.35788 4 4 7.35788 4 11.5C4 15.6421 7.35788 19 11.5 19Z" stroke="#95A9ED" stroke-width="2" stroke-linejoin="round"/>
+<path id="&#232;&#183;&#175;&#229;&#190;&#132;_2" d="M17 17L20 20" stroke="#95A9ED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

src/layout/app/index.vue

@@ -8,7 +8,6 @@
 
   <router-view
     v-slot="{ Component }"
-    class="app-main-content"
     :style="mainStyle"
   >
     <keep-alive v-if="route.meta.keepAlive">
@@ -22,7 +21,6 @@
       <template #icon="props">
         <svg-icon  class="tabbar-icon" :name="item.icon" />
       </template>
-
       {{ item.title }}
     </van-tabbar-item>
   </van-tabbar>
@@ -99,8 +97,5 @@ onBeforeMount(async () => {
 }
 .van-tabbar--fixed{
   padding: 10px 0 4px 0;
-}
-// .app-main-content{
-//   height: 100%;
-// }
+} 
 </style>

src/router/index.js

@@ -35,7 +35,7 @@ const router = createRouter({
         {
           path: "dapp",
           name: "dapp",
-          meta: { title: "DAPP", keepAlive: false,   navbar: true },
+          meta: { title: "DAPP", keepAlive: false,   navbar: false },
           component: () => import("@/views/dapp/index.vue"),
         },
         {

src/views/dapp/index.vue

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

src/views/me/index.vue

@@ -88,15 +88,9 @@ const evGoPath = (path)=>{
 </script>
 
 <style lang="less" scoped>
- 
+
 .head-bg {
-  height: 197px;
-  width: 100%;
-  background: linear-gradient(90deg, #71c4ff4d 0%, #6a92ff63 100%);
-  filter: blur(54px);
-  position: absolute;
-  top: 0;
-  z-index: -1;
+  .fn-head-bg()
 }
 .head-body {
   width: 100%;
@@ -112,14 +106,14 @@ const evGoPath = (path)=>{
       .user-info-name {
         font-size: 1.1rem;
         font-weight: 500;
-        color: #4765dd;
+        color: @theme-color1;
       }
       .user-info-key-body{
         display: flex;
         align-items: center; 
         font-weight: 400;
         font-size: 12px;
-        color: #4F4F4F; 
+        color: @font-color2; 
         span { 
           margin-top: 4px;
           margin-right: 4px;
@@ -131,7 +125,7 @@ const evGoPath = (path)=>{
     margin: 27px 17px 0 17px;
     height: 78px;
     min-height: 78px;
-    background: #ffffff;
+    background: @bg-color1;
     box-shadow: 0px 4px 8px -2px rgba(25, 75, 137, 0.25);
     border-radius: 17px 17px 17px 17px;
   }
@@ -155,8 +149,8 @@ const evGoPath = (path)=>{
 }
 .van-cell{
   height: 42px;
-  background: #FFFFFF;
-  border-bottom: 1px solid #FFFFFF;
+  background: @bg-color1;
+  border-bottom: 1px solid @bg-color1;
   font-size: 15px ;
   &::after{
     border-bottom: 1px solid #F2F2F2;