Merge branch 'test' into dev_220318_test

src/logic/twitter.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { getChromeStorage, setChromeStorage } from '../uilts/chromeExtension.js'
+import { getChromeStorage, setChromeStorage, LANDING_PAGE } from '../uilts/chromeExtension.js'
 import { getTtwitterRequestToken, twitterLogin } from '../server/twitter.js'
 import { srcPublishSuccess } from '../http/publishApi'
 
@@ -41,36 +41,27 @@ export function backTwitterPinLoginCode(code) {
             }
         }
     })
-    chrome.cookies.getAll(
-        {
-            name: 'received_log',
-            url: 'https://de-net-test.piaoquantv.com'
-        }, (e = []) => {
-            let _str = '[]'
-            if (e.length > 0) {
-                _str = e[0].value
-            }
-            let _arr = JSON.parse(decodeURIComponent(_str))
-            let receivedIds = []
-            if (_arr.length > 0) {
-                for (let i in _arr) {
-                    receivedIds.push(_arr[i].receivedId)
-                }
+    chrome.cookies.getAll(LANDING_PAGE, (e = []) => {
+        let _str = '[]'
+        if (e.length > 0) {
+            _str = e[0].value
+        }
+        let _arr = JSON.parse(decodeURIComponent(_str))
+        let receivedIds = []
+        if (_arr.length > 0) {
+            for (let i in _arr) {
+                receivedIds.push(_arr[i].receivedId)
             }
-            // 发送请求
-            // token,code
-            twitterLogin(authToken, code, receivedIds).then(res => {
-                if (res.code == 0) {
-                    setChromeStorage({ userInfo: JSON.stringify(res.data) })
-                    // chrome.cookies.remove(
-                    //     {
-                    //         name: 'received_log',
-                    //         url: 'http:localhost:3000'
-                    //     }
-                    // )
-                }
-            })
         }
+        // 发送请求
+        // token,code
+        twitterLogin(authToken, code, receivedIds).then(res => {
+            if (res.code == 0) {
+                setChromeStorage({ userInfo: JSON.stringify(res.data) })
+                chrome.cookies.remove(LANDING_PAGE)
+            }
+        })
+    }
     )
 
 }
@@ -324,13 +315,13 @@ function _createBtnDom(port) {
     loadingImg.src = require("../assets/img/icon-btn-loading.png");
     loadingImg.style.cssText = 'width:20px;height: 20px;margin-right:3px;-webkit-animation:load 1.1s infinite linear;';
 
-    let style = document.createElement('style'); 
-    style.innerHTML=" @-webkit-keyframes load{from{ transform: rotate(0deg);} to{transform: rotate(360deg);}}"; 
-    document.getElementsByTagName('head').item(0).appendChild(style); 
+    let style = document.createElement('style');
+    style.innerHTML = " @-webkit-keyframes load{from{ transform: rotate(0deg);} to{transform: rotate(360deg);}}";
+    document.getElementsByTagName('head').item(0).appendChild(style);
 
     let deBtn = document.createElement('span');
     const shadowDiv = document.createElement('div');
-    deBtn.innerHTML  = '<span>DeNet</span>';
+    deBtn.innerHTML = '<span>DeNet</span>';
     deBtn.id = 'de-btn';
     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;';
 
@@ -409,7 +400,11 @@ function replaceDOMRedPacket(_dom, postId) {
     if (!_dom || _dom.querySelector('iframe')) {
         return
     }
-    _dom.innerHTML = ''
+    let _len = _dom.childNodes.length
+    for (let i = 0; i < _len; i++) {
+        _dom.children[i].style.display = 'none'
+    }
+
     let _iframe = document.createElement('iframe')
     _iframe.id = postId
     _iframe.src = chrome.runtime.getURL('/iframe/red-packet.html') + '?postId=' + postId;

src/manifest.development.json

@@ -21,7 +21,8 @@
         }
     ],
     "host_permissions": [
-        "*://*/*"
+        "*://*/*",
+        "https://de-net-test.piaoquantv.com"
       ],
     "permissions":[
         "tabs",

src/manifest.production.json

@@ -21,7 +21,8 @@
         }
     ],
     "host_permissions": [
-        "*://*/*"
+        "*://*/*",
+        "https://de-net-test.piaoquantv.com"
       ],
     "permissions":[
         "tabs",
@@ -37,8 +38,8 @@
     "web_accessible_resources": [
         {
           "resources": [
-            "/iframe/red-packet.html",
-            "/iframe/publish.html"
+            "/iframe/publish.html",
+            "/iframe/red-packet.html"
           ],
           "matches": [
             "<all_urls>"

src/uilts/chromeExtension.js

@@ -1,15 +1,69 @@
+export const LANDING_PAGE = {
+    name: 'received_log',
+    url: 'https://de-net-test.piaoquantv.com'
+}
+
 export function setChromeStorage(params) {
     chrome.storage.local.set(params)
 }
 
-export function getChromeStorage(key = '',callback) {
+export function getChromeStorage(key = '', callback) {
     let params = {}
     params[key] = ''
     chrome.storage.local.get(params, (item) => {
         if (item[key]) {
             callback(JSON.parse(item[key]))
-        }else{
+        } else {
             callback(null)
         }
     });
 }
+
+export function getChromeCookie({
+    name,
+    url
+}, callback) {
+    chrome.cookies.getAll(
+        {
+            name: name || '',
+            url: url || ''
+        }, (e = []) => {
+            let _str = '[]'
+            if (e.length > 0) {
+                _str = e[0].value
+            }
+            let _arr = JSON.parse(decodeURIComponent(_str)) || []
+            callback(_arr)
+        }
+    )
+}
+
+// 累加ChromeCookie
+export function concatChromeCookie({ name, url }, value_obj) {
+    chrome.cookies.getAll(
+        {
+            name: name || '',
+            url: url || ''
+        }, (e = []) => {
+            let _str = '[]'
+            if (e.length > 0) {
+                _str = e[0].value
+            }
+            let _arr = JSON.parse(decodeURIComponent(_str)) || []
+            _arr = _arr.concat(value_obj)
+
+            // 删除cookies
+            chrome.cookies.remove(LANDING_PAGE, () => {
+                chrome.cookies.set({
+                    expirationDate: new Date().getTime() / 10,
+                    name: name,
+                    url: url,
+                    value: encodeURIComponent(JSON.stringify(_arr)) || ''
+                }, (e) => {
+                    console.log(e)
+                })
+            }
+            )
+        }
+    )
+}

src/view/red-packet.vue

@@ -2,10 +2,7 @@
   <div class="content">
     <!-- open -->
     <div v-if="data.status == 'opened'" class="opened">
-      <div
-        class="header"
-        :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }"
-      >
+      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
         <div class="title">Awesome! You Will Get</div>
         <div class="money">
           <img :src="require('../assets/svg/icon-dollar.svg')" alt />
@@ -25,12 +22,8 @@
                 <div v-else class="btn" @click="clickFollowAll(item.relatedUsers)">Follow All</div>
               </div>
               <div class="item-follow-area">
-                <div
-                  class="item-follow"
-                  v-for="item2, i in item.relatedUsers"
-                  v-bind:key="i"
-                  @click="clickFollow(item2)"
-                >
+                <div class="item-follow" v-for="item2, i in item.relatedUsers" v-bind:key="i"
+                  @click="clickFollow(item2)">
                   <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
                   <img v-if="item2.finished" :src="require('../assets/svg/icon-true-ed.svg')" alt />
                   <img v-else :src="require('../assets/svg/icon-add.svg')" alt />
@@ -58,24 +51,14 @@
         </div>
       </div>
       <div class="people" @click="clickRoad">
-        <div
-          class="txt"
-        >Total ${{ data.detail.amountValue }} USD，{{ data.detail.finishCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
+        <div class="txt">Total ${{ data.detail.amountValue }} USD，{{ data.detail.finishCount || 0 }}/{{
+          data.detail.totalCount || 0
+        }} People Got</div>
         <div class="right">
-          <template v-for="item, i in data.detail.allReceived" v-bind:key="i">
-            <img :src="item.simpleUserInfoVO.avatarUrl" alt style="right: 14px;" v-if="i == 0" />
-            <img
-              :src="item.simpleUserInfoVO.avatarUrl"
-              alt
-              :style="{ right: `${i * 16 + 14}px` }"
-              v-if="i < 2 && item.simpleUserInfoVO.avatarUrl"
-            />
-            <img
-              v-else-if="i < 2"
-              :src="require('../assets/svg/icon-twitter.svg')"
-              alt
-              :style="{ right: `${i * 16 + 14}px` }"
-            />
+          <template v-for="item, i in data.detail.allReceived.slice(0, 3)" v-bind:key="i">
+            <img :src="item.simpleUserInfoVO.avatarUrl" alt :style="{ right: `${i * 16 + 14}px` }"
+              v-if="item.simpleUserInfoVO.avatarUrl" />
+            <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt :style="{ right: `${i * 16 + 14}px` }" />
           </template>
           <img :src="require('../assets/svg/icon-right.svg')" alt class="road" />
         </div>
@@ -90,10 +73,7 @@
     </div>
     <!-- success -->
     <div v-else-if="data.status == 'success'" class="success">
-      <div
-        class="header"
-        :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }"
-      >
+      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
         <div class="money">
           <img :src="require('../assets/svg/icon-dollar.svg')" alt />
           <span class="big">{{ data.money / 100 }}</span>
@@ -114,10 +94,7 @@
           <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
           <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
           <div class="luck-content">
-            <div
-              class="luck-title"
-              v-if="item.simpleUserInfoVO.nickName"
-            >{{ item.simpleUserInfoVO.nickName }}</div>
+            <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
             <div class="luck-title" v-else>Twitter User</div>
 
             <div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
@@ -153,10 +130,7 @@
           <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
           <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
           <div class="luck-content">
-            <div
-              class="luck-title"
-              v-if="item.simpleUserInfoVO.nickName"
-            >{{ item.simpleUserInfoVO.nickName }}</div>
+            <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
             <div class="luck-title" v-else>Twitter User</div>
             <div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
           </div>
@@ -175,10 +149,7 @@
 
     <!-- 红包被领完了 -->
     <div v-else-if="data.status == 'close'" class="close">
-      <div
-        class="header"
-        :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }"
-      >
+      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
         <div class="close-title">{{ data.close_title }}</div>
       </div>
       <div class="luck-list-title">
@@ -187,9 +158,11 @@
       </div>
       <div class="luck-list">
         <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
-          <img :src="item.simpleUserInfoVO.avatarUrl" alt />
+          <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
+          <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
           <div class="luck-content">
-            <div class="luck-title">{{ item.simpleUserInfoVO.nickName }}</div>
+            <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
+            <div class="luck-title" v-else>Twitter User</div>
             <div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
           </div>
           <div class="luck-money">
@@ -208,8 +181,7 @@
     <div v-else-if="data.status == 'error'" class="error">
       <img :src="require('../assets/svg/icon-error.svg')" alt />
       <div class="txt">
-        oops, new accounts cannot participate in this event,
-        better luck next time!
+        {{ data.error_txt }}
       </div>
     </div>
   </div>
@@ -226,6 +198,7 @@ export default {
 import { onMounted, reactive } from "vue";
 import { getPostDetail, getRedPacket, finishRedPacket } from '../http/redPacket.js'
 import { getQueryString } from '../uilts/help.js'
+import { getChromeCookie, concatChromeCookie, getChromeStorage, LANDING_PAGE } from '../uilts/chromeExtension.js'
 var moment = require('moment');
 
 let data = reactive({
@@ -233,6 +206,8 @@ let data = reactive({
   detail: {},
   srcContentId: '',
   close_title: 'Better luck next time!',
+  error_txt: `oops, new accounts cannot participate in this event,
+        better luck next time!`,
   receiveAmount: 0,
   money: 0,
   // 状态
@@ -313,13 +288,28 @@ function init() {
               data.close_title = res.msg
             }
           } else {
-            data.status = 'not-open'
+            // 判断本地之前是否领取过这个红包
+            getChromeCookie(LANDING_PAGE, (res_arr) => {
+              if (res_arr.length > 0) {
+                let _res = res_arr.filter((item) => { return item.postId == data.postId })[0] || null
+                // 本地领取过红包
+                if (_res) {
+                  data.status = 'opened'
+                  data.money = _res.receiveAmount
+                } else {
+                  data.status = 'not-open'
+                }
+              } else {
+                data.status = 'not-open'
+              }
+            })
           }
           data.detail.taskCondition = JSON.parse(data.detail.taskCondition)
           data.detail.amountValue = showLastTwoPlace(data.detail.amountValue)
           data.detail.receiveAmountValue = showLastTwoPlace(data.detail.receiveAmountValue)
-          data.money = data.detail.myReceived.amountValue
-
+          if (data.detail.myReceived) {
+            data.money = data.detail.myReceived.amountValue
+          }
           console.log(data.detail)
           getValidity()
         }
@@ -337,16 +327,42 @@ onMounted(() => {
   init()
 })
 
+// 点击领取
 function clickOpenRedPacket() {
+  getChromeStorage("userInfo", (_res) => {
+    // 1.没有登陆
+    if (!_res) {
+      // 2.查看cookie里是否有  
+      getChromeCookie(LANDING_PAGE, (res_arr) => {
+        // 
+        if (res_arr.length > 0) {
+          let _res = res_arr.filter((item) => { return item.postId == data.postId })[0] || null
+          if (_res) {
+            data.status = 'opened'
+            data.money = _res.receiveAmount
+          }
+        } else {
+          handleRedPacket()
+        }
+      })
+    } else {
+      handleRedPacket()
+    }
+  })
+}
+
+function handleRedPacket() {
   getRedPacket({
     params: {
       postId: data.postId
     }
   }).then((res) => {
+
     switch (res.code.toString()) {
       case "0":
         data.status = 'opened'
         data.money = res.data.receiveAmount
+        concatChromeCookie(LANDING_PAGE, { receivedId: res.data.receivedId, postId: data.postId, receiveAmount: res.data.receiveAmount })
         init()
         break
       case "2008":
@@ -357,7 +373,25 @@ function clickOpenRedPacket() {
   })
 }
 
+
 function clickGetGiveways() {
+  // 
+  getChromeStorage('userInfo', (res) => {
+    // 
+    if (!res) {
+      chrome.runtime.sendMessage(
+        { method: "POPUP_LOGIN", data: "" },
+        (response) => {
+          console.log("res", response);
+        }
+      );
+    } else {
+      handleFinishRedPacket()
+    }
+  })
+}
+
+function handleFinishRedPacket() {
   finishRedPacket({
     params: {
       postId: data.postId
@@ -423,6 +457,7 @@ body {
   margin: 0;
   padding: 0;
 }
+
 .content {
   width: 375px;
   height: 500px;
@@ -430,13 +465,16 @@ body {
   border-radius: 11px;
   font-family: "SF Pro Display";
   font-style: normal;
+
   .error {
     text-align: center;
+
     img {
       width: 160px;
       height: 160px;
       margin-top: 80px;
     }
+
     .txt {
       font-weight: 500;
       font-size: 22px;
@@ -447,6 +485,7 @@ body {
       margin: 34px 44px 0 44px;
     }
   }
+
   .success,
   .close,
   .luck-peopel-list {
@@ -455,6 +494,10 @@ body {
     height: 100%;
     border-radius: 11px;
     background: #fff;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
     .close-title {
       font-weight: 600;
       font-size: 27px;
@@ -464,14 +507,17 @@ body {
 
       color: #ffffff;
     }
+
     .head {
       padding: 14px 16px;
+
       img {
         cursor: pointer;
         width: 24px;
         height: 24px;
       }
     }
+
     .header {
       text-align: center;
       height: 120px;
@@ -480,6 +526,7 @@ body {
       padding-top: 30px;
       background-size: 100% 100%;
       position: relative;
+
       .done {
         cursor: pointer;
         position: absolute;
@@ -498,18 +545,21 @@ body {
           color: #000000;
           font-size: 14px;
         }
+
         .icon-done {
           width: 24px;
           height: 24px;
           margin-left: 28px;
           margin-right: 10px;
         }
+
         .icon-right {
           margin-left: 5px;
           width: 7px;
           height: 14px;
         }
       }
+
       .title {
         color: #fff7e4;
         opacity: 0.6;
@@ -519,13 +569,16 @@ body {
         line-height: 21px;
         letter-spacing: -0.3px;
       }
+
       .money {
         margin-top: 16px;
+
         img {
           width: 40px;
           height: 40px;
           margin-right: 9px;
         }
+
         .big {
           font-weight: 700;
           font-size: 46px;
@@ -536,6 +589,7 @@ body {
 
           color: #fff8e6;
         }
+
         .small {
           margin-left: 4px;
 
@@ -550,6 +604,7 @@ body {
         }
       }
     }
+
     .luck-list-title {
       /*      margin-top: 47px;*/
       padding: 0 16px;
@@ -558,28 +613,35 @@ body {
       display: flex;
       justify-content: space-between;
     }
+
     .luck-list {
       background: #fff;
+      overflow: auto;
+
       .luck-item {
         display: flex;
         padding: 12px 16px;
         border-top: 1px solid #d1d1d1;
         justify-content: space-between;
         position: relative;
+
         img:first-child {
           border-radius: 50%;
         }
+
         .luck-king {
           position: absolute;
           top: 36px;
           right: 16px;
           display: flex;
           align-items: center;
+
           img {
             width: 22px;
             height: 19px;
             margin: 0;
           }
+
           span {
             font-weight: 500;
             font-size: 12px;
@@ -588,19 +650,23 @@ body {
             color: #f5b945;
           }
         }
+
         img {
           width: 42px;
           height: 42px;
           margin-right: 12px;
         }
+
         .luck-content {
           flex: auto;
+
           .luck-title {
             font-weight: 500;
             font-size: 16px;
             letter-spacing: 0.3px;
             color: #444444;
           }
+
           .luck-time {
             font-weight: 400;
             font-size: 12px;
@@ -609,15 +675,18 @@ body {
             color: #9b9b9b;
           }
         }
+
         .luck-money {
           display: flex;
           height: 17px;
           align-items: center;
+
           img {
             width: 14px;
             height: 14px;
             margin-right: 6px;
           }
+
           .luck-money-txt {
             font-weight: 500;
             font-size: 14px;
@@ -632,11 +701,13 @@ body {
       }
     }
   }
+
   .success {
     .luck-list-title {
       margin-top: 47px;
     }
   }
+
   .opened {
     filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
     width: 100%;
@@ -644,6 +715,7 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
     .header {
       text-align: center;
       height: 120px;
@@ -651,6 +723,7 @@ body {
       background: #fff;
       padding-top: 30px;
       background-size: 100% 100%;
+
       .title {
         color: #fff7e4;
         opacity: 0.6;
@@ -660,13 +733,16 @@ body {
         line-height: 21px;
         letter-spacing: -0.3px;
       }
+
       .money {
         margin-top: 16px;
+
         img {
           margin-right: 9px;
           width: 40px;
           height: 40px;
         }
+
         .big {
           font-weight: 700;
           font-size: 46px;
@@ -677,6 +753,7 @@ body {
 
           color: #fff8e6;
         }
+
         .small {
           margin-left: 4px;
           font-weight: 700;
@@ -690,6 +767,7 @@ body {
         }
       }
     }
+
     .list {
       padding: 0 16px 0 16px;
       background: #ffffff;
@@ -700,23 +778,28 @@ body {
         align-items: center;
         min-height: 50px;
         border-bottom: 1px solid #f0f0f0;
+
         img {
           width: 24px;
           height: 24px;
         }
+
         .item-content {
           flex: 1;
+
           .item-follow-title {
             display: flex;
             align-items: center;
             margin-top: 20px;
             margin-bottom: 11px;
             position: relative;
+
             .btn {
               position: absolute;
               right: 0;
             }
           }
+
           .item-title {
             flex: 1;
             margin-left: 10px;
@@ -725,9 +808,11 @@ body {
             letter-spacing: 0.3px;
             color: #000000;
           }
+
           .item-follow-area {
             display: flex;
             margin-bottom: 13px;
+
             .item-follow {
               cursor: pointer;
               border: 1px solid #ebebeb;
@@ -736,16 +821,19 @@ body {
               margin-right: 5px;
               display: flex;
               align-items: center;
+
               .finished {
                 text-decoration: line-through;
                 color: #949494;
               }
+
               span {
                 margin-left: 8px;
                 margin-right: 2px;
                 color: #389aff;
                 opacity: 1;
               }
+
               img {
                 width: 16px;
                 height: 16px;
@@ -753,6 +841,7 @@ body {
               }
             }
           }
+
           span {
             font-weight: 400;
             font-size: 11px;
@@ -764,6 +853,7 @@ body {
             opacity: 0.4;
           }
         }
+
         .btn {
           width: 72px;
           height: 29px;
@@ -777,6 +867,7 @@ body {
         }
       }
     }
+
     .people {
       cursor: pointer;
       padding-left: 16px;
@@ -788,6 +879,7 @@ body {
       display: flex;
       align-items: center;
       justify-content: space-between;
+
       .txt {
         font-weight: 400;
         font-size: 12px;
@@ -796,6 +888,7 @@ body {
         color: #000000;
         opacity: 0.4;
       }
+
       .right {
         flex: 1;
         cursor: pointer;
@@ -811,6 +904,7 @@ body {
           border: 2px solid #fff;
           border-radius: 50%;
         }
+
         .road {
           right: 0;
           width: 7px;
@@ -818,10 +912,12 @@ body {
         }
       }
     }
+
     .footer {
       background: #ffffff;
       display: flex;
       padding: 20px 22px 20px 17px;
+
       .first {
         flex: 1;
 
@@ -834,6 +930,7 @@ body {
           opacity: 0.4;
           margin: 2px 0 8px 0;
         }
+
         .time {
           font-weight: 500;
           font-size: 13px;
@@ -843,6 +940,7 @@ body {
           color: #000000;
         }
       }
+
       .btn {
         background: #ef4545;
         border-radius: 100px;
@@ -857,18 +955,22 @@ body {
       }
     }
   }
+
   .not-open {
     filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
     position: relative;
+
     img {
       width: 100%;
     }
+
     .up {
       position: absolute;
       top: 0;
       box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
       z-index: 1;
     }
+
     .down {
       position: absolute;
       top: 253px;