|
@@ -61,16 +61,23 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="custom-card-prize">
|
|
|
- <component-zoom width="210">
|
|
|
+ <component-zoom :width="showBottom ? 210 : 300">
|
|
|
<span class="custom-card-prize-name" id="custom-name" >
|
|
|
+ <img class="custom-card-prize-gift-inline" :src="require('@/assets/subject/icon-gift-inline.svg')" />
|
|
|
{{data.customizedReward}}
|
|
|
<span class="custom-card-prize-name-total">X{{data.totalCount}}</span>
|
|
|
</span>
|
|
|
</component-zoom>
|
|
|
</div>
|
|
|
<div class="custom-card-desc" :class="{'custom-card-desc-lottary': !isLottaryCpd}">
|
|
|
- <span class="last-time" v-if="isLottaryCpd">{{data.validityDuration}} H</span>
|
|
|
- <span class="trophy-count">{{data.totalCount}} WINNERS</span>
|
|
|
+ <span class="last-time" v-if="isLottaryCpd">
|
|
|
+ <img class="custom-card-desc-clock-icon" :src="require('@/assets/subject/icon-clock.png')" />
|
|
|
+ {{data.validityDuration}} H
|
|
|
+ </span>
|
|
|
+ <span class="trophy-count">
|
|
|
+ <img class="custom-card-desc-prize-icon" :src="require('@/assets/subject/icon-prize.png')" />
|
|
|
+ {{data.totalCount}} WINNERS
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
@@ -237,22 +244,35 @@ watch(() => props.data, () => {
|
|
|
|
|
|
&-prize {
|
|
|
position: absolute;
|
|
|
- left: 9%;
|
|
|
- top: 22%;
|
|
|
- height: 20px;
|
|
|
+ left: 0%;
|
|
|
+ top: 16%;
|
|
|
+ width: 65%;
|
|
|
+ line-height: 42px;
|
|
|
display: flex;
|
|
|
+ background-image: url('@/assets/subject/icon-uninstall-bg.svg');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding-left: 5px;
|
|
|
|
|
|
&-name {
|
|
|
font-weight: 800;
|
|
|
font-size: 16px;
|
|
|
- line-height: 20px;
|
|
|
+ // line-height: 20px;
|
|
|
letter-spacing: 0.22px;
|
|
|
color: #FFFFFF;
|
|
|
text-shadow: 0px 1.46341px 0px rgba(0, 0, 0, 0.15);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
&-total {
|
|
|
color: #F5C03F;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ &-gift-inline {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
}
|
|
|
&-desc {
|
|
|
font-size: 12px;
|
|
@@ -260,42 +280,38 @@ watch(() => props.data, () => {
|
|
|
letter-spacing: 0.219512px;
|
|
|
color: #FFFFFF;
|
|
|
opacity: 0.7;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 37%;
|
|
|
+ display: flex;
|
|
|
+ padding-left: 4%;
|
|
|
.last-time {
|
|
|
- position: absolute;
|
|
|
- left: 7.5%;
|
|
|
- top: 38%;
|
|
|
- }
|
|
|
- .trophy-count {
|
|
|
- position: absolute;
|
|
|
- left: 21%;
|
|
|
- top: 38%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 12px;
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- &-desc-lottary {
|
|
|
.trophy-count {
|
|
|
- position: absolute;
|
|
|
- left: 8%;
|
|
|
- top: 38%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- .custom-card-in-poster {
|
|
|
- .custom-card-prize {
|
|
|
- top: 32%;
|
|
|
- }
|
|
|
- .custom-card-desc{
|
|
|
- .last-time {
|
|
|
- top: 54%;
|
|
|
- }
|
|
|
- .trophy-count {
|
|
|
- top: 54%;
|
|
|
- }
|
|
|
- }
|
|
|
- .custom-card-desc-lottary {
|
|
|
- .trophy-count {
|
|
|
- top: 54%;
|
|
|
- }
|
|
|
- }
|
|
|
+.custom-card-in-poster {
|
|
|
+ .custom-card-prize {
|
|
|
+ top: 24%;
|
|
|
+ line-height: 54px;
|
|
|
+ }
|
|
|
+ .custom-card-desc{
|
|
|
+ top: 50%;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|