调整项目框架
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
70
components/loadMore/index.vue
Normal file
70
components/loadMore/index.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view class="loadMore">
|
||||
<!-- 无数据 -->
|
||||
<view class="noData" v-if="noData">
|
||||
<view class="imgView">
|
||||
<image class="img" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/noData.png" lazy-load="true"></image>
|
||||
</view>
|
||||
<view class="text font14">暂无数据...</view>
|
||||
</view>
|
||||
<view class="loadView" v-if="loading">
|
||||
<view class="loadBox">
|
||||
<text class="icon iconfont icon-loading"></text>
|
||||
<text class="text font14">加载中...</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loadCompleted" v-if="loadEnd && !loading">
|
||||
<view class="loadBox">
|
||||
<text class="iconfont icon-meiyougengduo"></text>
|
||||
<text class="text font14">没有更多数据了！</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props: {
|
||||
noData:{
|
||||
type:[Boolean],
|
||||
default(){
|
||||
return false
|
||||
}
|
||||
},
|
||||
loading:{
|
||||
type:[Boolean],
|
||||
default(){
|
||||
return false
|
||||
}
|
||||
},
|
||||
loadEnd:{
|
||||
type:[Boolean],
|
||||
default(){
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.noData{
|
||||
.text{
|
||||
color: $uni-text-color-grey;
|
||||
}
|
||||
}
|
||||
.loadBox{
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +1,14 @@
|
||||
<template>
|
||||
<!-- style="height: 3.5rem; margin: 0 1em;" -->
|
||||
<view>
|
||||
<view class="line-total" :style="'width: ' + (val / total * 100) + '%'">
|
||||
<text class="line-data">
|
||||
{{val}}%
|
||||
</text>
|
||||
</view>
|
||||
<view style="position: relative;bottom: 10px;">
|
||||
<view style="position: relative;bottom: 13px;">
|
||||
<view class="line-base"></view>
|
||||
<view class="line-blue" :style="'width: ' + (val / total * 100) + '%'"></view>
|
||||
</view>
|
||||
<!-- <view class="line-val">
|
||||
<text>{{title}}</text>
|
||||
<text>{{total}}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -48,7 +43,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.line-total {
|
||||
color: #67C23A;
|
||||
text-align: right;
|
||||
@ -61,12 +56,14 @@ export default {
|
||||
|
||||
}
|
||||
.line-data{
|
||||
color: #fff;
|
||||
padding: 1px 3px;
|
||||
color: $uni-text-color-inverse;
|
||||
padding: 1px 5px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid #FFF;
|
||||
border: 1px solid $uni-text-color-inverse;
|
||||
background: var(--color-warning, #67C23A);
|
||||
width: 30px;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
}
|
||||
.line-base {
|
||||
|
||||
40
components/searchView/index.vue
Normal file
40
components/searchView/index.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<view class="searchBox">
|
||||
<view class="searchView">
|
||||
<view class="searchInput">
|
||||
<input class="input font14" confirm-type="search" placeholder-class="placeholderStyle placeholderClass iconfont icon-a-Vector6-copy" :placeholder="placeholder" />
|
||||
<view class="filter">
|
||||
<text class="iconfont icon-a-shaixuan2 font22"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
props: {
|
||||
placeholder:{
|
||||
type:[String],
|
||||
default:' 请输入关键字'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.searchBox .searchInput .input{
|
||||
background: $uni-bg-color-primary;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user