Skip to content

飞
飞鹤小程序
Commit e6d73199 authored by 张九刚's avatar 张九刚
Browse files
Options

feat: backup

parent ce34c007
Hide whitespace changes
Inline Side-by-side
Showing with 1278 additions and 24 deletions
common.less
View file @ e6d73199
......@@ -3,7 +3,7 @@
@color-gold-cover: #B27C1E; // 真诚棕，用于覆盖主题色等上层或其他场景重点高亮颜色
// 辅助色
@color-gold-light: #5FDE0A5; // 闪耀金，用于辅助色
@color-gold-light: #FDE0A5; // 闪耀金，用于辅助色
@color-white-soft: #FEF7F2; // 柔和白，用于辅助色
@color-purple-energy: #A68DBB; // 能量紫，用于辅助色
@color-pink-cute: #E5C5DB; // 可爱粉，用于辅助色
......
manifest.json
View file @ e6d73199
......@@ -50,7 +50,7 @@
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"appid" : "wxc83b55d61c7fc51d",
"setting" : {
"urlCheck" : false
},
......
views/Brand.vue
View file @ e6d73199
<template>
<view class="brand-container">
<view class="content">
<!-- 品牌故事内容 -->
<text>品牌故事内容</text>
<swiper class="swiper banner" :current="swiperIndex" @animationfinish="intervalChange" circular
:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
:indicator-color="indicatorColor" :indicator-active-color="indicatoractiveColor">
<swiper-item v-for="item in swiperList" :key="item.url">
<view class="swiper-item banneritem">
<image :data-link="item.link" @tap="jumpLink(item.link)" class="b-img" :src="item.url"></image>
</view>
</swiper-item>
</swiper>
<view class="swiperbox">
<view class="iconbox">
<image @tap="jumpSwiper(index)" class="icon"
:src="swiperIndex === index?icon.activeUrl:icon.baseUrl" v-for="(icon,index) in swiperIconList"
:key="index"></image>
</view>
</view>
<view class="videoposterbox">
<image class="videoposter" :src="baseImgUrl+'/static/brandpage/videoposter.png'"></image>
</view>
<view class="productcontai">
<text class="maintitle">飞鹤产品家族</text>
<view class="listbox">
<view @tap="channelTabHandler(index)"
:class="channelTabIndex===index?'tabitem tabActive':'tabitem' "
v-for="(item,index) in productTabList" :key="index">
{{item}}
</view>
</view>
<view class="productbox">
<view class="infobox" :key="index" v-for="(infoItem,index) in productInfoList[channelTabIndex]"
@tap="jumpLink(infoItem.link)">
<view class="flexbox">
<view class="infotitle">
{{infoItem.title}}
</view>
<image class="infoimg" :src="baseImgUrl+infoItem.bgUrl"></image>
</view>
<view class="infodesc">{{infoItem.desc}}</view>
</view>
</view>
</view>
<view class="ipbox">
<image class="iphexiaofei" :src="baseImgUrl+'/static/brandpage/iphexiaofei.png'"></image>
<view class="ipcard">
<view class="title">
飞鹤品牌IP<view class="t1">鹤小飞一家</view>
</view>
<view class="desc">
{{ipDesc}}
</view>
<view class="ipflex">
<view class="ipbg ip1">
<image src="/static/brandpage/ip1.png"></image>
</view>
<view class="ipright">
<view class="ipbg ip2">
<image src="/static/brandpage/ip2.png"></image>
</view>
<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
<view class="ipbg ip3">
<image src="/static/brandpage/ip3.png"></image>
</view>
<view class="ipbg ip4">
<image src="/static/brandpage/ip4.png"></image>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="esgbox">
<text class="maintitle">飞鹤ESG</text>
<text class="subtitle">关注祖国下一代的营养、教育和陪伴</text>
<view class="channelscroll">
<view class="box">
<view class="infobox" :key="index" v-for="(infoItem,index) in esgInfoList"
@tap="jumpLink(infoItem.link)">
<image class="infoimg" :src="baseImgUrl+infoItem.bgUrl"></image>
<view class="infotitle">{{infoItem.title}}</view>
<view class="infodesc">{{infoItem.desc}}</view>
</view>
</view>
</view>
<view class="desc desc2">
更多星妈会权威专家服务团 <view class="desc1"> 点击查看 > </view>
</view>
</view>
</view>
</view>
</template>
<script setup>
// 品牌故事组件逻辑
<script>
const baseImgUrl = "";
const swiperList = [{
url: '/static/brandpage/Banner1.jpg',
link: 'www.baidu.com'
},
{
url: '/static/brandpage/Banner2.jpg',
link: 'www.baidu.com'
},
{
url: '/static/brandpage/Banner3.jpg',
link: 'www.baidu.com'
},
];
const swiperIconList = [{
baseUrl: "/static/brandpage/corn1.png",
activeUrl: "/static/brandpage/corn2.png"
},
{
baseUrl: "/static/brandpage/cattle1.png",
activeUrl: "/static/brandpage/cattle2.png"
},
{
baseUrl: "/static/brandpage/factory1.png",
activeUrl: "/static/brandpage/factory2.png"
}
];
const productTabList = ["全部", "母婴全阶", "功能营养", "儿童产品", "北纬47°"];
const productInfoList = [
[{
bgUrl: "/static/brandpage/pic_0_1.png",
title: "超凡 吸收",
desc: "星飞帆经典 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_0_2.png",
title: "顶配 脑育",
desc: "星飞帆卓睿 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_0_3.png",
title: "亲和 自护",
desc: "星飞帆卓耀 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_0_4.png",
title: " 4维 效力",
desc: "爱本跃动蛋白营养粉",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_0_5.png",
title: "高钙 爆脆",
desc: "高钙奶酪泡芙脆",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_0_6.png",
title: "软糯 Q弹",
desc: "北纬47度黄糯玉米",
link: "www.baidu.com"
},
],
[{
bgUrl: "/static/brandpage/pic_1_1.png",
title: "超凡 吸收",
desc: "星飞帆经典 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_1_2.png",
title: "顶配 脑育",
desc: "星飞帆卓睿 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_1_3.png",
title: "亲和 自护",
desc: "星飞帆卓耀 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_1_4.png",
title: "有机 A 2",
desc: "臻稚卓蓓 A2 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_1_5.png",
title: "高配 有机",
desc: "臻稚卓蓓 3段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_1_6.png",
title: "不止 有机",
desc: "淳芮有机奶粉 3段",
link: "www.baidu.com"
},
],
[{
bgUrl: "/static/brandpage/pic_2_1.png",
title: " 4维 效力",
desc: "爱本跃动蛋白营养粉",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_2_2.png",
title: "初乳 精华",
desc: "爱本牛初乳",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_2_3.png",
title: "每日 蛋白",
desc: "爱本每日蛋白营养糊",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_2_4.png",
title: "腰腹 燃脂",
desc: "爱本纤纤益生菌\n羽衣甘蓝蛋白粉",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_2_5.png",
title: "药食 同源",
desc: "爱本参芝初乳肽",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_2_6.png",
title: "一夜 天亮",
desc: "爱本悦眠功能粉",
link: "www.baidu.com"
},
],
[{
bgUrl: "/static/brandpage/pic_3_1.png",
title: "高钙 高纤",
desc: "爱上吃菜乳酪",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_3_2.png",
title: "高钙 爆脆",
desc: "高钙奶酪泡芙脆",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_3_3.png",
title: "醇香 黑巧",
desc: "高纤黑巧乳酪",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_3_4.png",
title: "10倍 奶钙",
desc: "超新星水果奶酪",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_3_5.png",
title: "浓郁 爆浆",
desc: "厚切流心芝士片",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_3_6.png",
title: "洁净 配方",
desc: "嚼奶粉乳酪",
link: "www.baidu.com"
},
],
[{
bgUrl: "/static/brandpage/pic_4_1.png",
title: "含有 叶酸",
desc: "北纬47度白甜糯玉米",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_4_2.png",
title: "含花 青素",
desc: "北纬47度黑珍珠甜糯玉米",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_4_3.png",
title: "软糯 香甜",
desc: "北纬47度花甜糯玉米",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_4_4.png",
title: "开袋 即食",
desc: "北纬47度低GI水果玉米粒袋装",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_4_5.png",
title: "秘制 工艺",
desc: "北纬47度东北烧烤味玉米段",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/pic_4_6.png",
title: "轻卡 低GI",
desc: "N47°水果玉米汁",
link: "www.baidu.com"
},
]
]
const ipDesc = "鹤小飞一家是由鹤爸、鹤妈、鹤小飞（哥哥）、鹤小小（妹妹） 组成的一家。\n四口热爱生活、积极向上，是他们一家对生活的态度。"
const esgInfoList = [{
bgUrl: "/static/brandpage/esg1.png",
title: "中国飞鹤发布2024年ESG报告",
desc: "飞鹤践行低碳节能，打造绿色产业链；承担 龙头责任，引领行业创新发展；履行社会责 任，构建共富共享生态。",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/esg2.png",
title: "12亿元生育补贴计划",
desc: "中国飞鹤于2025年4月初在全国范围内启动 总规模为12亿元，为符合条件的孕期家庭提 供不少于1500元生育补贴的飞鹤生育补贴",
link: "www.baidu.com"
},
{
bgUrl: "/static/brandpage/esg3.png",
title: "教育公益",
desc: "百年大计，教育为本；教育大计，教师为本。 近三年来，飞鹤已投入超过6500万元开展专 项助教活动，惠及在职专任教师超过28万人",
link: "www.baidu.com"
}
]
export default {
data() {
return {
baseImgUrl: baseImgUrl,
swiperList: swiperList,
indicatorDots: false,
autoplay: true,
interval: 4000,
duration: 500,
indicatoractiveColor: "#a6a0a1",
indicatorColor: "rgba(255, 255, 255, 1)",
channelTabIndex: 0,
productTabList: productTabList,
productInfoList: productInfoList,
swiperIconList: swiperIconList,
swiperIndex: 0,
ipDesc: ipDesc,
esgInfoList: esgInfoList
}
},
methods: {
intervalChange(e) {
this.swiperIndex = e.target.current;
},
jumpSwiper(_index) {
this.swiperIndex = _index;
},
jumpLink(_link) {
console.log(_link)
},
channelTabHandler(_index) {
this.channelTabIndex = _index;
}
}
}
</script>
<style lang="less" scoped>
.brand-container {
padding: 20rpx;
.content {
padding-bottom: 100rpx;
@import '@/common.less';
.brand-container {
.content {
padding-bottom: 200rpx;
.banner {
height: 1250rpx;
.banneritem {
width: 750rpx;
height: 1250rpx;
.b-img {
width: 100%;
height: 100%;
}
}
}
.swiperbox {
position: absolute;
top: 1002rpx;
width: 650rpx;
left: 50rpx;
.iconbox {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.icon {
width: 200rpx;
height: 200rpx;
}
}
}
.videoposterbox {
width: 686rpx;
height: 384rpx;
margin-left: 32rpx;
margin-top: 32rpx;
.videoposter {
width: 686rpx;
height: 384rpx;
}
}
.productcontai {
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;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
}
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
.productbox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 686rpx;
.infobox {
width: 330rpx;
height: 330rpx;
background-color: white;
border-radius: 24rpx;
margin-top: 32rpx;
.flexbox {
display: flex;
margin-top: 80rpx;
align-items: center;
justify-content: center;
.infotitle {
font-size: 36rpx;
font-weight: 400;
width: 75rpx;
color: @color-black-deep;
margin-left: 36rpx; //一点偏移量
text-align: center;
}
.infoimg {
width: 150rpx;
height: 150rpx;
}
}
.infodesc {
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
color: @color-black-deep;
width: 100%;
text-align: center;
height: 100rpx;
white-space: pre-wrap;
}
}
}
}
.ipbox {
width: 702rpx;
height: 734rpx;
position: relative;
left: 24rpx;
border-radius: 24rpx;
background-color: white;
top: 200rpx;
.iphexiaofei {
width: 374rpx;
height: 298rpx;
position: absolute;
top: -188rpx;
left: 165rpx;
}
.ipcard {
position: absolute;
padding: 32rpx;
top: 110rpx;
.title {
display: flex;
font-size: 36rpx;
color: @color-black-deep;
font-weight: bold;
.t1 {
color: @color-gold-cover;
}
}
.desc {
margin-top: 20rpx;
white-space: pre-wrap;
font-size: 24rpx;
color: @color-black-deep;
}
.ipflex {
display: flex;
justify-content: space-between;
margin-top: 20rpx;
.ipbg {
border-radius: 24rpx;
background-color: @color-gray-light;
display: flex;
justify-content: center;
align-items: center;
}
.ip1 {
width: 288rpx;
height: 380rpx;
image {
width: 195rpx;
height: 298rpx;
}
}
.ip2 {
width: 342rpx;
height: 196rpx;
image {
width: 271rpx;
height: 152rpx;
}
}
.ip3 {
width: 160rpx;
height: 160rpx;
image {
width: 70rpx;
height: 97rpx;
}
}
.ip4 {
width: 160rpx;
height: 160rpx;
image {
width: 88rpx;
height: 92rpx;
}
}
}
}
}
.esgbox {
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;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx;
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: 500rpx;
height: 400rpx;
}
.infotitle {
color: @color-gold-main;
font-size: 32rpx;
text-align: left;
font-weight: bold;
}
.infodesc {
font-size: 24rpx;
color: black;
}
}
}
}
.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;
}
}
}
}
}
</style>
</style>
\ No newline at end of file
views/Home.vue
View file @ e6d73199
<template>
<view class="home-container">
<view class="content">
<!-- 首页内容 -->
<text>首页内容</text>
<swiper 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 in swiperList" :key="item.url">
<view class="swiper-item banneritem">
<image :data-link="item.link" @tap="jumpLink(item.link)" class="b-img" :src="item.url"></image>
</view>
</swiper-item>
</swiper>
<view class="txtbox">
<text class="txtlink">星妈会医生在线答疑群，为孩子成长保驾护航</text>
<image class="icon_arrow_yellow" :src="baseImgUrl+'/static/homepage/icon_arrow_yellow.png'"></image>
</view>
<view class="cardScroller">
<view class="cardbox">
<view class="cardboxitem" v-for="cardData in vipCardList" :key="cardData.level">
<image class="bg" :src="baseImgUrl+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" class="cardbtn"
:data-link="cardData.link" @tap="jumpLink(cardData.link)">
<image class="cardbtnbg" :src="baseImgUrl+'/static/homepage/btn_receive.png'"></image>
<text class="btnTitle">{{cardData.btnTitle}}</text>
<text class="btnSubTitle">{{cardData.btnSubTitle}}</text>
</view>
</view>
</view>
</view>
<view class="contentbox">
<image class="contentbg" :src="baseImgUrl+'/static/homepage/contentbg.png'" alt="" />
<image class="contentitem" :key="index" :style="contentItem._style" v-for="(contentItem,index) in contentImgList"
:src="baseImgUrl+contentItem.bgUrl" @tap="jumpLink(contentItem.link)"></image>
</view>
<view class="channelbox">
<text class="maintitle">有声频道</text>
<text class="subtitle">用声音传递爱与智慧，守护宝贝成长的每一步</text>
<view class="listbox">
<view @tap="channelTabHandler(index)" :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]" @tap="jumpLink(infoItem.link)">
<image class="infoimg" :src="baseImgUrl+infoItem.bgUrl"></image>
<view class="infotitle">{{infoItem.title}}</view>
</view>
</view>
</view>
<view class="desc">
滑动或者点击查看全部 <view class="desc1"> 有声故事 > </view>
</view>
</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" @tap="jumpLink(infoItem.link)">
<image class="infoimg2" :src="baseImgUrl+infoItem.bgUrl"></image>
<view class="infotitle2">
<view class="infotitle">{{infoItem.title}}</view>
</view>
</view>
</view>
</view>
<view class="desc desc2">
更多星妈会权威专家服务团 <view class="desc1"> 点击查看 > </view>
</view>
</view>
<view class="bottomlink">
<image class="bottombg" :src="baseImgUrl+'/static/homepage/bottombg.png'"></image>
<view class="box">
<image class="icon" v-for="(icon,index) in bottomLinkList" :key="index" :src="baseImgUrl+icon.bgUrl" :style="icon._style" @tap="jumpLink(icon.link)" ></image>
</view>
</view>
</view>
</view>
</template>
<script setup>
// 首页组件逻辑
<script>
const baseImgUrl = "";
const swiperList = [{
url: '/static/homepage/banner1.jpg',
link: 'www.baidu.com'
},
{
url: '/static/homepage/banner2.jpg',
link: 'www.baidu.com'
},
{
url: '/static/homepage/banner3.jpg',
link: 'www.baidu.com'
},
];
const vipCardList = [{
level: "钻石会员",
subTitle: "育儿课程权益",
btnTitle: "12类系列课程",
btnSubTitle: "立即领取",
showCornerTxt: "待领取",
link: "www.baidu.com",
bgUrl: "/static/homepage/cardbg1.png"
},
{
level: "北纬47°系列",
subTitle: "来自万年黑土的健康食品",
btnTitle: "",
btnSubTitle: "",
showCornerTxt: "",
link: "",
bgUrl: "/static/homepage/cardbg2.png"
},
{
level: "育儿宝典",
subTitle: "专家文章、育儿知识、饮食知识",
btnTitle: "",
btnSubTitle: "",
showCornerTxt: "",
link: "",
bgUrl: "/static/homepage/cardbg3.png"
},
]
const contentImgList = [{
bgUrl: '/static/homepage/content_1.png',
link: 'www.baidu.com',
_style: 'width:311rpx;height: 324rpx;left: 40rpx;top: 0;'
},
{
bgUrl: '/static/homepage/content_2.png',
link: 'www.baidu.com',
_style: 'width:263rpx;height: 324rpx;right: 40rpx;top: 400rpx;'
},
{
bgUrl: '/static/homepage/content_3.png',
link: 'www.baidu.com',
_style: 'width:418rpx;height: 345rpx;left: 40rpx;top: 750rpx;'
},
{
bgUrl: '/static/homepage/content_4.png',
link: 'www.baidu.com',
_style: 'width:263rpx;height: 324rpx;right: 40rpx;top: 1120rpx;'
}
]
const channelTabList = ["凯叔讲故事", "哄睡故事", "知识科普", "安全意识", "社交能力"];
const changelInfoList = [
[{
bgUrl: "/static/homepage/channel_0_1.png",
title: "凯叔·金子美铃童诗:【星星和蒲公英】",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/channel_0_1.png",
title: "凯叔·金子美铃童诗:【天空和海】",
link: "www.baidu.com"
}
],
[{
bgUrl: "/static/homepage/channel_1_1.png",
title: "凯叔-小睡仙:【睡吧睡吧，香香的】",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/channel_1_1.png",
title: "凯叔-小睡仙:【睡觉仙气，3,2,1,】",
link: "www.baidu.com"
}
],
[{
bgUrl: "/static/homepage/channel_2_1.png",
title: "教宝宝认识人体:【守护眼睛的睫毛】",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/channel_2_1.png",
title: "教宝宝认识人体：【为什么肚子会咕咕叫？】",
link: "www.baidu.com"
}
],
[{
bgUrl: "/static/homepage/channel_3_1.png",
title: "教宝宝不乱吃东西:【这个不能吃】",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/channel_3_1.png",
title: "培养宝宝不摸插座的安全意识:【电线插座不好玩】",
link: "www.baidu.com"
}
],
[{
bgUrl: "/static/homepage/channel_4_1.png",
title: "教会宝宝不嘲笑别人:【鹤鸟】",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/channel_4_1.png",
title: "培养宝宝尊重别人的习惯:【爱嘲笑人的斑斑】",
link: "www.baidu.com"
}
]
]
const childrenInfoList=[
{
bgUrl: "/static/homepage/children_0.png",
title: "1+3 育儿妙招大揭秘，带娃从此不“蕉绿”",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/children_1.png",
title: "已有儿童中招，严重可瘫痪夏季防蜱虫最全指南速看",
link: "www.baidu.com"
},
{
bgUrl: "/static/homepage/children_2.png",
title: "99% 家长忽略的脑发育关键动作",
link: "www.baidu.com"
}
]
const bottomLinkList=[
{
bgUrl:"/static/homepage/iconwx.png",
link:"www.baidu.com",
_style:"width:70rpx;height:109rpx;"
},
{
bgUrl:"/static/homepage/iconqw.png",
link:"www.baidu.com",
_style:"width:95rpx;height:109rpx;"
},
{
bgUrl:"/static/homepage/iconsph.png",
link:"www.baidu.com",
_style:"width:70rpx;height:109rpx;"
},
{
bgUrl:"/static/homepage/iconxhs.png",
link:"www.baidu.com",
_style:"width:88rpx;height:99rpx;"
}
]
export default {
data() {
return {
baseImgUrl: baseImgUrl,
swiperList: swiperList,
indicatorDots: true,
autoplay: true,
interval: 4000,
duration: 500,
indicatoractiveColor: "#a6a0a1",
indicatorColor: "rgba(255, 255, 255, 1)",
vipCardList: vipCardList,
contentImgList: contentImgList,
channelTabList: channelTabList,
channelTabIndex: 0,
changelInfoList:changelInfoList,
childrenInfoList:childrenInfoList,
bottomLinkList:bottomLinkList
}
},
methods: {
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
},
jumpLink(_link) {
console.log(_link)
},
channelTabHandler(_index){
this.channelTabIndex=_index;
}
}
}
</script>
<style lang="less" scoped>
.home-container {
padding: 20rpx;
.content {
padding-bottom: 100rpx;
@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%;
}
}
}
.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;
}
}
.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;
}
.subTitle {
position: absolute;
left: 24rpx;
top: 80rpx;
font-size: 24rpx;
color: @color-black-deep;
}
.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;
.cardbtnbg {
position: absolute;
width: 368rpx;
height: 88rpx;
z-index: 0;
left: 0;
top: 0;
}
.btnTitle {
position: absolute;
// z-index: 1;
width: 169rpx;
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;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx;
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{
}
}
}
}
}
}
</style>
</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