[edit][ui]

src/assets/svg/icon-botton-up.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2236 3.84766L6.00042 9.84766L0.777203 3.84766" stroke="#BBBBBB" stroke-width="1.5"/>
+</svg>

src/assets/svg/icon-enter.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="11.5" fill="#C4C4C4" fill-opacity="0.01" stroke="#9A9A9A"/>
+<path d="M6 12.7949L9.99927 16.7945L17.2336 6.87267" stroke="#B6B6B6" stroke-width="1.8"/>
+</svg>

src/assets/svg/icon-more-l.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="5" r="2" fill="#4E4E4E"/>
+<circle cx="12" cy="11.5" r="2" fill="#4E4E4E"/>
+<circle cx="12" cy="18" r="2" fill="#4E4E4E"/>
+</svg>

src/router/popup.js

@@ -2,19 +2,38 @@
 import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
 
 import Home from '@/view/popup/popup.vue'
-import TopUp from '@/view/popup/top-up'
+import Withdraw from '@/view/popup/withdraw/index.vue'
+import WithdrawInfo from '@/view/popup/withdraw/info.vue'
+import WithdrawConfirm from '@/view/popup/withdraw/confirm.vue'
+
+import TopUpInfo from '@/view/popup/top-up/info.vue'
 
 // 2. 定义路由配置
 const routes = [
     {
         path: "/",
-        name:'home',
+        name: 'home',
         component: Home
     },
     {
-        path:'/top-up',
-        name:'top-up',
-        component:TopUp
+        path: '/withdraw',
+        name: 'withdraw',
+        component: Withdraw
+    },
+    {
+        path: '/withdraw/info',
+        name: 'WithdrawInfo',
+        component: WithdrawInfo,
+    },
+    {
+        path: '/withdraw/confirm',
+        name: 'WithdrawConfirm',
+        component: WithdrawConfirm,
+    },
+    {
+        path: '/top-up/info',
+        name: 'TopUpInfo',
+        component: TopUpInfo
     }
 ]
 

src/view/popup/components/state-page.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="state">
+        <div class="withdraw-status">
+            <img :src="require('@/assets/svg/icon-withdraw-status.svg')" alt="" />
+            <div>
+                <div class="title">Submitted successfully</div>
+                <div class="desc">
+                    Please wait for a while,<br />
+                    then check the balance with paypal
+                </div>
+            </div>
+        </div>
+        <div class="confirm-btn">
+            Done
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.state {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .withdraw-status {
+        text-align: center;
+
+        img {
+            margin-top: 40px;
+            margin-bottom: 34px;
+        }
+
+        .title {
+            font-weight: 500;
+            font-size: 20px;
+            margin-bottom: 10px;
+        }
+
+        .desc {
+            font-size: 15px;
+            color: rgba($color: #000000, $alpha: 0.5);
+        }
+    }
+
+    .confirm-btn {
+        width: 335px;
+        height: 60px;
+        text-align: center;
+        line-height: 60px;
+        border-radius: 100px;
+        background: #389aff;
+        font-weight: 600;
+        font-size: 18px;
+        color: #fff;
+        position: absolute;
+        left: 50%;
+        bottom: 35px;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+}
+</style>

src/view/popup/index.vue

@@ -10,4 +10,10 @@ export default {
 
 
 <style>
+#app{
+    width: 375px;
+    height: 600px;
+    box-sizing: border-box;
+    overflow-y: auto;
+}
 </style>

src/view/popup/popup.vue

@@ -397,12 +397,12 @@ const showTransactions = () => {
     transactionsVisibility.value = true;
 };
 
-const clickWithdraw = () => {
-    if (isRequestWithdrawBalance.value) {
-        homeVisibility.value = false;
-        withdrawVisibility.value = true;
-    }
-};
+// const clickWithdraw = () => {
+//     if (isRequestWithdrawBalance.value) {
+//         homeVisibility.value = false;
+//         withdrawVisibility.value = true;
+//     }
+// };
 
 const loginAction = () => {
     login();
@@ -440,10 +440,11 @@ const sendTwitter = (params) => {
     );
 };
 // 点击提现
+const clickWithdraw = ()=>{
+    router.push('/withdraw/info');
+}
 const clickTopUp = ()=>{
-    // router
-    console.log(router)
-    router.push('top-up');
+    router.push('/top-up/info');
 }
 
 </script>

src/view/popup/top-up/info.vue

@@ -0,0 +1,208 @@
+<template>
+    <!-- 公共组件 -->
+    <div class="info">
+        <div class="head">
+            <img :src="require('@/assets/svg/icon-back.svg')" alt="" class="back">
+            <div class="title">Top Up</div>
+            <img :src="require('@/assets/svg/icon-more-l.svg')" alt="" class="more">
+        </div>
+        <!-- 内容 -->
+        <div class="content">
+            <div class="area-input-1">
+                <div class="token">
+                    <div class="title">Token</div>
+                    <div class="box">
+                        <img src="" alt="">
+                        <span>USDT</span>
+                    </div>
+                </div>
+
+                <div class="net">
+                    <div class="title">NetWork</div>
+                    <div class="box">
+                        <img src="" alt="">
+                        <span>BNB Chain</span>
+                        <img :src="require('@/assets/svg/icon-botton-up.svg')" alt="" class="up">
+                    </div>
+                </div>
+            </div>
+            <div class="info">
+                <img src="" alt="">
+                <div class="txt">TJGkVQQ8e3HQSghPQkkYYE9AZf5Pmvc3vG</div>
+                <div class="btn">Copy</div>
+            </div>
+
+            <div class="tips">
+                <div class="tip-title">TIPS</div>
+                <div class="tip-content">asdasdasdasd</div>
+            </div>
+        </div>
+        <!-- 底部 -->
+        <div class="footer">
+            <div class="confirm-btn">
+                Done
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script setup>
+/* eslint-disable */
+import { onMounted, ref } from "vue";
+</script>
+
+
+<style lang='scss' scoped>
+.info {
+    position: relative;
+    height: 100%;
+
+    .head {
+        height: 48px;
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 12px;
+
+        .back,
+        .more {
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+        }
+
+        .title {
+            padding-left: 16px;
+            flex: 1;
+            color: #000000;
+            font-size: 16px;
+            font-weight: 500;
+        }
+    }
+
+    .content {
+        padding: 16px 16px 0 16px;
+
+        .area-input-1 {
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+
+            .token,
+            .net {
+                width: 165px;
+
+                .title {
+                    font-weight: 500;
+                    font-size: 12px;
+                    margin-bottom: 6px;
+                    color: #8B8B8B;
+                }
+
+                .box {
+                    border: 1px solid #DBDBDB;
+                    border-radius: 8px;
+                    height: 44px;
+                    display: flex;
+                    align-items: center;
+                    padding: 0 15px 0 10px;
+                    display: flex;
+                    flex-wrap: nowrap;
+                    justify-content: space-between;
+
+                    img {
+                        width: 20px;
+                        height: 20px;
+                    }
+
+                    .up {
+                        width: 13px;
+                        height: 12px;
+                        cursor: pointer;
+                    }
+
+                    span {
+                        flex: 1;
+                        margin-left: 6px;
+                        font-size: 14px;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+
+        .info {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            background: #F7F7F7;
+            border-radius: 18px;
+            padding-bottom: 20px;
+            margin-top: 20px;
+
+            img {
+                margin-top: 17px;
+                width: 150px;
+                height: 150px;
+            }
+
+            .txt {
+                margin-top: 5px;
+                font-weight: 400;
+                font-size: 15px;
+            }
+
+            .btn {
+                margin-top: 22px;
+                width: 160px;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                border: 1px solid #389AFF;
+                border-radius: 100px;
+
+            }
+        }
+
+        .tips {
+            margin-top: 14px;
+            font-size: 13px;
+
+            .tip-title {
+                color: #000000;
+            }
+            .tip-content{
+                color: red;
+            }
+            .tip-content {
+                color: #000000;
+            }
+        }
+
+    }
+
+    .footer {
+        .confirm-btn {
+            width: 335px;
+            height: 46px;
+            text-align: center;
+            line-height: 60px;
+            border-radius: 100px;
+            background: #389aff;
+            font-weight: 600;
+            font-size: 18px;
+            color: #fff;
+            position: absolute;
+            left: 50%;
+            bottom: 35px;
+            transform: translateX(-50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+    }
+}
+</style>

src/view/popup/withdraw/confirm.vue

@@ -0,0 +1,226 @@
+<template>
+    <!-- 公共组件 -->
+    <div class="confirm">
+        <div class="head">
+            <img :src="require('@/assets/svg/icon-back.svg')" alt="" class="back">
+            <div class="title">Withdraw</div>
+            <img :src="require('@/assets/svg/icon-more-l.svg')" alt="" class="more">
+        </div>
+        <!-- 内容 -->
+        <div class="content">
+            <div class="order">
+                <div class="txt">Confirm order</div>
+                <div class="money">6.667 USDT</div>
+                <div class="txt">≈$6.67</div>
+            </div>
+            <div class="info">
+                <div class="item">
+                    <div class="key">Address</div>
+                    <div class="val">TJGkVQQ8e3HQSghPQkkYYE9AZf5Pmvc3vG</div>
+                </div>
+                <div class="item">
+                    <div class="key">Network</div>
+                    <div class="val">BNB Smart chain (BEP20)</div>
+                </div>
+                <div class="info-warn">
+                    Ensure the network is correct
+                </div>
+                <div class="item">
+                    <div class="key">Amoun</div>
+                    <div class="val">6.66793014 USDT</div>
+                </div>
+                <div class="item">
+                    <div class="key">Network fee</div>
+                    <div class="val">0.8 USDT</div>
+                </div>
+            </div>
+
+            <div class="tips">
+                <div class="tip-title">TIPS</div>
+                <div class="tip-content">asdasdasdasd</div>
+            </div>
+        </div>
+        <!-- 底部 -->
+        <div class="footer">
+            <div class="left">
+                <img :src="require('@/assets/svg/icon-enter.svg')" alt="">
+                <span>同意用户协议</span>
+            </div>
+            <div class="right">
+                <div class="btn">Confirm</div>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script setup>
+/* eslint-disable */
+import { onMounted, ref } from "vue";
+</script>
+
+
+<style lang='scss' scoped>
+.confirm {
+    position: relative;
+    height: 100%;
+
+    .head {
+        height: 48px;
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 12px;
+        border-bottom: 1px solid #DBDBDB;
+
+        .back,
+        .more {
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+        }
+
+        .title {
+            padding-left: 16px;
+            flex: 1;
+            color: #000000;
+            font-size: 16px;
+            font-weight: 500;
+        }
+    }
+
+    .content {
+        padding: 16px 16px 0 16px;
+
+        .order {
+            text-align: center;
+
+            .txt {
+                font-weight: 500;
+                font-size: 15px;
+                color: #000000;
+            }
+            .txt:first-child{
+                margin-bottom: 9px;
+            }
+            .txt:last-child{
+                margin-top: 5px;
+            }
+
+            .money {
+                font-weight: 600;
+                font-size: 24px;
+                color: #000000;
+            }
+        }
+
+        .info {
+            text-align: right;
+            background: #F7F7F7;
+            border-radius: 18px;
+            padding: 0 16px 20px 16px;
+            margin-top: 20px;
+
+            .item {
+                display: flex;
+                padding-top: 20px;
+
+                .key {
+                    text-align: left;
+                    width: 100px;
+                    color: #8B8B8B;
+                    font-weight: 500;
+                    font-size: 14px;
+                }
+
+                .val {
+                    word-break: break-all;
+
+                    flex: 1;
+                    font-weight: 500;
+                    font-size: 14px;
+                    text-align: right;
+                    letter-spacing: 0.5px;
+
+                }
+            }
+
+            .info-warn {
+                margin-top: 7px;
+                background: #F4EEE1;
+                border-radius: 5px;
+                height: 30px;
+                line-height: 30px;
+                text-align: center;
+                display: inline-block;
+                padding: 0 8px;
+                color: #AD8226;
+            }
+        }
+
+        .tips {
+            margin-top: 30px;
+            font-size: 13px;
+
+            .tip-title {
+                color: #000000;
+            }
+
+            .tip-content {
+                color: #000000;
+            }
+        }
+
+    }
+
+    .footer {
+        border-top: 1px solid #DBDBDB;
+        bottom: 0;
+        height: 80px;
+        display: flex;
+        position: absolute;
+        justify-content: space-between;
+        width: 100%;
+        bottom: 0;
+        align-items: center;
+
+        .left {
+            margin-left: 16px;
+
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 24px;
+                height: 24px;
+                margin-right: 10px;
+            }
+
+            span {
+                font-weight: 500;
+                font-size: 14px;
+
+            }
+        }
+
+        .right {
+            margin-right: 16px;
+
+            .btn {
+                cursor: pointer;
+                width: 140px;
+                height: 46px;
+                line-height: 46px;
+                text-align: center;
+                font-weight: 600;
+                font-size: 18px;
+                color: #FFFFFF;
+                background: #D2D2D2;
+                border-radius: 100px;
+
+            }
+        }
+    }
+}
+</style>

src/view/popup/top-up/index.vue → src/view/popup/withdraw/index.vue

@@ -1,10 +1,10 @@
 <template>
-   <div>123123123</div>
+   <div>index</div>
 </template>
 
 <script>
 export default {
-  name: 'project-one',
+  name: 'withdraw',
 }
 </script>
 

src/view/popup/withdraw/info.vue

@@ -0,0 +1,256 @@
+<template>
+  <!-- 公共组件 -->
+  <div class="info">
+    <div class="head">
+      <img :src="require('@/assets/svg/icon-back.svg')" alt="" class="back">
+      <div class="title">Withdraw</div>
+      <img :src="require('@/assets/svg/icon-more-l.svg')" alt="" class="more">
+    </div>
+    <!-- 内容 -->
+    <div class="content">
+      <div class="area-input-1">
+        <div class="token">
+          <div class="title">Token</div>
+          <div class="box">
+            <img src="" alt="">
+            <span>USDT</span>
+          </div>
+        </div>
+
+        <div class="net">
+          <div class="title">NetWork</div>
+          <div class="box">
+            <img src="" alt="">
+            <span>BNB Chain</span>
+            <img :src="require('@/assets/svg/icon-botton-up.svg')" alt="" class="up">
+          </div>
+        </div>
+      </div>
+
+      <div class="area-input-2">
+        <div class="title">Wallet Address</div>
+        <div class="box">
+          <input type="text" placeholder="Click to enter">
+        </div>
+      </div>
+
+      <div class="area-input-3">
+        <div class="title">
+          <span>Withdrawal Amount</span>
+          <span>Balance: 122.51</span>
+        </div>
+        <div class="box">
+          <input type="text" placeholder="0">
+          <span>Withdrawal All</span>
+        </div>
+        <div class="error">最少XXXX，最多XXXX</div>
+      </div>
+
+      <div class="tips">
+        <div class="tip-title">TIPS</div>
+        <div class="tip-content">asdasdasdasd</div>
+      </div>
+    </div>
+    <!-- 底部 -->
+    <div class="footer">
+      <div class="left">
+        <div class="txt">Amount Account</div>
+        <div class="money">0</div>
+        <div class="txt">Network fee: 0.8 USDT</div>
+      </div>
+      <div class="right">
+        <div class="btn">Confirm</div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+/* eslint-disable */
+import { onMounted, ref } from "vue";
+</script>
+
+
+<style lang='scss' scoped>
+.info {
+  position: relative;
+  height: 100%;
+
+  .head {
+    height: 48px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 12px;
+
+    .back,
+    .more {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+    }
+
+    .title {
+      padding-left: 16px;
+      flex: 1;
+      color: #000000;
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .content {
+    padding: 16px 16px 0 16px;
+
+    .area-input-1 {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+
+      .token,
+      .net {
+        width: 165px;
+
+        .title {
+          font-weight: 500;
+          font-size: 12px;
+          margin-bottom: 6px;
+          color: #8B8B8B;
+        }
+
+        .box {
+          border: 1px solid #DBDBDB;
+          border-radius: 8px;
+          height: 44px;
+          display: flex;
+          align-items: center;
+          padding: 0 15px 0 10px;
+          display: flex;
+          flex-wrap: nowrap;
+          justify-content: space-between;
+
+          img {
+            width: 20px;
+            height: 20px;
+          }
+          .up{
+            width: 13px;
+            height: 12px;
+            cursor: pointer;
+          }
+
+          span {
+            flex: 1;
+            margin-left: 6px;
+            font-size: 14px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+
+    .area-input-2,
+    .area-input-3 {
+      margin-top: 25px;
+
+      .title {
+        font-weight: 500;
+        font-size: 12px;
+        color: #8B8B8B;
+        margin-bottom: 6px;
+      }
+
+      .box {
+        border: 1px solid #DBDBDB;
+        border-radius: 8px;
+        height: 44px;
+        display: flex;
+        align-items: center;
+        padding: 5px 18px;
+
+        input {
+          outline: none;
+          border: 0;
+          flex: 1;
+          height: 100%;
+          font-weight: 500;
+          font-size: 15px;
+        }
+
+        span {
+          display: block;
+          color: #389AFF;
+          font-size: 13px;
+          cursor: pointer;
+        }
+      }
+
+      .error {
+        color: #FFA621;
+        font-weight: 400;
+        font-size: 12px;
+      }
+    }
+
+    .tips {
+      margin-top: 30px;
+      font-size: 13px;
+
+      .tip-title {
+        color: #000000;
+      }
+
+      .tip-content {
+        color: #000000;
+      }
+    }
+
+  }
+
+  .footer {
+    border-top: 1px solid #DBDBDB;
+    bottom: 0;
+    height: 80px;
+    display: flex;
+    position: absolute;
+    justify-content: space-between;
+    width: 100%;
+    bottom: 0;
+    align-items: center;
+
+    .left {
+      margin-left: 16px;
+      .txt {
+        color: #9D9D9D;
+        font-weight: 400;
+        font-size: 12px;
+      }
+
+      .money {
+        color: #000000;
+        font-weight: 500;
+        font-size: 15px;
+      }
+    }
+
+    .right {
+      margin-right: 16px;
+      .btn {
+        cursor: pointer;
+        width: 140px;
+        height: 46px;
+        line-height: 46px;
+        text-align: center;
+        font-weight: 600;
+        font-size: 18px;
+        color: #FFFFFF;
+        background: #D2D2D2;
+        border-radius: 100px;
+
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -58,13 +58,6 @@ iframeName.forEach((name) => {
 const isDevMode = process.env.NODE_ENV === 'development'
 
 module.exports = {
-  resolve: {
-    extensions: ['*'],
-    alias: {
-      '@': resolve('src')
-    }
-  },
-
   pages,
   filenameHashing: false,
   chainWebpack: (config) => {