From 1b16d983eaa5519dca1d9d41dedcc114ac65cf0f Mon Sep 17 00:00:00 2001
From: Wayne <wwayne.hsu@gmail.com>
Date: Fri, 27 Oct 2023 17:11:28 +0800
Subject: [PATCH] code review

---
 .env.development         |   6 +-
 package.json             |   1 +
 src/views/Home/index.vue | 515 +++++++++++++++++++++++----------------
 3 files changed, 306 insertions(+), 216 deletions(-)

diff --git a/.env.development b/.env.development
index 18db184..b99874a 100644
--- a/.env.development
+++ b/.env.development
@@ -4,10 +4,10 @@ VITE_ENV = development
 
 VITE_APP_BASE_URL = https://utel.zltest.com.tw
 
-VITE_APP_LINE_LIFF_ID = 2000917272-PBWoXdOl
+VITE_APP_LINE_LIFF_ID = 1656907652-p38ddKzQ
 
-VITE_APP_SEND_URL = https://liff.line.me/2000917272-PBWoXdOl
+VITE_APP_SEND_URL = https://liff.line.me/1656907652-VJq33Pdg
 
 VITE_APP_API_URL = https://utel.zltest.com.tw/appapi/v1
 
-VITE_APP_IMAGE_URL = https://utel.vip/storage
\ No newline at end of file
+VITE_APP_IMAGE_URL = https://utel.zltest.com.tw/storage
\ No newline at end of file
diff --git a/package.json b/package.json
index 66d72d5..83beeeb 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:sta": "vite build  --mode stage",
     "preview": "vite preview"
   },
   "dependencies": {
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index 96b3fe8..38ab636 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -1,160 +1,212 @@
 <script setup>
-import moment from 'moment'
-import QrcodeVue from 'qrcode.vue'
-import { toClipboard } from '@soerenmartius/vue3-clipboard'
+import moment from "moment";
+import QrcodeVue from "qrcode.vue";
+import { toClipboard } from "@soerenmartius/vue3-clipboard";
 
-import { ref, computed, onBeforeMount, nextTick, inject } from "vue";
-import { useRoute, useRouter } from 'vue-router';
-import { useStore } from 'vuex';
+import { ref, computed, onBeforeMount, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useStore } from "vuex";
 
-import { showToast,showSuccessToast, showConfirmDialog } from 'vant';
+import { showToast, showSuccessToast, showConfirmDialog } from "vant";
 
-import { Dialog } from 'vant';
+import { Dialog } from "vant";
 
 // import Footer from '@/components/Footer.vue'
 
-import { login, bindCard, getMovie, getMarquee, toggleSendWithAD } from '@/api'
+import { login, bindCard, getMovie, getMarquee, toggleSendWithAD } from "@/api";
 
-const router = useRouter()
-const route = useRoute()
-const store = useStore()
+const router = useRouter();
+const route = useRoute();
+const store = useStore();
 
-const popShow = ref(false)
-const showShare = ref(false)
-const showNfcQrcode = ref(false)
+const showShare = ref(false);
+const showNfcQrcode = ref(false);
 
 const checked = ref(true);
-const imageUrl = ref(import.meta.env.VITE_APP_IMAGE_URL)
+const imageUrl = ref(import.meta.env.VITE_APP_IMAGE_URL);
 
 const userLevel = {
-  0: '基礎款',
-  1: '標準款',
-  2: '自製款',
-  3: '客製款'
-}
+  0: "基礎款",
+  1: "標準款",
+  2: "自製款",
+  3: "客製款",
+};
 
-const is_due = ref(false)
+const is_due = ref(false);
 
 onBeforeMount(async () => {
   const liff = window.liff;
   try {
-    if (!liff.isLoggedIn())
-      liff.login({ redirectUri: window.location.href });
+    if (!liff.isLoggedIn()) liff.login({ redirectUri: window.location.href });
   } catch (err) {
     console.log(`liff.state init error ${err}`);
-    showToast('登入失敗。請聯絡管理員')
-    router.push('/login')
+    showToast("登入失敗。請聯絡管理員");
+    router.push("/login");
   }
 
-  if (!sessionStorage.getItem('token')) {
-    const profile = await liff.getProfile()
+  if (!sessionStorage.getItem("token")) {
+    const profile = await liff.getProfile();
+
+    const id_token = liff.getIDToken();
 
-    const id_token = liff.getIDToken()
+    let loginRes = await login({ line_id: profile.userId, token: id_token });
 
-    let loginRes = await login({ line_id: profile.userId, token: id_token })
-    
     if (loginRes.code === 200) {
-      if (route.query.act === 'openright') {
-        showToast('您已經是本站會員')
+      if (route.query.act === "openright") {
+        showToast("您已經是本站會員");
       }
-      sessionStorage.setItem('token', loginRes.data.token)
-      sessionStorage.setItem('uid', loginRes.data.uid)
-
+      sessionStorage.setItem("token", loginRes.data.token);
+      sessionStorage.setItem("uid", loginRes.data.uid);
     } else if (loginRes.code === 202) {
-      if (route.query.act === 'openright') {
+      if (route.query.act === "openright") {
         if (route.query.verify) {
           //詢問是否綁定
           Dialog.confirm({
-            title: '卡片綁定',
-            message: '確認是否綁定這張卡片'
-          }).then(async () => {
-            //確認綁定
-            let bindRes = await bindCard({ uid: loginRes.data.uid, verify: route.query.verify })
-            if (bindRes.code === 200) {
-              showSuccessToast('綁定成功')
-            } else {
-              showToast.fail('綁定失敗')
-            }
-          }).catch(() => {
-
+            title: "卡片綁定",
+            message: "確認是否綁定這張卡片",
           })
+            .then(async () => {
+              //確認綁定
+              let bindRes = await bindCard({
+                uid: loginRes.data.uid,
+                verify: route.query.verify,
+              });
+              if (bindRes.code === 200) {
+                showSuccessToast("綁定成功");
+              } else {
+                showToast.fail("綁定失敗");
+              }
+            })
+            .catch(() => {});
         }
       }
 
-      sessionStorage.setItem('token', loginRes.data.token)
-      sessionStorage.setItem('uid', loginRes.data.uid)
-
+      sessionStorage.setItem("token", loginRes.data.token);
+      sessionStorage.setItem("uid", loginRes.data.uid);
     } else if (loginRes.code === 201) {
-      if (route.query.act === 'openright') {
+      if (route.query.act === "openright") {
         if (route.query.verify) {
           router.push({
-            path: '/register',
+            path: "/register",
             query: {
-              verify: route.query.verify
-            }
-          })
+              verify: route.query.verify,
+            },
+          });
 
-          return
+          return;
         }
       } else if (route.query.aid) {
         router.push({
-          path: '/register',
+          path: "/register",
           query: {
-            aid: route.query.aid
-          }
-        })
-        return
+            aid: route.query.aid,
+          },
+        });
+        return;
       } else {
-        showToast('請先註冊成為本站會員')
+        showToast("請先註冊成為本站會員");
         return router.push({
-          path: '/register',
-          query: { refer: route.query.refer }
-        })
+          path: "/register",
+          query: { refer: route.query.refer },
+        });
       }
+    } else {
+      showToast("登入失敗。請聯絡管理員");
+      router.push("/login");
+    }
+  }
 
+  store.dispatch("user/getUserInfo");
 
 
-    } else {
-      showToast('登入失敗。請聯絡管理員')
-      router.push('/login')
-    }
+});
+
+/**
+ * title : 首頁廣告
+ * fixed : wayne
+ * date : 2023/10/26
+ */
+
+const noticeData = ref([]);
+const adData = ref({});
+
+onMounted(async () => {
+  let res;
+  res = await getMarquee();
+  if (res.code === 200) {
+    noticeData.value = res.data;
   }
 
-  store.dispatch('user/getUserInfo')
+  const noticeClick = (num) => {
+    let url = noticeData.value[num].ad_link;
+    window.open(url, "_blank");
+  };
+
+  res = await getMovie();
+  if (res.code === 200) {
+    adData.value = res.data;
+    popShow.value = true;
+  }
+});
 
-  //判斷是否過期
-  nextTick(() => {
 
-    // if(userInfo.value.level===0 && userInfo.value.nc_type===0){
-    //         showToast('會員已過期')
-    //         return router.push('/shop/inputsn')
-    // }
-  })
-})
+const popShow = ref(false);
+const modalClose = ref(false);
+
+const closeShow = () => {
+  modalClose.value = true;
+};
+
+// 使用computed, 因為不能確認userInfo.value.is_send_ad是否有得到
+// const adSwitchStatus = ref(Boolean(userInfo.value.is_send_ad));
+const adSwitchStatus = computed(() => {
+  return Boolean(userInfo.value.is_send_ad);
+});
+
+const onUpdateValue = (newValue) => {
+  showConfirmDialog({
+    title: "提醒確認",
+    message: "是否切換開關？",
+  }).then(() => {
+
+    let res = toggleSendWithAD(newValue);
+    if (res.code === 200) {
+      showToast("切換成功");
+    } else {
+      showToast("切換失敗");
+    }
+  }).catch(() => {
+
+    // on cancel
+  });
+
+};
 
 const userInfo = computed(() => {
-  return store.state.user.userInfo
-})
+  return store.state.user.userInfo;
+});
 
 const nfcurl = computed(() => {
-  return encodeURI(store.state.user.userInfo.ufcurl)
-})
+  return encodeURI(store.state.user.userInfo.ufcurl);
+});
 
 const overdue = computed(() => {
   if (store.state.user.userInfo.overdue_time > 0) {
-    return moment.unix(store.state.user.userInfo.overdue_time).format('YYYY-MM-DD')
+    return moment
+      .unix(store.state.user.userInfo.overdue_time)
+      .format("YYYY-MM-DD");
   } else {
-    return '無期限'
+    return "無期限";
   }
-})
+});
 
 const goCardEdit = () => {
   if (userInfo.value.nc_type < 2) {
-    router.push('/card/notice')
+    router.push("/card/notice");
   } else {
-    router.push('/card/edit')
+    router.push("/card/edit");
   }
-}
+};
 
 const onSelect = (option) => {
   showToast(option.name);
@@ -162,67 +214,36 @@ const onSelect = (option) => {
 };
 
 const handleShowNfc = () => {
-  showNfcQrcode.value = true
-}
+  showNfcQrcode.value = true;
+};
 
 const doCopy = () => {
-  toClipboard(userInfo.value.nfcurl)
-  showToast('已放入剪貼簿')
-}
+  toClipboard(userInfo.value.nfcurl);
+  showToast("已放入剪貼簿");
+};
 
 const doCopyUid = () => {
-  toClipboard(userInfo.value.user_id)
-  showToast('已放入剪貼簿')
-}
+  toClipboard(userInfo.value.user_id);
+  showToast("已放入剪貼簿");
+};
 
 const bindTggo = () => {
-  console.log(userInfo.value)
+  console.log(userInfo.value);
   let url = `https://www.tggo.com.tw/u.cgi?&mnm=mybinding&ncode=${userInfo.value.uniqid}&name=${userInfo.value.real_name}&openExternalBrowser=1`;
 
-  window.open(url, '_blank');
-}
+  window.open(url, "_blank");
+};
 
 const handleLogout = () => {
   if (liff.isLoggedIn()) {
     liff.logout();
   }
-  sessionStorage.removeItem('token')
-  sessionStorage.removeItem('uid')
-  router.push('/login')
-}
-
-
-
-const noticeData = await getMarquee();
-const noticeClick = (num) => {
-  let url = noticeData.data[num].ad_link;
-  window.open(url, '_blank');
-}
-
-const adData = await getMovie();
-if (adData.code === 200) {
-  popShow.value = true;
-}
-
-const modalClose = ref(false)
-const closeShow = () => {
-  modalClose.value = true;
-}
-
-const adSwitchStatus = ref(Boolean(userInfo.value.is_send_ad))
-const onUpdateValue = (newValue) => {
-  showConfirmDialog({
-    title: '提醒確認',
-    message: '是否切換開關？',
-  }).then(() => {
-    toggleSendWithAD(newValue)
-  });
+  sessionStorage.removeItem("token");
+  sessionStorage.removeItem("uid");
+  router.push("/login");
 };
-
 </script>
 
-
-
 <template>
   <div class="home" v-cloak>
     <div class="header">
@@ -230,19 +251,35 @@ const onUpdateValue = (newValue) => {
       <a href="javascript:;"><h5 class="umoney phone">歡迎來到會員中心</h5></a>
     </div>
 
-    <van-notice-bar color="#ffffff" background="#e05338" left-icon="volume" mode="link" :scrollable="true">
-      <van-swipe class="notice-swipe" :touchable="false" :show-indicators="false">
-        <van-swipe-item v-for="(item, key, index) in noticeData.data" @click="noticeClick(key)">
-          {{item.ad_title}}
-        </van-swipe-item>        
+    <van-notice-bar
+      color="#ffffff"
+      background="#e05338"
+      left-icon="volume"
+      mode="link"
+      :scrollable="true"
+    >
+      <van-swipe
+        class="notice-swipe"
+        :touchable="false"
+        :show-indicators="false"
+      >
+        <van-swipe-item
+          v-for="(item, key, index) in noticeData"
+          :key="index"
+          @click="noticeClick(key)"
+        >
+          {{ item.ad_title }}
+        </van-swipe-item>
       </van-swipe>
     </van-notice-bar>
-    
+
     <div class="my-account">
       <div class="avatar">
         <div class="left">
           <div class="imgCnt shadow-sm">
-            <img :src="userInfo.line_picture || import('@/assets/images/user.jpg')" />
+            <img
+              :src="userInfo.line_picture || import('@/assets/images/user.jpg')"
+            />
           </div>
           <div class="info">
             <h4 class="name">{{ userInfo.real_name }}</h4>
@@ -250,22 +287,26 @@ const onUpdateValue = (newValue) => {
           </div>
         </div>
         <div class="right">
-          <div class="btn btn-sm text-darkBlue" @click="handleLogout"><h4><i class="fa fa-share-alt" aria-hidden="true"></i></h4></div>
-          <div class="btn btn-sm text-darkBlue" @click="handleLogout"><h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4></div>
+          <div class="btn btn-sm text-darkBlue" @click="handleLogout">
+            <h4><i class="fa fa-share-alt" aria-hidden="true"></i></h4>
+          </div>
+          <div class="btn btn-sm text-darkBlue" @click="handleLogout">
+            <h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4>
+          </div>
         </div>
       </div>
 
       <div class="recommend">
         <div class="btn btn-outline-skyBlue" @click="router.push('/shop')">
-          <div class="img"><i class="fa-solid fa-cart-arrow-down"></i></div>        
+          <div class="img"><i class="fa-solid fa-cart-arrow-down"></i></div>
           <div class="text">立即開通</div>
         </div>
         <div class="btn btn-outline-skyBlue" @click="goCardEdit">
-          <div class="img"><i class="fa-solid fa-id-card"></i></div>        
+          <div class="img"><i class="fa-solid fa-id-card"></i></div>
           <div class="text">商務卡片</div>
         </div>
         <div class="btn btn-outline-skyBlue">
-          <div class="img"><i class="fa-solid fa-address-book"></i></div>        
+          <div class="img"><i class="fa-solid fa-address-book"></i></div>
           <div class="text">通訊錄</div>
         </div>
       </div>
@@ -273,7 +314,9 @@ const onUpdateValue = (newValue) => {
 
     <div class="bwtFlex px-3 mb-2">
       <h5 class="font-weight-bold text-darkBlue">會員資料</h5>
-      <a href="javascript:;" @click="router.push('/member')"><h5><i class="fa fa-cog text-darkBlue" aria-hidden="true"></i></h5></a>
+      <a href="javascript:;" @click="router.push('/member')"
+        ><h5><i class="fa fa-cog text-darkBlue" aria-hidden="true"></i></h5
+      ></a>
     </div>
 
     <div class="content">
@@ -284,7 +327,7 @@ const onUpdateValue = (newValue) => {
               <i class="fa-regular fa-fw fa-calendar-days"></i> 建立日期
             </div>
             <div class="right text-right">
-              {{ userInfo.create_time }}              
+              {{ userInfo.create_time }}
             </div>
           </div>
           <div class="item">
@@ -292,16 +335,18 @@ const onUpdateValue = (newValue) => {
               <i class="fa-solid fa-fw fa-fingerprint"></i> 會員編號
             </div>
             <div class="right text-right">
-              <a href="javascript:;" @click="doCopyUid">{{ userInfo.user_id }}</a> 
+              <a href="javascript:;" @click="doCopyUid">{{
+                userInfo.user_id
+              }}</a>
               <!-- <span class="btn btn-sm btn-tomatoRed" @click="doCopyUid">複製</span>       -->
             </div>
-          </div>      
+          </div>
           <div class="item">
             <div class="left">
               <i class="fa-solid fa-fw fa-layer-group"></i> 會員等級
             </div>
             <div class="right text-right">
-              {{ userInfo.level_name }}              
+              {{ userInfo.level_name }}
             </div>
           </div>
           <div class="item">
@@ -309,7 +354,7 @@ const onUpdateValue = (newValue) => {
               <i class="fa-regular fa-fw fa-calendar-check"></i> 使用期限
             </div>
             <div class="right text-right">
-              {{ overdue }}              
+              {{ overdue }}
             </div>
 
             <!-- <div class="col text-right" @click="router.push('/shop/inputsn')" v-if="!is_due">{{overdue}}<br/>點此輸入購買序號</div>
@@ -320,15 +365,19 @@ const onUpdateValue = (newValue) => {
               <i class="fa-solid fa-fw fa-qrcode"></i> 會員QRcode
             </div>
             <div class="right text-right">
-              <div class="btn btn-sm btn-darkBlue" @click="handleShowNfc">開啟掃描</div>         
+              <div class="btn btn-sm btn-darkBlue" @click="handleShowNfc">
+                開啟掃描
+              </div>
             </div>
           </div>
           <div class="item">
             <div class="left">
               <i class="fa-solid fa-fw fa-link"></i> 名片連結
             </div>
-            <div class="right text-right">   
-              <div class="btn btn-sm btn-tomatoRed" @click="doCopy">複製連結</div>         
+            <div class="right text-right">
+              <div class="btn btn-sm btn-tomatoRed" @click="doCopy">
+                複製連結
+              </div>
             </div>
           </div>
         </div>
@@ -353,9 +402,7 @@ const onUpdateValue = (newValue) => {
             </div>
           </div>
           <div class="item">
-            <div class="left">
-              <i class="fa-solid fa-fw fa-phone"></i> 市話
-            </div>
+            <div class="left"><i class="fa-solid fa-fw fa-phone"></i> 市話</div>
             <div class="right text-right">
               {{ userInfo.tel }}
             </div>
@@ -386,7 +433,9 @@ const onUpdateValue = (newValue) => {
               <i class="fa-solid fa-fw fa-user-tie"></i> 授權商務卡片編輯
             </div>
             <div class="right text-right">
-              <a href="javascript:;" @click="$router.push('/auth/auth')">授權</a>  
+              <a href="javascript:;" @click="$router.push('/auth/auth')"
+                >授權</a
+              >
             </div>
           </div>
           <div class="item">
@@ -394,7 +443,9 @@ const onUpdateValue = (newValue) => {
               <i class="fa-regular fa-fw fa-handshake"></i> 代客編輯商務卡片
             </div>
             <div class="right text-right">
-              <a href="javascript:;" @click="$router.push('/auth/getauth')">編輯</a>
+              <a href="javascript:;" @click="$router.push('/auth/getauth')"
+                >編輯</a
+              >
             </div>
           </div>
           <div class="item" v-if="userInfo.uniqid">
@@ -402,7 +453,7 @@ const onUpdateValue = (newValue) => {
               <i class="fa-solid fa-fw fa-award"></i> 綁定UTel淘金購會員
             </div>
             <div class="right text-right">
-              <a href="javascript:;" @click="bindTggo">點擊後前往綁定</a>            
+              <a href="javascript:;" @click="bindTggo">點擊後前往綁定</a>
             </div>
           </div>
           <div class="item">
@@ -410,35 +461,74 @@ const onUpdateValue = (newValue) => {
               <i class="fa-regular fa-fw fa-paper-plane"></i> 發送名片帶廣告
             </div>
             <div class="right text-right">
-              <van-switch v-model="adSwitchStatus" @update:model-value="onUpdateValue" size="18px" active-color="#345068" inactive-color="#888888"/>         
+              <van-switch
+                v-model="adSwitchStatus"
+                @update:model-value="onUpdateValue"
+                size="18px"
+                active-color="#345068"
+                inactive-color="#888888"
+              />
             </div>
           </div>
         </div>
       </div>
-    </div>    
+    </div>
 
     <!-- <Footer /> -->
 
-    <van-dialog v-model:show="showNfcQrcode" title="電子名片二維碼" :show-cancel-button="true" cancel-button-text="關閉"
-      :show-confirm-button="false">
+    <van-dialog
+      v-model:show="showNfcQrcode"
+      title="電子名片二維碼"
+      :show-cancel-button="true"
+      cancel-button-text="關閉"
+      :show-confirm-button="false"
+    >
       <div class="qrcode text-center pt-3">
         <qrcode-vue :value="userInfo.nfcurl" :size="200" level="M" />
       </div>
     </van-dialog>
 
-    <van-overlay :show="popShow" z-index="1000" :style="{background:'rgba(0, 0, 0, .85)'}">      
+    <van-overlay
+      :show="popShow"
+      z-index="1000"
+      :style="{ background: 'rgba(0, 0, 0, .85)' }"
+    >
       <div class="wrapper" @click.stop>
-        <div class="clip"> 
-          <van-icon :style="{display:'none',marginRight:'5px'}" @click="popShow = false" :class="{'d-block':modalClose}" name="cross" size="15"/>      
-          <van-count-down :style="{color:'#fff'}" @finish="closeShow" :auto-start="true" :time="adData.data.play_sec*1000" format="ss 秒"/>
+        <div class="clip">
+          <van-icon
+            :style="{ display: 'none', marginRight: '5px' }"
+            @click="popShow = false"
+            :class="{ 'd-block': modalClose }"
+            name="cross"
+            size="15"
+          />
+          <van-count-down
+            :style="{ color: '#fff' }"
+            @finish="closeShow"
+            :auto-start="true"
+            :time="adData.play_sec * 1000"
+            format="ss 秒"
+          />
         </div>
         <div class="top">
-          <iframe width="100%" height="100%" :src="'https://utel.zltest.com.tw'+adData.data.ad_movie" title="YouTube video player" autoplay="true" frameborder="0" controls="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+          <iframe
+            width="100%"
+            height="100%"
+            :src="'https://utel.zltest.com.tw' + adData.ad_movie"
+            title="YouTube video player"
+            autoplay="true"
+            frameborder="0"
+            controls="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen
+          ></iframe>
         </div>
         <div class="bottom">
-          <h5 class="title">{{adData.data.ad_title}}</h5>
-          <h6 class="desc ellipsis e3">{{adData.data.ad_desc}}</h6>
-          <van-button type="light" :url="adData.data.ad_link" block><i class="fa-solid fa-fw fa-link"></i> 前往連結</van-button>
+          <h5 class="title">{{ adData.ad_title }}</h5>
+          <h6 class="desc ellipsis e3">{{ adData.ad_desc }}</h6>
+          <van-button type="light" :url="adData.ad_link" block
+            ><i class="fa-solid fa-fw fa-link"></i> 前往連結</van-button
+          >
         </div>
       </div>
     </van-overlay>
@@ -449,47 +539,46 @@ const onUpdateValue = (newValue) => {
 <style src="@/assets/css/page/index.css"></style>
 
 <style lang="less" scoped>
-  .wrapper{
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+  .clip {
+    position: absolute;
     display: flex;
-    justify-content: center;
     align-items: center;
-    flex-direction: column;
-    height: 100%;
-    .clip{
-      position:absolute;  
-      display: flex;
-      align-items: center;    
-      color:#ffffff;
-      background-color: rgba(#000000,.8);
-      top:5px;
-      right:5px;
-      margin-left:auto;
-      padding: 10px;
-      cursor: pointer;
-      z-index: 1005;
-    }
-    .top{
-      position: relative;
-      display: flex;
-      align-items: center;
-      width:100%;
-      flex: 1 0 0;
+    color: #ffffff;
+    background-color: rgba(#000000, 0.8);
+    top: 5px;
+    right: 5px;
+    margin-left: auto;
+    padding: 10px;
+    cursor: pointer;
+    z-index: 1005;
+  }
+  .top {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    flex: 1 0 0;
+  }
+  .bottom {
+    position: relative;
+    width: 100%;
+    flex: 0 0 auto;
+    padding: 15px;
+    .title {
+      color: #ffffff;
+      font-weight: bold;
+      margin-bottom: 15px;
     }
-    .bottom{
-      position: relative;
-      width:100%;
-      flex: 0 0 auto;
-      padding: 15px;
-      .title{
-        color: #ffffff;
-        font-weight: bold;
-        margin-bottom: 15px;
-      }
-      .desc{
-        color: #ffffff;
-        margin-bottom: 30px;
-        
-      }
+    .desc {
+      color: #ffffff;
+      margin-bottom: 30px;
     }
   }
-</style>
\ No newline at end of file
+}
+</style>