Skip to content

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

1

parent d2e2fa90
Hide whitespace changes
Inline Side-by-side
Showing with 2073 additions and 1803 deletions
mock/home.json
View file @ 165d02d5
{
"voiceStory":{
"link":{
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia?from=song&sourceFrom=moreTools&source=moreTools&num=1&bir=2024-05-23&monthAge=12&month=null"
}
},
"suggest":{
"link":{
"type": 3,
"url": "https://mom.feihe.com/expertsView?from=home"
}
},
"swiperList": [
{
"url": "homepage/banner1.jpg",
"link": {
"type": 1,
"url": "/pages/library/ContentLibrary"
}
},
{
"url": "homepage/banner2.jpg",
"link": {
"type": 3,
"url": "https://mom.feihe.com/moreTools?monthAge=undefined&month=null",
"extra": {}
}
},
{
"url": "homepage/banner3.jpg",
"link": {
"type": 2,
"url": "subPackages/shopMainList/topicNew/index?id=1000898",
"extra": {"appId": "wx4205ec55b793245e", "envVersion": "release"}
}
}
],
"expertTeam": {
"maintitle": "专家团",
"etConUrl1": "homepage/et_con1.png",
"etConUrl2": "homepage/et_con2.png",
"etConUrl3": "homepage/et_con3.png"
},
"toolList": {
"maintitle": "工具推荐",
"subtitle": "更多妈妈都在用，告别手忙脚乱助你轻松带娃！",
"bgUrl": "homepage/toolBg.png",
"jtIcon": "homepage/tool_jt.png",
"tools": [
{
"type": 1,
"title": "AI起名1",
"context": "多维度名字解析系统",
"icon": "homepage/tool_icon1.png",
"link": {
"type": 1,
"url": "/pages/naming/naming",
"extra": {}
}
},
{
"type": 1,
"title": "喂养工具2",
"context": "适合宝宝的才是好的",
"icon": "homepage/tool_icon1.png",
"link": {
"type": 1,
"url": "/pages/naming/naming",
"extra": {}
}
},
{
"type": 1,
"title": "AI起名3",
"context": "适合宝宝的才是好的",
"icon": "homepage/tool_icon1.png",
"link": {
"type": 1,
"url": "/pages/naming/naming",
"extra": {}
}
},
{
"type": 1,
"title": "喂养工具4",
"context": "适合宝宝的才是好的",
"icon": "homepage/tool_icon1.png",
"link": {
"type": 1,
"url": "/pages/naming/naming",
"extra": {}
}
},
{
"type": 1,
"title": "AI起名5",
"context": "适合宝宝的才是好的",
"icon": "homepage/tool_icon1.png",
"link": {
"type": 1,
"url": "/pages/naming/naming",
"extra": {}
}
}
]
},
"vipConfigList": [
{
"grade": "-1",
"level": "注册会员",
"subTitle": "新人礼权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "首注200元优惠券",
"btnSubTitle": "立即注册"
},
{
"grade": "0",
"subTitle": "免费问诊权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "三甲医生在线问诊",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {"appId": "wx4205ec55b793245e", "envVersion": "release"}
}
},
{
"grade": "1",
"subTitle": "育儿课程权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "12类系列课程",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {"appId": "wx4205ec55b793245e", "envVersion": "release"}
}
},
{
"grade": "2",
"subTitle": "育儿课程权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "12类系列课程",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {"appId": "wx4205ec55b793245e", "envVersion": "release"}
}
},
{
"grade": "3",
"subTitle": "月月礼权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "1分购、优惠券",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {"appId": "wx4205ec55b793245e", "envVersion": "release"}
}
},
{
"grade": "4",
"subTitle": "月月礼权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "1分购、优惠券",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {"appId": "wx4205ec55b793245e", "envVersion": "release"}
}
}
],
"vipCardList": [
{
"level": "钻石会员",
"subTitle": "育儿课程权益",
"btnTitle": "12类系列课程",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {"appId": "wx4205ec55b793245e", "envVersion": "release"}
},
"bgUrl": "homepage/cardbg1.png"
},
{
"level": "北纬47°系列",
"subTitle": "来自万年黑土的健康食品",
"btnTitle": "",
"btnSubTitle": "",
"showCornerTxt": "",
"link": {
"type": 2,
"url": "subPackages/shopMainList/topicNew/index?id=1000265&entrySource=xmh_wechatmp_home_recgoods",
"extra": {"appId": "wx4205ec55b793245e", "envVersion": "release"}
},
"bgUrl": "homepage/cardbg2.png"
},
{
"level": "育儿宝典",
"subTitle": "专家文章、育儿知识、饮食知识",
"btnTitle": "",
"btnSubTitle": "",
"showCornerTxt": "",
"link": {
"type": 1,
"url": "/pages/library/ContentLibrary",
"extra": {}
},
"bgUrl": "homepage/cardbg3.png"
}
],
"contentImgList": [
{
"bgUrl": "homepage/content_1.png",
"link": "www.baidu.com",
"videoUrl": "https://course.feihe.com/momclub-picture/homepage/4-0%E5%AE%98%E7%BD%91%E8%A7%86%E9%A2%91.mp4",
"_style": "width:311rpx;height: 324rpx;left: 40rpx;top: 0;"
},
{
"bgUrl": "homepage/content_2.png",
"link": "www.baidu.com",
"videoUrl": "https://course.feihe.com/momclub-picture/homepage/%E9%A6%96%E9%A1%B5_2%E9%A3%9E%E9%B9%A4%E8%BF%9E%E7%BB%AD%E4%BA%94%E5%B9%B4%E5%A5%B6%E7%B2%89%E7%AC%AC%E4%B8%80.mp4",
"_style": "width:263rpx;height: 324rpx;right: 40rpx;top: 400rpx;"
},
{
"bgUrl": "homepage/content_3.png",
"link": "www.baidu.com",
"videoUrl": "https://course.feihe.com/momclub-picture/homepage/%E9%A6%96%E9%A1%B5_3%E3%80%909%E6%9C%8827%E6%97%A5%E3%80%91%E9%A3%9E%E9%B9%A4_%E4%B8%96%E7%95%8C%E6%97%85%E6%B8%B8%E6%97%A5.mp4",
"_style": "width:418rpx;height: 345rpx;left: 40rpx;top: 750rpx;"
},
{
"bgUrl": "homepage/content_4.png",
"link": {
"type": 3,
"url": "https://mp.weixin.qq.com/s/HhBF5h8xX8zOrthsy2-Y-A",
"extra": {}
},
"_style": "width:263rpx;height: 324rpx;right: 40rpx;top: 1120rpx;"
}
],
"channelTabList": ["凯叔讲故事", "哄睡故事", "知识科普", "安全意识", "社交能力"],
"changelInfoList": [
[
{
"bgUrl": "homepage/channel/channel_0_0.png",
"desc": "凯叔·金子美铃童诗:【星星和蒲公英】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=22121&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1221",
"extra": {}
}
},
{
"bgUrl": "homepage/channel/channel_0_1.png",
"desc": "凯叔·金子美铃童诗:【天空和海】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=22119&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1221",
"extra": {}
}
}
],
[
{
"bgUrl": "homepage/channel/channel_1_0.png",
"desc": "凯叔-小睡仙:【睡吧睡吧，香香的】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=22238&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1211",
"extra": {}
}
},
{
"bgUrl": "homepage/channel/channel_1_1.png",
"desc": "凯叔-小睡仙:【睡觉仙气，3,2,1,】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=22237&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1211",
"extra": {}
}
}
],
[
{
"bgUrl": "homepage/channel/channel_2_0.png",
"desc": "教宝宝认识人体:【守护眼睛的睫毛】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21867&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1220",
"extra": {}
}
},
{
"bgUrl": "homepage/channel/channel_2_1.png",
"desc": "教宝宝认识人体：【为什么肚子会咕咕叫？】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21823&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1220",
"extra": {}
}
}
],
[
{
"bgUrl": "homepage/channel/channel_3_0.png",
"desc": "教宝宝不乱吃东西:【这个不能吃】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21869&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1218",
"extra": {}
}
},
{
"bgUrl": "homepage/channel/channel_3_1.png",
"desc": "培养宝宝不摸插座的安全意识:【电线插座不好玩】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21803&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1218",
"extra": {}
}
}
],
[
{
"bgUrl": "homepage/channel/channel_4_0.png",
"desc": "教会宝宝不嘲笑别人:【鹳鸟】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21949&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1216",
"extra": {}
}
},
{
"bgUrl": "homepage/channel/channel_4_1.png",
"desc": "培养宝宝尊重别人的习惯:【爱嘲笑人的斑斑】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21888&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1216",
"extra": {}
}
}
]
],
"childrenInfoList": [[
{
"bgUrl": "homepage/children/children_0.png",
"desc": "1+3 育儿妙招大揭秘，带娃从此不“蕉绿”",
"link": {
"type": 3,
"url": "https://mp.weixin.qq.com/s/Xn5dh96OaQ9CcsVMZ5jnvg",
"extra": {}
}
},
{
"bgUrl": "homepage/children/children_1.png",
"desc": "已有儿童中招，严重可瘫痪夏季防蜱虫最全指南速看",
"link": {
"type": 3,
"url": "https://mp.weixin.qq.com/s/fL5UZjWUXmPrjJgSe2Hr5g",
"extra": {}
}
},
{
"bgUrl": "homepage/children/children_2.png",
"desc": "99% 家长忽略的脑发育关键动作",
"link": {
"type": 3,
"url": "https://mp.weixin.qq.com/s/G5q6g-EdRWqasB6tvRgIzw",
"extra": {}
}
}]
],
"bottomLinkList": [
{
"bgUrl": "homepage/iconwx.png",
"link": "www.baidu.com",
"_style": "width:70rpx;height:109rpx;"
},
{
"bgUrl": "homepage/iconqw.png",
"link": "www.baidu.com",
"_style": "width:95rpx;height:109rpx;"
},
{
"bgUrl": "homepage/iconsph.png",
"link": "www.baidu.com",
"_style": "width:70rpx;height:109rpx;"
},
{
"bgUrl": "homepage/iconxhs.png",
"link": "www.baidu.com",
"_style": "width:88rpx;height:99rpx;"
}
],
"qrInfoList": [
{
"title": "公众号",
"desc": "扫码关注<span style:'color:#D3A358;'>星妈会</span>公众号，了解更多专业育儿资讯",
"qrUrl": "homepage/qrcode_gzh.png"
},
{
"title": "企业微信",
"desc": "扫码添加<span style:'color:#D3A358;'>星妈管家</span>企微，了解更多专业育儿资讯",
"qrUrl": "homepage/qrcode_qw.png"
},
{
"title": "视频号",
"desc": "扫码关注<span style:'color:#D3A358;'>星妈会</span>视频号，了解更多专业育儿资讯",
"qrUrl": "homepage/qrcode_sph.png"
}
]
}
{
"voiceStory": {
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia?from=song&sourceFrom=moreTools&source=moreTools&num=1&bir=2024-05-23&monthAge=12&month=null"
}
},
"suggest": {
"link": {
"type": 3,
"url": "https://mom.feihe.com/expertsView?from=home"
}
},
"swiperList": [{
"url": "homepage/banner1.jpg",
"link": {
"type": 1,
"url": "/pages/library/ContentLibrary"
}
},
{
"url": "homepage/banner2.jpg",
"link": {
"type": 3,
"url": "https://mom.feihe.com/moreTools?monthAge=undefined&month=null",
"extra": {}
}
},
{
"url": "homepage/banner3.jpg",
"link": {
"type": 2,
"url": "subPackages/shopMainList/topicNew/index?id=1000898",
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
}
}
],
"expertTeam": {
"maintitle": "专家团",
"etConUrl1": "homepage/et_con1.png",
"etConUrl2": "homepage/et_con2.png",
"etConUrl3": "homepage/et_con3.png"
},
"toolList": {
"maintitle": "工具推荐",
"subtitle": "更多妈妈都在用，告别手忙脚乱助你轻松带娃！",
"bgUrl": "homepage/toolBg.png",
"jtIcon": "homepage/tool_jt.png",
"tools": [{
"icon": "homepage/tool_icon_1.png",
"link": {
"extra": {},
"type": 1,
"url": "/pages/naming/naming"
},
"context": "AI生成吉利好名",
"type": 1,
"title": "AI起名"
},
{
"icon": "homepage/tool_icon_2.png",
"link": {
"extra": {},
"type": 1,
"url": "/pages/feedingIndex/feedingIndex"
},
"context": "一键更新喂养记录",
"type": 1,
"title": "喂养工具"
},
{
"icon": "homepage/tool_icon_3.png",
"link": {
"extra": {},
"type": 1,
"url": "/pages/postnatalCheckUp/postnatalCheckUp"
},
"context": "孕周检查准时告知",
"type": 1,
"title": "产检提醒"
},
{
"icon": "homepage/tool_icon_4.png",
"link": {
"extra": {},
"type": 1,
"url": "/pages/shengzhangTools/shengzhangTools"
},
"context": "发育偏离预警早报",
"type": 1,
"title": "宝宝生长测评"
}
]
},
"vipConfigList": [{
"grade": "-1",
"level": "注册会员",
"subTitle": "新人礼权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "首注200元优惠券",
"btnSubTitle": "立即注册"
},
{
"grade": "0",
"subTitle": "免费问诊权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "三甲医生在线问诊",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
}
},
{
"grade": "1",
"subTitle": "育儿课程权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "12类系列课程",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
}
},
{
"grade": "2",
"subTitle": "育儿课程权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "12类系列课程",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
}
},
{
"grade": "3",
"subTitle": "月月礼权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "1分购、优惠券",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
}
},
{
"grade": "4",
"subTitle": "月月礼权益",
"bgUrl": "homepage/cardbg1.png",
"btnTitle": "1分购、优惠券",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
}
}
],
"vipCardList": [{
"level": "钻石会员",
"subTitle": "育儿课程权益",
"btnTitle": "12类系列课程",
"btnSubTitle": "立即了解",
"link": {
"type": 2,
"url": "subPackages/xmhMainProcess/member/index?entrySource=xmh_wechatmp_points_recgoodsbot",
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
},
"bgUrl": "homepage/cardbg1.png"
},
{
"level": "北纬47°系列",
"subTitle": "来自万年黑土的健康食品",
"btnTitle": "",
"btnSubTitle": "",
"showCornerTxt": "",
"link": {
"type": 2,
"url": "subPackages/shopMainList/topicNew/index?id=1000265&entrySource=xmh_wechatmp_home_recgoods",
"extra": {
"appId": "wx4205ec55b793245e",
"envVersion": "release"
}
},
"bgUrl": "homepage/cardbg2.png"
},
{
"level": "育儿宝典",
"subTitle": "专家文章、育儿知识、饮食知识",
"btnTitle": "",
"btnSubTitle": "",
"showCornerTxt": "",
"link": {
"type": 1,
"url": "/pages/library/ContentLibrary",
"extra": {}
},
"bgUrl": "homepage/cardbg3.png"
}
],
"contentImgList": [{
"bgUrl": "homepage/content_1.png",
"link": "www.baidu.com",
"videoUrl": "https://course.feihe.com/momclub-picture/homepage/4-0%E5%AE%98%E7%BD%91%E8%A7%86%E9%A2%91.mp4",
"_style": "width:311rpx;height: 324rpx;left: 40rpx;top: 0;"
},
{
"bgUrl": "homepage/content_2.png",
"link": "www.baidu.com",
"videoUrl": "https://course.feihe.com/momclub-picture/homepage/%E9%A6%96%E9%A1%B5_2%E9%A3%9E%E9%B9%A4%E8%BF%9E%E7%BB%AD%E4%BA%94%E5%B9%B4%E5%A5%B6%E7%B2%89%E7%AC%AC%E4%B8%80.mp4",
"_style": "width:263rpx;height: 324rpx;right: 40rpx;top: 400rpx;"
},
{
"bgUrl": "homepage/content_3.png",
"link": "www.baidu.com",
"videoUrl": "https://course.feihe.com/momclub-picture/homepage/%E9%A6%96%E9%A1%B5_3%E3%80%909%E6%9C%8827%E6%97%A5%E3%80%91%E9%A3%9E%E9%B9%A4_%E4%B8%96%E7%95%8C%E6%97%85%E6%B8%B8%E6%97%A5.mp4",
"_style": "width:418rpx;height: 345rpx;left: 40rpx;top: 750rpx;"
},
{
"bgUrl": "homepage/content_4.png",
"link": {
"type": 3,
"url": "https://mp.weixin.qq.com/s/HhBF5h8xX8zOrthsy2-Y-A",
"extra": {}
},
"_style": "width:263rpx;height: 324rpx;right: 40rpx;top: 1120rpx;"
}
],
"channelTabList": ["凯叔讲故事", "哄睡故事", "知识科普", "安全意识", "社交能力"],
"changelInfoList": [
[{
"bgUrl": "homepage/channel/channel_0_0.png",
"desc": "凯叔·金子美铃童诗:【星星和蒲公英】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=22121&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1221",
"extra": {}
}
},
{
"bgUrl": "homepage/channel/channel_0_1.png",
"desc": "凯叔·金子美铃童诗:【天空和海】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=22119&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1221",
"extra": {}
}
}
],
[{
"bgUrl": "homepage/channel/channel_1_0.png",
"desc": "凯叔-小睡仙:【睡吧睡吧，香香的】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=22238&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1211",
"extra": {}
}
},
{
"bgUrl": "homepage/channel/channel_1_1.png",
"desc": "凯叔-小睡仙:【睡觉仙气，3,2,1,】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=22237&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1211",
"extra": {}
}
}
],
[{
"bgUrl": "homepage/channel/channel_2_0.png",
"desc": "教宝宝认识人体:【守护眼睛的睫毛】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21867&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1220",
"extra": {}
}
},
{
"bgUrl": "homepage/channel/channel_2_1.png",
"desc": "教宝宝认识人体：【为什么肚子会咕咕叫？】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21823&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1220",
"extra": {}
}
}
],
[{
"bgUrl": "homepage/channel/channel_3_0.png",
"desc": "教宝宝不乱吃东西:【这个不能吃】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21869&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1218",
"extra": {}
}
},
{
"bgUrl": "homepage/channel/channel_3_1.png",
"desc": "培养宝宝不摸插座的安全意识:【电线插座不好玩】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21803&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1218",
"extra": {}
}
}
],
[{
"bgUrl": "homepage/channel/channel_4_0.png",
"desc": "教会宝宝不嘲笑别人:【鹳鸟】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21949&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1216",
"extra": {}
}
},
{
"bgUrl": "homepage/channel/channel_4_1.png",
"desc": "培养宝宝尊重别人的习惯:【爱嘲笑人的斑斑】",
"link": {
"type": 3,
"url": "https://mom.feihe.com/babyWikipedia/audioDetail?id=21888&type=3&period_id=5&tag_id=1&navActive=1&fnTagId=1216",
"extra": {}
}
}
]
],
"childrenInfoList": [
[{
"bgUrl": "homepage/children/children_0.png",
"desc": "1+3 育儿妙招大揭秘，带娃从此不“蕉绿”",
"link": {
"type": 3,
"url": "https://mp.weixin.qq.com/s/Xn5dh96OaQ9CcsVMZ5jnvg",
"extra": {}
}
},
{
"bgUrl": "homepage/children/children_1.png",
"desc": "已有儿童中招，严重可瘫痪夏季防蜱虫最全指南速看",
"link": {
"type": 3,
"url": "https://mp.weixin.qq.com/s/fL5UZjWUXmPrjJgSe2Hr5g",
"extra": {}
}
},
{
"bgUrl": "homepage/children/children_2.png",
"desc": "99% 家长忽略的脑发育关键动作",
"link": {
"type": 3,
"url": "https://mp.weixin.qq.com/s/G5q6g-EdRWqasB6tvRgIzw",
"extra": {}
}
}
]
],
"bottomLinkList": [{
"bgUrl": "homepage/iconwx.png",
"link": "www.baidu.com",
"_style": "width:70rpx;height:109rpx;"
},
{
"bgUrl": "homepage/iconqw.png",
"link": "www.baidu.com",
"_style": "width:95rpx;height:109rpx;"
},
{
"bgUrl": "homepage/iconsph.png",
"link": "www.baidu.com",
"_style": "width:70rpx;height:109rpx;"
},
{
"bgUrl": "homepage/iconxhs.png",
"link": "www.baidu.com",
"_style": "width:88rpx;height:99rpx;"
}
],
"qrInfoList": [{
"title": "公众号",
"desc": "扫码关注<span style:'color:#D3A358;'>星妈会</span>公众号，了解更多专业育儿资讯",
"qrUrl": "homepage/qrcode_gzh.png"
},
{
"title": "企业微信",
"desc": "扫码添加<span style:'color:#D3A358;'>星妈管家</span>企微，了解更多专业育儿资讯",
"qrUrl": "homepage/qrcode_qw.png"
},
{
"title": "视频号",
"desc": "扫码关注<span style:'color:#D3A358;'>星妈会</span>视频号，了解更多专业育儿资讯",
"qrUrl": "homepage/qrcode_sph.png"
}
]
}
\ No newline at end of file
views/Home.vue
View file @ 165d02d5
<template>
<view class="home-container" @scroll="onPageScroll">
<view class="content">
<swiper id="firstScreen" class="swiper banner" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
:interval="interval" :duration="duration" :indicator-color="indicatorColor"
:indicator-active-color="indicatoractiveColor">
<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>
<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 }]"
@click="handleToolClick(item)"
>
<view class="tool">
<image class="tool_bg" :src="$baseUrl + toolList.bgUrl"></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_tab1.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex!=0"
:src="$baseUrl + 'homepage/et_tab1.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">
<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">育儿智库</text>
<text class="subtitle">从专业到实用，一站式解决你的育儿难题</text>
<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="infoimg2" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitle2">
<view class="infotitle">{{ infoItem.desc }}</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">有声频道</text>
<text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
<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="channelscroll">
<view class="box">
<view class="infobox" :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="infoimg" :src="$baseUrl + infoItem.bgUrl"></image>
<view class="infotitle">{{ infoItem.desc }}</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>
<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';
// 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,
}
},
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();
}
},
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);
});
},
methods: {
async initHomeInfo() {
const { data } = await fetchHomeJSON();
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;
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.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);
},
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;
},
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) });
}
}
}
</script>
<style lang="less" scoped>
@import '@/common.less';
.home-container {
background-color: white;
.content {
background-color: white;
padding-bottom: 200rpx;
.banner {
height: 1250rpx;
.banneritem {
width: 750rpx;
height: 1250rpx;
.b-img {
width: 100%;
height: 100%;
}
}
}
.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: 20rpx;
overflow-x: scroll;
padding-left: 38rpx;
display: none;
.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;
.tool_bg {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 650rpx;
border-radius: 40rpx;
}
.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: 127rpx;
height: 34rpx;
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: 650rpx;
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 {
color: @color-black-deep;
font-size: 24rpx;
margin-top: 10rpx;
margin-left: 5rpx;
}
.listbox {
display: flex;
margin-top: 10rpx;
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-x: scroll;
margin-top: 32rpx;
// margin-left: -32rpx;
.box {
display: flex;
.infobox {
margin-left: 15rpx;
.infoimg {
width: 400rpx;
height: 372rpx;
}
.infoimg2 {
width: 400rpx;
height: 400rpx;
}
.infotitle {
width: 350rpx;
color: @color-black-deep;
font-size: 30rpx;
text-align: left;
margin-left: 25rpx;
font-weight: bold;
}
.infotitle2 {
margin-top: -10rpx;
width: 400rpx;
background-color: @color-gray-light;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
.infotitle {
padding-top: 10rpx;
padding-bottom: 10rpx;
}
}
}
}
}
.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;
}
}
<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>
<!-- <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 }]" @click="handleToolClick(item)">
<view class="tool">
<image class="tool_bg" :src="$baseUrl + item.icon"></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_tab1.png'">
</image>
<image class="et_tab" v-show="etTabSelIndex != 0"
:src="$baseUrl + 'homepage/et_tab1.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">
<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';
// 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: {
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);
},
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;
.tool_bg {
position: absolute;
left: 0rpx;
top: 0rpx;
width: 400rpx;
height: 650rpx;
border-radius: 40rpx;
}
.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: 650rpx;
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: 100%;
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: center;
}
}
}
}
}
.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