|
|
@@ -35,16 +35,12 @@
|
|
|
fontSize: amountFontSize + 'px'
|
|
|
}">{{ data.amountValue }}</span>
|
|
|
</div>
|
|
|
- <div class="people">
|
|
|
- <template v-if="data.type == 2">
|
|
|
- <img class="icon-clock"
|
|
|
- :src="require('@/assets/svg/icon-preview-clock.svg')" /> {{data.validityDuration}} H
|
|
|
- <img class="icon-trophy"
|
|
|
- :src="require('@/assets/svg/icon-preview-trophy.svg')" /> <span class="trophy-count">{{data.totalCount}} WINNERS</span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- {{ data.totalCount }} WINNERS TO SHARE
|
|
|
- </template>
|
|
|
+ <div class="time-area" v-if="data.type == 2">
|
|
|
+ <img class="icon-clock" :src="require('@/assets/svg/icon-time.svg')" />
|
|
|
+ {{formatSecondsAsTime(data.validityDuration * 3600)}}
|
|
|
+ </div>
|
|
|
+ <div class="people" v-else>
|
|
|
+ {{ data.totalCount }} WINNERS TO SHARE
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -52,6 +48,7 @@
|
|
|
|
|
|
<script setup>
|
|
|
import { defineProps, defineEmits, watch, ref } from "vue";
|
|
|
+import { formatSecondsAsTime } from "@/uilts/help";
|
|
|
|
|
|
const props = defineProps({
|
|
|
data: {
|
|
|
@@ -143,23 +140,22 @@ const open = () => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ }
|
|
|
|
|
|
- .icon-clock, .icon-trophy {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- }
|
|
|
-
|
|
|
+ .time-area {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 46px;
|
|
|
+ background: rgba(0,0,0,.15);
|
|
|
+ color: #FFCC4D;
|
|
|
+ font-weight: 900;
|
|
|
+ font-size: 26px;
|
|
|
.icon-clock {
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .icon-trophy {
|
|
|
- margin-left: 8px;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .trophy-count {
|
|
|
- color: #FFCC4D;
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
