183 lines
4.3 KiB
Vue
183 lines
4.3 KiB
Vue
<template>
|
|
<view class="foot-box"
|
|
:style="{
|
|
background: isGradualChange ? `linear-gradient( to ${direction}, ${colorOne} 0%, ${colorTwo} 20%, ${colorThree} 80%, ${colorFour} 100%)` : `url(${backgroundImage}) ${backgroundColor} `,
|
|
boxShadow: `-10rpx 0rpx 10rpx rgba( 0, 0, 0, ${boxShadowNum})`
|
|
}">
|
|
<!-- 后台动态改变的icon与标题 start -->
|
|
<view @tap="choosefoot(index)" class="item-box" v-for="(item,index) in footList" :key="index">
|
|
<image :class="isIcon==index ? 'bulge' : ''" :style="{width:[46,42,116,40,42][index]+'rpx',height:[36,38,116,38,40][index]+'rpx'}" :src="current == index ? item.selectedIconPath : item.iconPath" mode="widthFix"></image>
|
|
<view class="clips1" :class="current==index ? 'activeclass' : 'defaultclass'">{{item.title}}</view>
|
|
</view>
|
|
<!-- 后台动态改变的icon图 end -->
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name:'foot-tab',
|
|
props:{
|
|
// 当前选中项
|
|
current:{
|
|
type:String,
|
|
default:'2'
|
|
},
|
|
// 默认哪个图标突出
|
|
isIcon:{
|
|
type:String,
|
|
default:'2'
|
|
},
|
|
// 底部导航背景图片
|
|
backgroundImage:{
|
|
type:String,
|
|
default:'http://img.netbian.com/file/2021/1212/232713y3bCy.jpg'
|
|
},
|
|
// 背景颜色
|
|
backgroundColor:{
|
|
type:String,
|
|
default:'#FFFFFF'
|
|
},
|
|
// 是否开启背景颜色渐变
|
|
isGradualChange:{
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
// 渐变方向
|
|
direction:{
|
|
type:String,
|
|
default:'right top'
|
|
},
|
|
// 第一种颜色
|
|
colorOne:{
|
|
type:String,
|
|
default:'#FFFFFF'
|
|
},
|
|
// 第二种颜色
|
|
colorTwo:{
|
|
type:String,
|
|
default:'#FFFFFF'
|
|
},
|
|
// 第三种颜色
|
|
colorThree:{
|
|
type:String,
|
|
default:'#FFFFFF'
|
|
},
|
|
// 第四种颜色
|
|
colorFour:{
|
|
type:String,
|
|
default:'#FFFFFF'
|
|
},
|
|
// 阴影大小0~1之间 0表示没有阴影
|
|
boxShadowNum:{
|
|
type:String,
|
|
default:'0.1'
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
ifCustomerService:false,//是否存在客服 默认不存在客服
|
|
footList:[
|
|
{
|
|
iconPath: "/static/tabbar/icon-mo-kc.png",
|
|
selectedIconPath: "/static/tabbar/icon-active-kc.png",
|
|
title:'课程'
|
|
},
|
|
{
|
|
iconPath: "/static/tabbar/icon-mo-shop.png",
|
|
selectedIconPath: "/static/tabbar/icon-active-shop.png",
|
|
title:'商城'
|
|
},
|
|
{
|
|
iconPath: "/static/tabbar/icon-home.png",
|
|
selectedIconPath: "/static/tabbar/icon-home.png",
|
|
title:''
|
|
},
|
|
{
|
|
iconPath: "/static/tabbar/icon-mo-sp.png",
|
|
selectedIconPath: "/static/tabbar/icon-active-sp.png",
|
|
title:'视频'
|
|
},
|
|
{
|
|
iconPath: "/static/tabbar/icon-mo-wd.png",
|
|
selectedIconPath: "/static/tabbar/icon-active-wd.png",
|
|
title:'我的'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods:{
|
|
choosefoot(index){
|
|
// 已授权
|
|
switch (index){
|
|
case 0:
|
|
uni.reLaunch({url:'/pages/tabbar/course/course'})
|
|
break;
|
|
case 1:
|
|
uni.reLaunch({url:'/pages/tabbar/shop/shop'})
|
|
break;
|
|
case 2:
|
|
uni.reLaunch({url:'/pages/tabbar/pagehome/pagehome'})
|
|
break;
|
|
case 3:
|
|
uni.reLaunch({url:'/pages/tabbar/video/video'})
|
|
break;
|
|
case 4:
|
|
uni.reLaunch({url:'/pages/tabbar/my/my'})
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
|
/* 外框样式 start */
|
|
.foot-box{
|
|
height: 120rpx;
|
|
font-size: 24rpx;
|
|
position: fixed;bottom: 0;left: 0;right: 0;z-index: 10;
|
|
display: flex;justify-content: space-around;
|
|
background-repeat: no-repeat;background-size: 100% 100%;
|
|
}
|
|
/* 外框样式 end */
|
|
.item-box {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20rpx 10rpx;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
}
|
|
/* 图标样式 */
|
|
.item-box image {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
}
|
|
.item-box view{
|
|
margin-top: 6rpx;
|
|
}
|
|
/* 字体默认样式 */
|
|
.defaultclass {
|
|
color: #666666;
|
|
}
|
|
/* 字体选中样式 */
|
|
.activeclass {
|
|
color: #e42417;
|
|
}
|
|
/* 凸出样式 */
|
|
.bulge {
|
|
position: absolute;
|
|
top: 2rpx;
|
|
bottom: 2rpx;
|
|
width: 116rpx!important;
|
|
border-radius: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|