Skip to content

飞
飞鹤小程序
Commit e28d21e2 authored by chenkai1's avatar chenkai1
Browse files
Options

添加埋点

parent 27757f0c
Hide whitespace changes
Inline Side-by-side
Showing with 1786 additions and 1677 deletions
pages/expertTeamPage/expertTeamPage.vue
View file @ e28d21e2
......@@ -37,6 +37,8 @@
getHealthField
} from "@/api/common";
import md from '@/md';
const curTabIndex = ref(1);
onLoad((options) => {
......@@ -44,10 +46,21 @@
console.log('接收到的参数:', curTabIndex.value)
});
const onSelTab = (index) => {
let str = index === 1 ? '名医专家' : (index === 2 ? '科研专家' : '权威机构')
md.sensorLogTake({
xcxClick: "专家团二级页面点击",
pageName: "专家团-二级页面",
buttonName: str + "tab按钮点击",
});
curTabIndex.value = index;
}
//跳转到医生问诊页面
const onLink = async () => {
md.sensorLogTake({
xcxClick: "专家团二级页面点击",
pageName: "专家团-二级页面",
buttonName: "专家在线咨询按钮点击",
});
const res = await getHealthField();
if (!res.success) {
......
views/Home.vue
View file @ e28d21e2
<template>
<view class="home-container" @scroll="onPageScroll">
<view class="content">
<swiper id="firstScreen" class="swiper banner" circular :autoplay="autoplay" :interval="interval"
:duration="duration" :indicator-dots="false" @change="onBannerSwiperChange">
<swiper-item v-for="(item, index) in swiperList" :key="item.url">
<view class="swiper-item banneritem">
<image @tap="jumpBannerHandler(item, index)" class="b-img" :src="$baseUrl + item.url"></image>
</view>
</swiper-item>
</swiper>
<!-- 溯源测试按钮 -->
<!-- <button style="width: 100%;height: 100rpx;background-color: #fff;color: #000;" @tap="testSource">溯源测试</button> -->
<!-- <view class="swiper-mask">
<image class="swiper-mask-img" :src="$baseUrl + 'homepage/home_format_v2.png'"></image>
</view> -->
<!-- 自定义指示点，仿照示意图 -->
<view class="custom-banner-indicator">
<view v-for="(item, idx) in swiperList" :key="item.url + idx"
:class="['banner-dot', { 'active': idx === bannerCurrentIndex }]"></view>
</view>
<view class="barbox" :style="`top:${statusBarHeight}px;`">
<image class="btnlogo" :src="$baseUrl + 'homepage/btnlogo.png'"></image>
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '搜索框'
}" class="btnsearch" @tap="goSearchHandler" :src="$baseUrl + 'homepage/btnsearch.png'">
</image>
<view class="customer-btn-wrap">
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '客服入口'
}" @tap="goCustomerHandler" class="btncustomer" :src="$baseUrl + 'homepage/btncustomer.png'">
</image>
<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '文字资源位入口'
}" @tap="showPopup(1, $event)" class="txtbox">
<text class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</text>
<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
</view> -->
<!--推荐工具-->
<view class="tools_box">
<view class="tools_maintitle">{{ toolList.maintitle }}</view>
<view class="tools_subtitle">{{ toolList.subtitle }}</view>
<swiper :vertical="false" :circular="true" class="tool_swiper" :display-multiple-items="1.65"
:next-margin="'0rpx'" :previous-margin="'0'" @change="onSwiperChange">
<swiper-item v-for="(item, index) in toolList.tools" :key="index"
:class="['swiperItem', { 'active': currentIndex === index }]">
<view class="tool">
<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber" class="sq_btn"></button>
<image class="tool_bg" :src="$baseUrl + item.icon" @click="handleToolClick(item)">
</image>
<!-- <image class="tool_icon" :src="$baseUrl + item.icon"></image>
<image class="tool_jt" :src="$baseUrl + toolList.jtIcon"></image>
<view class="tool_title">{{ item.title }}</view>
<view class="tool_context">{{ item.context }}</view> -->
</view>
</swiper-item>
</swiper>
<!-- 自定义指示点 -->
<view class="custom-indicator">
<view v-for="(item, index) in toolList.tools" :key="index" class="indicator-dot"
:class="{ 'active': currentIndex === index }">
</view>
</view>
</view>
<!--推荐工具-->
<!--专家团-->
<view class="et_box">
<view class="et_maintitle">{{ expertTeam.maintitle }}</view>
<view :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '文字资源位入口'
}" @tap="showPopup(1, $event)" class="et_subtitle">
<view class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</view>
<image class="icon_more" :src="$baseUrl + 'homepage/et_more.png'"></image>
</view>
<view class="et_main_box">
<view class="et_con_bg">
<view class="et_tab_box">
<view class="tab_box" @tap="onSelEtTap(0)">
<image class="et_tab" v-show="etTabSelIndex == 0"
:src="$baseUrl + 'homepage/et_sel_tab11.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 0"
:src="$baseUrl + 'homepage/et_tab11.png'">
</image>
</view>
<view class="tab_box" @tap="onSelEtTap(1)">
<image class="et_tab" v-show="etTabSelIndex == 1"
:src="$baseUrl + 'homepage/et_sel_tab2.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 1"
:src="$baseUrl + 'homepage/et_tab2.png'">
</image>
</view>
<view class="tab_box" @tap="onSelEtTap(2)">
<image class="et_tab" v-show="etTabSelIndex == 2"
:src="$baseUrl + 'homepage/et_sel_tab3.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 2"
:src="$baseUrl + 'homepage/et_tab3.png'">
</image>
</view>
</view>
<view class="et_con_box" @tap="onETMore">
<image class="et_con1" v-if="etTabSelIndex == 0" :src="$baseUrl + expertTeam.etConUrl1">
</image>
<image class="et_con2" v-if="etTabSelIndex == 1" :src="$baseUrl + expertTeam.etConUrl2">
</image>
<image class="et_con3" v-if="etTabSelIndex == 2" :src="$baseUrl + expertTeam.etConUrl3">
</image>
</view>
<view class="et_more_txt" @tap="onETMore">
<text class="txtlink">点击查看更多</text>
<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
</view>
</view>
</view>
</view>
<!--专家团-->
<!-- <view class="cardScroller">
<view class="cardbox">
<view class="cardboxitem" v-for="cardData in vipCardList" :key="cardData.level">
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `腰部banner-${cardData.level}`
}" @tap="jumpLinkCard(cardData, $event)" class="bg" :src="$baseUrl + cardData.bgUrl"></image>
<text class="level">{{ cardData.level }}</text>
<text class="subTitle">{{ cardData.subTitle }}</text>
<view class="showCornerTxt" v-if="cardData.showCornerTxt && cardData.showCornerTxt.length > 0">
{{ cardData.showCornerTxt }}
</view>
<view v-if="cardData.btnTitle && cardData.btnTitle.length > 0" :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `腰部banner-${cardData.level}`
}" class="cardbtn" @tap="jumpLinkWithLogin(cardData.link, $event)">
<image class="cardbtnbg" :src="$baseUrl + 'homepage/btn_receive.png'"></image>
<text class="btnTitle" :style="cardData.btnTitle.length > 7 ? 'font-size:22rpx;' : ''">{{
cardData.btnTitle }}</text>
<text class="btnSubTitle">{{ cardData.btnSubTitle }}</text>
<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>
</view>
</view>
</view>
</view> -->
<!-- <view class="contentbox" id="secondScreen">
<image class="contentbg" :src="$baseUrl + 'homepage/contentbg.png'" alt="" />
<image class="contentitem" :key="index" :style="contentItem._style"
v-for="(contentItem, index) in contentImgList" :src="$baseUrl + contentItem.bgUrl" :data-log="{
xcxClick: '首页-二屏页面点击',
pageName: '首页-二屏',
buttonName: `品牌介绍${index + 1}`
}" @tap="jumpLink(contentItem.link, contentItem.videoUrl, index, $event)"></image>
</view> -->
<view class="channelbox">
<text class="maintitle">{{ childrenInfoListMianTitle }}</text>
<view class="subtitle_box">
<text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-查看更多文字`
}" @tap="jumpLink(suggest.link, false, false, $event)"></image>
</view>
<view class="channelscroll">
<view class="box">
<view class="infobox" :key="index" v-for="(infoItem, index) in childrenInfoList" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-轮播-${index + 1}`
}" @tap="jumpLink(infoItem.link, false, false, $event)">
<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitlebox">
<view class="infotitlecon">
<view class="infotitle">{{ infoItem.desc }}</view>
<image v-if="infoItem.isNew" class="infotitletag"
:src="$baseUrl + 'homepage/home_new_tag_v3.png'">New</image>
</view>
<view class="infodesc">{{ infoItem.desc2 }}</view>
</view>
</view>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-查看更多文字`
}" @tap="jumpLink(suggest.link, false, false, $event)" class="desc desc2">
更多星妈会权威专家服务团 <view class="desc1"> 点击查看 > </view>
</view> -->
</view>
<view class="channelbox" id="thirdScreen">
<text class="maintitle">{{ channelTabListMianTitle }}</text>
<view class="subtitle_box">
<text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首位内容资源位-查看更多文字`
}" @tap="jumpLink(voiceStory.link, false, false, $event)"></image>
</view>
<view class="listbox">
<view @tap="channelTabHandler(index, $event)" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首页内容资源位分类${index + 1}-${item}`
}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'" v-for="(item, index) in channelTabList"
:key="index">
{{ item }}
</view>
</view>
<view class="channelscroll2">
<view class="box2">
<view class="infobox2" :key="index"
v-for="(infoItem, index) in changelInfoList[channelTabIndex]" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首页内容资源位分类${channelTabIndex + 1}-${channelTabList[channelTabIndex]}-${index + 1}`
}" @tap="jumpLink(infoItem.link, false, false, $event)">
<image class="infoimg2" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitle2box">
<view class="infotitle2">
{{ infoItem.desc }}
</view>
</view>
</view>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首位内容资源位-查看更多文字`
}" @tap="jumpLink(voiceStory.link, false, false, $event)" class="desc">
滑动或者点击查看全部 <view class="desc1"> 有声故事 > </view>
</view> -->
</view>
<view id="fourthScreen" class="bottomlink">
<image class="bottombg" :src="$baseUrl + 'homepage/bottombg.png'"></image>
<view class="box">
<image class="icon" v-for="(icon, index) in bottomLinkList" :key="index" :data-log="{
xcxClick: '首页-四屏页面点击',
pageName: '首页-四屏',
buttonName: `${qrNameList[index]}`
}" :src="$baseUrl + icon.bgUrl" :style="icon._style" @tap="showPopup(index, $event)"></image>
</view>
</view>
</view>
<view>
<!-- 普通弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
border-radius="48rpx">
<view v-if="qrObj !== null" class="popup-content">
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
<view class="title">
{{ qrObj.title || '' }}
</view>
<rich-text class="desc" :nodes="qrObj.desc || ''"></rich-text>
<image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + (qrObj.qrUrl || '')"></image>
<image @tap="downloadHandler($baseUrl + (qrObj.qrUrl || ''))" class="btndownload"
:src="$baseUrl + 'homepage/btn_download.png'"></image>
</view>
<view v-else class="popup-content" style="height: 977rpx;">
<image class="xingmahui" :src="$baseUrl + 'homepage/xingmahui.png'"></image>
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
</view>
<!-- 新增图片弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="imagePopup" background-color="transparent">
<view class="image-popup-content">
<image class="popup-image" :src="popupImageUrl" mode="aspectFit" @tap="imagePopupJump"></image>
<image class="popup-close-btn" @tap="closeImagePopup" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
<view v-if="showVideo" class="video-popup">
<video :src="currentVideoUrl" controls autoplay :style="{ width: '100vw', height: videoHeight }"></video>
<view class="close-btn-bottom" @tap="closeVideo">×</view>
</view>
<RegisterLayer v-model="showRegisterLayer" />
</view>
</template>
<script>
import { jump, JumpType } from '../utils';
import { useHomeStore } from '../stores/home';
import { fetchHomeJSON } from '../api/home';
import { useUserStore } from '../stores/user';
import RegisterLayer from "../components/RegisterLayer.vue";
import md from '../md';
import ExposureTracker from '../utils/exposure';
import { getHealthField } from "@/api/common";
// const homeStore = useHomeStore();
const userStore = useUserStore();
// 定义需要曝光检测的元素配置
const EXPOSURE_CONFIGS = [
{
id: 'firstScreen',
logParams: {
xcxPage: '首页-首屏页面浏览',
pageName: '首页-首屏'
}
},
// 可以添加更多需要曝光检测的元素配置
{
id: 'secondScreen',
logParams: {
xcxPage: '首页-二屏页面浏览',
pageName: '首页-二屏'
}
},
{
id: 'thirdScreen',
logParams: {
xcxPage: '首页-三屏页面浏览',
pageName: '首页-三屏'
}
},
{
id: 'fourthScreen',
logParams: {
xcxPage: '首页-四屏页面浏览',
pageName: '首页-四屏'
}
}
];
export default {
beforeDestroy() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
deactivated() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
data() {
return {
popType: 'bottom',
statusBarHeight: 38,
showRegisterLayer: false,
swiperList: [],
indicatorDots: true,
autoplay: true,
interval: 4000,
duration: 500,
indicatoractiveColor: "#a6a0a1",
indicatorColor: "rgba(255, 255, 255, 1)",
toolList: {},
expertTeam: {},
vipCardList: [],
contentImgList: [],
channelTabList: [],
channelTabIndex: 0,
changelInfoList: [],
childrenInfoList: [],
bottomLinkList: [],
qrInfoObj: undefined,
popupIndex: 0,
qrInfoList: [{ title: '', desc: '', qrUrl: '' }, { title: '', desc: '', qrUrl: '' }, { title: '', desc: '', qrUrl: '' }, { title: '', desc: '', qrUrl: '' }],
qrObj: { title: '', desc: '', qrUrl: '' },
showVideo: false,
currentVideoUrl: '',
isClickPhoneAuth: false,
voiceStory: {},
suggest: {},
videoHeight: '56vw',
qrNameList: ['公众号', '企业微信', '视频号', '小红书'],
windowHeight: 0,
isFirstScreenExposed: false,
scrollTimer: null,
exposureTracker: null,
currentIndex: 0,
etTabSelIndex: 0,
bannerCurrentIndex: 0,
childrenInfoListMianTitle: '',
channelTabListMianTitle: '',
popupImageUrl: '',
popupImageObj: {},
}
},
components: {
RegisterLayer
},
computed: {
homeStore() {
return useHomeStore();
}
},
props: {
scrollTop: {
type: Number,
default: 0
}
},
watch: {
homeStore: {
handler(newVal) {
this.showRegisterLayer = this.isClickPhoneAuth && newVal.isLogin && !newVal.babyExistence;
if (newVal.homeInfo !== null) {
this.initHomeInfo();
this.checkAndShowPopup();
}
},
deep: true,
immediate: true
},
scrollTop: {
handler(newVal) {
this.checkExposure(newVal);
}
}
},
mounted() {
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
this.statusBarHeight = menuButtonInfo.top;
this.isClickPhoneAuth = false;
// 获取窗口高度
const systemInfo = uni.getSystemInfoSync();
this.windowHeight = systemInfo.windowHeight;
// 初始化曝光检测工具
this.exposureTracker = new ExposureTracker(this);
this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);
// 初始检查曝光
this.$nextTick(() => {
this.checkExposure(this.scrollTop);
});
},
unmounted() {
// 组件销毁时清理弹窗状态（可选，根据业务需求决定是否保留状态）
// 如果需要重置弹窗状态，可以在这里调用 this.resetPopupState()
},
methods: {
testSource() {
uni.navigateTo({
url: '/pages/syWebview/syWebview?p=xmh'
})
},
async initHomeInfo() {
const { data } = await fetchHomeJSON();
console.warn("data", data)
if (data) {
this.swiperList = data.swiperList;
this.vipConfigList = data.vipConfigList;
// this.vipCardList = data.vipCardList;
this.contentImgList = data.contentImgList;
this.channelTabList = data.channelTabList;
this.changelInfoList = data.changelInfoList;
this.childrenInfoList = data.childrenInfoList[0] || [];
this.bottomLinkList = data.bottomLinkList;
this.qrInfoList = data.qrInfoList || [];
this.toolList = data.toolList;
this.expertTeam = data.expertTeam;
this.vipCardList = data.vipCardList;
this.voiceStory = data.voiceStory;
this.suggest = data.suggest;
this.childrenInfoListMianTitle = data.childrenInfoListMianTitle;
this.channelTabListMianTitle = data.channelTabListMianTitle;
this.popupImageUrl = this.$baseUrl + data.popupImageObj?.imageUrl || '';
this.popupImageObj = data.popupImageObj || {};
if (this.homeStore.isLogin) {
this.vipCardList[0] = data.vipConfigList.find(item => item.grade === this.homeStore.homeInfo?.grade);
this.vipCardList[0].level = this.homeStore.homeInfo?.gradeName;
<template>
<view class="home-container" @scroll="onPageScroll">
<view class="content">
<swiper id="firstScreen" class="swiper banner" circular :autoplay="autoplay" :interval="interval"
:duration="duration" :indicator-dots="false" @change="onBannerSwiperChange">
<swiper-item v-for="(item, index) in swiperList" :key="item.url">
<view class="swiper-item banneritem">
<image @tap="jumpBannerHandler(item, index)" class="b-img" :src="$baseUrl + item.url"></image>
</view>
</swiper-item>
</swiper>
<!-- 溯源测试按钮 -->
<!-- <button style="width: 100%;height: 100rpx;background-color: #fff;color: #000;" @tap="testSource">溯源测试</button> -->
<!-- <view class="swiper-mask">
<image class="swiper-mask-img" :src="$baseUrl + 'homepage/home_format_v2.png'"></image>
</view> -->
<!-- 自定义指示点，仿照示意图 -->
<view class="custom-banner-indicator">
<view v-for="(item, idx) in swiperList" :key="item.url + idx"
:class="['banner-dot', { 'active': idx === bannerCurrentIndex }]"></view>
</view>
<view class="barbox" :style="`top:${statusBarHeight}px;`">
<image class="btnlogo" :src="$baseUrl + 'homepage/btnlogo.png'"></image>
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '搜索框'
}" class="btnsearch" @tap="goSearchHandler" :src="$baseUrl + 'homepage/btnsearch.png'">
</image>
<view class="customer-btn-wrap">
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '客服入口'
}" @tap="goCustomerHandler" class="btncustomer" :src="$baseUrl + 'homepage/btncustomer.png'">
</image>
<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: '文字资源位入口'
}" @tap="showPopup(1, $event)" class="txtbox">
<text class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</text>
<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
</view> -->
<!--推荐工具-->
<view class="tools_box">
<view class="tools_maintitle">{{ toolList.maintitle }}</view>
<view class="tools_subtitle">{{ toolList.subtitle }}</view>
<swiper :vertical="false" :circular="true" class="tool_swiper" :display-multiple-items="1.65"
:next-margin="'0rpx'" :previous-margin="'0'" @change="onSwiperChange">
<swiper-item v-for="(item, index) in toolList.tools" :key="index"
:class="['swiperItem', { 'active': currentIndex === index }]">
<view class="tool">
<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber" class="sq_btn"></button>
<image class="tool_bg" :src="$baseUrl + item.icon" @tap="handleToolClick(item)">
</image>
<!-- <image class="tool_icon" :src="$baseUrl + item.icon"></image>
<image class="tool_jt" :src="$baseUrl + toolList.jtIcon"></image>
<view class="tool_title">{{ item.title }}</view>
<view class="tool_context">{{ item.context }}</view> -->
</view>
</swiper-item>
</swiper>
<!-- 自定义指示点 -->
<view class="custom-indicator">
<view v-for="(item, index) in toolList.tools" :key="index" class="indicator-dot"
:class="{ 'active': currentIndex === index }">
</view>
</view>
</view>
<!--推荐工具-->
<!--专家团-->
<view class="et_box">
<view class="et_maintitle">{{ expertTeam.maintitle }}</view>
<view :data-log="{
xcxClick: '首页-二屏页面点击',
pageName: '首页-二屏',
buttonName: '专家团副标题点击'
}" class="et_subtitle">
<view class="txtlink" @tap="showPopup1(1, 1)">星妈会医生在线答疑群，为孩子成长保驾护航</view>
<image class="icon_more" @tap="showPopup1(1, 2)" :src="$baseUrl + 'homepage/et_more.png'"></image>
</view>
<view class="et_main_box">
<view class="et_con_bg">
<view class="et_tab_box">
<view class="tab_box" @tap="onSelEtTap(0)">
<image class="et_tab" v-show="etTabSelIndex == 0"
:src="$baseUrl + 'homepage/et_sel_tab11.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 0"
:src="$baseUrl + 'homepage/et_tab11.png'">
</image>
</view>
<view class="tab_box" @tap="onSelEtTap(1)">
<image class="et_tab" v-show="etTabSelIndex == 1"
:src="$baseUrl + 'homepage/et_sel_tab2.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 1"
:src="$baseUrl + 'homepage/et_tab2.png'">
</image>
</view>
<view class="tab_box" @tap="onSelEtTap(2)">
<image class="et_tab" v-show="etTabSelIndex == 2"
:src="$baseUrl + 'homepage/et_sel_tab3.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 2"
:src="$baseUrl + 'homepage/et_tab3.png'">
</image>
</view>
</view>
<view class="et_con_box" @tap="onETMore(1, etTabSelIndex)">
<image class="et_con1" v-if="etTabSelIndex == 0" :src="$baseUrl + expertTeam.etConUrl1">
</image>
<image class="et_con2" v-if="etTabSelIndex == 1" :src="$baseUrl + expertTeam.etConUrl2">
</image>
<image class="et_con3" v-if="etTabSelIndex == 2" :src="$baseUrl + expertTeam.etConUrl3">
</image>
</view>
<view class="et_more_txt" @tap="onETMore(2, etTabSelIndex)">
<text class="txtlink">点击查看更多</text>
<image class="icon_arrow_yellow" :src="$baseUrl + 'homepage/icon_arrow_yellow.png'"></image>
</view>
</view>
</view>
</view>
<!--专家团-->
<!-- <view class="cardScroller">
<view class="cardbox">
<view class="cardboxitem" v-for="cardData in vipCardList" :key="cardData.level">
<image :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `腰部banner-${cardData.level}`
}" @tap="jumpLinkCard(cardData, $event)" class="bg" :src="$baseUrl + cardData.bgUrl"></image>
<text class="level">{{ cardData.level }}</text>
<text class="subTitle">{{ cardData.subTitle }}</text>
<view class="showCornerTxt" v-if="cardData.showCornerTxt && cardData.showCornerTxt.length > 0">
{{ cardData.showCornerTxt }}
</view>
<view v-if="cardData.btnTitle && cardData.btnTitle.length > 0" :data-log="{
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `腰部banner-${cardData.level}`
}" class="cardbtn" @tap="jumpLinkWithLogin(cardData.link, $event)">
<image class="cardbtnbg" :src="$baseUrl + 'homepage/btn_receive.png'"></image>
<text class="btnTitle" :style="cardData.btnTitle.length > 7 ? 'font-size:22rpx;' : ''">{{
cardData.btnTitle }}</text>
<text class="btnSubTitle">{{ cardData.btnSubTitle }}</text>
<button v-if="homeStore && !homeStore.isLogin" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber" class="phone-auth-btn-cover"></button>
</view>
</view>
</view>
</view> -->
<!-- <view class="contentbox" id="secondScreen">
<image class="contentbg" :src="$baseUrl + 'homepage/contentbg.png'" alt="" />
<image class="contentitem" :key="index" :style="contentItem._style"
v-for="(contentItem, index) in contentImgList" :src="$baseUrl + contentItem.bgUrl" :data-log="{
xcxClick: '首页-二屏页面点击',
pageName: '首页-二屏',
buttonName: `品牌介绍${index + 1}`
}" @tap="jumpLink(contentItem.link, contentItem.videoUrl, index, $event)"></image>
</view> -->
<view class="channelbox">
<text class="maintitle">{{ childrenInfoListMianTitle }}</text>
<view class="subtitle_box">
<text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-查看更多文字`
}" @tap="jumpLink(suggest.link, false, false, $event)"></image>
</view>
<view class="channelscroll">
<view class="box">
<view class="infobox" :key="index" v-for="(infoItem, index) in childrenInfoList" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-轮播-${index + 1}`
}" @tap="jumpLink(infoItem.link, false, false, $event)">
<image class="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitlebox">
<view class="infotitlecon">
<view class="infotitle">{{ infoItem.desc }}</view>
<image v-if="infoItem.isNew" class="infotitletag"
:src="$baseUrl + 'homepage/home_new_tag_v3.png'">New</image>
</view>
<view class="infodesc">{{ infoItem.desc2 }}</view>
</view>
</view>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `次位内容资源位-查看更多文字`
}" @tap="jumpLink(suggest.link, false, false, $event)" class="desc desc2">
更多星妈会权威专家服务团 <view class="desc1"> 点击查看 > </view>
</view> -->
</view>
<view class="channelbox" id="thirdScreen">
<text class="maintitle">{{ channelTabListMianTitle }}</text>
<view class="subtitle_box">
<text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
<image class="icon_more" :src="$baseUrl + 'homepage/home_more_btn_v2.png'" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首位内容资源位-查看更多文字`
}" @tap="jumpLink(voiceStory.link, false, false, $event)"></image>
</view>
<view class="listbox">
<view @tap="channelTabHandler(index, $event)" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首页内容资源位分类${index + 1}-${item}`
}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'" v-for="(item, index) in channelTabList"
:key="index">
{{ item }}
</view>
</view>
<view class="channelscroll2">
<view class="box2">
<view class="infobox2" :key="index"
v-for="(infoItem, index) in changelInfoList[channelTabIndex]" :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首页内容资源位分类${channelTabIndex + 1}-${channelTabList[channelTabIndex]}-${index + 1}`
}" @tap="jumpLink(infoItem.link, false, false, $event)">
<image class="infoimg2" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitle2box">
<view class="infotitle2">
{{ infoItem.desc }}
</view>
</view>
</view>
</view>
</view>
<!-- <view :data-log="{
xcxClick: '首页-三屏页面点击',
pageName: '首页-三屏',
buttonName: `首位内容资源位-查看更多文字`
}" @tap="jumpLink(voiceStory.link, false, false, $event)" class="desc">
滑动或者点击查看全部 <view class="desc1"> 有声故事 > </view>
</view> -->
</view>
<view id="fourthScreen" class="bottomlink">
<image class="bottombg" :src="$baseUrl + 'homepage/bottombg.png'"></image>
<view class="box">
<image class="icon" v-for="(icon, index) in bottomLinkList" :key="index" :data-log="{
xcxClick: '首页-四屏页面点击',
pageName: '首页-四屏',
buttonName: `${qrNameList[index]}`
}" :src="$baseUrl + icon.bgUrl" :style="icon._style" @tap="showPopup(index, $event)"></image>
</view>
</view>
</view>
<view>
<!-- 普通弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="popup" background-color="#fff"
border-radius="48rpx">
<view v-if="qrObj !== null" class="popup-content">
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
<view class="title">
{{ qrObj.title || '' }}
</view>
<rich-text class="desc" :nodes="qrObj.desc || ''"></rich-text>
<image :show-menu-by-longpress="true" class="qrcode" :src="$baseUrl + (qrObj.qrUrl || '')"></image>
<image @tap="downloadHandler($baseUrl + (qrObj.qrUrl || ''))" class="btndownload"
:src="$baseUrl + 'homepage/btn_download.png'"></image>
</view>
<view v-else class="popup-content" style="height: 977rpx;">
<image class="xingmahui" :src="$baseUrl + 'homepage/xingmahui.png'"></image>
<image class="btnclose" @tap="closePop" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
</view>
<!-- 新增图片弹窗 -->
<uni-popup :is-mask-click="false" :safe-area="false" ref="imagePopup" background-color="transparent">
<view class="image-popup-content">
<image class="popup-image" :src="popupImageUrl" mode="aspectFit" @tap="imagePopupJump"></image>
<image class="popup-close-btn" @tap="closeImagePopup" :src="$baseUrl + 'homepage/btnclose.png'"></image>
</view>
</uni-popup>
<view v-if="showVideo" class="video-popup">
<video :src="currentVideoUrl" controls autoplay :style="{ width: '100vw', height: videoHeight }"></video>
<view class="close-btn-bottom" @tap="closeVideo">×</view>
</view>
<RegisterLayer v-model="showRegisterLayer" />
</view>
</template>
<script>
import {
jump,
JumpType
} from '../utils';
import {
useHomeStore
} from '../stores/home';
import {
fetchHomeJSON
} from '../api/home';
import {
useUserStore
} from '../stores/user';
import RegisterLayer from "../components/RegisterLayer.vue";
import md from '../md';
import ExposureTracker from '../utils/exposure';
import {
getHealthField
} from "@/api/common";
// const homeStore = useHomeStore();
const userStore = useUserStore();
// 定义需要曝光检测的元素配置
const EXPOSURE_CONFIGS = [{
id: 'firstScreen',
logParams: {
xcxPage: '首页-首屏页面浏览',
pageName: '首页-首屏'
}
},
// 可以添加更多需要曝光检测的元素配置
{
id: 'secondScreen',
logParams: {
xcxPage: '首页-二屏页面浏览',
pageName: '首页-二屏'
}
},
{
id: 'thirdScreen',
logParams: {
xcxPage: '首页-三屏页面浏览',
pageName: '首页-三屏'
}
},
{
id: 'fourthScreen',
logParams: {
xcxPage: '首页-四屏页面浏览',
pageName: '首页-四屏'
}
}
];
export default {
beforeDestroy() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
deactivated() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
data() {
return {
popType: 'bottom',
statusBarHeight: 38,
showRegisterLayer: false,
swiperList: [],
indicatorDots: true,
autoplay: true,
interval: 4000,
duration: 500,
indicatoractiveColor: "#a6a0a1",
indicatorColor: "rgba(255, 255, 255, 1)",
toolList: {},
expertTeam: {},
vipCardList: [],
contentImgList: [],
channelTabList: [],
channelTabIndex: 0,
changelInfoList: [],
childrenInfoList: [],
bottomLinkList: [],
qrInfoObj: undefined,
popupIndex: 0,
qrInfoList: [{
title: '',
desc: '',
qrUrl: ''
}, {
title: '',
desc: '',
qrUrl: ''
}, {
title: '',
desc: '',
qrUrl: ''
}, {
title: '',
desc: '',
qrUrl: ''
}],
qrObj: {
title: '',
desc: '',
qrUrl: ''
},
showVideo: false,
currentVideoUrl: '',
isClickPhoneAuth: false,
voiceStory: {},
suggest: {},
videoHeight: '56vw',
qrNameList: ['公众号', '企业微信', '视频号', '小红书'],
windowHeight: 0,
isFirstScreenExposed: false,
scrollTimer: null,
exposureTracker: null,
currentIndex: 0,
etTabSelIndex: 0,
bannerCurrentIndex: 0,
childrenInfoListMianTitle: '',
channelTabListMianTitle: '',
popupImageUrl: '',
popupImageObj: {},
}
},
components: {
RegisterLayer
},
computed: {
homeStore() {
return useHomeStore();
}
},
props: {
scrollTop: {
type: Number,
default: 0
}
},
watch: {
homeStore: {
handler(newVal) {
this.showRegisterLayer = this.isClickPhoneAuth && newVal.isLogin && !newVal.babyExistence;
if (newVal.homeInfo !== null) {
this.initHomeInfo();
this.checkAndShowPopup();
}
},
deep: true,
immediate: true
},
scrollTop: {
handler(newVal) {
this.checkExposure(newVal);
}
}
},
mounted() {
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
this.statusBarHeight = menuButtonInfo.top;
this.isClickPhoneAuth = false;
// 获取窗口高度
const systemInfo = uni.getSystemInfoSync();
this.windowHeight = systemInfo.windowHeight;
// 初始化曝光检测工具
this.exposureTracker = new ExposureTracker(this);
this.exposureTracker.addExposureElements(EXPOSURE_CONFIGS);
// 初始检查曝光
this.$nextTick(() => {
this.checkExposure(this.scrollTop);
});
},
unmounted() {
// 组件销毁时清理弹窗状态（可选，根据业务需求决定是否保留状态）
// 如果需要重置弹窗状态，可以在这里调用 this.resetPopupState()
},
methods: {
testSource() {
uni.navigateTo({
url: '/pages/syWebview/syWebview?p=xmh'
})
},
async initHomeInfo() {
const {
data
} = await fetchHomeJSON();
console.warn("data", data)
if (data) {
this.swiperList = data.swiperList;
this.vipConfigList = data.vipConfigList;
// this.vipCardList = data.vipCardList;
this.contentImgList = data.contentImgList;
this.channelTabList = data.channelTabList;
this.changelInfoList = data.changelInfoList;
this.childrenInfoList = data.childrenInfoList[0] || [];
this.bottomLinkList = data.bottomLinkList;
this.qrInfoList = data.qrInfoList || [];
this.toolList = data.toolList;
this.expertTeam = data.expertTeam;
this.vipCardList = data.vipCardList;
this.voiceStory = data.voiceStory;
this.suggest = data.suggest;
this.childrenInfoListMianTitle = data.childrenInfoListMianTitle;
this.channelTabListMianTitle = data.channelTabListMianTitle;
this.popupImageUrl = this.$baseUrl + data.popupImageObj?.imageUrl || '';
this.popupImageObj = data.popupImageObj || {};
if (this.homeStore.isLogin) {
this.vipCardList[0] = data.vipConfigList.find(item => item.grade === this.homeStore.homeInfo
?.grade);
this.vipCardList[0].level = this.homeStore.homeInfo?.gradeName;
} else {
this.vipCardList[0] = data.vipConfigList[0];
}
}
},
changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
intervalChange(e) {
this.interval = e.target.value
},
durationChange(e) {
this.duration = e.target.value
},
jumpBannerHandler(item, index) {
md.sensorLogTake({
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `第${index + 1}张焦点图-入口`,
});
if (item.videoUrl) {
this.currentVideoUrl = this.$baseUrl + item.videoUrl;
this.showVideo = true;
return;
}
if (item.link) {
// 有 link，执行跳转
jump(item.link);
} else {
// 没有 link，预览图片
uni.previewImage({
urls: [this.$baseUrl + item.url], // 预览当前图片
current: this.$baseUrl + item.url // 当前显示的图片
});
}
},
previewImage(url) {
uni.previewImage({
urls: [url], // 预览当前图片
current: url // 当前显示的图片
});
},
jumpLinkWithLogin(link, evt) {
if (evt) {
md.sensorLog(evt);
}
if (this.homeStore.isLogin) {
jump(link);
}
},
jumpLinkCard(item, evt) {
if (evt) {
md.sensorLog(evt);
}
if (item.btnSubTitle.length > 0 && item.btnTitle.length > 0) {
return; //如果有按钮的话，废弃这个点击事件
}
if (item.link) {
jump(item.link);
}
},
jumpLink(link, videoUrl, index, evt) {
if (evt) {
md.sensorLog(evt);
}
if (videoUrl) {
if (videoUrl.indexOf('http') === -1) {
videoUrl = this.$baseUrl + videoUrl;
}
// 弹出视频
this.currentVideoUrl = videoUrl;
if (index === 1) {
this.videoHeight = "100vw";
} else {
this.videoHeight = "56vw";
}
this.showVideo = true;
return;
// 视频弹窗出现后，video标签的autoplay会自动播放
} else if (link) {
if (!link || link === '') {
return;
}
// 其他跳转逻辑
jump(link);
}
},
channelTabHandler(_index, evt) {
if (evt) {
md.sensorLog(evt);
}
this.channelTabIndex = _index;
},
showPopup(_index, evt) {
if (evt) {
md.sensorLog(evt);
}
md.sensorLogTake({
xcxPage: `${this.qrNameList[_index]}拉起半屏二维码入口页面浏览`,
pageName: `${this.qrNameList[_index]}拉起半屏二维码入口`,
});
if (_index === 3) {
this.qrObj = null;
} else {
_index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
this.qrObj = this.qrInfoList[_index];
}
this.popupIndex = _index;
this.$refs.popup.open(this.popType);
},
showPopup1(_index, type) {
md.sensorLogTake({
xcxClick: `首页-二屏页面点击`,
pageName: `首页-二屏`,
buttonName: type == 1 ? '专家团副标题点击' : '专家团进群咨询按钮点击'
});
if (_index === 3) {
this.qrObj = null;
} else {
_index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
this.qrObj = this.qrInfoList[_index];
}
this.popupIndex = _index;
this.$refs.popup.open(this.popType);
},
closePop() {
this.$refs.popup.close();
},
goSearchHandler(e) {
md.sensorLog(e);
uni.navigateTo({
url: "/pages/search/search"
})
},
downloadHandler(imgurl) {
md.sensorLogTake({
xcxClick: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
pageName: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
buttonName: `下载二维码`
});
uni.downloadFile({
url: imgurl,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: downloadRes.tempFilePath,
success: (res) => {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
} else {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
},
fail: (err) => {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
});
},
closeVideo() {
this.showVideo = false;
this.currentVideoUrl = '';
},
onGetPhoneNumber(e) {
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
uni.showToast({
title: '请授权使用手机号',
icon: 'none',
});
return;
}
console.log('detail', e.detail);
this.isClickPhoneAuth = true;
userStore.phoneCallback(e.detail);
},
goCustomerHandler(e) {
md.sensorLog(e);
const {
memberId,
mobile,
openId,
unionId
} = this.homeStore.homeInfo;
const customerUrl =
`https://intelcc-user.icsoc.net/?channelKey=45839e0505554f8c8aea3c7b6259b049&init=1&crmld=${memberId}&mobile=${mobile}&openId=${openId}&unionId=${unionId}`;
jump({
type: JumpType.H5,
url: customerUrl
});
},
checkExposure(scrollTop) {
if (this.exposureTracker) {
this.exposureTracker.checkExposure(scrollTop);
}
},
resetExposure() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
onSwiperChange(e) {
this.currentIndex = e.detail.current;
},
onBannerSwiperChange(e) {
this.bannerCurrentIndex = e.detail.current;
},
async handleToolClick(item) {
md.sensorLogTake({
xcxClick: "首页-二屏页面点击",
pageName: "首页-二屏",
buttonName: item.title + "工具点击",
});
if (item.title === "医生问诊") {
// if (!cfgStatus.value.isRegister) return;
const res = await getHealthField();
if (!res.success) {
uni.showToast({
title: "获取健康字段失败",
icon: "none",
});
return;
}
const {
sign,
timestamp,
appId,
partnerUserId,
env
} = res.data;
jump({
type: JumpType.MINI,
url: "/pages/partner/redirect",
extra: {
appId: "wx81ecfb5aa3fb512f",
envVersion: env,
extraData: {
sign, // 参考 4.请求参数
timestamp, // 参考 4.请求参数
appId, // 参考 4.请求参数
partnerUserId, // 参考 4.请求参数
targetApp: "/h5/partner/shining-like-a-start/landing-free-consult?sysType=CRF",
},
},
});
} else {
jump({
type: item.link.type,
url: item.link.url
});
}
},
onSelEtTap(index) {
let str = index === 0 ? '名医专家' : (index === 1 ? '科研专家' : '权威机构')
md.sensorLogTake({
xcxClick: "首页-二屏页面点击",
pageName: "首页-二屏",
buttonName: str + "tab按钮点击",
});
this.etTabSelIndex = index;
},
onETMore(index, type) {
let str = '';
if (type === 0) {
str = '名医专家';
} else if (type === 1) {
str = '科研专家';
} else {
this.vipCardList[0] = data.vipConfigList[0];
}
}
},
changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
intervalChange(e) {
this.interval = e.target.value
},
durationChange(e) {
this.duration = e.target.value
},
jumpBannerHandler(item, index) {
md.sensorLogTake({
xcxClick: '首页-首屏页面点击',
pageName: '首页-首屏',
buttonName: `第${index + 1}张焦点图-入口`,
});
if (item.videoUrl) {
this.currentVideoUrl = this.$baseUrl + item.videoUrl;
this.showVideo = true;
return;
}
if (item.link) {
// 有 link，执行跳转
jump(item.link);
} else {
// 没有 link，预览图片
uni.previewImage({
urls: [this.$baseUrl + item.url], // 预览当前图片
current: this.$baseUrl + item.url // 当前显示的图片
});
}
},
previewImage(url) {
uni.previewImage({
urls: [url], // 预览当前图片
current: url // 当前显示的图片
});
},
jumpLinkWithLogin(link, evt) {
if (evt) {
md.sensorLog(evt);
}
if (this.homeStore.isLogin) {
jump(link);
}
},
jumpLinkCard(item, evt) {
if (evt) {
md.sensorLog(evt);
}
if (item.btnSubTitle.length > 0 && item.btnTitle.length > 0) {
return;//如果有按钮的话，废弃这个点击事件
}
if (item.link) {
jump(item.link);
}
},
jumpLink(link, videoUrl, index, evt) {
if (evt) {
md.sensorLog(evt);
}
if (videoUrl) {
if (videoUrl.indexOf('http') === -1) {
videoUrl = this.$baseUrl + videoUrl;
}
// 弹出视频
this.currentVideoUrl = videoUrl;
str = '权威机构';
}
if (index === 1) {
this.videoHeight = "100vw";
} else {
this.videoHeight = "56vw";
}
this.showVideo = true;
return;
// 视频弹窗出现后，video标签的autoplay会自动播放
} else if (link) {
if (!link || link === '') {
return;
}
// 其他跳转逻辑
jump(link);
}
},
channelTabHandler(_index, evt) {
if (evt) {
md.sensorLog(evt);
}
this.channelTabIndex = _index;
},
showPopup(_index, evt) {
if (evt) {
md.sensorLog(evt);
}
md.sensorLogTake({
xcxPage: `${this.qrNameList[_index]}拉起半屏二维码入口页面浏览`,
pageName: `${this.qrNameList[_index]}拉起半屏二维码入口`,
});
if (_index === 3) {
this.qrObj = null;
} else {
_index = Math.max(0, Math.min(_index, this.qrInfoList.length - 1));
this.qrObj = this.qrInfoList[_index];
}
this.popupIndex = _index;
this.$refs.popup.open(this.popType);
},
closePop() {
this.$refs.popup.close();
},
goSearchHandler(e) {
md.sensorLog(e);
uni.navigateTo({
url: "/pages/search/search"
})
},
downloadHandler(imgurl) {
md.sensorLogTake({
xcxClick: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
pageName: `${this.qrNameList[this.popupIndex]}拉起半屏二维码入口页面点击`,
buttonName: `下载二维码`
});
uni.downloadFile({
url: imgurl,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: downloadRes.tempFilePath,
success: (res) => {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
} else {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
},
fail: (err) => {
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
});
},
closeVideo() {
this.showVideo = false;
this.currentVideoUrl = '';
},
onGetPhoneNumber(e) {
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
uni.showToast({
title: '请授权使用手机号',
icon: 'none',
});
return;
}
console.log('detail', e.detail);
this.isClickPhoneAuth = true;
userStore.phoneCallback(e.detail);
},
goCustomerHandler(e) {
md.sensorLog(e);
const { memberId, mobile, openId, unionId } = this.homeStore.homeInfo;
const customerUrl = `https://intelcc-user.icsoc.net/?channelKey=45839e0505554f8c8aea3c7b6259b049&init=1&crmld=${memberId}&mobile=${mobile}&openId=${openId}&unionId=${unionId}`;
jump({ type: JumpType.H5, url: customerUrl });
},
checkExposure(scrollTop) {
if (this.exposureTracker) {
this.exposureTracker.checkExposure(scrollTop);
}
},
resetExposure() {
if (this.exposureTracker) {
this.exposureTracker.resetAllExposure();
}
},
onSwiperChange(e) {
this.currentIndex = e.detail.current;
},
onBannerSwiperChange(e) {
this.bannerCurrentIndex = e.detail.current;
},
async handleToolClick(item) {
md.sensorLogTake({
xcxClick: "我的页面点击",
pageName: "我的页面",
buttonName: item.title,
});
if (item.title === "医生问诊") {
// if (!cfgStatus.value.isRegister) return;
const res = await getHealthField();
if (!res.success) {
uni.showToast({
title: "获取健康字段失败",
icon: "none",
});
return;
}
const { sign, timestamp, appId, partnerUserId, env } = res.data;
jump({
type: JumpType.MINI,
url: "/pages/partner/redirect",
extra: {
appId: "wx81ecfb5aa3fb512f",
envVersion: env,
extraData: {
sign, // 参考 4.请求参数
timestamp, // 参考 4.请求参数
appId, // 参考 4.请求参数
partnerUserId, // 参考 4.请求参数
targetApp:
"/h5/partner/shining-like-a-start/landing-free-consult?sysType=CRF",
},
},
});
} else {
jump({ type: item.link.type, url: item.link.url });
}
},
onSelEtTap(index) {
this.etTabSelIndex = index;
},
onETMore() {
jump({ type: 1, url: '/pages/expertTeamPage/expertTeamPage?tab=' + (this.etTabSelIndex + 1) });
},
closeImagePopup() {
this.$refs.imagePopup.close();
},
imagePopupJump() {
jump({ type: this.popupImageObj.jumpType, url: this.popupImageObj.jumpUrl });
},
showImagePopup() {
this.$refs.imagePopup.open('center');
},
closePop1() {
this.$refs.imagePopup.close();
},
// 重置弹窗状态（可在需要时调用）
resetPopupState() {
this.homeStore.resetPopupState(); // 重置 store 中的弹窗状态
},
// 检查并显示弹窗（使用 store 全局状态管理）
checkAndShowPopup() {
// 使用 store 中的 hasShownPopup 来记录是否已经显示过弹窗
if (!this.homeStore.hasShownPopup && this.homeStore.homeInfo?.showPop1) {
this.homeStore.markPopupAsShown(); // 标记已显示过弹窗（全局状态）
this.$nextTick(() => {
setTimeout(() => {
this.showImagePopup();
}, 500);
});
}
}
}
}
</script>
<style lang="less" scoped>
@import '@/common.less';
.home-container {
width: 100vw;
overflow-x: hidden;
background-color: white;
.content {
background-color: white;
padding-bottom: 200rpx;
.banner {
height: 1116rpx;
.banneritem {
width: 750rpx;
height: 1116rpx;
.b-img {
width: 100%;
height: 100%;
}
}
}
.swiper-mask {
position: absolute;
left: 0;
width: 750rpx;
height: 192rpx;
z-index: 1;
top: 1065rpx;
.swiper-mask-img {
width: 100%;
height: 100%;
}
}
// 自定义banner指示器样式
.custom-banner-indicator {
position: absolute;
top: 1075rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
.banner-dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #feebc4;
transition: all 0.3s ease;
flex-shrink: 0;
&.active {
width: 40rpx;
height: 16rpx;
border-radius: 8rpx;
background-color: #D3A358;
}
}
}
.barbox {
position: absolute;
top: 97rpx;
left: 32rpx;
display: flex;
align-items: center;
.btnlogo {
width: 184rpx;
height: 66rpx;
}
.btnsearch {
width: 150rpx;
height: 68rpx;
margin-left: 20rpx;
}
.customer-btn-wrap {
position: relative;
display: inline-block;
}
.btncustomer {
width: 70rpx;
height: 68rpx;
margin-left: 110rpx;
}
.phone-auth-btn-cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: transparent;
opacity: 0;
border: none;
padding: 0;
margin: 0;
z-index: 10;
pointer-events: auto;
}
}
// .txtbox {
// width: 100%;
// height: 76rpx;
// background-color: @color-white-soft;
// text-align: center;
// .txtlink {
// color: @color-gold-cover;
// font-size: 24rpx;
// text-underline-offset: 10rpx;
// text-decoration: underline;
// }
// .icon_arrow_yellow {
// width: 12rpx;
// height: 20rpx;
// margin-left: 10rpx;
// }
// }
.tools_box {
width: 750rpx;
height: 840rpx;
margin-top: 40rpx;
overflow-x: scroll;
padding-left: 38rpx;
.tools_maintitle {
font-size: 42rpx;
color: #000;
}
.tools_subtitle {
margin-top: 10rpx;
font-size: 24rpx;
color: #999;
}
.tool_swiper {
margin-top: 35rpx;
width: 720rpx;
height: 700rpx;
overflow: visible;
/* 关键：允许内容溢出 */
.swiperItem {
width: 400rpx;
height: 700rpx;
top: 40rpx;
}
/* 当前激活项放大 */
.swiperItem.active {
top: 0rpx !important;
z-index: 10;
transition: top 0.4s ease;
}
.tool {
position: absolute;
width: 400rpx;
height: 700rpx;
.sq_btn{
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 650rpx;
// background-color: red;
opacity: 0;
z-index: 2;
}
.tool_bg {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 650rpx;
border-radius: 40rpx;
z-index: 1;
}
.tool_icon {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 470rpx;
border-radius: 40rpx;
}
.tool_jt {
position: absolute;
left: 300rpx;
top: 510rpx;
width: 74rpx;
height: 44rpx;
}
.tool_title {
position: absolute;
left: 30rpx;
top: 510rpx;
color: #000;
font-size: 36rpx;
width: 300rpx;
}
.tool_context {
position: absolute;
left: 30rpx;
top: 575rpx;
font-size: 24rpx;
color: #999;
width: 300rpx;
}
}
}
/* 自定义指示点样式 */
.custom-indicator {
width: 200rpx;
height: 10rpx;
margin-top: -15rpx;
margin-left: -20rpx;
display: flex;
justify-content: center;
gap: 10rpx;
}
.indicator-dot {
width: 10rpx;
height: 10rpx;
border-radius: 10rpx;
background-color: #feefcc;
transition: all 0.3s;
}
.indicator-dot.active {
width: 70rpx;
border-radius: 10rpx;
background-color: #d3a358;
}
}
.et_box {
width: 750rpx;
// height: 840rpx;
margin-top: 30rpx;
padding-left: 38rpx;
.et_maintitle {
font-size: 42rpx;
color: #000;
}
.et_subtitle {
width: 700rpx;
margin-top: 10rpx;
display: flex;
.txtlink {
width: 500rpx;
color: @color-gold-cover;
font-size: 24rpx;
text-underline-offset: 5rpx;
text-decoration: underline;
}
.icon_more {
width: 140rpx;
height: 36rpx;
margin-left: 45rpx;
margin-top: 2rpx;
}
}
.et_main_box {
padding-top: 30rpx;
margin-top: 35rpx;
width: 670rpx;
height: 602rpx;
background-color: #fde8bb;
border-radius: 38rpx;
.et_con_bg {
margin-left: 3rpx;
width: 651rpx;
height: 562rpx;
background-color: #ffffff;
border-radius: 38rpx;
padding-left: 15rpx;
padding-top: 25rpx;
.et_tab_box {
height: 70rpx;
display: flex;
gap: 15rpx;
.tab_box {
width: 204rpx;
height: 70rpx;
.et_tab {
width: 204rpx;
height: 70rpx;
}
}
}
.et_con_box {
width: 631rpx;
height: 365rpx;
margin-top: 40rpx;
.et_con1 {
width: 631rpx;
height: 365rpx;
}
.et_con2 {
width: 631rpx;
height: 365rpx;
}
.et_con3 {
width: 598rpx;
height: 303rpx;
margin-top: 20rpx;
margin-left: 16rpx;
}
}
.et_more_txt {
width: 100%;
font-size: 24rpx;
color: @color-gold-cover;
text-align: center;
margin-top: 30rpx;
.icon_arrow_yellow {
width: 12rpx;
height: 20rpx;
margin-left: 5rpx;
}
}
}
}
}
.cardScroller {
width: 750rpx;
overflow-x: scroll;
}
.cardbox {
//
position: relative;
display: inline-flex;
flex-wrap: nowrap;
margin-top: 32rpx;
.cardboxitem {
width: 380rpx;
height: 232rpx;
position: relative;
margin-left: 32rpx;
.bg {
width: 380rpx;
height: 232rpx;
position: absolute;
z-index: 0;
}
.level {
position: absolute;
left: 24rpx;
top: 30rpx;
font-size: 32rpx;
font-weight: bold;
color: @color-gold-cover;
pointer-events: none;
}
.subTitle {
position: absolute;
left: 24rpx;
top: 80rpx;
font-size: 24rpx;
color: @color-black-deep;
pointer-events: none;
}
.showCornerTxt {
position: absolute;
right: 0;
top: 0;
color: white;
font-size: 24rpx;
padding: 10rpx;
border-radius: 0 10rpx 0 10rpx;
background-color: @color-gold-main;
}
.cardbtn {
position: relative;
left: 6rpx;
top: 130rpx;
.phone-auth-btn-cover {
position: absolute;
width: 368rpx;
height: 88rpx;
z-index: 0;
left: 0;
top: 0;
opacity: 0;
pointer-events: auto;
}
.cardbtnbg {
position: absolute;
width: 368rpx;
height: 88rpx;
z-index: 0;
left: 0;
top: 0;
}
.btnTitle {
position: absolute;
// z-index: 1;
width: 180rpx;
text-align: center;
font-size: 24rpx;
color: white;
// border: 1px solid red;
top: 23rpx;
left: 20rpx;
}
.btnSubTitle {
position: absolute;
top: 23rpx;
// z-index: 1;
font-size: 24rpx;
font-weight: bold;
color: @color-gold-light;
left: 210rpx;
}
}
}
}
.contentbox {
width: 750rpx;
height: 1429rpx;
position: relative;
margin-top: 32px;
.contentbg {
width: 100%;
height: 100%;
position: absolute;
}
.contentitem {
position: absolute;
}
}
.channelbox {
margin-top: 32rpx;
margin-left: 32rpx;
.maintitle {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
}
.subtitle_box {
display: flex;
margin-top: 10rpx;
margin-left: 5rpx;
width: 700rpx;
.subtitle {
width: 500rpx;
color: @color-black-deep;
font-size: 24rpx;
}
.icon_more {
width: 127rpx;
height: 34rpx;
margin-left: 45rpx;
margin-top: 2rpx;
}
}
.listbox {
display: flex;
margin-top: 20rpx;
width: 686rpx;
align-content: center;
justify-content: space-between;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
// margin-right: 15rpx;
border-radius: 30rpx;
}
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.channelscroll {
width: 718rpx;
overflow-y: scroll;
margin-top: 32rpx;
height: 620rpx;
.box {
display: flex;
flex-direction: column;
.infobox {
width: 670rpx;
height: 180rpx;
display: flex;
align-items: center;
background-color: #fff;
border-radius: 16rpx;
border: 2rpx solid #feeecb;
margin-bottom: 20rpx;
.infoimg {
border-radius: 12rpx 0rpx 0rpx 12rpx;
-webkit-flex-shrink: 0;
flex-shrink: 0;
height: 180rpx;
/* margin-top: -1rpx ; */
width: 180rpx;
}
.infotitlebox {
flex: 1;
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
.infotitlecon {
display: flex;
flex-direction: row;
.infotitle {
color: @color-black-deep;
width: 400rpx;
font-size: 24rpx;
font-weight: bold;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.infotitletag {
width: 46rpx;
height: 22rpx;
color: #fff;
}
}
.infodesc {
color: #999999;
font-size: 22rpx;
width: 450rpx;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
}
}
.channelscroll2 {
width: 718rpx;
margin-top: 32rpx;
margin-left: -16rpx;
.box2 {
width: 718rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.infobox2 {
width: 330rpx;
height: 430rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 16rpx;
border: 4rpx solid #feeecb;
margin-bottom: 20rpx;
position: relative;
.infoimg2 {
width: 330rpx;
height: 306rpx;
border-radius: 12rpx 12rpx 0rpx 0rpx;
flex-shrink: 0;
}
.infotitle2box {
margin-top: 10rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
padding: 0 10rpx;
.infotitle2 {
color: @color-black-deep;
width: 90%;
font-size: 24rpx;
font-weight: bold;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
text-align: left;
margin-left: 5%;
}
}
}
}
}
.desc {
color: @color-black-deep;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 32rpx;
.desc1 {
color: @color-gold-cover;
margin-left: 5rpx;
}
}
.desc2 {
padding-bottom: 32rpx;
}
}
.bottomlink {
width: 750rpx;
height: 247rpx;
.bottombg {
width: 750rpx;
height: 247rpx;
position: absolute;
}
.box {
position: relative;
top: 100rpx;
width: 74%;
left: 13%;
display: flex;
align-items: flex-end;
justify-content: space-between;
.icon {}
}
}
}
.popup-content {
width: 750rpx;
height: 812rpx;
border-top-left-radius: 48rpx;
border-top-right-radius: 48rpx;
position: relative;
.btnclose {
width: 70rpx;
height: 70rpx;
position: absolute;
top: 36rpx;
right: 32rpx;
}
.xingmahui {
width: 750rpx;
height: 100%;
position: absolute;
bottom: 0;
}
.title {
position: absolute;
top: 47rpx;
left: 32rpx;
font-size: 36rpx;
color: @color-black-deep;
font-weight: bold;
}
.desc {
position: absolute;
top: 108rpx;
left: 32rpx;
font-size: 28rpx;
color: @color-black-medium;
font-weight: bold;
}
.qrcode {
width: 340rpx;
height: 340rpx;
position: absolute;
top: 220rpx;
left: 205rpx;
}
.btndownload {
width: 286rpx;
height: 89rpx;
position: absolute;
top: 630rpx;
left: 232rpx;
}
}
.video-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
}
.close-btn-bottom {
margin: 32rpx auto 0 auto;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 44rpx;
line-height: 64rpx;
text-align: center;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
}
.phone-auth-mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.phone-auth-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 16rpx;
padding: 40rpx 32rpx;
z-index: 1001;
display: flex;
flex-direction: column;
align-items: center;
}
.phone-auth-btn {
background: #ffd700;
color: #333;
font-size: 32rpx;
border-radius: 8rpx;
padding: 20rpx 60rpx;
margin-bottom: 20rpx;
}
.close-btn {
font-size: 40rpx;
color: #999;
margin-top: 10rpx;
}
.image-popup-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 16rpx;
position: relative;
.popup-image {
width: 500rpx;
height: 700rpx;
border-radius: 16rpx;
object-fit: cover;
}
.popup-close-btn {
width: 70rpx;
height: 70rpx;
position: absolute;
bottom: -50rpx;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
}
}
str += '内容'
} else {
str += '点击查看更多';
}
md.sensorLogTake({
xcxClick: "首页-二屏页面点击",
pageName: "首页-二屏",
buttonName: str + "-点击",
});
jump({
type: 1,
url: '/pages/expertTeamPage/expertTeamPage?tab=' + (this.etTabSelIndex + 1)
});
},
closeImagePopup() {
this.$refs.imagePopup.close();
},
imagePopupJump() {
jump({
type: this.popupImageObj.jumpType,
url: this.popupImageObj.jumpUrl
});
},
showImagePopup() {
this.$refs.imagePopup.open('center');
},
closePop1() {
this.$refs.imagePopup.close();
},
// 重置弹窗状态（可在需要时调用）
resetPopupState() {
this.homeStore.resetPopupState(); // 重置 store 中的弹窗状态
},
// 检查并显示弹窗（使用 store 全局状态管理）
checkAndShowPopup() {
// 使用 store 中的 hasShownPopup 来记录是否已经显示过弹窗
if (!this.homeStore.hasShownPopup && this.homeStore.homeInfo?.showPop1) {
this.homeStore.markPopupAsShown(); // 标记已显示过弹窗（全局状态）
this.$nextTick(() => {
setTimeout(() => {
this.showImagePopup();
}, 500);
});
}
}
}
}
</script>
<style lang="less" scoped>
@import '@/common.less';
.home-container {
width: 100vw;
overflow-x: hidden;
background-color: white;
.content {
background-color: white;
padding-bottom: 200rpx;
.banner {
height: 1116rpx;
.banneritem {
width: 750rpx;
height: 1116rpx;
.b-img {
width: 100%;
height: 100%;
}
}
}
.swiper-mask {
position: absolute;
left: 0;
width: 750rpx;
height: 192rpx;
z-index: 1;
top: 1065rpx;
.swiper-mask-img {
width: 100%;
height: 100%;
}
}
// 自定义banner指示器样式
.custom-banner-indicator {
position: absolute;
top: 1075rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
.banner-dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #feebc4;
transition: all 0.3s ease;
flex-shrink: 0;
&.active {
width: 40rpx;
height: 16rpx;
border-radius: 8rpx;
background-color: #D3A358;
}
}
}
.barbox {
position: absolute;
top: 97rpx;
left: 32rpx;
display: flex;
align-items: center;
.btnlogo {
width: 184rpx;
height: 66rpx;
}
.btnsearch {
width: 150rpx;
height: 68rpx;
margin-left: 20rpx;
}
.customer-btn-wrap {
position: relative;
display: inline-block;
}
.btncustomer {
width: 70rpx;
height: 68rpx;
margin-left: 110rpx;
}
.phone-auth-btn-cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: transparent;
opacity: 0;
border: none;
padding: 0;
margin: 0;
z-index: 10;
pointer-events: auto;
}
}
// .txtbox {
// width: 100%;
// height: 76rpx;
// background-color: @color-white-soft;
// text-align: center;
// .txtlink {
// color: @color-gold-cover;
// font-size: 24rpx;
// text-underline-offset: 10rpx;
// text-decoration: underline;
// }
// .icon_arrow_yellow {
// width: 12rpx;
// height: 20rpx;
// margin-left: 10rpx;
// }
// }
.tools_box {
width: 750rpx;
height: 840rpx;
margin-top: 40rpx;
overflow-x: scroll;
padding-left: 38rpx;
.tools_maintitle {
font-size: 42rpx;
color: #000;
}
.tools_subtitle {
margin-top: 10rpx;
font-size: 24rpx;
color: #999;
}
.tool_swiper {
margin-top: 35rpx;
width: 720rpx;
height: 700rpx;
overflow: visible;
/* 关键：允许内容溢出 */
.swiperItem {
width: 400rpx;
height: 700rpx;
top: 40rpx;
}
/* 当前激活项放大 */
.swiperItem.active {
top: 0rpx !important;
z-index: 10;
transition: top 0.4s ease;
}
.tool {
position: absolute;
width: 400rpx;
height: 700rpx;
.sq_btn {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 650rpx;
// background-color: red;
opacity: 0;
z-index: 2;
}
.tool_bg {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 650rpx;
border-radius: 40rpx;
z-index: 1;
}
.tool_icon {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 470rpx;
border-radius: 40rpx;
}
.tool_jt {
position: absolute;
left: 300rpx;
top: 510rpx;
width: 74rpx;
height: 44rpx;
}
.tool_title {
position: absolute;
left: 30rpx;
top: 510rpx;
color: #000;
font-size: 36rpx;
width: 300rpx;
}
.tool_context {
position: absolute;
left: 30rpx;
top: 575rpx;
font-size: 24rpx;
color: #999;
width: 300rpx;
}
}
}
/* 自定义指示点样式 */
.custom-indicator {
width: 200rpx;
height: 10rpx;
margin-top: -15rpx;
margin-left: -20rpx;
display: flex;
justify-content: center;
gap: 10rpx;
}
.indicator-dot {
width: 10rpx;
height: 10rpx;
border-radius: 10rpx;
background-color: #feefcc;
transition: all 0.3s;
}
.indicator-dot.active {
width: 70rpx;
border-radius: 10rpx;
background-color: #d3a358;
}
}
.et_box {
width: 750rpx;
// height: 840rpx;
margin-top: 30rpx;
padding-left: 38rpx;
.et_maintitle {
font-size: 42rpx;
color: #000;
}
.et_subtitle {
width: 700rpx;
margin-top: 10rpx;
display: flex;
.txtlink {
width: 500rpx;
color: @color-gold-cover;
font-size: 24rpx;
text-underline-offset: 5rpx;
text-decoration: underline;
}
.icon_more {
width: 140rpx;
height: 36rpx;
margin-left: 45rpx;
margin-top: 2rpx;
}
}
.et_main_box {
padding-top: 30rpx;
margin-top: 35rpx;
width: 670rpx;
height: 602rpx;
background-color: #fde8bb;
border-radius: 38rpx;
.et_con_bg {
margin-left: 3rpx;
width: 651rpx;
height: 562rpx;
background-color: #ffffff;
border-radius: 38rpx;
padding-left: 15rpx;
padding-top: 25rpx;
.et_tab_box {
height: 70rpx;
display: flex;
gap: 15rpx;
.tab_box {
width: 204rpx;
height: 70rpx;
.et_tab {
width: 204rpx;
height: 70rpx;
}
}
}
.et_con_box {
width: 631rpx;
height: 365rpx;
margin-top: 40rpx;
.et_con1 {
width: 631rpx;
height: 365rpx;
}
.et_con2 {
width: 631rpx;
height: 365rpx;
}
.et_con3 {
width: 598rpx;
height: 303rpx;
margin-top: 20rpx;
margin-left: 16rpx;
}
}
.et_more_txt {
width: 100%;
font-size: 24rpx;
color: @color-gold-cover;
text-align: center;
margin-top: 30rpx;
.icon_arrow_yellow {
width: 12rpx;
height: 20rpx;
margin-left: 5rpx;
}
}
}
}
}
.cardScroller {
width: 750rpx;
overflow-x: scroll;
}
.cardbox {
//
position: relative;
display: inline-flex;
flex-wrap: nowrap;
margin-top: 32rpx;
.cardboxitem {
width: 380rpx;
height: 232rpx;
position: relative;
margin-left: 32rpx;
.bg {
width: 380rpx;
height: 232rpx;
position: absolute;
z-index: 0;
}
.level {
position: absolute;
left: 24rpx;
top: 30rpx;
font-size: 32rpx;
font-weight: bold;
color: @color-gold-cover;
pointer-events: none;
}
.subTitle {
position: absolute;
left: 24rpx;
top: 80rpx;
font-size: 24rpx;
color: @color-black-deep;
pointer-events: none;
}
.showCornerTxt {
position: absolute;
right: 0;
top: 0;
color: white;
font-size: 24rpx;
padding: 10rpx;
border-radius: 0 10rpx 0 10rpx;
background-color: @color-gold-main;
}
.cardbtn {
position: relative;
left: 6rpx;
top: 130rpx;
.phone-auth-btn-cover {
position: absolute;
width: 368rpx;
height: 88rpx;
z-index: 0;
left: 0;
top: 0;
opacity: 0;
pointer-events: auto;
}
.cardbtnbg {
position: absolute;
width: 368rpx;
height: 88rpx;
z-index: 0;
left: 0;
top: 0;
}
.btnTitle {
position: absolute;
// z-index: 1;
width: 180rpx;
text-align: center;
font-size: 24rpx;
color: white;
// border: 1px solid red;
top: 23rpx;
left: 20rpx;
}
.btnSubTitle {
position: absolute;
top: 23rpx;
// z-index: 1;
font-size: 24rpx;
font-weight: bold;
color: @color-gold-light;
left: 210rpx;
}
}
}
}
.contentbox {
width: 750rpx;
height: 1429rpx;
position: relative;
margin-top: 32px;
.contentbg {
width: 100%;
height: 100%;
position: absolute;
}
.contentitem {
position: absolute;
}
}
.channelbox {
margin-top: 32rpx;
margin-left: 32rpx;
.maintitle {
color: @color-black-deep;
font-size: 38rpx;
font-weight: bold;
display: block;
margin-left: 5rpx;
}
.subtitle_box {
display: flex;
margin-top: 10rpx;
margin-left: 5rpx;
width: 700rpx;
.subtitle {
width: 500rpx;
color: @color-black-deep;
font-size: 24rpx;
}
.icon_more {
width: 127rpx;
height: 34rpx;
margin-left: 45rpx;
margin-top: 2rpx;
}
}
.listbox {
display: flex;
margin-top: 20rpx;
width: 686rpx;
align-content: center;
justify-content: space-between;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
// margin-right: 15rpx;
border-radius: 30rpx;
}
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.channelscroll {
width: 718rpx;
overflow-y: scroll;
margin-top: 32rpx;
height: 620rpx;
.box {
display: flex;
flex-direction: column;
.infobox {
width: 670rpx;
height: 180rpx;
display: flex;
align-items: center;
background-color: #fff;
border-radius: 16rpx;
border: 2rpx solid #feeecb;
margin-bottom: 20rpx;
.infoimg {
border-radius: 12rpx 0rpx 0rpx 12rpx;
-webkit-flex-shrink: 0;
flex-shrink: 0;
height: 180rpx;
/* margin-top: -1rpx ; */
width: 180rpx;
}
.infotitlebox {
flex: 1;
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
.infotitlecon {
display: flex;
flex-direction: row;
.infotitle {
color: @color-black-deep;
width: 400rpx;
font-size: 24rpx;
font-weight: bold;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.infotitletag {
width: 46rpx;
height: 22rpx;
color: #fff;
}
}
.infodesc {
color: #999999;
font-size: 22rpx;
width: 450rpx;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
}
}
.channelscroll2 {
width: 718rpx;
margin-top: 32rpx;
margin-left: -16rpx;
.box2 {
width: 718rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.infobox2 {
width: 330rpx;
height: 430rpx;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 16rpx;
border: 4rpx solid #feeecb;
margin-bottom: 20rpx;
position: relative;
.infoimg2 {
width: 330rpx;
height: 306rpx;
border-radius: 12rpx 12rpx 0rpx 0rpx;
flex-shrink: 0;
}
.infotitle2box {
margin-top: 10rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
padding: 0 10rpx;
.infotitle2 {
color: @color-black-deep;
width: 90%;
font-size: 24rpx;
font-weight: bold;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
text-align: left;
margin-left: 5%;
}
}
}
}
}
.desc {
color: @color-black-deep;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 32rpx;
.desc1 {
color: @color-gold-cover;
margin-left: 5rpx;
}
}
.desc2 {
padding-bottom: 32rpx;
}
}
.bottomlink {
width: 750rpx;
height: 247rpx;
.bottombg {
width: 750rpx;
height: 247rpx;
position: absolute;
}
.box {
position: relative;
top: 100rpx;
width: 74%;
left: 13%;
display: flex;
align-items: flex-end;
justify-content: space-between;
.icon {}
}
}
}
.popup-content {
width: 750rpx;
height: 812rpx;
border-top-left-radius: 48rpx;
border-top-right-radius: 48rpx;
position: relative;
.btnclose {
width: 70rpx;
height: 70rpx;
position: absolute;
top: 36rpx;
right: 32rpx;
}
.xingmahui {
width: 750rpx;
height: 100%;
position: absolute;
bottom: 0;
}
.title {
position: absolute;
top: 47rpx;
left: 32rpx;
font-size: 36rpx;
color: @color-black-deep;
font-weight: bold;
}
.desc {
position: absolute;
top: 108rpx;
left: 32rpx;
font-size: 28rpx;
color: @color-black-medium;
font-weight: bold;
}
.qrcode {
width: 340rpx;
height: 340rpx;
position: absolute;
top: 220rpx;
left: 205rpx;
}
.btndownload {
width: 286rpx;
height: 89rpx;
position: absolute;
top: 630rpx;
left: 232rpx;
}
}
.video-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
}
.close-btn-bottom {
margin: 32rpx auto 0 auto;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 44rpx;
line-height: 64rpx;
text-align: center;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
}
.phone-auth-mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.phone-auth-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 16rpx;
padding: 40rpx 32rpx;
z-index: 1001;
display: flex;
flex-direction: column;
align-items: center;
}
.phone-auth-btn {
background: #ffd700;
color: #333;
font-size: 32rpx;
border-radius: 8rpx;
padding: 20rpx 60rpx;
margin-bottom: 20rpx;
}
.close-btn {
font-size: 40rpx;
color: #999;
margin-top: 10rpx;
}
.image-popup-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 16rpx;
position: relative;
.popup-image {
width: 500rpx;
height: 700rpx;
border-radius: 16rpx;
object-fit: cover;
}
.popup-close-btn {
width: 70rpx;
height: 70rpx;
position: absolute;
bottom: -50rpx;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
}
}
</style>
\ No newline at end of file
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