long/mes_mobile
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

调整项目框架

Browse Source
This commit is contained in:
龙运模
2024-04-23 11:48:55 +08:00
parent 01ea333978
commit 2b8797a1ac
26 changed files with 962 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
components/customTabBar/index.vue
View File

@ -4,7 +4,7 @@
<!-- 针对中间的导航栏 通过true来判断控制类名和样式 -->
<view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)" :key="index">
<view class="item-top">
<image :src="currentItem == item.id ? item.selectIcon:item.icon"></image>
<image class="img" :src="currentItem == item.id ? item.selectIcon:item.icon"></image>
</view>
<!-- 通过三元判断控制类名 达到控制选中和未选中的样式 -->
<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
@ -38,9 +38,9 @@ export default {
},
{
id: 1,
path: '/pages/person/person',
// icon: '/static/logo.png',
// selectIcon: '/static/logo.png',
path: '',
icon: '/static/sweep.png',
selectIcon: '',
text: '扫一扫',
// 通过类名class控制样式大小
centerItem: true
@ -60,11 +60,34 @@ export default {
this.currentItem = this.currentPage
},
methods: {
changeItem (item) {
uni.switchTab({
url: item.path
})
}
changeItem (item) {
if(item.centerItem){
this.scanQRCode();
return
}
uni.switchTab({
url: item.path
})
},
scanQRCode(){
uni.scanCode({
success: (res) => {
console.log('扫码结果：' + res.result);
uni.showModal({
title: '扫码结果',
content: res.result,
showCancel: false
});
},
fail: (err) => {
console.error('扫码失败：' + err);
uni.showToast({
title: '扫码失败',
icon: 'none'
});
}
});
}
}
};
</script>
@ -74,18 +97,32 @@ view {
margin: 0;
box-sizing: border-box;
}
.tabbar-container::before{
content: '';
position: absolute;
left: 10%;
top: 0;
z-index: 10;
height: 1px;
width: 80%;
background-image: linear-gradient(90deg, $uni-border-color-default, $uni-color-primary 50%, $uni-border-color-default);
background-size: 100% 1px;
background-repeat:no-repeat;
z-index: 1;
}
.tabbar-container {
position: fixed;
bottom: 0rpx;
left: 0rpx;
width: 100%;
height: 110rpx;
box-shadow: 0 0 5px #999;
display: flex;
align-items: center;
padding: 5rpx 0;
color: #999999;
background: #131E3B;
color: $uni-text-color-grey;
background: $uni-border-color-default;
box-shadow: 0 2px 4px $uni-border-shadow-color-default;
/* 针对tabbar的统一处理 */
.tabbar-item {
width: 33.33%;
@ -111,7 +148,7 @@ view {
}
// 被选中的导航栏字体
.item-active {
color: #fff;
color: $uni-text-color-inverse;
}
}
@ -119,15 +156,26 @@ view {
.center-item {
display: block;
position: relative;
z-index: 20;
.item-top {
flex-shrink: 0;
width: 100rpx;
height: 100rpx;
position: absolute;
top: -50rpx;
top: -60rpx;
left: calc(50% - 50rpx);
border-radius: 50%;
box-shadow: 0 0 5px #999;
box-shadow: 0 2px 4px $uni-border-shadow-color-default;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid $uni-text-color-inverse;
.img{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.item-bottom {
position: absolute;
@ -136,7 +184,7 @@ view {
.item-active {
position: absolute;
bottom: 5rpx;
color: #1fff;
color: $uni-text-color-inverse;
}
}
}