添加交易页面

src/assets/svg/bj.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_85_823)">
+<path id="Vector" d="M2.33337 14H14.3334" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M3.66663 8.90663V11.3333H6.10569L13 4.43603L10.565 2L3.66663 8.90663Z" stroke="#4F4F4F" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_85_823">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/jg.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1884)">
+<path id="Vector" d="M8 14C9.65684 14 11.1568 13.3284 12.2426 12.2426C13.3284 11.1568 14 9.65684 14 8C14 6.34316 13.3284 4.84316 12.2426 3.75736C11.1568 2.67157 9.65684 2 8 2C6.34316 2 4.84316 2.67157 3.75736 3.75736C2.67157 4.84316 2 6.34316 2 8C2 9.65684 2.67157 11.1568 3.75736 12.2426C4.84316 13.3284 6.34316 14 8 14Z" stroke="#8D8D8D" stroke-linejoin="round"/>
+<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M8 11.5C8.27614 11.5 8.5 11.2761 8.5 11C8.5 10.7239 8.27614 10.5 8 10.5C7.72386 10.5 7.5 10.7239 7.5 11C7.5 11.2761 7.72386 11.5 8 11.5Z" fill="#8D8D8D"/>
+<path id="Vector_3" d="M8 5V9" stroke="#8D8D8D" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_20_1884">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/px.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 41" clip-path="url(#clip0_85_814)">
+<rect id="Rectangle 86" x="3" y="4" width="10" height="1" rx="0.5" fill="#4F4F4F"/>
+<rect id="Rectangle 88" x="3" y="11" width="10" height="1" rx="0.5" fill="#4F4F4F"/>
+<path id="Rectangle 87" d="M3 8C3 7.72386 3.22386 7.5 3.5 7.5H12.5C12.7761 7.5 13 7.72386 13 8V8C13 8.27614 12.7761 8.5 12.5 8.5H3.5C3.22386 8.5 3 8.27614 3 8V8Z" fill="#4F4F4F"/>
+</g>
+<defs>
+<clipPath id="clip0_85_814">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/qb.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_20_1854)">
+<path id="Vector" d="M13 10.2222V11C13 12.1046 12.1046 13 11 13H4C2.89543 13 2 12.1046 2 11V5C2 3.89543 2.89543 3 4 3H11C12.1046 3 13 3.89543 13 5V6" stroke="#8D8D8D" stroke-linejoin="round"/>
+<path id="Vector_2" d="M12.95 6H8.05C7.4701 6 7 6.41973 7 6.9375V9.0625C7 9.58027 7.4701 10 8.05 10H12.95C13.5299 10 14 9.58027 14 9.0625V6.9375C14 6.41973 13.5299 6 12.95 6Z" stroke="#8D8D8D" stroke-linejoin="round"/>
+<path id="Vector_3" d="M8.5 8C8.5 7.72386 8.72386 7.5 9 7.5C9.27614 7.5 9.5 7.72386 9.5 8C9.5 8.27614 9.27614 8.5 9 8.5C8.72386 8.5 8.5 8.27614 8.5 8Z" fill="#8D8D8D"/>
+</g>
+<defs>
+<clipPath id="clip0_20_1854">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/svg/rm.svg

@@ -0,0 +1,12 @@
+<svg width="32" height="14" viewBox="0 0 32 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 37">
+<path id="Rectangle 59" d="M3.06043 1.52353C3.27985 0.62901 4.0818 0 5.00285 0H29.4501C30.7476 0 31.7016 1.21634 31.3925 2.47647L28.9396 12.4765C28.7201 13.371 27.9182 14 26.9972 14H2.54988C1.2524 14 0.298363 12.7837 0.607468 11.5235L3.06043 1.52353Z" fill="url(#paint0_linear_81_986)"/>
+<path id="&#231;&#131;&#173;&#233;&#151;&#168;" d="M14.93 9.44C14.62 9.43 14.35 9.29 14.13 9.01C13.73 8.49 13.53 7.51 13.53 6.06V4.83H12.21C12.2 5.61 12.11 6.31 11.94 6.93C12.4 7.27 12.83 7.65 13.25 8.07L12.85 8.68C12.47 8.29 12.08 7.94 11.7 7.62C11.37 8.4 10.89 9.04 10.26 9.54L9.73 9.07C10.36 8.59 10.82 7.95 11.12 7.17C10.8 6.94 10.47 6.73 10.15 6.55L10.53 5.99C10.8 6.15 11.06 6.31 11.32 6.49C11.44 5.97 11.5 5.42 11.51 4.83H10.35V4.13H11.51V2.82H12.21V4.13H14.24V6.06C14.24 7.2 14.34 7.99 14.55 8.44C14.63 8.63 14.71 8.73 14.79 8.73C14.86 8.73 14.93 8.61 14.99 8.37C15.05 8.11 15.09 7.73 15.11 7.23L15.66 7.51C15.61 8.37 15.51 8.92 15.35 9.16C15.23 9.34 15.09 9.44 14.93 9.44ZM6.62 4.09H8.04V2.79H8.77V4.09H9.99V4.79H8.77V6.31C9.17 6.2 9.57 6.08 9.95 5.96V6.66C9.56 6.78 9.17 6.88 8.77 6.98V8.57C8.77 9.15 8.49 9.44 7.93 9.44H7L6.84 8.75C7.13 8.78 7.41 8.8 7.68 8.8C7.92 8.8 8.04 8.66 8.04 8.39V7.16C7.54 7.27 7.03 7.37 6.52 7.47L6.35 6.79C6.93 6.71 7.49 6.6 8.04 6.48V4.79H6.62V4.09ZM7.75 9.76L8.35 10.05C7.99 10.83 7.56 11.5 7.08 12.06L6.49 11.63C6.97 11.11 7.39 10.48 7.75 9.76ZM9.89 10.01C10.1 10.59 10.29 11.21 10.45 11.88L9.72 12.04C9.59 11.32 9.42 10.69 9.21 10.15L9.89 10.01ZM11.96 9.87C12.26 10.48 12.52 11.14 12.74 11.86L12.02 12.02C11.82 11.26 11.58 10.6 11.28 10.02L11.96 9.87ZM13.91 9.64C14.51 10.39 14.96 11.04 15.28 11.6L14.69 12.02C14.35 11.41 13.9 10.74 13.33 10.01L13.91 9.64ZM24 11.92H23.14L22.96 11.25L23.85 11.27C24.14 11.27 24.29 11.08 24.29 10.7V4.01H20.45V3.35H24.99V10.9C24.99 11.58 24.66 11.92 24 11.92ZM16.99 4.49H17.69V12.01H16.99V4.49ZM18.44 2.74C18.9 3.29 19.32 3.89 19.68 4.55L19.03 4.89C18.65 4.19 18.24 3.57 17.78 3.03L18.44 2.74Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_81_986" x1="0" y1="7" x2="32" y2="7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4765DD"/>
+<stop offset="1" stop-color="#40A4FB"/>
+</linearGradient>
+</defs>
+</svg>

src/router/system.js

@@ -91,6 +91,12 @@ export const systemRoutes = [
         meta: { title: "router.exchange", keepAlive: false, navbar: true, leftArrow: true }, // 元宝兑换
         component: () => import("@/views/wallet/ybExchange/index.vue"),
       },
+      {
+        path: "jysExchange",
+        name: "jysExchange",
+        meta: { title: "router.Transaction", keepAlive: false, navbar: true, leftArrow: true }, // 交易所
+        component: () => import("@/views/transaction/jys/index.vue"),
+      },
     ],
   },
 ];

src/views/dapp/index.vue

@@ -40,7 +40,22 @@
 
 
     <van-tabs  class="tabs-wrapper" >
-      <van-tab title="标签">内容</van-tab>
+      <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>
@@ -76,6 +91,36 @@ const tabsAppConfig = [
         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: "",
+      },
     ],
   },
   {
@@ -99,6 +144,13 @@ const tabsAppConfig = [
 </script>
 
 <style lang="less" scoped>
+.container{
+  height: calc(100vh - 50px);
+  overflow: auto;
+}
+.container::-webkit-scrollbar{
+  width: 0;
+}
 .head-bg {
   .fn-head-bg();
 }
@@ -172,7 +224,6 @@ const tabsAppConfig = [
 }
 
 .tabs-wrapper-card {
- 
   height: 130px;
   margin-top: 40px;
 
@@ -198,7 +249,9 @@ const tabsAppConfig = [
 .tabs-content-body {
   display: flex;
   width: 100%;
-  margin: 20px 0 0 17px;
+  padding: 20px 0 0 17px;
+  overflow: auto;
+  box-sizing: border-box;
   .tabs-content-item {
     display: flex;
     flex-direction: column;
@@ -217,6 +270,9 @@ const tabsAppConfig = [
     }
   }
 }
+.tabs-content-body::-webkit-scrollbar{
+  height: 0;
+}
 
 
 .tabs-wrapper{ 
@@ -237,5 +293,50 @@ const tabsAppConfig = [
   :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-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;
+        }
+        .tab-box-ri-cont{
+          margin-top: 3px;
+          font-weight: 400;
+          font-size: 12px;
+          color: #8D8D8D;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/me/addAddress/index.vue

@@ -99,12 +99,11 @@ const walletAddress = ref('')
                 }
             }
         }
-        
     }
     .footer-btn{
         height: 40px !important;
         line-height: 40px !important;
-        background: linear-gradient( 90deg, #4765DD 0%, #40A4FB 100%) !important;
+        background: linear-gradient( 90deg, @theme-color1 0%, #40A4FB 100%) !important;
         border-radius:51px;
         font-family: PingFang SC, PingFang SC;
         font-weight: 500;
@@ -114,4 +113,7 @@ const walletAddress = ref('')
         color: #fff;
     }
 }
+:deep(.van-button--primary){
+    border: none !important;
+}
 </style>

src/views/me/personalInformation/index.vue

@@ -129,7 +129,7 @@ const afterRead = () => {
                 width: 83px;
                 height: 29px;
                 line-height: 29px;
-                padding: 5px 0 3px !important;
+                padding: 5px 0 !important;
                 border-radius: 6px;
                 font-family: PingFang SC, PingFang SC;
                 font-weight: 400;

src/views/me/walletManagement/index.vue

@@ -1,13 +1,147 @@
 <template>
-    <div>
-        111
+    <div class="container">
+        <div class="tab-box">
+            <div class="tab-box-text" 
+                :class="tabIndex == i?'active-border':''" 
+                v-for="(item,i) in tabList" :key="i" @click="tabIndex = i"
+            >
+                <svg-icon class="tab-box-icon" :name="item.img" />
+                <text>{{item.name}}</text>
+            </div>
+        </div>
+        <div class="content">
+            <Draggable v-model="items" item-key="id">
+                <template #item="{ element }">
+                    <div class="sort-box">
+                        <div class="sort-title">
+                            <div>{{element.name}}</div>
+                            <svg-icon class="sort-icon" name="px" />
+                        </div>
+                        <div class="card-box">
+                            <div class="card-box-lf">
+                                <svg-icon class="card-box-lf-icon" :name="element.img" />
+                                <div class="card-box-lf-text">
+                                    <div>{{element.name}}</div>
+                                    <div class="address">
+                                        <span>{{element.address}}</span>
+                                        <svg-icon style="width:16px;height: 16px;margin-left: 2px;" name="copy" />
+                                    </div>
+                                </div>
+                            </div>
+                            <svg-icon style="width:16px;height: 16px;color: #4F4F4F;" name="bj" />
+                        </div>
+                    </div>
+                </template>
+            </Draggable>
+        </div>
     </div>
 </template>
 
 <script setup>
-
+import Draggable from 'vuedraggable';
+const tabList = [{name:'ACC',img:'acc'},{name:'Ethereum',img:'acc'},{name:'BNB',img:'acc'}];
+const tabIndex = ref(0);
+const items = ref([
+    { id: 1, name: 'WWW',img:'acc',address:'0x01Ce8d3A...F5320f2' },
+    { id: 2, name: '香蕉',img:'acc',address:'123456789...98546212' },
+    { id: 3, name: '橘子',img:'acc',address:'0x01Ce8d3A...F5320f2' },
+    { id: 4, name: 'WWW',img:'acc',address:'0x01Ce8d3A...F5320f2' },
+    { id: 5, name: '香蕉',img:'acc',address:'123456789...98546212' },
+    { id: 6, name: '橘子',img:'acc',address:'0x01Ce8d3A...F5320f2' },
+    { id: 7, name: 'WWW',img:'acc',address:'0x01Ce8d3A...F5320f2' },
+    { id: 8, name: '香蕉',img:'acc',address:'123456789...98546212' },
+    { id: 9, name: '橘子',img:'acc',address:'0x01Ce8d3A...F5320f2' }
+]);
 </script>
 
-<style lang="less" scoped>
-
-</style>
+<style scoped lang="less">
+.container{
+    height: calc(100vh - 44px);
+    display: flex;
+    flex-direction: column;
+}
+.content{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+.content::-webkit-scrollbar{
+  width: 0;
+}
+.tab-box{
+    margin: 16px 16px 24px;
+    display: flex;
+    align-items: center;
+    .tab-box-text{
+        border-radius: 27px;
+        border: 1px solid #8D8D8D;
+        display: flex;
+        align-items: center;
+        padding: 6px 8px;
+        margin-right: 10px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 15px;
+        color: #8D8D8D; 
+        .tab-box-icon{
+            width: 20px; 
+            height: 20px;
+            margin-right: 4px;
+        }
+    }
+    .active-border{
+        border: 1px solid #000000;
+        color: #000000;
+    }
+}
+.sort-box{
+    padding: 0 16px;
+    margin-bottom: 17px;
+    cursor: move;
+    .sort-title{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 12px;
+        color: #4F4F4F;
+        margin-bottom: 6px;
+        .sort-icon{
+            width: 16px; 
+            height: 16px;
+        }
+    }
+    .card-box{
+        background: #F2F2F2;
+        border-radius: 8px;
+        border: 1px solid #D8D8D8;
+        padding: 16px 42px 16px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .card-box-lf{
+            display: flex;
+            align-items: center;
+            .card-box-lf-icon{
+                width: 30px; 
+                height: 30px;
+                margin-right: 8px;
+            }
+            .card-box-lf-text{
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                color: #000000;
+                .address{
+                    font-size: 12px;
+                    color: #8D8D8D;
+                    display: flex;
+                    align-items: center;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/transaction/index.vue

@@ -1,13 +1,227 @@
 <template>
-    <div>
-     
+    <div class="container">
+      <div class="content">
+        <div class="card-box">
+          <div class="box-item m12">
+            <div class="box-item-lf-text">卖出</div>
+            <div class="box-item-ri-text">
+              <svg-icon style="width: 16px; height: 16px;margin-right: 2px;" name="qb" />
+              <span>18.34335890</span>
+            </div>
+          </div>
+          <div class="box-item">
+            <div class="unit">
+              <svg-icon style="width: 42px; height: 42px;margin-right: 12px;" name="acc" />
+              <div>STT</div>
+            </div>
+            <van-field v-model="sell" class="box-input" placeholder="0.00" input-align="right"/>
+          </div>
+        </div>
+        <div class="arrow">
+          <div class="line"></div>
+          <div class="arrow-icon"><svg-icon style="width: 16px; height: 16px;" name="jt" /></div>
+          <div class="line"></div>
+        </div>
+        <div class="card-box">
+          <div class="box-item m12">
+            <div class="box-item-lf-text">买入</div>
+            <div class="box-item-ri-text">
+              <svg-icon style="width: 16px; height: 16px;margin-right: 2px;" name="qb" />
+              <span>18.34335890</span>
+            </div>
+          </div>
+          <div class="box-item">
+            <div class="unit">
+              <svg-icon style="width: 42px; height: 42px;margin-right: 12px;" name="acc" />
+              <div>ACC</div>
+            </div>
+            <van-field v-model="buyIn" class="box-input" input-align="right" :disabled="true"/>
+          </div>
+        </div>
+      </div>
+      <div class="proportion">1 ACC= 100.34546766  STT</div>
+      <div class="btn-box">
+        <van-button class="btn" :class="sell == ''?'':'active-btn'" type="primary" size="large">确认兑换</van-button>
+      </div>
+      <div class="information-box">
+        <div class="information-item">
+          <div class="label">Fee saved
+            <svg-icon class="item-icon" name="jg" />
+          </div>
+          <div>0.00000000000000007ACC（～$0.00)</div>
+        </div>
+        <div class="information-item">
+          <div class="label">Fee saved<svg-icon class="item-icon" name="jg" /></div>
+          <div>0.01%</div>
+        </div>
+        <div class="information-item">
+          <div class="label">Fee saved<svg-icon class="item-icon" name="jg" /></div>
+          <div>STT_ACC</div>
+        </div>
+      </div>
+      <div class="transaction">
+        <div class="transaction-box" @click="goToPage">
+          <van-image
+            radius="4"
+            width="42" 
+            height="42" 
+            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
+          />
+          <div style="margin-top: 4px;">ANGEL DEX</div>
+        </div>
+      </div>
     </div>
-  </template>
-  
-  <script setup>
-  
-  </script>
-  
-  <style lang="less" scoped>
-  
-  </style>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter();
+const sell = ref('');
+const buyIn = ref('0.00');
+const goToPage = () => {
+  router.push('jysExchange')
+}
+</script>
+
+<style lang="less" scoped>
+.container{
+  height: calc(100vh - 44px);
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  box-sizing: border-box;
+  .content{
+    background: #fff;
+    border-radius: 8px;
+    padding: 12px 16px 16px;
+    .card-box{
+      .box-item{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 12px;
+        .box-item-lf-text{
+          color: #000000;
+        }
+        .box-item-ri-text{
+          color: #8D8D8D;
+          display: flex;
+          align-items: center;
+        }
+        .unit{
+          display: flex;
+          align-items: center;
+          font-weight: 500;
+          font-size: 17px;
+          color: #000000;
+        }
+        .box-input{
+          padding: 0 !important;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          font-size: 17px !important;
+          color: #000000 !important;
+        }
+      }
+      .m12{
+        margin: 12px 0 17px;
+      }
+    }
+    .arrow{
+      display: flex;
+      align-items: center;
+      .line{
+        background: #F2F2F2;
+        height: 1px;
+        width: 135px;
+      }
+      .arrow-icon{
+        width: 32px;
+        height: 32px;
+        border: 1px solid #F2F2F2;
+        padding: 8px;
+        box-sizing: border-box;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 10px;
+      }
+    }
+  }
+  .proportion{
+    margin: 16px 0;
+    text-align: center;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    color: #4F4F4F;
+  }
+  .btn-box{
+    .btn{
+      background: #E9E9E9;
+      height: 40px;
+      line-height: 40px;
+      border-radius: 50px;
+      padding: 9px 0;
+      box-sizing: border-box;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      font-size: 15px;
+      color: #8D8D8D;
+      border: none !important;
+    }
+    .active-btn{
+      background: @theme-color1;
+      color: #FFFFFF;
+    }
+  }
+  .information-box{
+    background: #E9E9E9;
+    border-radius: 8px;
+    margin: 32px 0 24px;
+    padding: 16px;
+    .information-item{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      font-size: 12px;
+      color: #4F4F4F;
+      margin-bottom: 6px;
+      .label{
+        display: flex;
+        align-items: center;
+        height: 18px;
+        line-height: 18px;
+        box-sizing: border-box;
+        .item-icon{
+          width: 16px; height: 16px;margin-left: 2px;color: #8D8D8D;
+        }
+      }
+    }
+    .information-item:last-child{
+      margin-bottom: 0;
+    }
+  }
+  .transaction{
+    display: flex;
+    justify-content: flex-end;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 10px;
+    color: #000000;
+    .transaction-box{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+  // :deep(.box-input input::placeholder) {
+  //   color: #000;
+  // }
+}
+</style>

src/views/transaction/jys/index.vue

@@ -0,0 +1,400 @@
+<template>
+    <div class="container">
+        <div class="content">
+            <div class="tab-box">
+                <div class="tab-text" 
+                    v-for="(item,i) in tabList" :key="i" 
+                    :class="tabIndex == i?'active-text':''"
+                    @click="tabIndex = i">{{item}}
+                </div>
+            </div>
+            <div class="information-box">
+                <div class="information-ul">
+                    <div class="information-title">当前价(STT)</div>
+                    <div class="rate">210.5000</div>
+                    <div class="cny">≈CNY1494.5500</div>
+                    <div class="balance">钱包余额(WGT)32.2547</div>
+                </div>
+                <div class="information-ul">
+                    <div class="information-title">委托数量(WGT)</div>
+                    <van-field v-model="num" class="rate" placeholder="请输入WGT数量"/>
+                    <div class="cny">≈0.0000STT</div>
+                    <div class="balance">钱包余额(STT)1.7359</div>
+                </div>
+            </div>
+            <van-button class="information-btn" type="primary" size="large">确认</van-button>
+            <!-- 广告 -->
+            <div class="card-box">
+                <div class="card-ul">
+                    <div class="card-li" v-for="(item,i) in cardList" :key="i" >{{item}}</div>
+                </div>
+                <div class="list-ul">
+                    <div class="list-li" v-for="item in 20">
+                        <div class="list-text">0x70...EEd1</div>
+                        <div class="list-text">98.30</div>
+                        <div class="list-text">0.354</div>
+                        <div class="list-text">
+                            <div class="list-btn" @click="isShowDetail = true">买入</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--  -->
+            <div class="delegation">
+                <div class="delegation-label">
+                    <div :class="delegationIndex == 1?'active-label':''" @click="delegationIndex = 1">当前委托</div>
+                    <div :class="delegationIndex == 2?'active-label':''" @click="delegationIndex = 2">大盘成交</div>
+                </div>
+                <div class="delegation-ul">
+                    <div class="delegation-li" v-for="item in 10">
+                        <template v-if="delegationIndex == 1">
+                            <div>
+                                <div class="m4"><text class="cell-label green">卖单</text>0x2808...be2f2d</div>
+                                <div class="m4 red"><text class="cell-label">委托价值</text>217.200STT</div>
+                                <div class="m4 blue"><text class="cell-label">委托数量</text>0.001WGT</div>
+                                <div><text class="cell-label">委托时间</text>2025-06-10 14:23:09</div>
+                            </div>
+                            <div class="green text-ri">
+                                <div class="m8">当前价 66.4326545</div>
+                                <div style="display: flex;justify-content: flex-end;">
+                                    <div class="cell-btn red">撤销</div>
+                                </div>
+                            </div>
+                        </template>
+                        <template v-if="delegationIndex == 2">
+                            <div>
+                                <div class="m4"><text class="cell-label">卖单号</text>0x2808...be2f2d</div>
+                                <div class="m4"><text class="cell-label">买单号</text>0x2808...be2f2d</div>
+                                <div class="m4 red"><text class="cell-label">成交价</text>217.200STT</div>
+                                <div><text class="cell-label">时间</text>2025-06-10 14:23:09</div>
+                            </div>
+                            <div class="red text-ri">
+                                <div class="m4">WGT</div>
+                                <div class="m4">价值 66.4326545 STT</div>
+                                <div>数量 0.3134 WGT</div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <van-popup v-model:show="isShowDetail" position="bottom" round>
+            <div class="pop-content">
+                <div class="pop-title">
+                    <svg-icon style="width: 24px; height: 24px;" name="left-arrow" />
+                    <div class="title">交易详情</div>
+                </div>
+                <div class="subtitle">确认提交吗？</div>
+                <div class="address">
+                    <div>对方地址</div>
+                    <div class="address-text">463dfffhty55yrrq4utgewteuooljmuit34te5y5556jrt74</div>
+                </div>
+                <div class="pop-btn">
+                    <van-button type="default" class="btn cancel" @click="isShowDetail = false">取消</van-button>
+                    <van-button type="default" class="btn confirm" @click="isShowDetail = false">確定</van-button>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script setup>
+const tabList = ['闪充','委托卖出','预约卖出'];
+const cardList = ['地址','价值(STT)','数量(WGT)','操作']
+const tabIndex = ref(1);
+const delegationIndex = ref(2);
+const num = ref('');
+const isShowDetail = ref(false);
+</script>
+
+<style lang="less" scoped>
+.container{
+    height: calc(100vh - 44px);
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    box-sizing: border-box;
+    .content{
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+        .tab-box{
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            .tab-text{
+                width: calc(100% / 3);
+                background: #E9E9E9;
+                border-radius: 28px;
+                height: 28px;
+                line-height: 28px;
+                box-sizing: border-box;
+                text-align: center;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                color: #8D8D8D;
+            }
+            .active-text{
+                background: @theme-color1;
+                font-weight: 500;
+                color: #FFFFFF;
+            }
+        }
+        .information-box{
+            display: flex;
+            gap: 12px;
+            margin: 18px 0 16px;
+            .information-ul{
+                width:calc(100% / 2);
+                background-color: #fff;
+                border-radius: 8px;
+                padding: 12px 16px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                .information-title{
+                    font-size: 15px;
+                    color: #000000;
+                }
+                .rate{
+                    background: #F1F1FF;
+                    border-radius: 4px;
+                    height: 28px;
+                    line-height: 28px;
+                    box-sizing: border-box;
+                    padding-left:10px;
+                    font-weight: 500;
+                    font-size: 12px;
+                    color: @theme-color1;
+                    margin: 10px 0 2px;
+                }
+                .cny{
+                    font-size: 10px;
+                    color: #8D8D8D;
+                    margin-bottom: 8px;
+                }
+                .balance{
+                    font-size: 12px;
+                    color: #000000;
+                }
+            }
+        }
+        .information-btn{
+            height: 40px !important;
+            line-height: 40px !important;
+            background: linear-gradient( 90deg, @theme-color1 0%, #40A4FB 100%) !important;
+            border-radius:50px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 15px;
+            padding: 9px 0;
+            box-sizing: border-box;
+            color: #fff;
+        }
+        .card-box{
+            background: #F1F1FF;
+            border-radius: 12px;
+            padding: 10px 0 6px;
+            margin: 16px 0;
+            height: 195px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            .card-ul{
+                margin-bottom: 18px;
+                display: flex;
+                align-items: center;
+                .card-li{
+                    width: calc(100% / 4);
+                    text-align: center;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: @theme-color1;
+                }
+            }
+            .list-ul{
+                flex: 1;
+                overflow: auto;
+                .list-li{
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 12px;
+                    .list-text{
+                        width: calc(100% / 4);
+                        text-align: center;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 10px;
+                        color: @font-color2;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                    .list-btn{
+                        background: @theme-color1;
+                        border-radius: 4px;
+                        height: 18px;
+                        width: 44px;
+                        color: #FFFFFF;
+                        box-sizing: border-box;
+                        line-height: 18px;
+                    }
+                }
+            }
+            .list-ul::-webkit-scrollbar{
+                width: 0;
+            }
+        }
+        .delegation{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            .delegation-label{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 8px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 12px;
+                color: #000000;
+            }
+            .active-label{
+                font-weight: 500;
+                color: #FF0000;
+            }
+            .delegation-ul{
+                flex: 1;
+                overflow: auto;
+                .delegation-li{
+                    border-radius: 8px;
+                    border: 1px solid #D8D8D8;
+                    padding: 8px 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 10px;
+                    color: #8D8D8D;
+                    box-sizing: border-box;
+                    margin-bottom: 10px;
+                    .m4{
+                        margin-bottom: 4px;
+                    }
+                    .m8{
+                        margin-bottom: 8px;
+                    }
+                    .text-ri{
+                        text-align: right;
+                    }
+                    .cell-label{
+                        width: 48px;
+                        display: inline-block;
+                    }
+                    .cell-btn{
+                        height: 19px;
+                        box-sizing: border-box;
+                        padding: 2px 10px;
+                        border-radius: 4px;
+                        border: 1px solid #FF0000;
+                    }
+                    .red{
+                        color: #FF0000;
+                    }
+                    .green{
+                        color: #00B42A;
+                    }
+                    .blue{
+                        color: @theme-color1;
+                    }
+                }
+                .delegation-li:last-child{
+                    margin-bottom: 0;
+                }
+            }
+            .delegation-ul::-webkit-scrollbar{
+                width: 0;
+            }
+        }
+    }
+    .pop-content{
+        .pop-title{
+            padding: 16px;
+            border-bottom: 1px solid #F2F2F2;
+            display: flex;
+            align-items: center;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 17px;
+            color: #000000;
+            .title{
+                flex: 1;
+                display: flex;
+                justify-content: center;
+                position: relative;
+                left: -15px;
+            }
+        }
+        .subtitle{
+            text-align: center;
+            margin: 16px 16px 12px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 15px;
+            color: #000000;
+        }
+        .address{
+            margin: 0 16px 24px;
+            background: #F2F2F2;
+            border-radius: 8px;
+            border: 1px solid #D8D8D8;
+            padding: 14px 16px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 15px;
+            color: @font-color2;
+            .address-text{
+                margin-top: 8px;
+                font-size: 12px;
+                color: #8D8D8D;
+            }
+        }
+        .pop-btn{
+            display: flex;
+            justify-content: center;
+            margin-bottom: 32px;
+            .btn{
+                width: 96px;
+                height: 32px;
+                line-height: 32px;
+                padding: 6px 0 !important;
+                border-radius: 6px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                box-sizing:border-box;
+            }
+            .cancel{
+                margin-right: 17px !important;
+                border: 1px solid #D8D8D8;
+                color: #000 !important;
+            }
+            .confirm{
+                background: @theme-color1;
+                color: #FFF;
+                font-weight: 500;
+            }
+        }
+    }
+}
+:deep(.van-cell){
+    padding: 0 0 0 10px !important;
+}
+:deep(.van-button--primary){
+    border: none !important;
+}
+</style>

src/views/wallet/proceeds/index.vue

@@ -72,7 +72,7 @@ const qrtext = ref('123');
     .footer-btn{
         height: 40px !important;
         line-height: 40px !important;
-        background: linear-gradient( 90deg, #4765DD 0%, #40A4FB 100%) !important;
+        background: linear-gradient( 90deg, @theme-color1 0%, #40A4FB 100%) !important;
         border-radius:51px;
         font-family: PingFang SC, PingFang SC;
         font-weight: 500;

src/views/wallet/walletDetail/index.vue

@@ -151,7 +151,7 @@ const confirm = () => {
                 width: 83px;
                 height: 29px;
                 line-height: 29px;
-                padding: 5px 0 3px !important;
+                padding: 5px 0 !important;
                 border-radius: 6px;
                 font-family: PingFang SC, PingFang SC;
                 font-weight: 400;

src/views/wallet/ybExchange/index.vue

@@ -20,12 +20,12 @@
                 <div class="tab-item lf-bg">
                     <div>可用元宝</div>
                     <div class="lf-balance">245.53</div>
-                    <van-button class="tab-lf-btn" type="primary">兑换元宝</van-button>
+                    <van-button class="tab-lf-btn" type="primary" @click="show = true">兑换元宝</van-button>
                 </div>
                 <div class="tab-item ri-bg">
                     <div>冻结元宝</div>
                     <div class="lf-balance">245.53</div>
-                    <van-button class="tab-ri-btn" type="primary">取款(转出)</van-button>
+                    <van-button class="tab-ri-btn" type="primary" @click="show = true">取款(转出)</van-button>
                 </div>
             </div>
             <div class="list-box">
@@ -41,11 +41,26 @@
                 </div>
             </div>
         </div>
+        <van-popup v-model:show="show" :style="{ borderRadius:'25px' }">
+            <div class="pop-content">
+                <div class="pop-title">兑换元宝</div>
+                <div class="pop-balance">当前WGT-ACC钱包余额1.139101703592472754</div>
+                <van-field v-model="text" class="pop-input" placeholder="请输入wgt数量"/>
+                <div class="pop-state">
+                    <div style="margin-bottom: 4px;">说明</div>
+                    <div>兑换的币种数量，将按照当前价值转换成对应元宝实时到账</div>
+                </div>
+                <div class="pop-btn">
+                    <van-button type="default" class="btn cancel" @click="show = false">取消</van-button>
+                    <van-button type="default" class="btn confirm" @click="show = false">提交</van-button>
+                </div>
+            </div>
+        </van-popup>
     </div>
 </template>
 
 <script setup>
-
+const show = ref(false);
 </script>
 
 <style lang="less" scoped>
@@ -178,5 +193,60 @@
           width: 0;
         }
     }
+    .pop-content{
+        padding: 24px 20px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        font-size: 12px;
+        .pop-title{
+            font-weight: 500;
+            font-size: 17px;
+            text-align: center;
+            margin-bottom: 12px;
+        }
+        .pop-balance{
+            text-align: center;
+        }
+        .pop-input{
+            background: #F2F2F2;
+            border-radius: 8px;
+            height: 40px;
+            margin: 8px 0;
+        }
+        .pop-state{
+            color: #4F4F4F;
+        }
+        .pop-btn{
+            display: flex;
+            justify-content: center;
+            margin-top: 20px;
+            .btn{
+                width: 83px;
+                height: 29px;
+                line-height: 29px;
+                padding: 5px 0 !important;
+                border-radius: 6px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                box-sizing:border-box;
+            }
+            .cancel{
+                margin-right: 16px !important;
+                border: 1px solid #D8D8D8;
+                color: #000 !important;
+            }
+            .confirm{
+                background: @theme-color1;
+                color: #FFF;
+                font-weight: 500;
+            }
+        }
+    }
+    :deep(.van-popup--center) {
+        margin: 0 40px !important;
+        width: auto !important;
+    }
 }
 </style>