<script>
|
export default {
|
name: "tehuichongzhi",
|
props: {
|
VIP: {
|
type: Number,
|
default: 1
|
}
|
},
|
}
|
</script>
|
|
<template>
|
<view>
|
|
|
<view v-if="VIP==1">
|
<view style="padding: 0 40rpx 0rpx 40rpx;">
|
<view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
|
<image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
音频会员五选一
|
<image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
</view>
|
<view style="display: flex;">
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/Y51.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">喜马拉雅</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/Y52.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">网易云</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/Y53.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">QQ音乐</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/Y54.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">蜻蜓FM</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/Y55.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">酷狗音乐</view>
|
</view>
|
</view>
|
</view>
|
|
<view style="height: 10rpx;background: #F7F7F7;"></view>
|
|
|
<view style="padding: 40rpx;padding-bottom: 20rpx;">
|
<view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
|
<image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
视频会员八选一
|
<image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
</view>
|
<view style="display: flex;flex-wrap: wrap">
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S81.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">优酷</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S82.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">腾讯视频</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S83.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">搜狐视频</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S84.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">芒果TV</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S85.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">爱奇艺</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S86.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">Bilibili</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S87.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">斗鱼直播</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/S89.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">虎牙直播</view>
|
</view>
|
</view>
|
</view>
|
<view style="height: 10rpx;background: #F7F7F7;"></view>
|
<view style="padding: 40rpx;padding-bottom: 20rpx;">
|
<view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
|
<image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
外卖会员四选一
|
<image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
</view>
|
<view style="display: flex;flex-wrap: wrap">
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/W41.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">美团</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/W42.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">饿了么</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/W43.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">京东外卖</view>
|
</view>
|
<view class="w25">
|
<image style="width: 108rpx;height: 108rpx;" src="/static/imgs/quanshou/W44.png"></image>
|
<view style="text-align: center ;color: #121212;font-size: 20rpx;">盒马</view>
|
</view>
|
|
</view>
|
</view>
|
<view style="height: 10rpx;background: #F7F7F7;"></view>
|
|
<view style="padding: 40rpx;padding-bottom:20rpx;">
|
<view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
|
<image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
生活交通代金券
|
<image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
</view>
|
<view style="display: flex;flex-wrap: wrap">
|
<view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH1.png"></image></view>
|
<view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH2.png"></image></view>
|
<view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH3.png"></image></view>
|
<view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH4.png"></image></view>
|
<view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH5.png"></image></view>
|
<view class="w33"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH6.png"></image></view>
|
<view class="w33" style="margin-bottom: 0;"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH7.png"></image></view>
|
<view class="w33" style="margin-bottom: 0;"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH8.png"></image></view>
|
<view class="w33" style="margin-bottom: 0;"><image style="width: 200rpx;height: 148rpx;" src="/static/imgs/quanshou/SH9.png"></image></view>
|
</view>
|
</view>
|
</view>
|
|
|
<view v-if="VIP==2">
|
<view style="padding: 0 40rpx 0rpx 40rpx;">
|
<view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
|
<image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
粉钻VIP特权
|
<image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
</view>
|
<view style="display: flex;justify-content: space-between;flex-wrap: wrap">
|
<view class="w50">
|
<view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV1.png"></image></view>
|
<view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
|
<view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">优酷季卡</view>
|
<view style="font-size: 24rpx;color: #5B320D;">价值¥198</view>
|
</view>
|
</view>
|
<view class="w50">
|
<view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV2.png"></image></view>
|
<view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
|
<view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">爱奇艺季卡</view>
|
<view style="font-size: 24rpx;color: #5B320D;">价值¥88</view>
|
</view>
|
</view>
|
<view class="w50">
|
<view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV3.png"></image></view>
|
<view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
|
<view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">QQ音乐季卡</view>
|
<view style="font-size: 24rpx;color: #5B320D;">价值¥198</view>
|
</view>
|
</view>
|
<view class="w50">
|
<view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV4.png"></image></view>
|
<view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
|
<view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">黑胶季卡</view>
|
<view style="font-size: 24rpx;color: #5B320D;">价值¥145</view>
|
</view>
|
</view>
|
<view class="w50">
|
<view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV5.png"></image></view>
|
<view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
|
<view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">芒果TV季卡</view>
|
<view style="font-size: 24rpx;color: #5B320D;">价值¥99</view>
|
</view>
|
</view>
|
<view class="w50">
|
<view><image style="width: 100rpx;height: 100rpx;" src="/static/imgs/quanshou/FZV6.png"></image></view>
|
<view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center ;">
|
<view style="font-size: 28rpx;color: #5B320D;font-weight: 600;min-height: 40rpx">得到季卡</view>
|
<view style="font-size: 24rpx;color: #5B320D;">价值¥1168</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view style="height: 10rpx;background: #F7F7F7;"></view>
|
<view style="padding: 40rpx;padding-bottom: 20rpx;">
|
<view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
|
<image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
红包免费领
|
<image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
</view>
|
<view style="display: flex;flex-wrap: wrap">
|
<view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB1.png"></image></view>
|
<view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB2.png"></image></view>
|
<view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB3.png"></image></view>
|
<view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB4.png"></image></view>
|
<view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB5.png"></image></view>
|
<view class="w33" style="margin-bottom: 20rpx;"><image style="width: 208rpx;height: 178rpx;" src="/static/imgs/quanshou/KB6.png"></image></view>
|
</view>
|
</view>
|
<view style="height: 10rpx;background: #F7F7F7;"></view>
|
|
<view style="padding: 40rpx;padding-bottom: 0rpx;">
|
<view style="text-align: center;color: #333333;font-size: 32rpx;font-weight: 600;margin-bottom: 34rpx;">
|
<image style="width: 22rpx;height: 22rpx;margin-right: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
专属特惠
|
<image style="width: 22rpx;height: 22rpx;margin-left: 58rpx;" src="/static/imgs/quanshou/Star.png"></image>
|
</view>
|
<view style="display: flex;flex-wrap: wrap">
|
<view class="w100" style="margin-bottom: 20rpx;"><image style="width: 100%;height: 170rpx;" src="/static/imgs/quanshou/ZC1.png"></image></view>
|
<view class="w100" style="margin-bottom: 20rpx;"><image style="width: 100%;height: 170rpx;" src="/static/imgs/quanshou/ZC2.png"></image></view>
|
<view class="w100" style="margin-bottom: 0rpx;"><image style="width: 100%;height: 170rpx;" src="/static/imgs/quanshou/ZC3.png"></image></view>
|
|
</view>
|
</view>
|
|
</view>
|
|
|
|
|
</view>
|
</template>
|
|
<style scoped lang="scss">
|
.w25 {
|
width: 20%;
|
text-align: center;
|
margin-bottom: 24rpx;
|
}
|
.w33{
|
width: 33%;
|
text-align: center;
|
margin-bottom: 15rpx;
|
}
|
.w50{
|
width: calc(50% - 20rpx);
|
background: #FFEAF9;border-radius: 24rpx;
|
padding: 20rpx;
|
display: flex;
|
margin-bottom: 20rpx;
|
}
|
.w100{
|
width: 100%;
|
}
|
</style>
|
