113 lines
3.5 KiB
Vue
113 lines
3.5 KiB
Vue
<script setup>
|
||
import bannerImg from '/static/images/index/banner_1.png'
|
||
import bannerImg2 from '/static/images/index/banner_2.png'
|
||
import bannerImg3 from '/static/images/index/banner_3.png'
|
||
import honestyBanner from '/static/images/index/banner_B.png'
|
||
import indexPromoteIcon from '/static/images/index/tgbg.png'
|
||
import indexInvitationIcon from '/static/images/index/yqhy.png'
|
||
import { ensurePrivacyConsentIfNeeded } from '@/composables/usePrivacyConsent'
|
||
|
||
definePage({ layout: 'home' })
|
||
|
||
onShow(() => {
|
||
ensurePrivacyConsentIfNeeded()
|
||
})
|
||
|
||
const banners = [bannerImg, bannerImg2, bannerImg3]
|
||
|
||
function toInvitation() {
|
||
uni.navigateTo({ url: '/pages/invitation' })
|
||
}
|
||
|
||
function toPromote() {
|
||
uni.navigateTo({ url: '/pages/promote' })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="box-border min-h-screen bg-[#f5faff] pb-4">
|
||
<view class="m-4 overflow-hidden rounded-2xl">
|
||
<swiper
|
||
class="banner-swiper w-full"
|
||
circular
|
||
autoplay
|
||
:interval="3000"
|
||
indicator-dots
|
||
indicator-color="rgba(255,255,255,0.45)"
|
||
indicator-active-color="#ffffff"
|
||
>
|
||
<swiper-item v-for="(item, index) in banners" :key="index" class="h-full w-full">
|
||
<image :src="item" class="h-full w-full" mode="aspectFill" />
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<view class="mt-2 px-4">
|
||
<view class="mb-2 text-base text-gray-800 font-bold">
|
||
即刻赚佣金
|
||
</view>
|
||
|
||
<view
|
||
class="card-gradient-1 mb-4 flex items-center rounded-2xl p-0 shadow-xl"
|
||
@click="toPromote"
|
||
>
|
||
<view class="flex flex-1 flex-col items-start justify-center py-4 pl-4">
|
||
<view class="mb-1 text-[20px] text-blue-700 font-bold">
|
||
直推报告
|
||
</view>
|
||
<view class="mb-4 text-xs text-gray-700">
|
||
选择所需报告类型，灵活定价，一键分享客户，客户下单即结算，佣金实时到账
|
||
</view>
|
||
<wd-button plain>
|
||
立即推广
|
||
</wd-button>
|
||
</view>
|
||
<image class="mx-4 my-4 h-20 w-20" :src="indexPromoteIcon" mode="aspectFit" />
|
||
</view>
|
||
|
||
<view
|
||
class="card-gradient-2 flex items-center rounded-2xl p-0 shadow-xl"
|
||
@click="toInvitation"
|
||
>
|
||
<view class="flex flex-1 flex-col items-start justify-center py-4 pl-4">
|
||
<view class="mb-1 text-[20px] text-teal-700 font-bold">
|
||
邀请下级代理
|
||
</view>
|
||
<view class="mb-4 text-xs text-gray-700">
|
||
邀请好友成为代理，好友推广获客，客户支付即返佣，团队收益轻松到手
|
||
</view>
|
||
<wd-button plain>
|
||
立即邀请
|
||
</wd-button>
|
||
</view>
|
||
<image class="mx-4 my-4 h-20 w-20" :src="indexInvitationIcon" mode="aspectFit" />
|
||
</view>
|
||
|
||
<view class="relative mt-4 h-[120px] overflow-hidden rounded-2xl shadow-xl">
|
||
<image class="absolute inset-0 h-full w-full" :src="honestyBanner" mode="aspectFill" />
|
||
<view class="absolute inset-0 bg-black/5" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.banner-swiper {
|
||
height: 160px;
|
||
}
|
||
|
||
.card-gradient-1 {
|
||
background: linear-gradient(135deg, #e3f0ff 0%, #fafdff 100%);
|
||
box-shadow:
|
||
0 6px 24px 0 rgba(60, 120, 255, 0.1),
|
||
0 1.5px 4px 0 rgba(60, 120, 255, 0.08);
|
||
}
|
||
|
||
.card-gradient-2 {
|
||
background: linear-gradient(135deg, #e6f7fa 0%, #fafdff 100%);
|
||
box-shadow:
|
||
0 6px 24px 0 rgba(0, 200, 180, 0.1),
|
||
0 1.5px 4px 0 rgba(0, 200, 180, 0.08);
|
||
}
|
||
</style>
|