nieyuge 3 سال پیش
والد
کامیت
02ac723315

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 1 - 0
src/assets/svg/icon-discord.svg


+ 3 - 0
src/assets/svg/icon-home-bill.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.73563 3H19.2644C19.4595 3 19.6466 3.0775 19.7845 3.21546C19.9225 3.35342 20 3.54053 20 3.73563V20.4713C20 20.6664 19.9225 20.8535 19.7845 20.9914C19.6466 21.1294 19.4595 21.2069 19.2644 21.2069H4.73563C4.54053 21.2069 4.35342 21.1294 4.21546 20.9914C4.0775 20.8535 4 20.6664 4 20.4713V3.73563C4 3.54053 4.0775 3.35342 4.21546 3.21546C4.35342 3.0775 4.54053 3 4.73563 3ZM5.28736 4.28736V19.9195H18.7126V4.28736H5.28736ZM6.75891 6.67917H17.2417C17.2904 6.67917 17.3372 6.69854 17.3717 6.73303C17.4062 6.76752 17.4256 6.8143 17.4256 6.86307V7.78261C17.4256 7.83139 17.4062 7.87817 17.3717 7.91266C17.3372 7.94715 17.2904 7.96652 17.2417 7.96652H6.75891C6.71013 7.96652 6.66335 7.94715 6.62887 7.91266C6.59438 7.87817 6.575 7.83139 6.575 7.78261V6.86307C6.575 6.8143 6.59438 6.76752 6.62887 6.73303C6.66335 6.69854 6.71013 6.67917 6.75891 6.67917ZM6.75891 10.1734H17.2417C17.2904 10.1734 17.3372 10.1928 17.3717 10.2273C17.4062 10.2618 17.4256 10.3086 17.4256 10.3573V11.2769C17.4256 11.3256 17.4062 11.3724 17.3717 11.4069C17.3372 11.4414 17.2904 11.4608 17.2417 11.4608H6.75891C6.71013 11.4608 6.66335 11.4414 6.62887 11.4069C6.59438 11.3724 6.575 11.3256 6.575 11.2769V10.3573C6.575 10.3086 6.59438 10.2618 6.62887 10.2273C6.66335 10.1928 6.71013 10.1734 6.75891 10.1734ZM6.75891 13.8516H13.1957C13.2445 13.8516 13.2912 13.871 13.3257 13.9054C13.3602 13.9399 13.3796 13.9867 13.3796 14.0355V14.955C13.3796 15.0038 13.3602 15.0506 13.3257 15.0851C13.2912 15.1196 13.2445 15.1389 13.1957 15.1389H6.75891C6.71013 15.1389 6.66335 15.1196 6.62887 15.0851C6.59438 15.0506 6.575 15.0038 6.575 14.955V14.0355C6.575 13.9867 6.59438 13.9399 6.62887 13.9054C6.66335 13.871 6.71013 13.8516 6.75891 13.8516Z" fill="#8EA3B9"/>
+</svg>

+ 3 - 0
src/assets/svg/icon-home-wallet.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.72555 3H19.2767C20.777 3 22 4.22303 22 5.72554V8.21632H15.0106C13.289 8.21632 11.8804 9.62493 11.8804 11.3466V12.147C11.8804 13.8686 13.289 15.2772 15.0106 15.2772H22V17.768C22 19.2728 20.777 20.4936 19.2745 20.4936H4.72555C3.22079 20.4936 2 19.2705 2 17.768V5.72554C2 4.22079 3.22303 3 4.72555 3ZM12.9961 11.3463C12.9961 10.8119 13.2063 10.3088 13.5886 9.92649C13.9687 9.54416 14.474 9.33398 15.0084 9.33398H21.9978V14.159H15.0084C14.474 14.159 13.9709 13.9489 13.5886 13.5665C13.2063 13.1842 12.9961 12.6811 12.9961 12.1467V11.3463ZM16.7256 11.7465C16.7256 11.2524 16.3253 10.8521 15.8312 10.8521C15.3371 10.8521 14.9368 11.2524 14.9368 11.7465C14.9368 12.2406 15.3371 12.6409 15.8312 12.6409C16.3253 12.6409 16.7256 12.2406 16.7256 11.7465Z" fill="#1D9BF0"/>
+</svg>

+ 3 - 0
src/assets/svg/icon-telegram.svg

@@ -0,0 +1,3 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.2165 13.8207L28.5516 30.7927C28.2752 31.9905 27.5541 32.2887 26.5295 31.7244L20.9454 27.6837L18.251 30.2284C17.9528 30.5212 17.7034 30.7661 17.1288 30.7661L17.5299 25.1815L27.8794 15.9981C28.3294 15.6042 27.7818 15.3859 27.18 15.7799L14.3855 23.6909L8.87738 21.998C7.67925 21.6306 7.65757 20.8214 9.12677 20.2571L30.6714 12.1065C31.669 11.7392 32.5418 12.3248 32.2165 13.8207V13.8207Z" fill="#259EDA"/>
+</svg>

+ 40 - 23
src/view/popup/components/head.vue

@@ -1,9 +1,12 @@
 <template>
-    <div class="head" :class="{ 'border': show_state != 'home' }">
+    <div class="head" :class="{ 'border': show_state != 'home', 'home': show_state == 'home' }">
         <template v-if="show_state == 'home'">
+            <div class="desc">
+                <img class="img" :src="user_info.avatarUrl" />
+                <font class="name">{{user_info.nickName}}</font>
+            </div>
             <div class="logo">
                 <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
-                <span>DeNet</span>
             </div>
         </template>
         <template v-else>
@@ -11,22 +14,22 @@
             <div class="title">{{ props.title }}</div>
             <img :src="require('@/assets/svg/icon-refresh.svg')" alt="" class="refresh" v-if="show_refresh"
                 @click="clickRefresh" :class="{ transform_rotate: state.rotate }">
-
-        </template>
-        <img :src="require('@/assets/svg/icon-more-l.svg')" alt="" class="more" v-if="props.show_more"
-            @click="state.show_option = true">
-        <div class="area-option" v-if="state.show_option" @click="state.show_option = false">
-            <div class="option">
-                <div class="item" @click="clickItem('/transactions')">
-                    <img :src="require('@/assets/svg/icon-menu.svg')" alt="">
-                    <span>Transactions History</span>
+            <img :src="require('@/assets/svg/icon-more-l.svg')" alt="" class="more" v-if="props.show_more"
+                @click="state.show_option = true">
+            <div class="area-option" v-if="state.show_option" @click="state.show_option = false">
+                <div class="option">
+                    <div class="item" @click="clickItem('/transactions')">
+                        <img :src="require('@/assets/svg/icon-menu.svg')" alt="">
+                        <span>Transactions History</span>
+                    </div>
                 </div>
             </div>
-        </div>
+        </template>
     </div>
 </template>
 <script setup>
-import { defineProps, defineEmits, reactive, ref } from "vue";
+import { getChromeStorage } from "@/uilts/chromeExtension";
+import { defineProps, defineEmits, reactive, ref, onMounted } from "vue";
 import router from "@/router/popup.js";
 
 let props = defineProps({
@@ -35,7 +38,8 @@ let props = defineProps({
     show_refresh: Boolean,
     show_option: Boolean,
     show_more: Boolean,
-    back_url: String
+    back_url: String,
+    user_info: Object
 })
 
 let state = reactive({
@@ -83,20 +87,33 @@ function clickItem(path) {
     align-items: center;
     padding: 0 12px;
 
+    &.home {
+        height: 64px;
+    }
+
     .logo {
         display: flex;
         align-items: center;
-
-        span {
-            font-size: 13px;
-            margin-left: 5px;
-            font-weight: 500;
-
+        img {
+            width: 26px;
+            height: 26px;
         }
+    }
 
-        img {
-            width: 16px;
-            height: 16px;
+    .desc {
+        .img {
+            width: 34px;
+            height: 34px;
+            overflow: hidden;
+            border-radius: 50%;
+            margin-right: 10px;
+        }
+        .name {
+            display: inline-block;
+            width: 200px;
+            color: #000000;
+            font-size: 16px;
+            font-weight: bold;
         }
     }
 

+ 58 - 30
src/view/popup/popup.vue

@@ -1,27 +1,22 @@
 <template>
     <div class="page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
         <template v-if="isLogin && homeVisibility">
-            <!-- <div class="nav-bar">
-                <div class="item left">
-                    <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
-                    DeNet
-                </div>
-                <div class="item right" @click="showTransactions">
-                    <img :src="require('@/assets/svg/icon-option-list.svg')" />
-                    Transactions
-                </div>
-            </div> -->
-            <v-head :show_more="true" :show_state="'home'"></v-head>
+            <v-head :show_more="true" :show_state="'home'" :user_info="userInfo"></v-head>
             <div class="content">
-                <img :src="require('@/assets/svg/icon-money.svg')" class="icon-money" />
-                <div class="msg" v-show="walletWithdrawConfig.withdrawUSDPaypalFeeDesc">
-                    ({{ walletWithdrawConfig.withdrawUSDPaypalFeeDesc }})</div>
+                <div class="balance">
+                    <div class="wallet">
+                        <img :src="require('@/assets/svg/icon-home-wallet.svg')" />
+                        <font>Balance Valuation</font>
+                    </div>
+                    <div class="bill" @click="showTransactions">
+                        <img :src="require('@/assets/svg/icon-home-bill.svg')" />
+                    </div>
+                </div>
                 <div class="amount">${{ canWithdrawBalance }}</div>
                 <div class="area-btn">
                     <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
                     <div class="top-up-btn" @click="clickTopUp">Deposit</div>
                 </div>
-
             </div>
             <div class="tab-bar">
                 <div class="tab-item" :class="{ active: currentTabIndex == index }" v-for="(item, index) in tabList"
@@ -236,8 +231,16 @@ withdraw_info.paypal.wallet_withdraw_config = walletWithdrawConfig
 let moreTabList = ref([
     {
         icon: require("@/assets/svg/icon-twitter.svg"),
-        label: "Twitter contact",
+        label: "Twitter",
         href: 'https://twitter.com/denet2022'
+    }, {
+        icon: require("@/assets/svg/icon-discord.svg"),
+        label: "Discord",
+        href: 'https://discord.gg/wZSz9p8ddG'
+    }, {
+        icon: require("@/assets/svg/icon-telegram.svg"),
+        label: "Telegram",
+        href: 'https://t.me/denetpro'
     }
 ]);
 
@@ -408,11 +411,11 @@ const withdrawBack = () => {
 };
 
 
-// const showTransactions = () => {
+const showTransactions = () => {
 //     // homeVisibility.value = false;
 //     // transactionsVisibility.value = true;
-//     router.push('/transactions')
-// };
+    router.push('/transactions')
+};
 
 // const clickWithdraw = () => {
 //     if (isRequestWithdrawBalance.value) {
@@ -525,24 +528,50 @@ body {
     }
 
     .content {
-        margin-top: 30px;
-        text-align: center;
+        padding: 20px;
+        background-color: #F0F8FE;
 
         .icon-money {
             width: 70px;
             height: 70px;
         }
 
+        .balance {
+            display: flex;
+            justify-content: space-between;
+            .wallet {
+                img {
+                    width: 24px;
+                    height: 24px;
+                    margin-right: 6px;
+                    vertical-align: middle;
+                }
+                font {
+                    color: #000;
+                    font-size: 14px;
+                    font-weight: bold;
+                }
+            }
+            .bill {
+                img {
+                    width: 24px;
+                    height: 24px;
+                    cursor: pointer;
+                }
+            }
+        }
+
         .amount {
-            margin-top: 16px;
+            margin-top: 20px;
             margin-bottom: 20px;
             font-weight: 700;
-            font-size: 42px;
+            font-size: 36px;
+            line-height: 43px;
         }
 
         .area-btn {
             display: flex;
-            justify-content: center;
+            justify-content: space-between;
             font-weight: 600;
             font-size: 15px;
 
@@ -552,18 +581,18 @@ body {
                 color: #fff;
                 background: #1D9BF0;
                 border-radius: 100px;
-                width: 110px;
+                width: 165px;
                 height: 38px;
+                text-align: center;
                 margin-left: 8px;
                 line-height: 36px;
-
             }
 
             .withdraw-btn {
                 background: rgba(56, 154, 255, 0.01);
                 border: 1px solid #1D9BF0;
                 box-sizing: border-box;
-                width: 110px;
+                width: 165px;
                 font-size: 15px;
                 height: 38px;
                 text-align: center;
@@ -585,7 +614,6 @@ body {
     .tab-bar {
         display: flex;
         align-items: center;
-        margin-top: 25px;
         position: sticky;
         position: -webkit-sticky;
         top: 0px;
@@ -599,7 +627,7 @@ body {
             justify-content: center;
             padding: 17px 0;
             box-sizing: border-box;
-            border-bottom: 1px solid #d1d1d1;
+            border-bottom: 1px solid #ECECEC;
             cursor: pointer;
 
             .icon {
@@ -770,7 +798,7 @@ body {
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    border-bottom: 1px solid #d1d1d1;
+                    border-bottom: 1px solid #ECECEC;
                     box-sizing: border-box;
                     padding-right: 16px;
 

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است