[edit][20秒消失]

src/view/content/message/index.vue

@@ -3,14 +3,16 @@
         <template v-for="item in state.list" :key="item.createTimestamp">
             <div class="denet-message-area" @click="clickItem(item)" v-if="item.bizType == 2">
                 <img :src="require('@/assets/img/icon-message-fail.png')" alt />
-                <span>You were not selected from {{item.bizData.twitterAccount}}'s giveaway events... Click to see more giveaways!</span>
+                <span>You were not selected from {{ item.bizData.twitterAccount }}'s giveaway events... Click to see more
+                    giveaways!</span>
                 <div class="denet-message-close" @click.stop="clickClose(item)">
                     <img :src="require('@/assets/img/icon-message-close.png')" alt />
                 </div>
             </div>
             <div class="denet-message-area" @click="clickItem(item)" v-if="item.bizType == 1">
                 <img :src="require('@/assets/img/icon-message-win.png')" alt />
-                <span>Congratulations! You won <b class="denet-message-money"> {{getPrize(item.bizData)}}</b> from {{item.bizData.twitterAccount}}'s giveaway!🎉</span>
+                <span>Congratulations! You won <b class="denet-message-money"> {{ getPrize(item.bizData) }}</b> from
+                    {{ item.bizData.twitterAccount }}'s giveaway!🎉</span>
                 <div class="denet-message-close" @click.stop="clickClose(item)">
                     <img :src="require('@/assets/img/icon-message-close.png')" alt />
                 </div>
@@ -35,16 +37,16 @@ let state = reactive({
 let timer, now_time
 
 // 获取奖励
-const getPrize = (item) => { 
+const getPrize = (item) => {
     const { lotteryMoney, lotteryTokenSymbol, twitterAccount, rewardType, customizedReward } = item;
     if (rewardType === RewardType.custom) {
         return customizedReward;
     } else {
-        return `${item.bizData.lotteryMoney} ${item.bizData.lotteryTokenSymbol}` 
+        return `${item.bizData.lotteryMoney} ${item.bizData.lotteryTokenSymbol}`
     }
 }
 
-// 过5秒消失逻辑
+// 过20秒消失逻辑
 const overTimeClose = () => {
     if (timer) {
         return
@@ -56,7 +58,7 @@ const overTimeClose = () => {
         }
         now_time = new Date().getTime()
         for (let i in state.list) {
-            if ((now_time - state.list[i].read_time) >= 5000) {
+            if ((now_time - state.list[i].read_time) >= 20000) {
                 state.list.splice(i, 1)
             }
         }
@@ -121,9 +123,10 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
 </script>
 
 <style lang="scss" >
-#denet_message{
+#denet_message {
     text-align: left;
 }
+
 .denet-message {
     position: fixed;
     max-height: 100%;
@@ -131,7 +134,7 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
     top: 0;
     right: 0;
     width: 500px;
-    z-index: 9999;    
+    z-index: 9999;
     text-align: left;
 
     &-area {
@@ -147,7 +150,7 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         margin-left: 129px;
         animation: right_to_left 1s;
         text-align: left;
-        
+
         img:first-child {
             width: 40px;
             height: 40px;