<template>
|
<view class="content">
|
<view class="bg">
|
<view class="box">
|
<view class="row-1">
|
<view class="row-1-li" v-for="(item,index) in list1" :key="index">
|
<view>
|
<image class="row-1-li-img" style="width: 88rpx;height: 88rpx;" :src="item.img" mode=""></image>
|
<view class="row-1-li-title">{{ item.title }}</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
</view>
|
|
|
<view style="position: relative;top: -270rpx;padding:0 32rpx;">
|
<view class="title-1" >
|
<image style="height: 54rpx;width: 412.14rpx;margin: auto;margin-top: 60rpx;" src="https://test-skfq.iben-itech.com/img/gift/title1.png"></image>
|
<view style="display: flex;flex-direction: row;margin-top: 8rpx;justify-content: center">
|
<view style="color: #FFFFFF;font-size: 28rpx">最高可省60元</view>
|
<view style="color: rgba(255,255,255,0.5);font-size: 28rpx;margin-left: 15rpx;">（7选1，2次）</view>
|
</view>
|
</view>
|
|
<view style="display: flex;flex-direction: row;flex-wrap: wrap;background: white;border-radius: 16rpx;padding: 0 36rpx;padding-top: 40rpx;margin-top: 20rpx;">
|
<view style="width: 25%;margin-bottom: 40rpx;" v-for="(item,index) in list2" :key="index">
|
<view>
|
<image style="width: 96rpx;height: 96rpx;margin: auto;" :src="item.img"></image>
|
<view style="font-size: 24rpx;background: linear-gradient( 163deg, #FFFFFF 0%, #FFC598 100%), #D8D8D8;border-radius: 18rpx;text-align: center;color: #7A5014;width: 140rpx;margin: auto;position: relative;top: -20rpx;">
|
{{ item.dec }}</view>
|
</view>
|
<view style="text-align: center;font-size: 28rpx">{{ item.title }}</view>
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="position: relative;top: -200rpx;padding:0 32rpx;">
|
<view class="title-1" >
|
<image style="height: 54rpx;width: 412.14rpx;margin: auto;margin-top: 60rpx;" src="https://test-skfq.iben-itech.com/img/gift/title2.png"></image>
|
<view style="display: flex;flex-direction: row;margin-top: 8rpx;justify-content: center">
|
<view style="color: #FFFFFF;font-size: 28rpx">最高可省75元</view>
|
</view>
|
</view>
|
|
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 20rpx;">
|
<view style="background: white;border-radius: 16rpx;padding: 36rpx 0;width: calc(33.33% - 10rpx);font-weight: 700" v-for="(item,index) in list3" :key="index">
|
<image style="height: 106rpx;width: 106rpx;margin: auto" :src="item.img"></image>
|
<view style="color: #252938;font-size: 24rpx;margin-top: 24rpx;text-align: center">{{ item.title }}</view>
|
<view style="font-size: 24rpx;margin-top: 8rpx;color: #8B8D96;text-align: center">{{ item.dec }}</view>
|
</view>
|
|
</view>
|
</view>
|
|
<view style="position: relative;top: -200rpx;padding:0 32rpx;">
|
<view class="title-1" >
|
<image style="height: 54rpx;width: 412.14rpx;margin: auto;margin-top: 60rpx;" src="https://test-skfq.iben-itech.com/zip/static/img/gift/title3.png"></image>
|
<view style="display: flex;flex-direction: row;margin-top: 8rpx;justify-content: center">
|
<view style="color: #FFFFFF;font-size: 28rpx">最高可省865元</view>
|
</view>
|
</view>
|
|
<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 20rpx;flex-wrap: wrap">
|
<view style="background: white;border-radius: 16rpx;padding: 36rpx 12rpx;width: calc(50% - 9rpx);margin-bottom: 20rpx;" v-for="(item,index) in list4" :key="index">
|
<image style="height: 106rpx;width: 106rpx;margin: auto" :src="item.img"></image>
|
<view style="color: #252938;font-size: 24rpx;margin-top: 24rpx;text-align: center;font-weight: 700">{{item.title}}</view>
|
<view style="font-size: 24rpx;margin-top: 8rpx;color: #8B8D96;text-align: center;margin-bottom: 8rpx;">{{item.dec}}</view>
|
<text style="background: linear-gradient( 163deg, #FFFFFF 0%, #FFC598 100%), #D8D8D8;color: #7A5014;border-radius: 18rpx;width: 200rpx;margin: auto;text-align: center">4.51w已抢</text>
|
|
</view>
|
|
</view>
|
</view>
|
</view>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
list1:[
|
{
|
title:'1500元免息额度',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/h1.png'
|
},
|
{
|
title:'优先放款',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/h2.png'
|
},
|
{
|
title:'审批加速',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/h3.png'
|
},
|
{
|
title:'活动特权',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/h4.png'
|
},
|
{
|
title:'100元租机优惠券',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/h5.png'
|
},
|
{
|
title:'专属客服',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/h6.png'
|
},
|
],
|
list2:[
|
{
|
title:'爱奇艺',
|
dec:'4.51w已抢',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/m1.png'
|
},
|
{
|
title:'腾讯视频',
|
dec:'4.51w已抢',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/m2.png'
|
},
|
{
|
title:'优酷视频',
|
dec:'4.51w已抢',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/m3.png'
|
},
|
{
|
title:'芒果TV',
|
dec:'4.51w已抢',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/m4.png'
|
},
|
{
|
title:'芒果TV',
|
dec:'4.51w已抢',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/m5.png'
|
},
|
{
|
title:'芒果TV',
|
dec:'4.51w已抢',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/m6.png'
|
},
|
{
|
title:'酷狗音乐',
|
dec:'4.51w已抢',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/m7.png'
|
},
|
],
|
list3:[
|
{
|
title:'15元饿了么外卖券',
|
dec:'立减7.5元x2次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/f1.png'
|
},
|
{
|
title:'50元电影通用券',
|
dec:'立减25元x2次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/f2.png'
|
},
|
{
|
title:'10元话费充值券',
|
dec:'立减5元x2次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/f3.png'
|
},
|
],
|
list4: [{
|
title: '10元滴滴快车券',
|
dec: '立减5元x2次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/c1.png'
|
}, {
|
title: '500元零食大礼包',
|
dec: '免费领x1次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/c2.png'
|
}, {
|
title: '肯德基代金券',
|
dec: '立减15元x2次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/c3.png'
|
}, {
|
title: '麦当劳代金券',
|
dec: '立减15元x2次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/c4.png'
|
}, {
|
title: '星巴克咖啡券',
|
dec: '立减17.5元x2次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/c5.png'
|
}, {
|
title: '太平洋咖啡券',
|
dec: '立减15.5元x2次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/c6.png'
|
}, {
|
title: '5-8折住星级酒店',
|
dec: '最高优惠200元x1次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/c7.png'
|
}, {
|
title: '90元全球高铁VIP休息室',
|
dec: '9.9元买100元贵宾厅x1次',
|
img:'https://test-skfq.iben-itech.com/zip/static/img/gift/c7.png'
|
}]
|
}
|
},
|
|
|
}
|
</script>
|
<style scoped lang="scss">
|
page {
|
min-height: 100vh;
|
background-color: #243F89;
|
}
|
.content {
|
background-color: #243F89;
|
.bg {
|
background: url("https://test-skfq.iben-itech.com/zip/static/img/gift/back.png") no-repeat;
|
background-size: 100% 100%;
|
width: 100%;
|
height: 1102rpx;
|
padding:0 32rpx;
|
position: relative;
|
top: -60rpx;
|
.box{
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
margin-top: 500rpx;
|
padding-bottom: 60rpx;
|
padding-left: 50rpx;
|
padding-right: 50rpx;
|
.row-1{
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
.row-1-li{
|
width: 33.33%;
|
margin-top: 42rpx;
|
.row-1-li-img{
|
margin: auto;
|
}
|
.row-1-li-title{
|
margin: auto;
|
font-size: 24rpx;
|
color: #252938;
|
margin-top: 8rpx;
|
}
|
}
|
}
|
}
|
|
}
|
}
|
</style>
|
