Skip to content

飞
飞鹤小程序
Commit cf35a39f authored by spc's avatar spc
Browse files
Options

pointRights

parent aae0bb15
Hide whitespace changes
Inline Side-by-side
Showing with 2905 additions and 62 deletions
components/pointRightsCom/monthGift.vue 0 → 100644
View file @ cf35a39f
<template>
<view class="monthgift ">
<view class="diamond">
<image class="diamondbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BG}`" mode="aspectFit"></image>
<view class="diamondgoodcoupon">
<view class="diamondgoodcoupons">
<image class="diamondgoodcouponstitle"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
<image class="diamondgoodcouponsbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.BG}`"
mode="aspectFit"></image>
<image class="diamondgoodcoupons1"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON1}`" mode="aspectFit"></image>
<image class="diamondgoodcoupons2"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON2}`" mode="aspectFit"></image>
<image class="diamondgoodcoupons3"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON3}`" mode="aspectFit"></image>
<image class="diamondgoodcoupons4"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON4}`" mode="aspectFit"></image>
<image class="diamondgoodcoupons5"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.COUPON5}`" mode="aspectFit"></image>
</view>
<image class="diamondgoodcouponnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.GOOD_COUPONS.NOW_BTN}`" mode="aspectFit"></image>
</view>
<view class="diamond1buycom">
<image class="diamond1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL4}`"
mode="aspectFit"></image>
<image class="diamond1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL3}`"
mode="aspectFit"></image>
<image class="diamond1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL2}`"
mode="aspectFit"></image>
<image class="diamond1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.SEL1}`"
mode="aspectFit"></image>
<view class="diamond1buycomtime1">
<text class="diamond1buycomtime1text">10:00</text>
<text class="diamond1buycomtime1status">待解锁</text>
</view>
<view class="diamond1buycomtime2">
<text class="diamond1buycomtime2text">12:00</text>
<text class="diamond1buycomtime2status">待解锁</text>
</view>
<view class="diamond1buycomtime3">
<text class="diamond1buycomtime3text">14:00</text>
<text class="diamond1buycomtime3status">待解锁</text>
</view>
<view class="diamond1buycomtime4">
<text class="diamond1buycomtime4text">16:00</text>
<text class="diamond1buycomtime4status">待解锁</text>
</view>
<view class="diamond1buycomgoods">
<image class="diamond1buycomgoodsbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
<image class="diamond1buycomgoodslockbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.GOODS.LOCK_BTN}`" mode="aspectFit">
</image>
<image class="diamond1buycomgoodsnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.GOODS.NOW_BTN}`" mode="aspectFit"></image>
</view>
<image class="diamond1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.TITLE}`"
mode="aspectFit"></image>
<image class="diamond1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.DESC}`"
mode="aspectFit"></image>
<image class="diamond1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.DIAMOND.BUY_COM.STATUS}`"
mode="aspectFit"></image>
</view>
</view>
<view class="starshine">
<image class="starshinebg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BG}`" mode="aspectFit"></image>
<view class="starshinegoodcoupon">
<view class="starshinegoodcoupons">
<image class="starshinegoodcouponstitle"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
<image class="starshinegoodcouponsbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.BG}`" mode="aspectFit"></image>
<image class="starshinegoodcoupons1"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON1}`" mode="aspectFit">
</image>
<image class="starshinegoodcoupons2"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON2}`" mode="aspectFit">
</image>
<image class="starshinegoodcoupons3"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON3}`" mode="aspectFit">
</image>
<image class="starshinegoodcoupons4"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON4}`" mode="aspectFit">
</image>
<image class="starshinegoodcoupons5"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.COUPON5}`" mode="aspectFit">
</image>
</view>
<image class="starshinegoodcouponnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.GOOD_COUPONS.NOW_BTN}`" mode="aspectFit"></image>
</view>
<view class="starshine1buycom">
<image class="starshine1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL4}`"
mode="aspectFit"></image>
<image class="starshine1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL3}`"
mode="aspectFit"></image>
<image class="starshine1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL2}`"
mode="aspectFit"></image>
<image class="starshine1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.SEL1}`"
mode="aspectFit"></image>
<view class="starshine1buycomtime1">
<image class="starshine1buycomtime1text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
<image class="starshine1buycomtime1status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME1.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="starshine1buycomtime2">
<image class="starshine1buycomtime2text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
<image class="starshine1buycomtime2status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME2.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="starshine1buycomtime3">
<image class="starshine1buycomtime3text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
<image class="starshine1buycomtime3status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME3.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="starshine1buycomtime4">
<image class="starshine1buycomtime4text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
<image class="starshine1buycomtime4status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TIME4.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="starshine1buycomgoods">
<image class="starshine1buycomgoodsbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
<image class="starshine1buycomgoodslockbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.GOODS.LOCK_BTN}`" mode="aspectFit">
</image>
<image class="starshine1buycomgoodsnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.GOODS.NOW_BTN}`" mode="aspectFit">
</image>
</view>
<image class="starshine1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.STATUS}`"
mode="aspectFit"></image>
<image class="starshine1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.TITLE}`"
mode="aspectFit"></image>
<image class="starshine1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARSHINE.BUY_COM.DESC}`"
mode="aspectFit"></image>
</view>
</view>
<view class="starlight">
<image class="starlightbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BG}`" mode="aspectFit"></image>
<view class="startlightgoodcoupon">
<view class="startlightgoodcoupons">
<image class="startlightgoodcouponstitle"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
<image class="startlightgoodcouponsbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.BG}`" mode="aspectFit"></image>
<image class="startlightgoodcoupons1"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON1}`" mode="aspectFit">
</image>
<image class="startlightgoodcoupons2"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON2}`" mode="aspectFit">
</image>
<image class="startlightgoodcoupons3"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON3}`" mode="aspectFit">
</image>
<image class="startlightgoodcoupons4"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON4}`" mode="aspectFit">
</image>
<image class="startlightgoodcoupons5"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.COUPON5}`" mode="aspectFit">
</image>
</view>
<image class="startlightgoodcouponnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.GOOD_COUPONS.NOW_BTN}`" mode="aspectFit"></image>
</view>
<view class="startlight1buycom">
<image class="startlight1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL4}`"
mode="aspectFit"></image>
<image class="startlight1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL3}`"
mode="aspectFit"></image>
<image class="startlight1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL2}`"
mode="aspectFit"></image>
<image class="startlight1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.SEL1}`"
mode="aspectFit"></image>
<view class="startlight1buycomtime1">
<image class="startlight1buycomtime1text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
<image class="startlight1buycomtime1status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME1.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="startlight1buycomtime2">
<image class="startlight1buycomtime2text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
<image class="startlight1buycomtime2status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME2.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="startlight1buycomtime3">
<image class="startlight1buycomtime3text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
<image class="startlight1buycomtime3status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME3.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="startlight1buycomtime4">
<image class="startlight1buycomtime4text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
<image class="startlight1buycomtime4status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TIME4.STATUS}`" mode="aspectFit">
</image>
</view>
<view class="startlight1buycomgoods">
<image class="startlight1buycomgoodsbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
<image class="startlight1buycomgoodslockbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.GOODS.LOCK_BTN}`" mode="aspectFit">
</image>
<image class="startlight1buycomgoodsnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.GOODS.NOW_BTN}`" mode="aspectFit">
</image>
</view>
<image class="startlight1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.TITLE}`"
mode="aspectFit"></image>
<image class="startlight1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.DESC}`"
mode="aspectFit"></image>
<image class="startlight1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.STARLIGHT.BUY_COM.STATUS}`"
mode="aspectFit"></image>
</view>
</view>
<view class="gold">
<image class="goldbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BG}`" mode="aspectFit"></image>
<view class="goldgoodcoupon">
<view class="goldgoodcoupons">
<image class="goldgoodcouponstitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.TITLE}`"
mode="aspectFit"></image>
<image class="goldgoodcouponsbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.BG}`"
mode="aspectFit"></image>
<image class="goldgoodcoupons1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON1}`"
mode="aspectFit"></image>
<image class="goldgoodcoupons2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON2}`"
mode="aspectFit"></image>
<image class="goldgoodcoupons3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON3}`"
mode="aspectFit"></image>
<image class="goldgoodcoupons4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON4}`"
mode="aspectFit"></image>
<image class="goldgoodcoupons5" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.COUPON5}`"
mode="aspectFit"></image>
</view>
<image class="goldgoodcouponnowbtn" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.GOOD_COUPONS.NOW_BTN}`"
mode="aspectFit"></image>
</view>
<view class="gold1buycom">
<image class="gold1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TITLE}`"
mode="aspectFit"></image>
<image class="gold1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.DESC}`"
mode="aspectFit"></image>
<image class="gold1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.STATUS}`"
mode="aspectFit"></image>
<image class="gold1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL4}`"
mode="aspectFit"></image>
<image class="gold1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL3}`"
mode="aspectFit"></image>
<image class="gold1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL2}`"
mode="aspectFit"></image>
<image class="gold1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.SEL1}`"
mode="aspectFit"></image>
<view class="gold1buycomtime1">
<image class="gold1buycomtime1text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME1.TEXT}`"
mode="aspectFit"></image>
<image class="gold1buycomtime1status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME1.STATUS}`" mode="aspectFit"></image>
</view>
<view class="gold1buycomtime2">
<image class="gold1buycomtime2text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME2.TEXT}`"
mode="aspectFit"></image>
<image class="gold1buycomtime2status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME2.STATUS}`" mode="aspectFit"></image>
</view>
<view class="gold1buycomtime3">
<image class="gold1buycomtime3text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME3.TEXT}`"
mode="aspectFit"></image>
<image class="gold1buycomtime3status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME3.STATUS}`" mode="aspectFit"></image>
</view>
<view class="gold1buycomtime4">
<image class="gold1buycomtime4text" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME4.TEXT}`"
mode="aspectFit"></image>
<image class="gold1buycomtime4status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.TIME4.STATUS}`" mode="aspectFit"></image>
</view>
<view class="gold1buycomgoods">
<image class="gold1buycomgoodsbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.GOODS.BG}`"
mode="aspectFit"></image>
<image class="gold1buycomgoodslockbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.GOODS.LOCK_BTN}`" mode="aspectFit"></image>
<image class="gold1buycomgoodsnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.BUY_COM.GOODS.NOW_BTN}`" mode="aspectFit"></image>
</view>
</view>
<image class="goldlocktip" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.GOLD.LOCKTIP}`" mode="aspectFit"></image>
</view>
<view class="platinum">
<image class="platinumbg" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BG}`" mode="aspectFit"></image>
<view class="platinumgoodcoupon">
<view class="platinumgoodcoupons">
<image class="platinumgoodcoupontitle"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.TITLE}`" mode="aspectFit"></image>
<image class="platinumgoodcouponbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.BG}`" mode="aspectFit"></image>
<image class="platinumgoodcoupons1"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON1}`" mode="aspectFit"></image>
<image class="platinumgoodcoupons2"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON2}`" mode="aspectFit"></image>
<image class="platinumgoodcoupons3"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON3}`" mode="aspectFit"></image>
<image class="platinumgoodcoupons4"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON4}`" mode="aspectFit"></image>
<image class="platinumgoodcoupons5"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.COUPON5}`" mode="aspectFit"></image>
</view>
<image class="platinumgoodcouponnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.GOOD_COUPONS.NOW_BTN}`" mode="aspectFit"></image>
</view>
<view class="platinum1buycom">
<image class="platinum1buycomtitle" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TITLE}`"
mode="aspectFit"></image>
<image class="platinum1buycomdesc" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.DESC}`"
mode="aspectFit"></image>
<image class="platinum1buycomstatus" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.STATUS}`"
mode="aspectFit"></image>
<image class="platinum1buycomsel4" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL4}`"
mode="aspectFit"></image>
<image class="platinum1buycomsel3" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL3}`"
mode="aspectFit"></image>
<image class="platinum1buycomsel2" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL2}`"
mode="aspectFit"></image>
<image class="platinum1buycomsel1" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.SEL1}`"
mode="aspectFit"></image>
<view class="platinum1buycomtime1">
<image class="platinum1buycomtime1text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME1.TEXT}`" mode="aspectFit"></image>
<image class="platinum1buycomtime1status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME1.STATUS}`" mode="aspectFit"></image>
</view>
<view class="platinum1buycomtime2">
<image class="platinum1buycomtime2text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME2.TEXT}`" mode="aspectFit"></image>
<image class="platinum1buycomtime2status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME2.STATUS}`" mode="aspectFit"></image>
</view>
<view class="platinum1buycomtime3">
<image class="platinum1buycomtime3text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME3.TEXT}`" mode="aspectFit"></image>
<image class="platinum1buycomtime3status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME3.STATUS}`" mode="aspectFit"></image>
</view>
<view class="platinum1buycomtime4">
<image class="platinum1buycomtime4text"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME4.TEXT}`" mode="aspectFit"></image>
<image class="platinum1buycomtime4status"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.TIME4.STATUS}`" mode="aspectFit"></image>
</view>
<view class="platinum1buycomgoods">
<image class="platinum1buycomgoodsbg"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.GOODS.BG}`" mode="aspectFit"></image>
<image class="platinum1buycomgoodslockbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.GOODS.LOCK_BTN}`" mode="aspectFit">
</image>
<image class="platinum1buycomgoodsnowbtn"
:src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.BUY_COM.GOODS.NOW_BTN}`" mode="aspectFit">
</image>
</view>
</view>
<image class="platinumlocktip" :src="`${$baseUrl}${MONTH_GIFT_IMAGES.PLATINUM.LOCKTIP}`" mode="aspectFit">
</image>
</view>
</view>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
import { MONTH_GIFT_IMAGES } from './monthGiftImages.js'
// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
</script>
<style lang="less" scoped>
.monthgift {
width: 663rpx;
height: 1084rpx;
position: relative;
margin: 0 auto;
.diamond {
width: 663rpx;
height: 1084rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.diamondbg {
width: 663rpx;
height: 1084rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.diamondgoodcoupon {
width: 640rpx;
height: 561rpx;
left: 0rpx;
top: 523rpx;
position: absolute;
.diamondgoodcoupons {
width: 640rpx;
height: 561rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.diamondgoodcouponstitle {
width: 126rpx;
height: 31rpx;
left: 6rpx;
top: 0rpx;
position: absolute;
}
.diamondgoodcouponsbg {
width: 640rpx;
height: 494rpx;
left: 0rpx;
top: 67rpx;
position: absolute;
opacity: 0.3;
}
.diamondgoodcoupons1 {
width: 190rpx;
height: 160rpx;
left: 25rpx;
top: 89rpx;
position: absolute;
}
.diamondgoodcoupons2 {
width: 191rpx;
height: 160rpx;
left: 226rpx;
top: 89rpx;
position: absolute;
}
.diamondgoodcoupons3 {
width: 191rpx;
height: 160rpx;
left: 425rpx;
top: 89rpx;
position: absolute;
}
.diamondgoodcoupons4 {
width: 191rpx;
height: 159rpx;
left: 124rpx;
top: 263rpx;
position: absolute;
}
.diamondgoodcoupons5 {
width: 191rpx;
height: 159rpx;
left: 325rpx;
top: 263rpx;
position: absolute;
}
}
.diamondgoodcouponnowbtn {
width: 442rpx;
height: 85rpx;
left: 99rpx;
top: 453rpx;
position: absolute;
}
}
.diamond1buycom {
width: 640rpx;
height: 426rpx;
left: 0rpx;
top: 47rpx;
position: absolute;
.diamond1buycomsel4 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 106rpx;
position: absolute;
}
.diamond1buycomsel3 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 107rpx;
position: absolute;
}
.diamond1buycomsel2 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 107rpx;
position: absolute;
}
.diamond1buycomsel1 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 106rpx;
position: absolute;
}
.diamond1buycomtime1 {
width: 69rpx;
height: 46rpx;
left: 45rpx;
top: 120rpx;
position: absolute;
.diamond1buycomtime1text {
width: 79rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
font-size: 28rpx;
line-height: 22rpx;
color: rgba(50, 45, 111, 1);
}
.diamond1buycomtime1status {
width: 59rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
font-size: 16rpx;
line-height: 16rpx;
color: rgba(50, 45, 111, 1);
}
}
.diamond1buycomtime2 {
width: 69rpx;
height: 46rpx;
left: 205rpx;
top: 120rpx;
position: absolute;
.diamond1buycomtime2text {
width: 79rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
font-size: 28rpx;
line-height: 22rpx;
color: rgba(50, 45, 111, 1);
}
.diamond1buycomtime2status {
width: 59rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
font-size: 16rpx;
line-height: 16rpx;
color: rgba(50, 45, 111, 1);
}
}
.diamond1buycomtime3 {
width: 69rpx;
height: 46rpx;
left: 365rpx;
top: 120rpx;
position: absolute;
.diamond1buycomtime3text {
width: 79rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
font-size: 28rpx;
line-height: 22rpx;
color: rgba(50, 45, 111, 1);
}
.diamond1buycomtime3status {
width: 59rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
font-size: 16rpx;
line-height: 16rpx;
color: rgba(50, 45, 111, 1);
}
}
.diamond1buycomtime4 {
width: 69rpx;
height: 46rpx;
left: 525rpx;
top: 120rpx;
position: absolute;
.diamond1buycomtime4text {
width: 79rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
font-size: 28rpx;
line-height: 22rpx;
color: rgba(50, 45, 111, 1);
}
.diamond1buycomtime4status {
width: 59rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
font-size: 16rpx;
line-height: 16rpx;
color: rgba(50, 45, 111, 1);
}
}
.diamond1buycomgoods {
width: 592rpx;
height: 206rpx;
left: 25rpx;
top: 197rpx;
position: absolute;
.diamond1buycomgoodsbg {
width: 592rpx;
height: 206rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.diamond1buycomgoodslockbtn {
width: 145rpx;
height: 52rpx;
left: 427rpx;
top: 80rpx;
position: absolute;
}
.diamond1buycomgoodsnowbtn {
width: 145rpx;
height: 52rpx;
left: 427rpx;
top: 80rpx;
position: absolute;
}
}
.diamond1buycomtitle {
width: 137rpx;
height: 31rpx;
left: 7rpx;
top: 3rpx;
position: absolute;
}
.diamond1buycomdesc {
width: 396rpx;
height: 23rpx;
left: 6rpx;
top: 46rpx;
position: absolute;
}
.diamond1buycomstatus {
width: 163rpx;
height: 73rpx;
left: 452rpx;
top: 0rpx;
position: absolute;
}
}
}
.starshine {
width: 663rpx;
height: 1084rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.starshinebg {
width: 663rpx;
height: 1084rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.1;
}
.starshinegoodcoupon {
width: 640rpx;
height: 561rpx;
left: 0rpx;
top: 523rpx;
position: absolute;
.starshinegoodcoupons {
width: 640rpx;
height: 561rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.starshinegoodcouponstitle {
width: 126rpx;
height: 31rpx;
left: 6rpx;
top: 0rpx;
position: absolute;
}
.starshinegoodcouponsbg {
width: 640rpx;
height: 494rpx;
left: 0rpx;
top: 67rpx;
position: absolute;
opacity: 0.05;
}
.starshinegoodcoupons1 {
width: 190rpx;
height: 160rpx;
left: 25rpx;
top: 89rpx;
position: absolute;
}
.starshinegoodcoupons2 {
width: 191rpx;
height: 160rpx;
left: 226rpx;
top: 89rpx;
position: absolute;
}
.starshinegoodcoupons3 {
width: 191rpx;
height: 160rpx;
left: 425rpx;
top: 89rpx;
position: absolute;
}
.starshinegoodcoupons4 {
width: 191rpx;
height: 159rpx;
left: 124rpx;
top: 263rpx;
position: absolute;
}
.starshinegoodcoupons5 {
width: 191rpx;
height: 159rpx;
left: 325rpx;
top: 263rpx;
position: absolute;
}
}
.starshinegoodcouponnowbtn {
width: 442rpx;
height: 85rpx;
left: 99rpx;
top: 453rpx;
position: absolute;
}
}
.starshine1buycom {
width: 640rpx;
height: 426rpx;
left: 0rpx;
top: 47rpx;
position: absolute;
.starshine1buycomsel4 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 106rpx;
position: absolute;
}
.starshine1buycomsel3 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 107rpx;
position: absolute;
}
.starshine1buycomsel2 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 107rpx;
position: absolute;
}
.starshine1buycomsel1 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 106rpx;
position: absolute;
}
.starshine1buycomtime1 {
width: 69rpx;
height: 46rpx;
left: 45rpx;
top: 120rpx;
position: absolute;
.starshine1buycomtime1text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starshine1buycomtime1status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.starshine1buycomtime2 {
width: 69rpx;
height: 46rpx;
left: 205rpx;
top: 120rpx;
position: absolute;
.starshine1buycomtime2text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starshine1buycomtime2status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.starshine1buycomtime3 {
width: 69rpx;
height: 46rpx;
left: 365rpx;
top: 120rpx;
position: absolute;
.starshine1buycomtime3text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starshine1buycomtime3status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.starshine1buycomtime4 {
width: 69rpx;
height: 46rpx;
left: 525rpx;
top: 120rpx;
position: absolute;
.starshine1buycomtime4text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starshine1buycomtime4status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.starshine1buycomgoods {
width: 592rpx;
height: 206rpx;
left: 25rpx;
top: 197rpx;
position: absolute;
.starshine1buycomgoodsbg {
width: 592rpx;
height: 206rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starshine1buycomgoodslockbtn {
width: 145rpx;
height: 52rpx;
left: 427rpx;
top: 80rpx;
position: absolute;
}
.starshine1buycomgoodsnowbtn {
width: 145rpx;
height: 52rpx;
left: 427rpx;
top: 80rpx;
position: absolute;
}
}
.starshine1buycomstatus {
width: 163rpx;
height: 73rpx;
left: 452rpx;
top: 0rpx;
position: absolute;
}
.starshine1buycomtitle {
width: 137rpx;
height: 31rpx;
left: 7rpx;
top: 3rpx;
position: absolute;
}
.starshine1buycomdesc {
width: 396rpx;
height: 23rpx;
left: 6rpx;
top: 46rpx;
position: absolute;
}
}
}
.starlight {
width: 663rpx;
height: 1084rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.starlightbg {
width: 663rpx;
height: 1084rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.startlightgoodcoupon {
width: 640rpx;
height: 561rpx;
left: 0rpx;
top: 523rpx;
position: absolute;
.startlightgoodcoupons {
width: 640rpx;
height: 561rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.startlightgoodcouponstitle {
width: 126rpx;
height: 31rpx;
left: 6rpx;
top: 0rpx;
position: absolute;
}
.startlightgoodcouponsbg {
width: 640rpx;
height: 494rpx;
left: 0rpx;
top: 67rpx;
position: absolute;
opacity: 0.3;
}
.startlightgoodcoupons1 {
width: 190rpx;
height: 160rpx;
left: 25rpx;
top: 89rpx;
position: absolute;
}
.startlightgoodcoupons2 {
width: 191rpx;
height: 160rpx;
left: 226rpx;
top: 89rpx;
position: absolute;
}
.startlightgoodcoupons3 {
width: 191rpx;
height: 160rpx;
left: 425rpx;
top: 89rpx;
position: absolute;
}
.startlightgoodcoupons4 {
width: 191rpx;
height: 159rpx;
left: 124rpx;
top: 263rpx;
position: absolute;
}
.startlightgoodcoupons5 {
width: 191rpx;
height: 159rpx;
left: 325rpx;
top: 263rpx;
position: absolute;
}
}
.startlightgoodcouponnowbtn {
width: 442rpx;
height: 85rpx;
left: 99rpx;
top: 453rpx;
position: absolute;
}
}
.startlight1buycom {
width: 640rpx;
height: 426rpx;
left: 0rpx;
top: 47rpx;
position: absolute;
.startlight1buycomsel4 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 106rpx;
position: absolute;
}
.startlight1buycomsel3 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 107rpx;
position: absolute;
}
.startlight1buycomsel2 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 107rpx;
position: absolute;
}
.startlight1buycomsel1 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 106rpx;
position: absolute;
}
.startlight1buycomtime1 {
width: 69rpx;
height: 46rpx;
left: 45rpx;
top: 120rpx;
position: absolute;
.startlight1buycomtime1text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.startlight1buycomtime1status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.startlight1buycomtime2 {
width: 69rpx;
height: 46rpx;
left: 205rpx;
top: 120rpx;
position: absolute;
.startlight1buycomtime2text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.startlight1buycomtime2status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.startlight1buycomtime3 {
width: 69rpx;
height: 46rpx;
left: 365rpx;
top: 120rpx;
position: absolute;
.startlight1buycomtime3text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.startlight1buycomtime3status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.startlight1buycomtime4 {
width: 69rpx;
height: 46rpx;
left: 525rpx;
top: 120rpx;
position: absolute;
.startlight1buycomtime4text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.startlight1buycomtime4status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.startlight1buycomgoods {
width: 592rpx;
height: 206rpx;
left: 25rpx;
top: 197rpx;
position: absolute;
.startlight1buycomgoodsbg {
width: 592rpx;
height: 206rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.startlight1buycomgoodslockbtn {
width: 145rpx;
height: 52rpx;
left: 427rpx;
top: 80rpx;
position: absolute;
}
.startlight1buycomgoodsnowbtn {
width: 145rpx;
height: 52rpx;
left: 427rpx;
top: 80rpx;
position: absolute;
}
}
.startlight1buycomtitle {
width: 137rpx;
height: 31rpx;
left: 7rpx;
top: 3rpx;
position: absolute;
}
.startlight1buycomdesc {
width: 396rpx;
height: 23rpx;
left: 6rpx;
top: 46rpx;
position: absolute;
}
.startlight1buycomstatus {
width: 163rpx;
height: 73rpx;
left: 452rpx;
top: 0rpx;
position: absolute;
}
}
}
.gold {
width: 663rpx;
height: 1084rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.goldbg {
width: 663rpx;
height: 1084rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.goldgoodcoupon {
width: 640rpx;
height: 561rpx;
left: 0rpx;
top: 523rpx;
position: absolute;
.goldgoodcoupons {
width: 640rpx;
height: 561rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.goldgoodcouponstitle {
width: 126rpx;
height: 31rpx;
left: 6rpx;
top: 0rpx;
position: absolute;
}
.goldgoodcouponsbg {
width: 640rpx;
height: 494rpx;
left: 0rpx;
top: 67rpx;
position: absolute;
opacity: 0.3;
}
.goldgoodcoupons1 {
width: 190rpx;
height: 160rpx;
left: 25rpx;
top: 89rpx;
position: absolute;
}
.goldgoodcoupons2 {
width: 191rpx;
height: 160rpx;
left: 226rpx;
top: 89rpx;
position: absolute;
}
.goldgoodcoupons3 {
width: 191rpx;
height: 160rpx;
left: 425rpx;
top: 89rpx;
position: absolute;
}
.goldgoodcoupons4 {
width: 191rpx;
height: 159rpx;
left: 124rpx;
top: 263rpx;
position: absolute;
}
.goldgoodcoupons5 {
width: 191rpx;
height: 159rpx;
left: 325rpx;
top: 263rpx;
position: absolute;
}
}
.goldgoodcouponnowbtn {
width: 442rpx;
height: 85rpx;
left: 99rpx;
top: 453rpx;
position: absolute;
}
}
.gold1buycom {
width: 640rpx;
height: 426rpx;
left: 0rpx;
top: 47rpx;
position: absolute;
.gold1buycomtitle {
width: 137rpx;
height: 31rpx;
left: 7rpx;
top: 3rpx;
position: absolute;
}
.gold1buycomdesc {
width: 396rpx;
height: 23rpx;
left: 6rpx;
top: 46rpx;
position: absolute;
}
.gold1buycomstatus {
width: 163rpx;
height: 73rpx;
left: 452rpx;
top: 0rpx;
position: absolute;
}
.gold1buycomsel4 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 106rpx;
position: absolute;
}
.gold1buycomsel3 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 107rpx;
position: absolute;
}
.gold1buycomsel2 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 107rpx;
position: absolute;
}
.gold1buycomsel1 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 106rpx;
position: absolute;
}
.gold1buycomtime1 {
width: 69rpx;
height: 46rpx;
left: 45rpx;
top: 120rpx;
position: absolute;
.gold1buycomtime1text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.gold1buycomtime1status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.gold1buycomtime2 {
width: 69rpx;
height: 46rpx;
left: 205rpx;
top: 120rpx;
position: absolute;
.gold1buycomtime2text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.gold1buycomtime2status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.gold1buycomtime3 {
width: 69rpx;
height: 46rpx;
left: 365rpx;
top: 120rpx;
position: absolute;
.gold1buycomtime3text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.gold1buycomtime3status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.gold1buycomtime4 {
width: 69rpx;
height: 46rpx;
left: 525rpx;
top: 120rpx;
position: absolute;
.gold1buycomtime4text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.gold1buycomtime4status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.gold1buycomgoods {
width: 592rpx;
height: 206rpx;
left: 25rpx;
top: 197rpx;
position: absolute;
.gold1buycomgoodsbg {
width: 592rpx;
height: 206rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.gold1buycomgoodslockbtn {
width: 145rpx;
height: 52rpx;
left: 427rpx;
top: 80rpx;
position: absolute;
}
.gold1buycomgoodsnowbtn {
width: 145rpx;
height: 52rpx;
left: 427rpx;
top: 80rpx;
position: absolute;
}
}
}
.goldlocktip {
width: 257rpx;
height: 41rpx;
left: 406rpx;
top: 0rpx;
position: absolute;
}
}
.platinum {
width: 663rpx;
height: 1084rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.platinumbg {
width: 663rpx;
height: 1084rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.platinumgoodcoupon {
width: 640rpx;
height: 561rpx;
left: 0rpx;
top: 523rpx;
position: absolute;
.platinumgoodcoupons {
width: 640rpx;
height: 561rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.platinumgoodcoupontitle {
width: 126rpx;
height: 31rpx;
left: 6rpx;
top: 0rpx;
position: absolute;
}
.platinumgoodcouponbg {
width: 640rpx;
height: 494rpx;
left: 0rpx;
top: 67rpx;
position: absolute;
opacity: 0.3;
}
.platinumgoodcoupons1 {
width: 190rpx;
height: 160rpx;
left: 25rpx;
top: 89rpx;
position: absolute;
}
.platinumgoodcoupons2 {
width: 191rpx;
height: 160rpx;
left: 226rpx;
top: 89rpx;
position: absolute;
}
.platinumgoodcoupons3 {
width: 191rpx;
height: 160rpx;
left: 425rpx;
top: 89rpx;
position: absolute;
}
.platinumgoodcoupons4 {
width: 191rpx;
height: 159rpx;
left: 124rpx;
top: 263rpx;
position: absolute;
}
.platinumgoodcoupons5 {
width: 191rpx;
height: 159rpx;
left: 325rpx;
top: 263rpx;
position: absolute;
}
}
.platinumgoodcouponnowbtn {
width: 442rpx;
height: 85rpx;
left: 99rpx;
top: 453rpx;
position: absolute;
}
}
.platinum1buycom {
width: 640rpx;
height: 426rpx;
left: 0rpx;
top: 47rpx;
position: absolute;
.platinum1buycomtitle {
width: 137rpx;
height: 31rpx;
left: 7rpx;
top: 3rpx;
position: absolute;
}
.platinum1buycomdesc {
width: 396rpx;
height: 23rpx;
left: 6rpx;
top: 46rpx;
position: absolute;
}
.platinum1buycomstatus {
width: 163rpx;
height: 73rpx;
left: 452rpx;
top: 0rpx;
position: absolute;
}
.platinum1buycomsel4 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 106rpx;
position: absolute;
}
.platinum1buycomsel3 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 107rpx;
position: absolute;
}
.platinum1buycomsel2 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 107rpx;
position: absolute;
}
.platinum1buycomsel1 {
width: 640rpx;
height: 319rpx;
left: 0rpx;
top: 106rpx;
position: absolute;
}
.platinum1buycomtime1 {
width: 69rpx;
height: 46rpx;
left: 45rpx;
top: 120rpx;
position: absolute;
.platinum1buycomtime1text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.platinum1buycomtime1status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.platinum1buycomtime2 {
width: 69rpx;
height: 46rpx;
left: 205rpx;
top: 120rpx;
position: absolute;
.platinum1buycomtime2text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.platinum1buycomtime2status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.platinum1buycomtime3 {
width: 69rpx;
height: 46rpx;
left: 365rpx;
top: 120rpx;
position: absolute;
.platinum1buycomtime3text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.platinum1buycomtime3status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.platinum1buycomtime4 {
width: 69rpx;
height: 46rpx;
left: 525rpx;
top: 120rpx;
position: absolute;
.platinum1buycomtime4text {
width: 69rpx;
height: 22rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.platinum1buycomtime4status {
width: 49rpx;
height: 16rpx;
left: 10rpx;
top: 30rpx;
position: absolute;
}
}
.platinum1buycomgoods {
width: 592rpx;
height: 206rpx;
left: 25rpx;
top: 197rpx;
position: absolute;
.platinum1buycomgoodsbg {
width: 592rpx;
height: 206rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.platinum1buycomgoodslockbtn {
width: 145rpx;
height: 52rpx;
left: 427rpx;
top: 80rpx;
position: absolute;
}
.platinum1buycomgoodsnowbtn {
width: 145rpx;
height: 52rpx;
left: 427rpx;
top: 80rpx;
position: absolute;
}
}
}
.platinumlocktip {
width: 257rpx;
height: 41rpx;
left: 406rpx;
top: 0rpx;
position: absolute;
}
}
}
</style>
components/pointRightsCom/monthGiftImages.js 0 → 100644
View file @ cf35a39f
const version = 'v1'
// monthGift 组件图片资源常量
export const MONTH_GIFT_IMAGES = {
// Diamond 等级相关图片
DIAMOND: {
BG: `pointRights/MonthGift/${version}/diamondBg.png`,
GOOD_COUPONS: {
TITLE: `pointRights/MonthGift/${version}/diamondGoodCouponsTitle.png`,
BG: `pointRights/MonthGift/${version}/diamondGoodCouponsBg.png`,
COUPON1: `pointRights/MonthGift/${version}/diamondGoodCoupons1.png`,
COUPON2: `pointRights/MonthGift/${version}/diamondGoodCoupons2.png`,
COUPON3: `pointRights/MonthGift/${version}/diamondGoodCoupons3.png`,
COUPON4: `pointRights/MonthGift/${version}/diamondGoodCoupons4.png`,
COUPON5: `pointRights/MonthGift/${version}/diamondGoodCoupons5.png`,
NOW_BTN: `pointRights/MonthGift/${version}/diamondGoodCouponNowBtn.png`
},
BUY_COM: {
TITLE: `pointRights/MonthGift/${version}/diamond1BuyComTitle.png`,
DESC: `pointRights/MonthGift/${version}/diamond1BuyComDesc.png`,
STATUS: `pointRights/MonthGift/${version}/diamond1BuyComStatus.png`,
SEL1: `pointRights/MonthGift/${version}/diamond1BuyComSel1.png`,
SEL2: `pointRights/MonthGift/${version}/diamond1BuyComSel2.png`,
SEL3: `pointRights/MonthGift/${version}/diamond1BuyComSel3.png`,
SEL4: `pointRights/MonthGift/${version}/diamond1BuyComSel4.png`,
GOODS: {
BG: `pointRights/MonthGift/${version}/diamond1BuyComGoodsBg.png`,
LOCK_BTN: `pointRights/MonthGift/${version}/diamond1BuyComGoodsLockBtn.png`,
NOW_BTN: `pointRights/MonthGift/${version}/diamond1BuyComGoodsNowBtn.png`
}
}
},
// Starshine 等级相关图片
STARSHINE: {
BG: `pointRights/MonthGift/${version}/starshineBg.png`,
GOOD_COUPONS: {
TITLE: `pointRights/MonthGift/${version}/starshineGoodCouponsTitle.png`,
BG: `pointRights/MonthGift/${version}/starshineGoodCouponsBg.png`,
COUPON1: `pointRights/MonthGift/${version}/starshineGoodCoupons1.png`,
COUPON2: `pointRights/MonthGift/${version}/starshineGoodCoupons2.png`,
COUPON3: `pointRights/MonthGift/${version}/starshineGoodCoupons3.png`,
COUPON4: `pointRights/MonthGift/${version}/starshineGoodCoupons4.png`,
COUPON5: `pointRights/MonthGift/${version}/starshineGoodCoupons5.png`,
NOW_BTN: `pointRights/MonthGift/${version}/starshineGoodCouponNowBtn.png`
},
BUY_COM: {
TITLE: `pointRights/MonthGift/${version}/starshine1BuyComTitle.png`,
DESC: `pointRights/MonthGift/${version}/starshine1BuyComDesc.png`,
STATUS: `pointRights/MonthGift/${version}/starshine1BuyComStatus.png`,
SEL1: `pointRights/MonthGift/${version}/starshine1BuyComSel1.png`,
SEL2: `pointRights/MonthGift/${version}/starshine1BuyComSel2.png`,
SEL3: `pointRights/MonthGift/${version}/starshine1BuyComSel3.png`,
SEL4: `pointRights/MonthGift/${version}/starshine1BuyComSel4.png`,
TIME1: {
TEXT: `pointRights/MonthGift/${version}/starshine1BuyComTime1Text.png`,
STATUS: `pointRights/MonthGift/${version}/starshine1BuyComTime1Status.png`
},
TIME2: {
TEXT: `pointRights/MonthGift/${version}/starshine1BuyComTime2Text.png`,
STATUS: `pointRights/MonthGift/${version}/starshine1BuyComTime2Status.png`
},
TIME3: {
TEXT: `pointRights/MonthGift/${version}/starshine1BuyComTime3Text.png`,
STATUS: `pointRights/MonthGift/${version}/starshine1BuyComTime3Status.png`
},
TIME4: {
TEXT: `pointRights/MonthGift/${version}/starshine1BuyComTime4Text.png`,
STATUS: `pointRights/MonthGift/${version}/starshine1BuyComTime4Status.png`
},
GOODS: {
BG: `pointRights/MonthGift/${version}/starshine1BuyComGoodsBg.png`,
LOCK_BTN: `pointRights/MonthGift/${version}/starshine1BuyComGoodsLockBtn.png`,
NOW_BTN: `pointRights/MonthGift/${version}/starshine1BuyComGoodsNowBtn.png`
}
}
},
// Starlight 等级相关图片
STARLIGHT: {
BG: `pointRights/MonthGift/${version}/starlightBg.png`,
GOOD_COUPONS: {
TITLE: `pointRights/MonthGift/${version}/startlightGoodCouponsTitle.png`,
BG: `pointRights/MonthGift/${version}/startlightGoodCouponsBg.png`,
COUPON1: `pointRights/MonthGift/${version}/startlightGoodCoupons1.png`,
COUPON2: `pointRights/MonthGift/${version}/startlightGoodCoupons2.png`,
COUPON3: `pointRights/MonthGift/${version}/startlightGoodCoupons3.png`,
COUPON4: `pointRights/MonthGift/${version}/startlightGoodCoupons4.png`,
COUPON5: `pointRights/MonthGift/${version}/startlightGoodCoupons5.png`,
NOW_BTN: `pointRights/MonthGift/${version}/startlightGoodCouponNowBtn.png`
},
BUY_COM: {
TITLE: `pointRights/MonthGift/${version}/startlight1BuyComTitle.png`,
DESC: `pointRights/MonthGift/${version}/startlight1BuyComDesc.png`,
STATUS: `pointRights/MonthGift/${version}/startlight1BuyComStatus.png`,
SEL1: `pointRights/MonthGift/${version}/startlight1BuyComSel1.png`,
SEL2: `pointRights/MonthGift/${version}/startlight1BuyComSel2.png`,
SEL3: `pointRights/MonthGift/${version}/startlight1BuyComSel3.png`,
SEL4: `pointRights/MonthGift/${version}/startlight1BuyComSel4.png`,
TIME1: {
TEXT: `pointRights/MonthGift/${version}/startlight1BuyComTime1Text.png`,
STATUS: `pointRights/MonthGift/${version}/startlight1BuyComTime1Status.png`
},
TIME2: {
TEXT: `pointRights/MonthGift/${version}/startlight1BuyComTime2Text.png`,
STATUS: `pointRights/MonthGift/${version}/startlight1BuyComTime2Status.png`
},
TIME3: {
TEXT: `pointRights/MonthGift/${version}/startlight1BuyComTime3Text.png`,
STATUS: `pointRights/MonthGift/${version}/startlight1BuyComTime3Status.png`
},
TIME4: {
TEXT: `pointRights/MonthGift/${version}/startlight1BuyComTime4Text.png`,
STATUS: `pointRights/MonthGift/${version}/startlight1BuyComTime4Status.png`
},
GOODS: {
BG: `pointRights/MonthGift/${version}/startlight1BuyComGoodsBg.png`,
LOCK_BTN: `pointRights/MonthGift/${version}/startlight1BuyComGoodsLockBtn.png`,
NOW_BTN: `pointRights/MonthGift/${version}/startlight1BuyComGoodsNowBtn.png`
}
}
},
// Gold 等级相关图片
GOLD: {
BG: `pointRights/MonthGift/${version}/goldBg.png`,
LOCKTIP: `pointRights/MonthGift/${version}/goldLockTip.png`,
GOOD_COUPONS: {
TITLE: `pointRights/MonthGift/${version}/goldGoodCouponsTitle.png`,
BG: `pointRights/MonthGift/${version}/goldGoodCouponsBg.png`,
COUPON1: `pointRights/MonthGift/${version}/goldGoodCoupons1.png`,
COUPON2: `pointRights/MonthGift/${version}/goldGoodCoupons2.png`,
COUPON3: `pointRights/MonthGift/${version}/goldGoodCoupons3.png`,
COUPON4: `pointRights/MonthGift/${version}/goldGoodCoupons4.png`,
COUPON5: `pointRights/MonthGift/${version}/goldGoodCoupons5.png`,
NOW_BTN: `pointRights/MonthGift/${version}/goldGoodCouponNowBtn.png`
},
BUY_COM: {
TITLE: `pointRights/MonthGift/${version}/gold1BuyComTitle.png`,
DESC: `pointRights/MonthGift/${version}/gold1BuyComDesc.png`,
STATUS: `pointRights/MonthGift/${version}/gold1BuyComStatus.png`,
SEL1: `pointRights/MonthGift/${version}/gold1BuyComSel1.png`,
SEL2: `pointRights/MonthGift/${version}/gold1BuyComSel2.png`,
SEL3: `pointRights/MonthGift/${version}/gold1BuyComSel3.png`,
SEL4: `pointRights/MonthGift/${version}/gold1BuyComSel4.png`,
TIME1: {
TEXT: `pointRights/MonthGift/${version}/gold1BuyComTime1Text.png`,
STATUS: `pointRights/MonthGift/${version}/gold1BuyComTime1Status.png`
},
TIME2: {
TEXT: `pointRights/MonthGift/${version}/gold1BuyComTime2Text.png`,
STATUS: `pointRights/MonthGift/${version}/gold1BuyComTime2Status.png`
},
TIME3: {
TEXT: `pointRights/MonthGift/${version}/gold1BuyComTime3Text.png`,
STATUS: `pointRights/MonthGift/${version}/gold1BuyComTime3Status.png`
},
TIME4: {
TEXT: `pointRights/MonthGift/${version}/gold1BuyComTime4Text.png`,
STATUS: `pointRights/MonthGift/${version}/gold1BuyComTime4Status.png`
},
GOODS: {
BG: `pointRights/MonthGift/${version}/gold1BuyComGoodsBg.png`,
LOCK_BTN: `pointRights/MonthGift/${version}/gold1BuyComGoodsLockBtn.png`,
NOW_BTN: `pointRights/MonthGift/${version}/gold1BuyComGoodsNowBtn.png`
}
}
},
// Platinum 等级相关图片
PLATINUM: {
BG: `pointRights/MonthGift/${version}/platinumBg.png`,
LOCKTIP: `pointRights/MonthGift/${version}/platinumLockTip.png`,
GOOD_COUPONS: {
TITLE: `pointRights/MonthGift/${version}/platinumGoodCouponTitle.png`,
BG: `pointRights/MonthGift/${version}/platinumGoodCouponBg.png`,
COUPON1: `pointRights/MonthGift/${version}/platinumGoodCoupons1.png`,
COUPON2: `pointRights/MonthGift/${version}/platinumGoodCoupons2.png`,
COUPON3: `pointRights/MonthGift/${version}/platinumGoodCoupons3.png`,
COUPON4: `pointRights/MonthGift/${version}/platinumGoodCoupons4.png`,
COUPON5: `pointRights/MonthGift/${version}/platinumGoodCoupons5.png`,
NOW_BTN: `pointRights/MonthGift/${version}/platinumGoodCouponNowBtn.png`
},
BUY_COM: {
TITLE: `pointRights/MonthGift/${version}/platinum1BuyComTitle.png`,
DESC: `pointRights/MonthGift/${version}/platinum1BuyComDesc.png`,
STATUS: `pointRights/MonthGift/${version}/platinum1BuyComStatus.png`,
SEL1: `pointRights/MonthGift/${version}/platinum1BuyComSel1.png`,
SEL2: `pointRights/MonthGift/${version}/platinum1BuyComSel2.png`,
SEL3: `pointRights/MonthGift/${version}/platinum1BuyComSel3.png`,
SEL4: `pointRights/MonthGift/${version}/platinum1BuyComSel4.png`,
TIME1: {
TEXT: `pointRights/MonthGift/${version}/platinum1BuyComTime1Text.png`,
STATUS: `pointRights/MonthGift/${version}/platinum1BuyComTime1Status.png`
},
TIME2: {
TEXT: `pointRights/MonthGift/${version}/platinum1BuyComTime2Text.png`,
STATUS: `pointRights/MonthGift/${version}/platinum1BuyComTime2Status.png`
},
TIME3: {
TEXT: `pointRights/MonthGift/${version}/platinum1BuyComTime3Text.png`,
STATUS: `pointRights/MonthGift/${version}/platinum1BuyComTime3Status.png`
},
TIME4: {
TEXT: `pointRights/MonthGift/${version}/platinum1BuyComTime4Text.png`,
STATUS: `pointRights/MonthGift/${version}/platinum1BuyComTime4Status.png`
},
GOODS: {
BG: `pointRights/MonthGift/${version}/platinum1BuyComGoodsBg.png`,
LOCK_BTN: `pointRights/MonthGift/${version}/platinum1BuyComGoodsLockBtn.png`,
NOW_BTN: `pointRights/MonthGift/${version}/platinum1BuyComGoodsNowBtn.png`
}
}
}
}
\ No newline at end of file
components/pointRightsCom/yearGift.vue
View file @ cf35a39f
<template>
<view class="yeargift ">
<view class="diamond">
<image class="diamondbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.BG3}`" mode="aspectFit"></image>
<image class="diamondbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.BG2}`" mode="aspectFit"></image>
<image class="diamondbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.BG1}`" mode="aspectFit"></image>
<view class="diamondone">
<image class="diamondonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.BG}`" mode="aspectFit"></image>
<image class="diamondoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.AWARD}`" mode="aspectFit"></image>
<image class="diamondoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.ADD}`" mode="aspectFit"></image>
<image class="diamondonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.ONE.DESC}`" mode="aspectFit"></image>
</view>
<view class="diamondthree">
<image class="diamondthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.THREE.BG}`" mode="aspectFit"></image>
<image class="diamondthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.THREE.AWARD}`" mode="aspectFit"></image>
<image class="diamondthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.DIAMOND.THREE.BTN}`" mode="aspectFit"></image>
</view>
</view>
<view class="starshine">
<image class="starshinebg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.BG3}`" mode="aspectFit"></image>
<image class="starshinebg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.BG2}`" mode="aspectFit"></image>
<image class="starshinebg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.BG1}`" mode="aspectFit"></image>
<view class="starshineone">
<image class="starshineonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.BG}`" mode="aspectFit"></image>
<image class="starshineoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.AWARD}`" mode="aspectFit"></image>
<image class="starshineoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.ADD}`" mode="aspectFit"></image>
<image class="starshineonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.ONE.DESC}`" mode="aspectFit"></image>
</view>
<view class="starshinethree">
<image class="starshinethreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.BG}`" mode="aspectFit"></image>
<image class="starshinethreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.AWARD}`" mode="aspectFit"></image>
<image class="starshinethreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARSHINE.THREE.BTN}`" mode="aspectFit"></image>
</view>
</view>
<view class="starlight">
<image class="starlightbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.BG3}`" mode="aspectFit"></image>
<image class="starlightbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.BG2}`" mode="aspectFit"></image>
<image class="starlightbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.BG1}`" mode="aspectFit"></image>
<view class="starlightone">
<image class="starlightonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.BG}`" mode="aspectFit"></image>
<image class="starlightoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.AWARD}`" mode="aspectFit"></image>
<image class="starlightoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.ADD}`" mode="aspectFit"></image>
<image class="starlightonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.ONE.DESC}`" mode="aspectFit"></image>
</view>
<view class="starlightthree">
<image class="starlightthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.BG}`" mode="aspectFit"></image>
<image class="starlightthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.AWARD}`" mode="aspectFit"></image>
<image class="starlightthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.STARLIGHT.THREE.BTN}`" mode="aspectFit"></image>
</view>
</view>
<view class="gold">
<image class="goldbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.BG3}`" mode="aspectFit"></image>
<image class="goldbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.BG2}`" mode="aspectFit"></image>
<image class="goldbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.BG1}`" mode="aspectFit"></image>
<view class="goldone">
<image class="goldonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.BG}`" mode="aspectFit"></image>
<image class="goldoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.AWARD}`" mode="aspectFit"></image>
<image class="goldoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.ADD}`" mode="aspectFit"></image>
<image class="goldonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.ONE.DESC}`" mode="aspectFit"></image>
</view>
<view class="goldthree">
<image class="goldthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.THREE.BG}`" mode="aspectFit"></image>
<image class="goldthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.THREE.AWARD}`" mode="aspectFit"></image>
<image class="goldthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.THREE.BTN}`" mode="aspectFit"></image>
</view>
<image class="goldlocktip" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.GOLD.LOCKTIP}`" mode="aspectFit"></image>
</view>
<view class="platinum">
<image class="platinumbg3" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.BG3}`" mode="aspectFit"></image>
<image class="platinumbg2" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.BG2}`" mode="aspectFit"></image>
<image class="platinumbg1" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.BG1}`" mode="aspectFit"></image>
<image class="platinumlocktip" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.LOCKTIP}`" mode="aspectFit"></image>
<view class="platinumone">
<image class="platinumonebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.BG}`" mode="aspectFit"></image>
<image class="platinumoneaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.AWARD}`" mode="aspectFit"></image>
<image class="platinumoneadd" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.ADD}`" mode="aspectFit"></image>
<image class="platinumonedesc" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.ONE.DESC}`" mode="aspectFit"></image>
</view>
<view class="platinumthree">
<image class="platinumthreeaward" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.AWARD}`" mode="aspectFit"></image>
<image class="platinumthreebg" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.BG}`" mode="aspectFit"></image>
<image class="platinumthreebtn" :src="`${$baseUrl}${YEAR_GIFT_IMAGES.PLATINUM.THREE.BTN}`" mode="aspectFit"></image>
</view>
</view>
</view>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
import { YEAR_GIFT_IMAGES } from './yearGiftImages.js'
// 获取全局属性
const { proxy } = getCurrentInstance()
const $baseUrl = proxy.$baseUrl
</script>
<style lang="less" scoped>
.yeargift {
width: 750rpx;
height: 1624rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
.diamond {
width: 686rpx;
height: 1139rpx;
left: 32rpx;
top: 79rpx;
position: absolute;
.diamondbg3 {
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.diamondbg2 {
width: 640rpx;
height: 479rpx;
left: 23rpx;
top: 50rpx;
position: absolute;
opacity: 0.2;
}
.diamondbg1 {
width: 640rpx;
height: 437rpx;
left: 23rpx;
top: 543rpx;
position: absolute;
opacity: 0.2;
}
.diamondone {
width: 567rpx;
height: 423rpx;
left: 59rpx;
top: 71rpx;
position: absolute;
.diamondonebg {
width: 566rpx;
height: 423rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.diamondoneaward {
width: 304rpx;
height: 212rpx;
left: 3rpx;
top: 91rpx;
position: absolute;
}
.diamondoneadd {
width: 29rpx;
height: 30rpx;
left: 319rpx;
top: 180rpx;
position: absolute;
}
.diamondonedesc {
width: 207rpx;
height: 159rpx;
left: 360rpx;
top: 116rpx;
position: absolute;
}
}
.diamondthree {
width: 543rpx;
height: 521rpx;
left: 59rpx;
top: 572rpx;
position: absolute;
.diamondthreebg {
width: 543rpx;
height: 368rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.diamondthreeaward {
width: 225rpx;
height: 238rpx;
left: 169rpx;
top: 72rpx;
position: absolute;
}
.diamondthreebtn {
width: 443rpx;
height: 85rpx;
left: 61rpx;
top: 436rpx;
position: absolute;
}
}
}
.starshine {
width: 686rpx;
height: 1139rpx;
left: 32rpx;
top: 79rpx;
position: absolute;
.starshinebg3 {
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.1;
}
.starshinebg2 {
width: 640rpx;
height: 479rpx;
left: 23rpx;
top: 50rpx;
position: absolute;
opacity: 0.1;
}
.starshinebg1 {
width: 640rpx;
height: 437rpx;
left: 23rpx;
top: 543rpx;
position: absolute;
opacity: 0.1;
}
.starshineone {
width: 567rpx;
height: 423rpx;
left: 59rpx;
top: 71rpx;
position: absolute;
.starshineonebg {
width: 566rpx;
height: 423rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starshineoneaward {
width: 304rpx;
height: 212rpx;
left: 3rpx;
top: 90rpx;
position: absolute;
}
.starshineoneadd {
width: 29rpx;
height: 30rpx;
left: 319rpx;
top: 180rpx;
position: absolute;
}
.starshineonedesc {
width: 207rpx;
height: 159rpx;
left: 360rpx;
top: 116rpx;
position: absolute;
}
}
.starshinethree {
width: 543rpx;
height: 521rpx;
left: 59rpx;
top: 572rpx;
position: absolute;
.starshinethreebg {
width: 543rpx;
height: 368rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starshinethreeaward {
width: 225rpx;
height: 238rpx;
left: 169rpx;
top: 72rpx;
position: absolute;
}
.starshinethreebtn {
width: 443rpx;
height: 85rpx;
left: 61rpx;
top: 436rpx;
position: absolute;
}
}
}
.starlight {
width: 686rpx;
height: 1139rpx;
left: 32rpx;
top: 79rpx;
position: absolute;
.starlightbg3 {
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.starlightbg2 {
width: 640rpx;
height: 479rpx;
left: 23rpx;
top: 50rpx;
position: absolute;
opacity: 0.2;
}
.starlightbg1 {
width: 640rpx;
height: 437rpx;
left: 23rpx;
top: 543rpx;
position: absolute;
opacity: 0.2;
}
.starlightone {
width: 567rpx;
height: 423rpx;
left: 59rpx;
top: 71rpx;
position: absolute;
.starlightonebg {
width: 566rpx;
height: 423rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starlightoneaward {
width: 304rpx;
height: 212rpx;
left: 3rpx;
top: 90rpx;
position: absolute;
}
.starlightoneadd {
width: 29rpx;
height: 30rpx;
left: 319rpx;
top: 180rpx;
position: absolute;
}
.starlightonedesc {
width: 207rpx;
height: 159rpx;
left: 360rpx;
top: 116rpx;
position: absolute;
}
}
.starlightthree {
width: 543rpx;
height: 521rpx;
left: 59rpx;
top: 572rpx;
position: absolute;
.starlightthreebg {
width: 543rpx;
height: 368rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.starlightthreeaward {
width: 225rpx;
height: 238rpx;
left: 169rpx;
top: 72rpx;
position: absolute;
}
.starlightthreebtn {
width: 443rpx;
height: 85rpx;
left: 61rpx;
top: 436rpx;
position: absolute;
}
}
}
.gold {
width: 686rpx;
height: 1139rpx;
left: 32rpx;
top: 79rpx;
position: absolute;
.goldbg3 {
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.goldbg2 {
width: 640rpx;
height: 479rpx;
left: 23rpx;
top: 50rpx;
position: absolute;
opacity: 0.2;
}
.goldbg1 {
width: 640rpx;
height: 437rpx;
left: 23rpx;
top: 543rpx;
position: absolute;
opacity: 0.2;
}
.goldone {
width: 567rpx;
height: 423rpx;
left: 59rpx;
top: 71rpx;
position: absolute;
.goldonebg {
width: 566rpx;
height: 423rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.goldoneaward {
width: 304rpx;
height: 212rpx;
left: 3rpx;
top: 90rpx;
position: absolute;
}
.goldoneadd {
width: 29rpx;
height: 30rpx;
left: 319rpx;
top: 180rpx;
position: absolute;
}
.goldonedesc {
width: 207rpx;
height: 159rpx;
left: 360rpx;
top: 116rpx;
position: absolute;
}
}
.goldthree {
width: 543rpx;
height: 521rpx;
left: 59rpx;
top: 572rpx;
position: absolute;
.goldthreebg {
width: 543rpx;
height: 368rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.goldthreeaward {
width: 225rpx;
height: 238rpx;
left: 169rpx;
top: 72rpx;
position: absolute;
}
.goldthreebtn {
width: 443rpx;
height: 85rpx;
left: 61rpx;
top: 436rpx;
position: absolute;
}
}
.goldlocktip {
width: 257rpx;
height: 41rpx;
left: 429rpx;
top: 0rpx;
position: absolute;
}
}
.platinum {
width: 686rpx;
height: 1139rpx;
left: 32rpx;
top: 79rpx;
position: absolute;
.platinumbg3 {
width: 686rpx;
height: 1139rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
opacity: 0.2;
}
.platinumbg2 {
width: 640rpx;
height: 479rpx;
left: 23rpx;
top: 49rpx;
position: absolute;
opacity: 0.2;
}
.platinumbg1 {
width: 640rpx;
height: 437rpx;
left: 23rpx;
top: 543rpx;
position: absolute;
opacity: 0.2;
}
.platinumlocktip {
width: 257rpx;
height: 41rpx;
left: 429rpx;
top: 0rpx;
position: absolute;
}
.platinumone {
width: 567rpx;
height: 423rpx;
left: 59rpx;
top: 71rpx;
position: absolute;
.platinumonebg {
width: 566rpx;
height: 423rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.platinumoneaward {
width: 304rpx;
height: 212rpx;
left: 3rpx;
top: 90rpx;
position: absolute;
}
.platinumoneadd {
width: 29rpx;
height: 30rpx;
left: 319rpx;
top: 180rpx;
position: absolute;
}
.platinumonedesc {
width: 207rpx;
height: 159rpx;
left: 360rpx;
top: 116rpx;
position: absolute;
}
}
.platinumthree {
width: 543rpx;
height: 521rpx;
left: 59rpx;
top: 572rpx;
position: absolute;
.platinumthreeaward {
width: 225rpx;
height: 238rpx;
left: 169rpx;
top: 72rpx;
position: absolute;
}
.platinumthreebg {
width: 543rpx;
height: 368rpx;
left: 0rpx;
top: 0rpx;
position: absolute;
}
.platinumthreebtn {
width: 443rpx;
height: 85rpx;
left: 61rpx;
top: 436rpx;
position: absolute;
}
}
}
}
</style>
components/pointRightsCom/yearGiftImages.js
View file @ cf35a39f
const version = 'v1'
// yearGift 组件图片资源常量
export const YEAR_GIFT_IMAGES = {
// Diamond 等级相关图片
DIAMOND: {
BG3: 'YearGift/diamondBg3.png',
BG2: 'YearGift/diamondBg2.png',
BG1: 'YearGift/diamondBg1.png',
BG3: `pointRights/YearGift/${version}/diamondBg3.png`,
BG2: `pointRights/YearGift/${version}/diamondBg2.png`,
BG1: `pointRights/YearGift/${version}/diamondBg1.png`,
ONE: {
BG: 'YearGift/diamondOneBg.png',
AWARD: 'YearGift/diamondOneAward.png',
ADD: 'YearGift/diamondOneAdd.png',
DESC: 'YearGift/diamondOneDesc.png'
BG: `pointRights/YearGift/${version}/diamondOneBg.png`,
AWARD: `pointRights/YearGift/${version}/diamondOneAward.png`,
ADD: `pointRights/YearGift/${version}/diamondOneAdd.png`,
DESC: `pointRights/YearGift/${version}/diamondOneDesc.png`
},
THREE: {
BG: 'YearGift/diamondThreeBg.png',
AWARD: 'YearGift/diamondThreeAward.png',
BTN: 'YearGift/diamondThreeBtn.png'
BG: `pointRights/YearGift/${version}/diamondThreeBg.png`,
AWARD: `pointRights/YearGift/${version}/diamondThreeAward.png`,
BTN: `pointRights/YearGift/${version}/diamondThreeBtn.png`
}
},
// Starshine 等级相关图片
STARSHINE: {
BG3: 'YearGift/starshineBg3.png',
BG2: 'YearGift/starshineBg2.png',
BG1: 'YearGift/starshineBg1.png',
BG3: `pointRights/YearGift/${version}/starshineBg3.png`,
BG2: `pointRights/YearGift/${version}/starshineBg2.png`,
BG1: `pointRights/YearGift/${version}/starshineBg1.png`,
ONE: {
BG: 'YearGift/starshineOneBg.png',
AWARD: 'YearGift/starshineOneAward.png',
ADD: 'YearGift/starshineOneAdd.png',
DESC: 'YearGift/starshineOneDesc.png'
BG: `pointRights/YearGift/${version}/starshineOneBg.png`,
AWARD: `pointRights/YearGift/${version}/starshineOneAward.png`,
ADD: `pointRights/YearGift/${version}/starshineOneAdd.png`,
DESC: `pointRights/YearGift/${version}/starshineOneDesc.png`
},
THREE: {
BG: 'YearGift/starshineThreeBg.png',
AWARD: 'YearGift/starshineThreeAward.png',
BTN: 'YearGift/starshineThreeBtn.png'
BG: `pointRights/YearGift/${version}/starshineThreeBg.png`,
AWARD: `pointRights/YearGift/${version}/starshineThreeAward.png`,
BTN: `pointRights/YearGift/${version}/starshineThreeBtn.png`
}
},
// Starlight 等级相关图片
STARLIGHT: {
BG3: 'YearGift/starlightBg3.png',
BG2: 'YearGift/starlightBg2.png',
BG1: 'YearGift/starlightBg1.png',
BG3: `pointRights/YearGift/${version}/starlightBg3.png`,
BG2: `pointRights/YearGift/${version}/starlightBg2.png`,
BG1: `pointRights/YearGift/${version}/starlightBg1.png`,
ONE: {
BG: 'YearGift/starlightOneBg.png',
AWARD: 'YearGift/starlightOneAward.png',
ADD: 'YearGift/starlightOneAdd.png',
DESC: 'YearGift/starlightOneDesc.png'
BG: `pointRights/YearGift/${version}/starlightOneBg.png`,
AWARD: `pointRights/YearGift/${version}/starlightOneAward.png`,
ADD: `pointRights/YearGift/${version}/starlightOneAdd.png`,
DESC: `pointRights/YearGift/${version}/starlightOneDesc.png`
},
THREE: {
BG: 'YearGift/starlightThreeBg.png',
AWARD: 'YearGift/starlightThreeAward.png',
BTN: 'YearGift/starlightThreeBtn.png'
BG: `pointRights/YearGift/${version}/starlightThreeBg.png`,
AWARD: `pointRights/YearGift/${version}/starlightThreeAward.png`,
BTN: `pointRights/YearGift/${version}/starlightThreeBtn.png`
}
},
// Gold 等级相关图片
GOLD: {
BG3: 'YearGift/goldBg3.png',
BG2: 'YearGift/goldBg2.png',
BG1: 'YearGift/goldBg1.png',
BG3: `pointRights/YearGift/${version}/goldBg3.png`,
BG2: `pointRights/YearGift/${version}/goldBg2.png`,
BG1: `pointRights/YearGift/${version}/goldBg1.png`,
ONE: {
BG: 'YearGift/goldOneBg.png',
AWARD: 'YearGift/goldOneAward.png',
ADD: 'YearGift/goldOneAdd.png',
DESC: 'YearGift/goldOneDesc.png'
BG: `pointRights/YearGift/${version}/goldOneBg.png`,
AWARD: `pointRights/YearGift/${version}/goldOneAward.png`,
ADD: `pointRights/YearGift/${version}/goldOneAdd.png`,
DESC: `pointRights/YearGift/${version}/goldOneDesc.png`
},
THREE: {
BG: 'YearGift/goldThreeBg.png',
AWARD: 'YearGift/goldThreeAward.png',
BTN: 'YearGift/goldThreeBtn.png'
BG: `pointRights/YearGift/${version}/goldThreeBg.png`,
AWARD: `pointRights/YearGift/${version}/goldThreeAward.png`,
BTN: `pointRights/YearGift/${version}/goldThreeBtn.png`
},
LOCK_TIP: 'YearGift/goldLockTip.png'
LOCKTIP: `pointRights/YearGift/${version}/goldLockTip.png`
},
// Platinum 等级相关图片
PLATINUM: {
BG3: 'YearGift/platinumBg3.png',
BG2: 'YearGift/platinumBg2.png',
BG1: 'YearGift/platinumBg1.png',
BG3: `pointRights/YearGift/${version}/platinumBg3.png`,
BG2: `pointRights/YearGift/${version}/platinumBg2.png`,
BG1: `pointRights/YearGift/${version}/platinumBg1.png`,
LOCKTIP: `pointRights/YearGift/${version}/platinumLockTip.png`,
ONE: {
BG: 'YearGift/platinumOneBg.png',
AWARD: 'YearGift/platinumOneAward.png',
ADD: 'YearGift/platinumOneAdd.png',
DESC: 'YearGift/platinumOneDesc.png'
BG: `pointRights/YearGift/${version}/platinumOneBg.png`,
AWARD: `pointRights/YearGift/${version}/platinumOneAward.png`,
ADD: `pointRights/YearGift/${version}/platinumOneAdd.png`,
DESC: `pointRights/YearGift/${version}/platinumOneDesc.png`
},
THREE: {
BG: 'YearGift/platinumThreeBg.png',
AWARD: 'YearGift/platinumThreeAward.png',
BTN: 'YearGift/platinumThreeBtn.png'
},
LOCK_TIP: 'YearGift/platinumLockTip.png'
BG: `pointRights/YearGift/${version}/platinumThreeBg.png`,
AWARD: `pointRights/YearGift/${version}/platinumThreeAward.png`,
BTN: `pointRights/YearGift/${version}/platinumThreeBtn.png`
}
}
}
pages/testPage/testPage.vue
View file @ cf35a39f
<template>
<view>
<BabyClass />
<!-- <xinrenliPopup /> -->
<view class="test-page">
<view class="page-title">测试页面 - MonthGift 组件</view>
<view class="component-container">
<MonthGift />
</view>
<view class="page-info">
<p class="info-title">组件信息</p>
<p>当前展示：月礼包权益组件 (MonthGift)</p>
<p>包含五个等级：Diamond、Starshine、Starlight、Gold、Platinum</p>
<p>每个等级包含：好券区域、购买区域、时间状态等</p>
<p class="note">注意：由于图片资源未配置，部分图片可能无法显示</p>
</view>
</view>
</template>
<script setup>
import BabyClass from '../../components/pointRightsCom/babyClass.vue';
import YearGift from '../../components/pointRightsCom/yearGift.vue';
import MonthGift from '../../components/pointRightsCom/monthGift.vue';
// import xinrenliPopup from '../../components/quanyi/xinrenliPopup.vue'
</script>
<style></style>
<style lang="less" scoped>
.test-page {
width: 100%;
min-height: 100vh;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx;
box-sizing: border-box;
.page-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 30rpx;
text-align: center;
}
.component-container {
width: 750rpx;
height: 1624rpx;
position: relative;
margin-bottom: 30rpx;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}
.page-info {
width: 100%;
max-width: 700rpx;
background-color: #fff;
padding: 30rpx;
border-radius: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
.info-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
text-align: center;
margin-bottom: 20rpx;
}
p {
font-size: 28rpx;
color: #666;
line-height: 1.6;
margin: 10rpx 0;
text-align: center;
}
.note {
color: #ff6b6b;
font-weight: 500;
margin-top: 20rpx;
padding: 20rpx;
background-color: #fff5f5;
border-radius: 10rpx;
border-left: 4rpx solid #ff6b6b;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment