From bb4196b029c65beb5b7ea686fc80ef8e622ae27c Mon Sep 17 00:00:00 2001
From: lin <1005713861@163.com>
Date: Tue, 28 Apr 2026 18:03:54 +0800
Subject: [PATCH] UI: 小猪优选
---
pages/quanshou/components/tehuichongzhi.vue | 263 ++++------------------------------------------------
1 files changed, 23 insertions(+), 240 deletions(-)
diff --git a/pages/quanshou/components/tehuichongzhi.vue b/pages/quanshou/components/tehuichongzhi.vue
index ab84bcf..95c1c05 100644
--- a/pages/quanshou/components/tehuichongzhi.vue
+++ b/pages/quanshou/components/tehuichongzhi.vue
@@ -1,255 +1,38 @@
<script>
-export default {
- name: "tehuichongzhi",
- props: {
- VIP: {
- type: Number,
- default: 1
- }
- },
+export default {
+ name: "tehuichongzhi"
}
</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 style="margin-bottom: 20rpx;">
+ <image style="width: 22rpx;height: 22rpx;" src="/static/img/quanshou/Star.png"></image>
+ <text style="font-weight: 600;font-size: 32rpx;color: #333333;margin-left: 10rpx;">特惠充值</text>
+ <text style="font-size: 28rpx;color: #666666;margin-left: 20rpx;">低至5折起，越充越省钱！</text>
</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 style="display: flex;flex-wrap: wrap;justify-content: space-between">
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C1.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">爱奇艺</view><view style="font-size: 20rpx;color: #666666;">7折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C2.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">芒果TV</view><view style="font-size: 20rpx;color: #666666;">4.9折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C3.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">腾讯视频</view><view style="font-size: 20rpx;color: #666666;">3.8折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C4.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">优酷</view><view style="font-size: 20rpx;color: #666666;">3折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C5.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">网易云</view><view style="font-size: 20rpx;color: #666666;">5.9折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C6.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">QQ音乐</view><view style="font-size: 20rpx;color: #666666;">92折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C7.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">酷狗</view><view style="font-size: 20rpx;color: #666666;">4.9折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C8.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">哔哩哔哩</view><view style="font-size: 20rpx;color: #666666;">6.6折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C9.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333; margin: 10rpx 0 5rpx 0;">美团外卖</view><view style="font-size: 20rpx;color: #666666;">8折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C10.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">饿了么</view><view style="font-size: 20rpx;color: #666666;">5.9折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C11.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">瑞幸咖啡</view><view style="font-size: 20rpx;color: #666666;">6.5折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C12.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">蜜雪冰城</view><view style="font-size: 20rpx;color: #666666;">9折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C13.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">酷我</view><view style="font-size: 20rpx;color: #666666;">9.3折起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C14.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">QQ阅读</view><view style="font-size: 20rpx;color: #666666;">7起</view></view>
+ <view style="text-align: center; flex: 0 0 calc(20%);margin-top: 22rpx;"><image src="/static/img/quanshou/C15.png" style="width: 88rpx;height: 88rpx;"></image><view style="font-size: 24rpx;color: #333333;margin: 10rpx 0 5rpx 0;">文心一言</view><view style="font-size: 20rpx;color: #666666;">6折起</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>
--
Gitblit v1.9.3