[change] style

src/assets/svg/icon-like.svg

@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.1868 4.62636L15.1868 4.62632C13.8208 3.89078 12.1886 4.2797 11.046 5.42227M15.1868 4.62636L11.046 5.42227M15.1868 4.62636L15.1944 4.63034M15.1868 4.62636L15.1944 4.63034M11.046 5.42227L10.5169 5.9514M11.046 5.42227L10.5169 5.9514M15.1944 4.63034C17.5242 5.85072 17.8338 8.69593 16.3253 10.3239L15.6735 10.9757L12.4987 14.1505L10.3822 16.267C10.2295 16.4197 10.1141 16.4442 10.0527 16.4442C9.9913 16.4442 9.8759 16.4197 9.72318 16.267L7.60666 14.1505L4.43189 10.9757L3.77048 10.3143C2.14695 8.69078 2.44662 5.85679 4.77231 4.63369C6.04636 4.00053 7.81466 4.30985 8.92708 5.42227L9.45741 4.89194L8.92708 5.42227L9.45621 5.9514L9.98654 6.48173M15.1944 4.63034L9.98654 6.48173M9.98654 6.48173L10.5169 5.9514M9.98654 6.48173L10.5169 5.9514" fill="#389AFF" fill-opacity="0.01" stroke="black" stroke-width="1.5"/>
+<path d="M15.1868 4.45988L15.1868 4.45992L15.1944 4.4639C17.5169 5.68044 17.8395 8.68879 16.3253 10.3235L15.6735 10.9752L12.4987 14.15L10.3822 16.2665C10.2295 16.4193 10.1141 16.4437 10.0527 16.4437C9.9913 16.4437 9.8759 16.4193 9.72318 16.2665L7.60666 14.15L4.43189 10.9752L3.77048 10.3138C2.14695 8.69031 2.44662 5.85632 4.77231 4.63321C6.04636 4.00006 7.81466 4.30937 8.92708 5.4218L9.45621 5.95092L9.98654 6.48126L10.5169 5.95092L11.046 5.4218C12.2324 4.23543 13.8646 3.74791 15.1868 4.45988Z" fill="#389AFF" fill-opacity="0.01" stroke="black" stroke-width="1.5"/>
 </svg>

src/logic/twitter.js

@@ -332,7 +332,7 @@ function _createBtnDom(port) {
     const shadowDiv = document.createElement('div');
     deBtn.innerHTML  = '<span>DeNet</span>';
     deBtn.id = 'de-btn';
-    deBtn.style.cssText = 'width:220px;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:15px;font-weight:700;border-radius:100px;cursor: pointer;display: flex;align-items: center;justify-content: center;';
+    deBtn.style.cssText = 'width:90%;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:17px;font-weight:700;border-radius:100px;cursor: pointer;display: flex;align-items: center;justify-content: center;';
 
     const deBtn1 = document.createElement('img');
     let src = require("../assets/img/icon-gift-pack.png");
@@ -361,14 +361,14 @@ function _createBtnDom(port) {
     dom.loadingImg = loadingImg;
 }
 
-/* setInterval(() => {
+setInterval(() => {
     let toolBar = document.querySelector('div[data-testid="toolBar"]');
     let innerDeIcon = document.getElementById('de-icon');
     if (toolBar && !innerDeIcon) {
-        // let dialogScheduleBtn = _getScheduleDom(false);
-        // _addDeNetEditBtn(dialogScheduleBtn, deBtn1);
+        let dialogScheduleBtn = _getScheduleDom(false);
+        _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn1);
     }
-}, 800) */
+}, 800)
 
 function parseDOMRedPacket() {
     let _dom = null

src/view/components/followInput.vue

@@ -204,7 +204,6 @@ const onUserMouseLeave = (params, index) => {
         flex-wrap: wrap;
         padding: 0px 0 14px 18px;
         box-sizing: border-box;
-        border-left: 1px solid #ECECEC;
 
         .icon-add{
             width: 24px;

src/view/components/give-dialog.vue

@@ -38,7 +38,7 @@
                                         v-model="baseFormData.amountValue"
                                         placeholder="Amount entered"
                                         @input = "onUsdInput"
-                                        :input-style="{ 'box-shadow': 'none','padding': '1px', 'width': '110px' }"/>
+                                        :input-style="{ 'box-shadow': 'none','padding': '1px', 'width': '110px', 'text-align': 'right', 'font-size' : '15px', 'color': '#000' }"/>
                                 </div>
                                 <div class="item">
                                     <div class="label">
@@ -50,7 +50,8 @@
                                         v-model="baseFormData.totalCount"
                                         placeholder="Quantity entered"
                                         @input = "onCountInput"
-                                        :input-style="{ 'box-shadow': 'none','padding': '1px', 'width': '110px'}"/>
+                                        :input-style="{ 'box-shadow': 'none','padding': '1px', 'width': '120px',
+                                        'text-align': 'right', 'font-size' : '15px', 'color': '#000'}"/>
                                 </div>
                             </div>
                             <div class="form-label">
@@ -138,8 +139,8 @@ let publishRes = reactive({})
 let visible = ref(false);
 let showPreview = ref(false);
 let openAntiBot = ref(false);
-let dialogHeight = ref(620);
-let previewDialogHeight = ref(880);
+let dialogHeight = ref(680);
+let previewDialogHeight = ref(860);
 let submitIng = ref(false);
 let atUserList = ref([]);
 let finalAmountData = ref({
@@ -208,14 +209,14 @@ const close = () => {
 
 const setPreviewDialogHeight = () => {
     let clientHeight = document.documentElement.clientHeight;
-    let gapSafe = 80;
+    let gapSafe = 40;
 
     if(previewDialogHeight.value > clientHeight - gapSafe) {
         previewDialogHeight.value = clientHeight - gapSafe;
     }
 };
 
-const getPayAmount = (amountValue) => {
+const getPayAmount = (amountValue, cb) => {
     payCalcFee({
         params : {
             amountValue,
@@ -224,6 +225,7 @@ const getPayAmount = (amountValue) => {
         }
     }).then(res => {
         if(res.code == 0) {
+            cb && cb(res.data);
             let {finalAmountValue} = res.data;
             if(finalAmountValue >= 100) {
                 res.data.finalAmountValue = finalAmountValue / 100;
@@ -242,7 +244,8 @@ const confirm = () => {
         return;
     }
     amountValue = amountValue * 100; // 元转分
-    formList[0]['text'] = atUserList.value
+    formList[0]['text'] = atUserList.value;
+
     let finishConditions = [];
     for(let i = 0; i < formList.length; i++) {
         let item = {};
@@ -269,27 +272,30 @@ const confirm = () => {
     if(amountValue / totalCount < 1) {
         return;
     }
-    let data = {
-        params: {
-            postBizData: JSON.stringify(formData),
-            postSrc: 1,  //1 twitter
-            postType: 1, //1 红包
-        }
-    }
+
     submitIng.value = true;
-    getPayAmount(amountValue);
-    postPublish(data).then((res) => {
-        submitIng.value = false;
-        if(res.code == 0) {
-            publishRes = res.data;
-            // setPreviewDialogHeight();
-            showPreview.value = true;
-        } else {
-            console.log(res);
+    getPayAmount(amountValue, (res) => {
+        formData['payAmountValue'] = res.finalAmountValue;
+        let data = {
+            params: {
+                postBizData: JSON.stringify(formData),
+                postSrc: 1,  //1 twitter
+                postType: 1, //1 红包
+            }
         }
-    }).catch(err => {
-        console.log(err);
-    })
+        postPublish(data).then((res) => {
+            submitIng.value = false;
+                if(res.code == 0) {
+                    publishRes = res.data;
+                    setPreviewDialogHeight();
+                    showPreview.value = true;
+                } else {
+                    console.log(res);
+                }
+            }).catch(err => {
+                console.log(err);
+            })
+        });
 };
 
 const initParams = () => {
@@ -394,6 +400,11 @@ onMounted(() => {
             .left {
                 display: flex;
 
+                .title {
+                    font-size: 16px;
+                    font-weight: 500;
+                }
+
                 .close-btn {
                     display: flex;
                     align-items: center;
@@ -460,7 +471,7 @@ onMounted(() => {
                         align-items: center;
 
                         .item {
-                            width: 260px;
+                            width: 270px;
                             height: 60px;
                             box-sizing: border-box;
                             border-radius: 15px;
@@ -511,6 +522,8 @@ onMounted(() => {
                                 min-width: 88px;
                                 display: flex;
                                 align-items: center;
+                                font-size: 15px;
+                                font-weight: 500;
                                 .icon {
                                     margin-right: 10px;
                                 }
@@ -535,13 +548,15 @@ onMounted(() => {
                     justify-content: space-between;
                     box-sizing: border-box;
                     border-radius: 15px;
-                    padding: 0 15px;
+                    padding: 0 18px;
                     margin-top: 14px;
                     box-shadow: 0px 3px 27px 0px #0000001A;
 
                     .label {
                         display: flex;
                         align-items: center ;
+                        font-size: 15px;
+                        font-weight: 500;
                         .icon-bot {
                             margin-right: 8px;
                         }
@@ -596,6 +611,8 @@ onMounted(() => {
                         display: flex;
                         align-items: center;
                         justify-content: center;
+                        font-size: 16px;
+                        font-weight: 500;
                         cursor: pointer;
                         
                         .icon-loading {

src/view/components/paypal-button.vue

@@ -80,7 +80,7 @@ onMounted(() => {
 
         .row {
             font-weight: 600;
-            font-size: 17px;
+            font-size: 16px;
             color: #389AFF;
             span {
                 display: inline-block;
@@ -90,7 +90,7 @@ onMounted(() => {
         }
         .msg {
             font-size: 13px;
-            color: rgba($color: #000000, $alpha: .54);
+            color: #898989;
         }
     }
 

src/view/components/preview-card.vue

@@ -109,7 +109,6 @@ onMounted(() => {
     height: 100%;
     padding: 10px 16px;
     box-sizing: border-box;
-    background: #f5f5f5;
     border-bottom-right-radius: 16px;
     overflow-y: scroll;
     padding-bottom: 80px;
@@ -121,11 +120,12 @@ onMounted(() => {
 
     .card-container {
         width: 100%;
+        height: fit-content;
         background: #ffffff;
         border: 1px solid #e6e6e6;
         box-sizing: border-box;
         border-radius: 20px;
-        padding: 16px;
+        padding: 16px 16px 50px 16px;
         position: relative;
 
         .img-preview {
@@ -139,8 +139,8 @@ onMounted(() => {
             display: flex;
 
             .avatar {
-                width: 50px;
-                height: 50px;
+                width: 47px;
+                height: 47px;
                 border-radius: 50%;
                 object-fit: cover;
                 margin-right: 13px;
@@ -171,7 +171,6 @@ onMounted(() => {
                 z-index: 100;
                 display: flex;
                 align-items: center;
-                font-weight: 600;
                 font-size: 16px;
                 color: #FFF2D3;
                 width: max-content;
@@ -214,7 +213,7 @@ onMounted(() => {
                     .amount {
                         font-weight: bolder;
                         font-size: 40px;
-                        color: #F5CD77;
+                        color: #FFEABC;
                     }
                     .desc {
                         font-weight: 700;
@@ -236,7 +235,6 @@ onMounted(() => {
         box-sizing: border-box;
 
         .title {
-            font-weight: 500;
             font-size: 14px;
             margin-bottom: 15px;
         }
@@ -253,7 +251,6 @@ onMounted(() => {
             }
 
             .text {
-                font-weight: 500;
                 font-size: 14px;
                 display: flex;
                 align-items: center;