130 lines
3.0 KiB
Vue
130 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<view class="footers_box">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<view class="icon_box">
|
||
|
|
<image v-if="tabIndex == 0" class="tabIcon" src="/static/workstation/tab1_active.png"></image>
|
||
|
|
<image v-else class="tabIcon" src="/static/workstation/tab1.png"></image>
|
||
|
|
</view>
|
||
|
|
<view class="icon_box" :class="{ active: tabIndex == 0 }" @click="changTab(0)">工作站</view>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<view class="icon_box">
|
||
|
|
<image v-if="tabIndex == 1" class="tabIcon" src="/static/workstation/tab2_active.png"></image>
|
||
|
|
<image v-else class="tabIcon" src="/static/workstation/tab2.png"></image>
|
||
|
|
</view>
|
||
|
|
<view class="icon_box" :class="{ active: tabIndex == 1 }" @click="changTab(1)">数据中心</view>
|
||
|
|
</li>
|
||
|
|
<li><image class="tabIcon tabIcon_more" src="/static/workstation/nav_add.png"></image></li>
|
||
|
|
<li>
|
||
|
|
<view class="icon_box">
|
||
|
|
<image v-if="tabIndex == 2" class="tabIcon" src="/static/workstation/tab3_active.png"></image>
|
||
|
|
<image v-else class="tabIcon" src="/static/workstation/tab3.png"></image>
|
||
|
|
</view>
|
||
|
|
<view class="icon_box" :class="{ active: tabIndex == 2 }" @click="changTab(2)">业务中心</view>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<view class="icon_box">
|
||
|
|
<image v-if="tabIndex == 3" class="tabIcon" src="/static/workstation/tab4_active.png"></image>
|
||
|
|
<image v-else class="tabIcon" src="/static/workstation/tab4.png"></image>
|
||
|
|
</view>
|
||
|
|
<view class="icon_box" :class="{ active: tabIndex == 3 }" @click="changTab(3)">我的</view>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
tabIndex: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changTab(val) {
|
||
|
|
if (val == 0) {
|
||
|
|
console.log(val)
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/workstation/workstationIndex/workstationIndex'
|
||
|
|
});
|
||
|
|
} else if (val == 2) {
|
||
|
|
// console.log(val)
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/businessCenter/index'
|
||
|
|
});
|
||
|
|
} else if (val == 3) {
|
||
|
|
console.log(3)
|
||
|
|
// console.log(val)
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/my/my?type=1'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.footers_box {
|
||
|
|
background-color: white;
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
height: 100rpx;
|
||
|
|
z-index: 9999;
|
||
|
|
border-top: 1px solid rgba(151, 151, 151, 0.15);
|
||
|
|
ul {
|
||
|
|
display: flex;
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
li {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 22rpx;
|
||
|
|
color: #9495ad;
|
||
|
|
height: 100rpx;
|
||
|
|
position: relative;
|
||
|
|
.tabIcon {
|
||
|
|
width: 30rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
margin-top: 16rpx;
|
||
|
|
}
|
||
|
|
.icon_box {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.tabIcon_more {
|
||
|
|
width: 66rpx;
|
||
|
|
height: 66rpx;
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
color: #107eee;
|
||
|
|
}
|
||
|
|
.active:after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 6rpx;
|
||
|
|
height: 4rpx;
|
||
|
|
background: rgba(16, 126, 238, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|