|
|
@@ -0,0 +1,330 @@
|
|
|
+<template>
|
|
|
+ <div class="content">
|
|
|
+ <!-- open -->
|
|
|
+ <div v-if="data.status == 'opened'" class="opened">
|
|
|
+ <div class="header">
|
|
|
+ <div class="title">Awesome! You Will Get</div>
|
|
|
+ <div class="money">
|
|
|
+ <img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
+ <span class="big">1.23</span>
|
|
|
+ <span class="small">USD</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list">
|
|
|
+ <div class="item" v-for="item,i in data.list" :key="i">
|
|
|
+ <img :src="item.url" alt />
|
|
|
+ <div class="item-content">
|
|
|
+ <div class="item-title">{{ item.title }}</div>
|
|
|
+ <span>@shasid \!@asd</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="people">
|
|
|
+ <span>Total $100 USD，173/1000 People Got</span>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <div class="first">
|
|
|
+ <div class="validity">Validity</div>
|
|
|
+ <div class="time">23:57:32</div>
|
|
|
+ </div>
|
|
|
+ <div class="btn">Get Giveaways</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- success -->
|
|
|
+ <div v-if="data.status == 'success'" class="success">
|
|
|
+ <div class="header">
|
|
|
+ <div class="money">
|
|
|
+ <img :src="require('../assets/svg/icon-dollar.svg')" alt />
|
|
|
+ <span class="big">1.23</span>
|
|
|
+ <span class="small">USD</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list">
|
|
|
+ <div class="item" v-for="item,i in data.list" :key="i">
|
|
|
+ <img :src="item.url" alt />
|
|
|
+ <div class="item-content">
|
|
|
+ <div class="item-title">{{ item.title }}</div>
|
|
|
+ <span>@shasid \!@asd</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- no-open -->
|
|
|
+ <div v-if="data.status == 'not-open'" class="not-open">
|
|
|
+ <div class="top">
|
|
|
+ <div class>
|
|
|
+ <img src alt />
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <div class="open">OPEN</div>
|
|
|
+ <div class="bottom"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'redPacket',
|
|
|
+}
|
|
|
+</script>
|
|
|
+<script setup>
|
|
|
+import { reactive } from "vue";
|
|
|
+
|
|
|
+
|
|
|
+let data = reactive({
|
|
|
+ status: 'opened',
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ title: 'Follow',
|
|
|
+ url: require('../assets/svg/icon-follow.svg')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Like',
|
|
|
+ url: require('../assets/svg/icon-like.svg')
|
|
|
+ }, {
|
|
|
+ title: 'Retweet',
|
|
|
+ url: require('../assets/svg/icon-retweet.svg')
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.content {
|
|
|
+ width: 375px;
|
|
|
+ height: 500px;
|
|
|
+ background: #fafafa;
|
|
|
+ border-radius: 11px;
|
|
|
+ font-family: "SF Pro Display";
|
|
|
+ font-style: normal;
|
|
|
+ .success {
|
|
|
+ filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .header {
|
|
|
+ text-align: center;
|
|
|
+ height: 120px;
|
|
|
+ width: 100%;
|
|
|
+ background: #ef4545;
|
|
|
+ padding-top: 30px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: #fff7e4;
|
|
|
+ opacity: 0.6;
|
|
|
+
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 21px;
|
|
|
+ letter-spacing: -0.3px;
|
|
|
+ }
|
|
|
+ .money {
|
|
|
+ img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .big {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 46px;
|
|
|
+ line-height: 55px;
|
|
|
+ /* identical to box height */
|
|
|
+
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+
|
|
|
+ color: #fff8e6;
|
|
|
+ }
|
|
|
+ .small {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 16px;
|
|
|
+ /* identical to box height */
|
|
|
+
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+
|
|
|
+ color: #fff8e6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .opened {
|
|
|
+ filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .header {
|
|
|
+ text-align: center;
|
|
|
+ height: 120px;
|
|
|
+ width: 100%;
|
|
|
+ background: #ef4545;
|
|
|
+ padding-top: 30px;
|
|
|
+ .title {
|
|
|
+ color: #fff7e4;
|
|
|
+ opacity: 0.6;
|
|
|
+
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 21px;
|
|
|
+ letter-spacing: -0.3px;
|
|
|
+ }
|
|
|
+ .money {
|
|
|
+ img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .big {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 46px;
|
|
|
+ line-height: 55px;
|
|
|
+ /* identical to box height */
|
|
|
+
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+
|
|
|
+ color: #fff8e6;
|
|
|
+ }
|
|
|
+ .small {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 16px;
|
|
|
+ /* identical to box height */
|
|
|
+
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+
|
|
|
+ color: #fff8e6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ padding: 0 16px 0 16px;
|
|
|
+ background: #ffffff;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 50px;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ .item-content {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 13px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+
|
|
|
+ color: #000000;
|
|
|
+
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: 72px;
|
|
|
+ height: 29px;
|
|
|
+ line-height: 29px;
|
|
|
+ background: #389aff;
|
|
|
+ border-radius: 500px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item:last-child {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .people {
|
|
|
+ padding-left: 16px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ background: #faf9f8;
|
|
|
+ box-shadow: 0px 1px 0px #f2f2f2;
|
|
|
+ span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+
|
|
|
+ color: #000000;
|
|
|
+
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ padding: 20px 22px 20px 17px;
|
|
|
+ .first {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .validity {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 14px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
+ color: #000000;
|
|
|
+ opacity: 0.4;
|
|
|
+ margin: 2px 0 8px 0;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 16px;
|
|
|
+ /* identical to box height */
|
|
|
+
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ background: #ef4545;
|
|
|
+ border-radius: 100px;
|
|
|
+ color: #fff;
|
|
|
+ width: 258px;
|
|
|
+ height: 52px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 52px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .not-open {
|
|
|
+ filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
|
|
|
+ .top {
|
|
|
+ width: 375px;
|
|
|
+ height: 292px;
|
|
|
+ background: #ef4545;
|
|
|
+ box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ .open {
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 600;
|
|
|
+ background: #ffe9b5;
|
|
|
+ color: #ef4545;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 50%;
|
|
|
+ line-height: 110px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
