WXML:
<view class='container'>
<view class='customer-management-panel'>
<view class='customer-management-nav-panel'>
<view class='management-nav flex-between'>
<view class='management-nav-subitem {{nav_index==1 ? "nav-active" : ""}}' bindtap='change_nav' data-index='1'>客户</view>
<view class='management-nav-subitem {{nav_index==2 ? "nav-active" : ""}}' bindtap='change_nav' data-index='2'>+导入</view>
</view>
<view class='management-select flex-around'>
<view class='flex-around management-select-subitem' hidden='{{nav_index==1 ? false : true}}'>
<view class='marked-as green-marked-as'>潜在客户</view>
<view class='marked-as gray-marked-as'>跟进中</view>
<view class='marked-as gray-marked-as'>已成交</view>
<view class='marked-as gray-marked-as'>其他</view>
</view>
<view class='flex-around management-select-subitem' hidden='{{nav_index==2 ? false : true}}'>
<view class='long-marked-as text24519'>从好友列表导入</view>
<view class='long-marked-as text24519'>从客户公海导入</view>
</view>
</view>
</view>
</view>
</view>
wxss:
@import "/templete/common.wxss";
.flex-around{
display: flex;
align-items: center;
justify-content: space-around;
}
.text24519{
font-size:24rpx;
font-weight:500;
color:rgba(19,176,179,1);
}
.customer-management-nav-panel{
background-color: #fff;
margin-bottom: 24rpx;
}
.management-nav{
border-bottom: 2rpx solid rgba(226,229,236,1);
}
.management-nav-subitem{
width: 50%;
text-align: center;
font-size:32rpx;
font-weight:bold;
color:rgba(0,0,0,1);
padding:0 0 10rpx 0;
margin: 24rpx 0;
}
.nav-active {
color:#13AFB2;
background:url('https://res.tuoluohuodong.com/text-selected.png')no-repeat center bottom 0rpx;
background-size:24rpx 6rpx;
}
.management-select{
height: 81rpx;
}
.management-select-subitem{
width: 100%;
}
.long-marked-as{
width:221rpx;
height:50rpx;
line-height: 50rpx;
text-align: center;
border:2rpx solid rgba(19,176,179,1);
border-radius:25rpx;
}
js:
// pages/mine/customer_management/customer_management.js
Page({
/**
* 页面的初始数据
*/
data: {
nav_index:1
},
/*
*nav切换
*/
change_nav:function(e){
this.setData({
nav_index:e.currentTarget.dataset.index
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})