[change] style

library/paypal.html

@@ -18,6 +18,7 @@
                 width: 100%;
                 background: white;
                 color: black;
+                overflow: hidden;
             }
 
             h2 {

src/view/components/give-dialog.vue

@@ -3,25 +3,48 @@
         <div class="content" 
             :style="{height: showPreview ? previewDialogHeight + 'px' : dialogHeight +'px' }">
             <div class="head">
-                <div class="close-btn" @click="close">
-                    {{ showPreview ? "🔙" : "× " }}
+                <div class="left">
+                    <div class="close-btn" @click="close">
+                        <img class="icon-close" v-if="!showPreview" :src="require('../../assets/svg/icon-close.svg')" />
+                        <img class="icon-close" v-else :src="require('../../assets/svg/icon-back.svg')" />
+                    </div>
+                    <div class="title">
+                        Giveaways
+                    </div>
                 </div>
+                <img class="icon-question" :src="require('../../assets/svg/icon-question.svg')">
             </div>
             <div class="body">
-                <div class="left"></div>
+                <div class="left">
+                    <div class="gift-pack-wrapper">
+                        <img class="icon" :src="require('../../assets/svg/icon-gift-pack.svg')">
+                    </div>
+                    <div class="bottom">
+                        <img class="icon" :src="require('../../assets/svg/icon-wallet.svg')">
+                        <img class="icon" :src="require('../../assets/svg/icon-setting.svg')">
+                    </div>
+                </div>
                 <div class="right">
                     <template v-if="!showPreview">
                         <div class="form-wrapper">
                             <div class="form-base">
                                 <div class="item">
-                                    <div class="label">USD</div>
+                                    <div class="label">
+                                        <img class="icon"
+                                            :src="require('../../assets/svg/icon-usd.svg')" />
+                                        USD
+                                    </div>
                                     <el-input
                                         v-model="baseFormData.amount"
                                         placeholder="$0.00"
                                         :input-style="{ 'box-shadow': 'none' }"/>
                                 </div>
                                 <div class="item">
-                                    <div class="label">Quantity</div>
+                                    <div class="label">
+                                        <img class="icon"
+                                            :src="require('../../assets/svg/icon-quantity.svg')" />
+                                        Quantity
+                                        </div>
                                     <el-input
                                         v-model="baseFormData.quantity"
                                         placeholder="Enter quantity"
@@ -30,9 +53,14 @@
                             </div>
                             <div class="form-require">
                                 <div class="bar">
-                                    <div class="label">Require</div>
+                                    <div class="label">
+                                        <img class="icon"
+                                            :src="require('../../assets/svg/icon-require.svg')" />
+                                        Require
+                                    </div>
                                     <el-dropdown trigger="click">
-                                        <div class="button">＋</div>
+                                        <img class="icon-button"
+                                            :src="require('../../assets/svg/icon-add-option.svg')" />
                                         <template #dropdown>
                                             <el-dropdown-menu>
                                                 <el-dropdown-item
@@ -50,13 +78,15 @@
                                     v-for="(item, index) in formList"
                                     :key="index">
                                     <div class="label">
+                                        <img class="icon"
+                                            :src="item.icon" />
                                         {{ item.type }}
                                     </div>
                                     <div class="control">
                                         <el-input
                                             v-model="formData[item.type]"
                                             v-if="item.type == 'Follow'"
-                                            placeholder="Please input"
+                                            placeholder="Enter account number"
                                             :input-style="{
                                                 'box-shadow': 'none',
                                             }"/>
@@ -67,11 +97,9 @@
                                             {{formData[item.type]? "✅": "❌"}}
                                         </div>
                                     </div>
-                                    <div
-                                        class="btn"
-                                        @click="removeOption(item, index)">
-                                        ×
-                                    </div>
+                                    <img class="icon-remove-button"
+                                        @click="removeOption(item, index)"
+                                        :src="require('../../assets/svg/icon-remove-option.svg')" />
                                 </div>
                             </div>
                         </div>
@@ -110,15 +138,33 @@ let formData = reactive({
 });
 
 let optionsList = reactive([
-    { type: "Follow" },
-    { type: "Like" },
-    { type: "Retweet" },
+    { 
+        type: "Follow", 
+        icon: require('../../assets/svg/icon-follow.svg')
+    },
+    { 
+        type: "Like",
+        icon: require('../../assets/svg/icon-like.svg')
+    },
+    { 
+        type: "Retweet",
+        icon: require('../../assets/svg/icon-retweet.svg')
+    },
 ]);
 
 let formList = reactive([
-    { type: "Follow" },
-    { type: "Like" },
-    { type: "Retweet" },
+    { 
+        type: "Follow", 
+        icon: require('../../assets/svg/icon-follow.svg')
+    },
+    { 
+        type: "Like",
+        icon: require('../../assets/svg/icon-like.svg')
+    },
+    { 
+        type: "Retweet",
+        icon: require('../../assets/svg/icon-retweet.svg')
+    },
 ]);
 
 const props = defineProps({
@@ -215,11 +261,22 @@ onMounted(() => {
             box-sizing: border-box;
             display: flex;
             align-items: center;
+            justify-content: space-between;
+            padding: 0 14px;
+
+            .left {
+                display: flex;
+
+                .close-btn {
+                    display: flex;
+                    align-items: center;
+                    width: max-content;
+                    margin-right: 12px;
+                    cursor: pointer;
+                }
+            }
 
-            .close-btn {
-                width: max-content;
-                font-size: 20px;
-                margin-left: 20px;
+            .icon-question {
                 cursor: pointer;
             }
         }
@@ -236,6 +293,26 @@ onMounted(() => {
 
             .left {
                 width: 50px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                align-items: center;
+
+                .gift-pack-wrapper {
+                    width: 100%;
+                    height: 54px;
+                    background: #F5F5F5;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                .bottom {
+                    .icon {
+                        display: block;
+                        margin-bottom: 26px;
+                    }
+                }
             }
 
             .right {
@@ -254,7 +331,7 @@ onMounted(() => {
                         align-items: center;
 
                         .item {
-                            width: 220px;
+                            width: 250px;
                             height: 60px;
                             border: 1px solid #e1e1e1;
                             box-sizing: border-box;
@@ -267,10 +344,13 @@ onMounted(() => {
                             .label {
                                 font-weight: 500;
                                 font-size: 15px;
+                                display: flex;
+                                align-items: center;
 
-                                .img {
+                                .icon {
                                     width: 20px;
                                     height: 20px;
+                                    margin-right: 8px;
                                 }
                             }
                         }
@@ -290,15 +370,16 @@ onMounted(() => {
                             justify-content: space-between;
                             line-height: 50px;
 
-                            .button {
-                                width: 22px;
-                                height: 22px;
-                                background: #4a99e9;
-                                border-radius: 5px;
+                            .label {
                                 display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                color: #fff;
+                                .icon {
+                                    margin-right: 8px;
+                                }
+                            }
+
+                            .icon-button {
+                                width: 28px;
+                                height: 28px;
                                 cursor: pointer;
                             }
                         }
@@ -314,6 +395,11 @@ onMounted(() => {
                             .label {
                                 width: 100px;
                                 color: rgba(0, 0, 0, 0.6);
+                                display: flex;
+                                align-items: center;
+                                .icon {
+                                    margin-right: 10px;
+                                }
                             }
 
                             .control {
@@ -330,7 +416,7 @@ onMounted(() => {
                                 }
                             }
 
-                            .btn {
+                            .icon-remove-button {
                                 cursor: pointer;
                             }
                         }