Compare commits
No commits in common. 'develop' and 'master' have entirely different histories.
@ -1,2 +0,0 @@
|
|||||||
# DYBG [BETA1]
|
|
||||||
#### 一个简单的动态背景生成器
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<img :src="captchaSrc" @click="onClick" :class="isRotate ? 'run' : ''" :style="{
|
|
||||||
width:width ? width +'rpx' : '100%',
|
|
||||||
height:height ? height +'rpx' : '100%',
|
|
||||||
marginTop:marginTop ? marginTop +'rpx' : '',
|
|
||||||
marginBottom:marginBottom ? marginBottom +'rpx' : '',
|
|
||||||
marginLeft:marginLeft ? marginLeft +'rpx' : '',
|
|
||||||
marginRight:marginRight ? marginRight +'rpx' : '',
|
|
||||||
borderRadius:borderRadius ? borderRadius +'rpx' : '',
|
|
||||||
opacity: opacity ? opacity : '',
|
|
||||||
'background-size': `${width ? width+'rpx':'100%'} ${height ? height+'rpx':'100%'}`
|
|
||||||
}" alt="-">
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'imageBox',
|
|
||||||
props: {
|
|
||||||
src: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
marginTop: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
marginBottom: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
marginLeft: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
marginRight: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
opacity: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
isRotate: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
captchaSrc() {
|
|
||||||
try{
|
|
||||||
if (this.src.indexOf('data:image/png;') !== -1) {
|
|
||||||
return this.src.replace(/[\r\n]/g, "")
|
|
||||||
} else {
|
|
||||||
return this.src
|
|
||||||
}
|
|
||||||
}catch(err){
|
|
||||||
console.info('err-----------------------',err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClick() {
|
|
||||||
this.$emit('click')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@keyframes rotate {
|
|
||||||
0%{-webkit-transform:rotate(0deg);}
|
|
||||||
25%{-webkit-transform:rotate(90deg);}
|
|
||||||
50%{-webkit-transform:rotate(180deg);}
|
|
||||||
75%{-webkit-transform:rotate(270deg);}
|
|
||||||
100%{-webkit-transform:rotate(360deg);}
|
|
||||||
}
|
|
||||||
.run { animation: rotate 2s linear infinite; }
|
|
||||||
</style>
|
|
||||||
|
After Width: | Height: | Size: 672 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 765 B |
|
After Width: | Height: | Size: 435 B |
|
Before Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 5.4 KiB |
@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view class="dish-list">
|
|
||||||
<view class="product-list">
|
|
||||||
<view class="dish" v-for="(dishes, i) in labelList" :key="i" @click="gotoDetail(dishes)">
|
|
||||||
<image mode="widthFix" :src="dishes.dish_src"></image>
|
|
||||||
<view class="name">{{dishes.dish_name}}</view>
|
|
||||||
<view class="info">
|
|
||||||
<view class="price">{{}}</view>
|
|
||||||
<view class="label">{{}}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="loading-text">{{}}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
labelList:[]
|
|
||||||
}
|
|
||||||
},onLoad() {
|
|
||||||
|
|
||||||
const sysInfo = uni.getSystemInfoSync()
|
|
||||||
// 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
|
|
||||||
this.wh = sysInfo.windowHeight - 50
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
goToDetail(item) {
|
|
||||||
console.log(item._id)
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/subpkg/dishDetail/dishDetail?_id=' +encodeURIComponent(JSON.stringify(item._id))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.dish-list {}
|
|
||||||
|
|
||||||
|
|
||||||
.loading-text {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 30px;
|
|
||||||
color: #979797;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-list {
|
|
||||||
width: 92%;
|
|
||||||
padding: 0 4% 3vw 4%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.dish {
|
|
||||||
width: 48%;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: #fff;
|
|
||||||
margin: 0 0 7px 0;
|
|
||||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.image {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 10px 10px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
width: 92%;
|
|
||||||
padding: 5px 4%;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
text-align: justify;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
width: 92%;
|
|
||||||
padding: 5px 4% 5px 4%;
|
|
||||||
}
|
|
||||||
.price {
|
|
||||||
color: #e65339;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label{
|
|
||||||
color: #807c87;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view id="particles" :style="'background-color: '+particlestyle.bgcolor+';z-index: '+particlestyle.zindex"></view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import particles from '../../../../uni_modules/aki-particles/static/aki-particles/particles.js'
|
|
||||||
export default {
|
|
||||||
name:"akira-particles",
|
|
||||||
props:['particlestyle'],
|
|
||||||
mounted(){
|
|
||||||
particlesJS.load('particles','../../../../uni_modules/aki-particles/static/aki-particles/particles-'+this.particlestyle.style+'.json');
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
#particles{
|
|
||||||
position: absolute;
|
|
||||||
//z-index: 1;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
// background-color: #000022;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: 50% 50%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
{
|
|
||||||
"particles": {
|
|
||||||
"number": {
|
|
||||||
"value": 80,
|
|
||||||
"density": {
|
|
||||||
"enable": true,
|
|
||||||
"value_area": 800
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color": {
|
|
||||||
"value": "#74b3d2"
|
|
||||||
},
|
|
||||||
"shape": {
|
|
||||||
"type": "circle",
|
|
||||||
"stroke": {
|
|
||||||
"width": 0,
|
|
||||||
"color": "#000000"
|
|
||||||
},
|
|
||||||
"polygon": {
|
|
||||||
"nb_sides": 5
|
|
||||||
},
|
|
||||||
"image": {
|
|
||||||
"src": "img/github.svg",
|
|
||||||
"width": 100,
|
|
||||||
"height": 100
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"opacity": {
|
|
||||||
"value": 0.5,
|
|
||||||
"random": true,
|
|
||||||
"anim": {
|
|
||||||
"enable": true,
|
|
||||||
"speed": 1,
|
|
||||||
"opacity_min": 0,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"value": 30,
|
|
||||||
"random": true,
|
|
||||||
"anim": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 4,
|
|
||||||
"size_min": 3,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"line_linked": {
|
|
||||||
"enable": false,
|
|
||||||
"distance": 150,
|
|
||||||
"color": "#ffffff",
|
|
||||||
"opacity": 0.4,
|
|
||||||
"width": 1
|
|
||||||
},
|
|
||||||
"move": {
|
|
||||||
"enable": true,
|
|
||||||
"speed": 1,
|
|
||||||
"direction": "none",
|
|
||||||
"random": true,
|
|
||||||
"straight": false,
|
|
||||||
"out_mode": "out",
|
|
||||||
"bounce": false,
|
|
||||||
"attract": {
|
|
||||||
"enable": false,
|
|
||||||
"rotateX": 600,
|
|
||||||
"rotateY": 600
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"interactivity": {
|
|
||||||
"detect_on": "canvas",
|
|
||||||
"events": {
|
|
||||||
"onhover": {
|
|
||||||
"enable": true,
|
|
||||||
"mode": "bubble"
|
|
||||||
},
|
|
||||||
"onclick": {
|
|
||||||
"enable": true,
|
|
||||||
"mode": "repulse"
|
|
||||||
},
|
|
||||||
"resize": true
|
|
||||||
},
|
|
||||||
"modes": {
|
|
||||||
"grab": {
|
|
||||||
"distance": 400,
|
|
||||||
"line_linked": {
|
|
||||||
"opacity": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"bubble": {
|
|
||||||
"distance": 250,
|
|
||||||
"size": 0,
|
|
||||||
"duration": 2,
|
|
||||||
"opacity": 0,
|
|
||||||
"speed": 3
|
|
||||||
},
|
|
||||||
"repulse": {
|
|
||||||
"distance": 400,
|
|
||||||
"duration": 0.4
|
|
||||||
},
|
|
||||||
"push": {
|
|
||||||
"particles_nb": 4
|
|
||||||
},
|
|
||||||
"remove": {
|
|
||||||
"particles_nb": 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"retina_detect": true
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
{
|
|
||||||
"particles": {
|
|
||||||
"number": {
|
|
||||||
"value": 6,
|
|
||||||
"density": {
|
|
||||||
"enable": true,
|
|
||||||
"value_area": 800
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color": {
|
|
||||||
"value": "#1b1e34"
|
|
||||||
},
|
|
||||||
"shape": {
|
|
||||||
"type": "polygon",
|
|
||||||
"stroke": {
|
|
||||||
"width": 0,
|
|
||||||
"color": "#000"
|
|
||||||
},
|
|
||||||
"polygon": {
|
|
||||||
"nb_sides": 6
|
|
||||||
},
|
|
||||||
"image": {
|
|
||||||
"src": "img/github.svg",
|
|
||||||
"width": 100,
|
|
||||||
"height": 100
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"opacity": {
|
|
||||||
"value": 0.3,
|
|
||||||
"random": true,
|
|
||||||
"anim": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 1,
|
|
||||||
"opacity_min": 0.1,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"value": 160,
|
|
||||||
"random": false,
|
|
||||||
"anim": {
|
|
||||||
"enable": true,
|
|
||||||
"speed": 10,
|
|
||||||
"size_min": 40,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"line_linked": {
|
|
||||||
"enable": false,
|
|
||||||
"distance": 200,
|
|
||||||
"color": "#ffffff",
|
|
||||||
"opacity": 1,
|
|
||||||
"width": 2
|
|
||||||
},
|
|
||||||
"move": {
|
|
||||||
"enable": true,
|
|
||||||
"speed": 8,
|
|
||||||
"direction": "none",
|
|
||||||
"random": false,
|
|
||||||
"straight": false,
|
|
||||||
"out_mode": "out",
|
|
||||||
"bounce": false,
|
|
||||||
"attract": {
|
|
||||||
"enable": false,
|
|
||||||
"rotateX": 600,
|
|
||||||
"rotateY": 1200
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"interactivity": {
|
|
||||||
"detect_on": "canvas",
|
|
||||||
"events": {
|
|
||||||
"onhover": {
|
|
||||||
"enable": false,
|
|
||||||
"mode": "grab"
|
|
||||||
},
|
|
||||||
"onclick": {
|
|
||||||
"enable": false,
|
|
||||||
"mode": "push"
|
|
||||||
},
|
|
||||||
"resize": true
|
|
||||||
},
|
|
||||||
"modes": {
|
|
||||||
"grab": {
|
|
||||||
"distance": 400,
|
|
||||||
"line_linked": {
|
|
||||||
"opacity": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"bubble": {
|
|
||||||
"distance": 400,
|
|
||||||
"size": 40,
|
|
||||||
"duration": 2,
|
|
||||||
"opacity": 8,
|
|
||||||
"speed": 3
|
|
||||||
},
|
|
||||||
"repulse": {
|
|
||||||
"distance": 200,
|
|
||||||
"duration": 0.4
|
|
||||||
},
|
|
||||||
"push": {
|
|
||||||
"particles_nb": 4
|
|
||||||
},
|
|
||||||
"remove": {
|
|
||||||
"particles_nb": 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"retina_detect": true
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
{
|
|
||||||
"particles": {
|
|
||||||
"number": {
|
|
||||||
"value": 80,
|
|
||||||
"density": {
|
|
||||||
"enable": true,
|
|
||||||
"value_area": 800
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color": {
|
|
||||||
"value": "#ffffff"
|
|
||||||
},
|
|
||||||
"shape": {
|
|
||||||
"type": "circle",
|
|
||||||
"stroke": {
|
|
||||||
"width": 0,
|
|
||||||
"color": "#000000"
|
|
||||||
},
|
|
||||||
"polygon": {
|
|
||||||
"nb_sides": 5
|
|
||||||
},
|
|
||||||
"image": {
|
|
||||||
"src": "img/github.svg",
|
|
||||||
"width": 100,
|
|
||||||
"height": 100
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"opacity": {
|
|
||||||
"value": 0.5,
|
|
||||||
"random": false,
|
|
||||||
"anim": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 1,
|
|
||||||
"opacity_min": 0.1,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"value": 3,
|
|
||||||
"random": true,
|
|
||||||
"anim": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 40,
|
|
||||||
"size_min": 0.1,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"line_linked": {
|
|
||||||
"enable": true,
|
|
||||||
"distance": 150,
|
|
||||||
"color": "#ffffff",
|
|
||||||
"opacity": 0.4,
|
|
||||||
"width": 1
|
|
||||||
},
|
|
||||||
"move": {
|
|
||||||
"enable": true,
|
|
||||||
"speed": 6,
|
|
||||||
"direction": "none",
|
|
||||||
"random": false,
|
|
||||||
"straight": false,
|
|
||||||
"out_mode": "out",
|
|
||||||
"bounce": false,
|
|
||||||
"attract": {
|
|
||||||
"enable": false,
|
|
||||||
"rotateX": 600,
|
|
||||||
"rotateY": 1200
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"interactivity": {
|
|
||||||
"detect_on": "canvas",
|
|
||||||
"events": {
|
|
||||||
"onhover": {
|
|
||||||
"enable": true,
|
|
||||||
"mode": "repulse"
|
|
||||||
},
|
|
||||||
"onclick": {
|
|
||||||
"enable": true,
|
|
||||||
"mode": "push"
|
|
||||||
},
|
|
||||||
"resize": true
|
|
||||||
},
|
|
||||||
"modes": {
|
|
||||||
"grab": {
|
|
||||||
"distance": 400,
|
|
||||||
"line_linked": {
|
|
||||||
"opacity": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"bubble": {
|
|
||||||
"distance": 400,
|
|
||||||
"size": 40,
|
|
||||||
"duration": 2,
|
|
||||||
"opacity": 8,
|
|
||||||
"speed": 3
|
|
||||||
},
|
|
||||||
"repulse": {
|
|
||||||
"distance": 200,
|
|
||||||
"duration": 0.4
|
|
||||||
},
|
|
||||||
"push": {
|
|
||||||
"particles_nb": 4
|
|
||||||
},
|
|
||||||
"remove": {
|
|
||||||
"particles_nb": 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"retina_detect": true
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
{
|
|
||||||
"particles": {
|
|
||||||
"number": {
|
|
||||||
"value": 160,
|
|
||||||
"density": {
|
|
||||||
"enable": true,
|
|
||||||
"value_area": 800
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color": {
|
|
||||||
"value": "#ffffff"
|
|
||||||
},
|
|
||||||
"shape": {
|
|
||||||
"type": "circle",
|
|
||||||
"stroke": {
|
|
||||||
"width": 0,
|
|
||||||
"color": "#000000"
|
|
||||||
},
|
|
||||||
"polygon": {
|
|
||||||
"nb_sides": 5
|
|
||||||
},
|
|
||||||
"image": {
|
|
||||||
"src": "img/github.svg",
|
|
||||||
"width": 100,
|
|
||||||
"height": 100
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"opacity": {
|
|
||||||
"value": 1,
|
|
||||||
"random": true,
|
|
||||||
"anim": {
|
|
||||||
"enable": true,
|
|
||||||
"speed": 1,
|
|
||||||
"opacity_min": 0,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"value": 3,
|
|
||||||
"random": true,
|
|
||||||
"anim": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 4,
|
|
||||||
"size_min": 0.3,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"line_linked": {
|
|
||||||
"enable": false,
|
|
||||||
"distance": 150,
|
|
||||||
"color": "#ffffff",
|
|
||||||
"opacity": 0.4,
|
|
||||||
"width": 1
|
|
||||||
},
|
|
||||||
"move": {
|
|
||||||
"enable": true,
|
|
||||||
"speed": 1,
|
|
||||||
"direction": "none",
|
|
||||||
"random": true,
|
|
||||||
"straight": false,
|
|
||||||
"out_mode": "out",
|
|
||||||
"bounce": false,
|
|
||||||
"attract": {
|
|
||||||
"enable": false,
|
|
||||||
"rotateX": 600,
|
|
||||||
"rotateY": 600
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"interactivity": {
|
|
||||||
"detect_on": "canvas",
|
|
||||||
"events": {
|
|
||||||
"onhover": {
|
|
||||||
"enable": true,
|
|
||||||
"mode": "bubble"
|
|
||||||
},
|
|
||||||
"onclick": {
|
|
||||||
"enable": true,
|
|
||||||
"mode": "repulse"
|
|
||||||
},
|
|
||||||
"resize": true
|
|
||||||
},
|
|
||||||
"modes": {
|
|
||||||
"grab": {
|
|
||||||
"distance": 400,
|
|
||||||
"line_linked": {
|
|
||||||
"opacity": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"bubble": {
|
|
||||||
"distance": 250,
|
|
||||||
"size": 0,
|
|
||||||
"duration": 2,
|
|
||||||
"opacity": 0,
|
|
||||||
"speed": 3
|
|
||||||
},
|
|
||||||
"repulse": {
|
|
||||||
"distance": 400,
|
|
||||||
"duration": 0.4
|
|
||||||
},
|
|
||||||
"push": {
|
|
||||||
"particles_nb": 4
|
|
||||||
},
|
|
||||||
"remove": {
|
|
||||||
"particles_nb": 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"retina_detect": true
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
{
|
|
||||||
"particles": {
|
|
||||||
"number": {
|
|
||||||
"value": 100,
|
|
||||||
"density": {
|
|
||||||
"enable": false,
|
|
||||||
"value_area": 800
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color": {
|
|
||||||
"value": "#ffffff"
|
|
||||||
},
|
|
||||||
"shape": {
|
|
||||||
"type": "star",
|
|
||||||
"stroke": {
|
|
||||||
"width": 0,
|
|
||||||
"color": "#000000"
|
|
||||||
},
|
|
||||||
"polygon": {
|
|
||||||
"nb_sides": 5
|
|
||||||
},
|
|
||||||
"image": {
|
|
||||||
"src": "http://wiki.lexisnexis.com/academic/images/f/fb/Itunes_podcast_icon_300.jpg",
|
|
||||||
"width": 100,
|
|
||||||
"height": 100
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"opacity": {
|
|
||||||
"value": 0.5,
|
|
||||||
"random": false,
|
|
||||||
"anim": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 1,
|
|
||||||
"opacity_min": 0.1,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"value": 4,
|
|
||||||
"random": true,
|
|
||||||
"anim": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 40,
|
|
||||||
"size_min": 0.1,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"line_linked": {
|
|
||||||
"enable": false,
|
|
||||||
"distance": 150,
|
|
||||||
"color": "#ffffff",
|
|
||||||
"opacity": 0.4,
|
|
||||||
"width": 1
|
|
||||||
},
|
|
||||||
"move": {
|
|
||||||
"enable": true,
|
|
||||||
"speed": 14,
|
|
||||||
"direction": "left",
|
|
||||||
"random": false,
|
|
||||||
"straight": true,
|
|
||||||
"out_mode": "out",
|
|
||||||
"bounce": false,
|
|
||||||
"attract": {
|
|
||||||
"enable": false,
|
|
||||||
"rotateX": 600,
|
|
||||||
"rotateY": 1200
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"interactivity": {
|
|
||||||
"detect_on": "canvas",
|
|
||||||
"events": {
|
|
||||||
"onhover": {
|
|
||||||
"enable": false,
|
|
||||||
"mode": "grab"
|
|
||||||
},
|
|
||||||
"onclick": {
|
|
||||||
"enable": true,
|
|
||||||
"mode": "repulse"
|
|
||||||
},
|
|
||||||
"resize": true
|
|
||||||
},
|
|
||||||
"modes": {
|
|
||||||
"grab": {
|
|
||||||
"distance": 200,
|
|
||||||
"line_linked": {
|
|
||||||
"opacity": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"bubble": {
|
|
||||||
"distance": 400,
|
|
||||||
"size": 40,
|
|
||||||
"duration": 2,
|
|
||||||
"opacity": 8,
|
|
||||||
"speed": 3
|
|
||||||
},
|
|
||||||
"repulse": {
|
|
||||||
"distance": 200,
|
|
||||||
"duration": 0.4
|
|
||||||
},
|
|
||||||
"push": {
|
|
||||||
"particles_nb": 4
|
|
||||||
},
|
|
||||||
"remove": {
|
|
||||||
"particles_nb": 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"retina_detect": true
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
{
|
|
||||||
"particles": {
|
|
||||||
"number": {
|
|
||||||
"value": 400,
|
|
||||||
"density": {
|
|
||||||
"enable": true,
|
|
||||||
"value_area": 800
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color": {
|
|
||||||
"value": "#fff"
|
|
||||||
},
|
|
||||||
"shape": {
|
|
||||||
"type": "circle",
|
|
||||||
"stroke": {
|
|
||||||
"width": 0,
|
|
||||||
"color": "#000000"
|
|
||||||
},
|
|
||||||
"polygon": {
|
|
||||||
"nb_sides": 5
|
|
||||||
},
|
|
||||||
"image": {
|
|
||||||
"src": "img/github.svg",
|
|
||||||
"width": 100,
|
|
||||||
"height": 100
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"opacity": {
|
|
||||||
"value": 0.5,
|
|
||||||
"random": true,
|
|
||||||
"anim": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 1,
|
|
||||||
"opacity_min": 0.1,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"value": 10,
|
|
||||||
"random": true,
|
|
||||||
"anim": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 40,
|
|
||||||
"size_min": 0.1,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"line_linked": {
|
|
||||||
"enable": false,
|
|
||||||
"distance": 500,
|
|
||||||
"color": "#ffffff",
|
|
||||||
"opacity": 0.4,
|
|
||||||
"width": 2
|
|
||||||
},
|
|
||||||
"move": {
|
|
||||||
"enable": true,
|
|
||||||
"speed": 6,
|
|
||||||
"direction": "bottom",
|
|
||||||
"random": false,
|
|
||||||
"straight": false,
|
|
||||||
"out_mode": "out",
|
|
||||||
"bounce": false,
|
|
||||||
"attract": {
|
|
||||||
"enable": false,
|
|
||||||
"rotateX": 600,
|
|
||||||
"rotateY": 1200
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"interactivity": {
|
|
||||||
"detect_on": "canvas",
|
|
||||||
"events": {
|
|
||||||
"onhover": {
|
|
||||||
"enable": true,
|
|
||||||
"mode": "bubble"
|
|
||||||
},
|
|
||||||
"onclick": {
|
|
||||||
"enable": true,
|
|
||||||
"mode": "repulse"
|
|
||||||
},
|
|
||||||
"resize": true
|
|
||||||
},
|
|
||||||
"modes": {
|
|
||||||
"grab": {
|
|
||||||
"distance": 400,
|
|
||||||
"line_linked": {
|
|
||||||
"opacity": 0.5
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"bubble": {
|
|
||||||
"distance": 400,
|
|
||||||
"size": 4,
|
|
||||||
"duration": 0.3,
|
|
||||||
"opacity": 1,
|
|
||||||
"speed": 3
|
|
||||||
},
|
|
||||||
"repulse": {
|
|
||||||
"distance": 200,
|
|
||||||
"duration": 0.4
|
|
||||||
},
|
|
||||||
"push": {
|
|
||||||
"particles_nb": 4
|
|
||||||
},
|
|
||||||
"remove": {
|
|
||||||
"particles_nb": 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"retina_detect": true
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,41 +0,0 @@
|
|||||||
/* 主要颜色 */
|
|
||||||
$base: #fe3b0f; // 基础颜色
|
|
||||||
.page-total{
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
// height: 100rpx;
|
|
||||||
}
|
|
||||||
.tab-list{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 120rpx;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
.list{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 20%;
|
|
||||||
height: 120rpx;
|
|
||||||
image{
|
|
||||||
width: 48rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
text{
|
|
||||||
color: #333333;
|
|
||||||
font-size: 24rpx;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
.action{
|
|
||||||
color: $base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="page-total">
|
|
||||||
<view class="tab-list">
|
|
||||||
<view class="list" v-for="(item,index) in TabBarList"
|
|
||||||
@click="onTabBar(item,index)" :style="{marginTop: (index == 2) ? '-18px' : '0px'}"
|
|
||||||
:key="index">
|
|
||||||
<image :src="item.acImg" mode="widthFix" v-show="tabBarShow === index" :style="{width: (index == 2) ? '40px' : '24px',borderRadius: (index == 2) ? '12px' : '0px'}"></image>
|
|
||||||
<image :src="item.img" mode="widthFix" v-show="tabBarShow != index" :style="{width: (index == 2) ? '40px' : '24px',borderRadius: (index == 2) ? '12px' : '0px'}"></image>
|
|
||||||
|
|
||||||
<!-- background: (index == 2) ? 'red' : '' -->
|
|
||||||
<text :class="{'action':tabBarShow===index}" :style="{marginTop: (index == 2) ? '4px' : '0px'}">{{item.name}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
TabBarList:[
|
|
||||||
{
|
|
||||||
index: 0,
|
|
||||||
name: '首页',
|
|
||||||
img: "/static/static/images/home/home1.png",
|
|
||||||
acg: "/static/static/images/home/home2.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
index: 1,
|
|
||||||
name: '筛选',
|
|
||||||
img: "/static/static/images/home/筛选2.png",
|
|
||||||
acImg: "/static/static/images/home/筛选1.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
index: 2,
|
|
||||||
name: '推荐',
|
|
||||||
img: "/static/static/images/home/推荐1.png",
|
|
||||||
acImg:"/static/static/images/home/推荐2.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
index: 3,
|
|
||||||
name: '排行榜',
|
|
||||||
img: "/static/static/images/home/排行榜2.png",
|
|
||||||
acImg: "/static/static/images/home/排行榜1.png"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
index: 4,
|
|
||||||
name: '个人中心',
|
|
||||||
img: "/static/static/images/home/我的1.png",
|
|
||||||
acImg: "/static/static/images/home/我的2.png"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
codeheight: 0,
|
|
||||||
isOverall: 0,
|
|
||||||
phoneModel: '',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
tabBarShow: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
methods:{
|
|
||||||
/**
|
|
||||||
* @param {Object} item
|
|
||||||
* @param {Number} index
|
|
||||||
*/
|
|
||||||
onTabBar(item,index){
|
|
||||||
// this.tabBarShow = index;
|
|
||||||
switch (index){
|
|
||||||
case 0:
|
|
||||||
uni.switchTab({
|
|
||||||
url:"/pages/home/home"
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
uni.switchTab({
|
|
||||||
url:"/pages/search/search"
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
uni.switchTab({
|
|
||||||
url:"/pages/recommend/recommend"
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
uni.switchTab({
|
|
||||||
url:"/pages/ranking/ranking"
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
uni.switchTab({
|
|
||||||
url:'/pages/my/my'
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@import 'cc-myTabbar.scss';
|
|
||||||
</style>
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
{
|
|
||||||
"id": "cc-myTabbar",
|
|
||||||
"displayName": "自定义tabbar底部tabbar凸起tabbar兼容苹果刘海屏小程序和APP",
|
|
||||||
"version": "1.0.1",
|
|
||||||
"description": "自定义tabbar底部tabbar凸起tabbar兼容苹果刘海屏Home键小程序和APP 可自定义tabbar图片文字大小及位置",
|
|
||||||
"keywords": [
|
|
||||||
"tabbar",
|
|
||||||
"自定义tabbar",
|
|
||||||
"底部导航",
|
|
||||||
"自定义",
|
|
||||||
"凸起导航"
|
|
||||||
],
|
|
||||||
"repository": "",
|
|
||||||
"engines": {
|
|
||||||
"HBuilderX": "^3.8.0"
|
|
||||||
},
|
|
||||||
"dcloudext": {
|
|
||||||
"type": "component-vue",
|
|
||||||
"sale": {
|
|
||||||
"regular": {
|
|
||||||
"price": "0.00"
|
|
||||||
},
|
|
||||||
"sourcecode": {
|
|
||||||
"price": "0.00"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"contact": {
|
|
||||||
"qq": ""
|
|
||||||
},
|
|
||||||
"declaration": {
|
|
||||||
"ads": "无",
|
|
||||||
"data": "无",
|
|
||||||
"permissions": "无"
|
|
||||||
},
|
|
||||||
"npmurl": ""
|
|
||||||
},
|
|
||||||
"uni_modules": {
|
|
||||||
"dependencies": [],
|
|
||||||
"encrypt": [],
|
|
||||||
"platforms": {
|
|
||||||
"cloud": {
|
|
||||||
"tcb": "y",
|
|
||||||
"aliyun": "y"
|
|
||||||
},
|
|
||||||
"client": {
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
},
|
|
||||||
"App": {
|
|
||||||
"app-vue": "y",
|
|
||||||
"app-nvue": "y"
|
|
||||||
},
|
|
||||||
"H5-mobile": {
|
|
||||||
"Safari": "y",
|
|
||||||
"Android Browser": "y",
|
|
||||||
"微信浏览器(Android)": "y",
|
|
||||||
"QQ浏览器(Android)": "y"
|
|
||||||
},
|
|
||||||
"H5-pc": {
|
|
||||||
"Chrome": "y",
|
|
||||||
"IE": "y",
|
|
||||||
"Edge": "y",
|
|
||||||
"Firefox": "y",
|
|
||||||
"Safari": "y"
|
|
||||||
},
|
|
||||||
"小程序": {
|
|
||||||
"微信": "y",
|
|
||||||
"阿里": "y",
|
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y",
|
|
||||||
"钉钉": "y",
|
|
||||||
"快手": "y",
|
|
||||||
"飞书": "y",
|
|
||||||
"京东": "y"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "y",
|
|
||||||
"联盟": "y"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,338 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
|
|
||||||
<view class="mask" @tap="hideright" catchtouchmove="true" v-if="popShow == true"></view>
|
|
||||||
|
|
||||||
<!-- 点击筛选弹出的右侧弹出窗口 -->
|
|
||||||
<view :class="popShow == true ? 'right_popup':'hide_popup'" catchtouchmove="true">
|
|
||||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
|
|
||||||
@scrolltolower="lower" @scroll="scroll">
|
|
||||||
<view v-for="(item, index) in classList" :key="index" class="allClass">
|
|
||||||
<view class="classtext">{{item.name}}</view>
|
|
||||||
<view class="class_box">
|
|
||||||
<!-- 选中分类条件 -->
|
|
||||||
<view v-for="(subItem, indexs) in item.child" :key="subItem.id" class="class_tag"
|
|
||||||
:style="{'color':(subItem.current ? '#fff':'#333'),'background':(subItem.current ? colors:''),'border-color':subItem.current ? colors:''}"
|
|
||||||
@tap="setClass(item,subItem,index,indexs)">{{subItem.label}}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
<view class="bottom_btn">
|
|
||||||
<view class="reset bottom_btnView" :style="'color:' + colors + ';border-color:' + colors"
|
|
||||||
@tap="onreset">重置</view>
|
|
||||||
<button class="enter bottom_btnView" :style="'background:' + colors" @tap="onenter" @click="getHideLabel">确定</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
mixins: [{
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
setData: function(obj, callback) {
|
|
||||||
let that = this;
|
|
||||||
const handleData = (tepData, tepKey, afterKey) => {
|
|
||||||
tepKey = tepKey.split('.');
|
|
||||||
tepKey.forEach(item => {
|
|
||||||
if (tepData[item] === null || tepData[item] === undefined) {
|
|
||||||
let reg = /^[0-9]+$/;
|
|
||||||
tepData[item] = reg.test(afterKey) ? [] : {};
|
|
||||||
tepData = tepData[item];
|
|
||||||
} else {
|
|
||||||
tepData = tepData[item];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return tepData;
|
|
||||||
};
|
|
||||||
const isFn = function(value) {
|
|
||||||
return typeof value == 'function' || false;
|
|
||||||
};
|
|
||||||
Object.keys(obj).forEach(function(key) {
|
|
||||||
let val = obj[key];
|
|
||||||
key = key.replace(/\]/g, '').replace(/\[/g, '.');
|
|
||||||
let front, after;
|
|
||||||
let index_after = key.lastIndexOf('.');
|
|
||||||
if (index_after != -1) {
|
|
||||||
after = key.slice(index_after + 1);
|
|
||||||
front = handleData(that, key.slice(0, index_after), after);
|
|
||||||
} else {
|
|
||||||
after = key;
|
|
||||||
front = that;
|
|
||||||
}
|
|
||||||
if (front.$data && front.$data[after] === undefined) {
|
|
||||||
Object.defineProperty(front, after, {
|
|
||||||
get() {
|
|
||||||
return front.$data[after];
|
|
||||||
},
|
|
||||||
set(newValue) {
|
|
||||||
front.$data[after] = newValue;
|
|
||||||
that.$forceUpdate();
|
|
||||||
},
|
|
||||||
enumerable: true,
|
|
||||||
configurable: true
|
|
||||||
});
|
|
||||||
front[after] = val;
|
|
||||||
} else {
|
|
||||||
that.$set(front, after, val);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
isFn(callback) && this.$nextTick(callback);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
labelList: [],
|
|
||||||
paramDict: {
|
|
||||||
minPrice: '',
|
|
||||||
maxPrice: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
// 是否单选
|
|
||||||
isSingleSel: {
|
|
||||||
type: Boolean
|
|
||||||
},
|
|
||||||
// 菜单图标
|
|
||||||
colors: {
|
|
||||||
type: String,
|
|
||||||
default: '#fa436a',
|
|
||||||
},
|
|
||||||
// 是否显示
|
|
||||||
popShow: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
// 分类数组
|
|
||||||
classList: {
|
|
||||||
type: Array
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getHideLabel(){
|
|
||||||
this.$emit("getDishes");
|
|
||||||
},
|
|
||||||
|
|
||||||
hideright() {
|
|
||||||
this.$emit("hideClick");
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
setClass(item, subItem, index, indexs) { //选择条件
|
|
||||||
|
|
||||||
// 单选 清除所有选中
|
|
||||||
if (this.isSingleSel) {
|
|
||||||
|
|
||||||
let data = this.classList;
|
|
||||||
let count = 0;
|
|
||||||
data.forEach(e => {
|
|
||||||
|
|
||||||
if (count == index) {
|
|
||||||
e.child.forEach(ele => {
|
|
||||||
ele.current = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
count++;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
subItem.current = !subItem.current;
|
|
||||||
console.log("选择1 = " + JSON.stringify(subItem));
|
|
||||||
|
|
||||||
item.child[indexs] = subItem;
|
|
||||||
let data = item;
|
|
||||||
let newdata = 'classList[' + index + ']';
|
|
||||||
this.setData({
|
|
||||||
[newdata]: data
|
|
||||||
});
|
|
||||||
|
|
||||||
// 适配小程序
|
|
||||||
this.$emit("change",this.classList);
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
onreset() { //重置筛选条件
|
|
||||||
let data = this.classList;
|
|
||||||
data.forEach(e => {
|
|
||||||
e.child.forEach(ele => {
|
|
||||||
ele.current = false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
this.classList = data;
|
|
||||||
this.paramDict = {};
|
|
||||||
|
|
||||||
// 适配小程序
|
|
||||||
this.$emit("change",this.classList);
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
onenter() { //确认筛选条件
|
|
||||||
|
|
||||||
let select = []
|
|
||||||
this.classList.forEach(e => {
|
|
||||||
e.child.forEach(ele => {
|
|
||||||
if (ele.current == true) {
|
|
||||||
select.push(ele)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
|
|
||||||
this.$emit("sureClick", this.paramDict, select)
|
|
||||||
console.log('选中的项', JSON.stringify(select))
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.mask {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
|
||||||
z-index: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧弹出框 */
|
|
||||||
.right_popup {
|
|
||||||
width: 85%;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
background-color: #fff;
|
|
||||||
z-index: 920;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide_popup {
|
|
||||||
transition: all 0.3s;
|
|
||||||
width: 85%;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
right: -100%;
|
|
||||||
top: 0;
|
|
||||||
z-index: 920;
|
|
||||||
transition: all 0.3s;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pop_scroll {
|
|
||||||
/* #ifndef H5 */
|
|
||||||
height: calc(90% - 128upx);
|
|
||||||
margin-top: 128upx;
|
|
||||||
/* #endif */
|
|
||||||
/* #ifdef H5 */
|
|
||||||
height: calc(90% - 128upx);
|
|
||||||
margin-top: 128upx;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.top_price {
|
|
||||||
height: 60upx;
|
|
||||||
line-height: 60upx;
|
|
||||||
display: flex;
|
|
||||||
padding: 0 30upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top_priceText {
|
|
||||||
flex: 1;
|
|
||||||
text-align: left !important;
|
|
||||||
font-size: 28upx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input_box {
|
|
||||||
padding: 0 30upx;
|
|
||||||
height: 60upx;
|
|
||||||
line-height: 60upx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 30upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input_boxText {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input_boxInput {
|
|
||||||
flex: 1;
|
|
||||||
max-width: 45%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #F7F7F7;
|
|
||||||
border-radius: 40upx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.allClass {
|
|
||||||
margin-top: 50upx;
|
|
||||||
padding: 0 30upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.allClass .classtext {
|
|
||||||
font-size: 28upx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.allClass .class_box {
|
|
||||||
margin-top: 30upx;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.class_box .class_tag {
|
|
||||||
margin-top: 10px;
|
|
||||||
height: 60upx;
|
|
||||||
line-height: 60upx;
|
|
||||||
padding: 0 20upx;
|
|
||||||
font-size: 26upx;
|
|
||||||
color: #333;
|
|
||||||
border: 1upx solid #999;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 10upx;
|
|
||||||
float: left;
|
|
||||||
margin-right: 20upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom_btn {
|
|
||||||
height: 20%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0px 30upx;
|
|
||||||
margin-top: -20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom_btnView {
|
|
||||||
max-width: 45%;
|
|
||||||
min-width: 45%;
|
|
||||||
height: 72upx;
|
|
||||||
line-height: 72upx;
|
|
||||||
background-color: #FA436A;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 36upx;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom_btn .reset {
|
|
||||||
background-color: #fff;
|
|
||||||
color: #FA436A;
|
|
||||||
border: 1upx solid #FA436A;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
{
|
|
||||||
"id": "cc-rightPopup",
|
|
||||||
"displayName": "仿美团右侧侧边栏弹框筛选框popup alert 支持单选 多选",
|
|
||||||
"version": "2.0.2",
|
|
||||||
"description": "仿美团右侧侧边栏弹框筛选框popup alert 支持单选 多选",
|
|
||||||
"keywords": [
|
|
||||||
"alert",
|
|
||||||
"",
|
|
||||||
"侧边栏",
|
|
||||||
"弹框",
|
|
||||||
"popup",
|
|
||||||
"筛选框"
|
|
||||||
],
|
|
||||||
"repository": "",
|
|
||||||
"engines": {
|
|
||||||
"HBuilderX": "^3.8.0"
|
|
||||||
},
|
|
||||||
"dcloudext": {
|
|
||||||
"type": "component-vue",
|
|
||||||
"sale": {
|
|
||||||
"regular": {
|
|
||||||
"price": "0.00"
|
|
||||||
},
|
|
||||||
"sourcecode": {
|
|
||||||
"price": "0.00"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"contact": {
|
|
||||||
"qq": ""
|
|
||||||
},
|
|
||||||
"declaration": {
|
|
||||||
"ads": "无",
|
|
||||||
"data": "无",
|
|
||||||
"permissions": "无"
|
|
||||||
},
|
|
||||||
"npmurl": ""
|
|
||||||
},
|
|
||||||
"uni_modules": {
|
|
||||||
"dependencies": [],
|
|
||||||
"encrypt": [],
|
|
||||||
"platforms": {
|
|
||||||
"cloud": {
|
|
||||||
"tcb": "y",
|
|
||||||
"aliyun": "y"
|
|
||||||
},
|
|
||||||
"client": {
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
},
|
|
||||||
"App": {
|
|
||||||
"app-vue": "y",
|
|
||||||
"app-nvue": "y"
|
|
||||||
},
|
|
||||||
"H5-mobile": {
|
|
||||||
"Safari": "y",
|
|
||||||
"Android Browser": "y",
|
|
||||||
"微信浏览器(Android)": "y",
|
|
||||||
"QQ浏览器(Android)": "y"
|
|
||||||
},
|
|
||||||
"H5-pc": {
|
|
||||||
"Chrome": "y",
|
|
||||||
"IE": "y",
|
|
||||||
"Edge": "y",
|
|
||||||
"Firefox": "y",
|
|
||||||
"Safari": "y"
|
|
||||||
},
|
|
||||||
"小程序": {
|
|
||||||
"微信": "y",
|
|
||||||
"阿里": "y",
|
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y",
|
|
||||||
"钉钉": "y",
|
|
||||||
"快手": "y",
|
|
||||||
"飞书": "y",
|
|
||||||
"京东": "y"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "y",
|
|
||||||
"联盟": "y"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,446 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="m-tabbar-box" :style="tabbarBoxStyle" v-if="isShowTabBar">
|
|
||||||
<view class="m-tabbar__fill" v-if="fill || native" :class="{'m-tabbar__safe': (safeBottom || native)}"
|
|
||||||
:style="tabbarFillStyle"></view>
|
|
||||||
<view id="m-tabbar" class="m-tabbar"
|
|
||||||
:class="{'fixed': (fixed || native), 'm-tabbar__safe': (safeBottom || native)}" :style="tabbarStyle">
|
|
||||||
<view class="m-tabbar__border" v-if="borderStyle === 'black' "></view>
|
|
||||||
<view class="m-tabbar__flex">
|
|
||||||
<view @click="tabChange(index)" v-for="(item, index) in tabbarList" :key="index" class="m-tabbar__item"
|
|
||||||
:class="{
|
|
||||||
'm-tabbar__item__active': index === currentIndex,
|
|
||||||
}">
|
|
||||||
<slot :name="`tabbar_index_${index}`">
|
|
||||||
<view class="m-tabbar__icon">
|
|
||||||
<view class="m-tabbar__badge" v-if="item.dot">{{item.dot}}</view>
|
|
||||||
<image :src="currentIndex === index ? item.selectedIconPath : item.iconPath"
|
|
||||||
class="m-tabbar__icon_img" />
|
|
||||||
</view>
|
|
||||||
<view class="m-tabbar__label"
|
|
||||||
:style="{'color': index === currentIndex ? tabbarConfig.selectedColor : tabbarConfig.color }">
|
|
||||||
{{ item.text }}
|
|
||||||
</view>
|
|
||||||
</slot>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const obj2strStyle = (obj) => {
|
|
||||||
let style = ''
|
|
||||||
for (let key in obj) {
|
|
||||||
style += `${key}:${obj[key]};`
|
|
||||||
}
|
|
||||||
return style
|
|
||||||
}
|
|
||||||
|
|
||||||
const padFirstSymbol = (str, smb) => {
|
|
||||||
if (str.startsWith(smb) || str.startsWith('http')) {
|
|
||||||
return str
|
|
||||||
}
|
|
||||||
return `/${str}`
|
|
||||||
}
|
|
||||||
|
|
||||||
const replaceTabbarList = (list) => {
|
|
||||||
if (!list.length > 0) {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
return list.map(item => {
|
|
||||||
if (item.iconPath) {
|
|
||||||
item.iconPath = padFirstSymbol(item.iconPath, '/')
|
|
||||||
}
|
|
||||||
if (item.pagePath) {
|
|
||||||
item.pagePath = padFirstSymbol(item.pagePath, '/')
|
|
||||||
}
|
|
||||||
if (item.selectedIconPath) {
|
|
||||||
item.selectedIconPath = padFirstSymbol(item.selectedIconPath, '/')
|
|
||||||
}
|
|
||||||
return item
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
import PageConfig from '@/pages.json'
|
|
||||||
export default {
|
|
||||||
emits: ['change', 'click'],
|
|
||||||
props: {
|
|
||||||
current: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
tabbar: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fixed: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
zIndex: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 9999
|
|
||||||
},
|
|
||||||
native: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
safeBottom: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
beforeChange: {
|
|
||||||
type: Function,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
tabbarHeight: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 100
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isShowTabBar: false,
|
|
||||||
currentIndex: 0,
|
|
||||||
beforeData: {},
|
|
||||||
reload: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
current(val) {
|
|
||||||
this.currentIndex = val * 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
tabbarConfig() {
|
|
||||||
const {
|
|
||||||
native,
|
|
||||||
reload
|
|
||||||
} = this
|
|
||||||
if (reload) {}
|
|
||||||
if (native) {
|
|
||||||
const {
|
|
||||||
tabBar
|
|
||||||
} = PageConfig
|
|
||||||
if (!tabBar) {
|
|
||||||
console.error('Native mode, Pages.json no tabbar config')
|
|
||||||
return {
|
|
||||||
borderStyle: 'black',
|
|
||||||
list: []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return tabBar
|
|
||||||
}
|
|
||||||
return this.tabbar
|
|
||||||
},
|
|
||||||
tabbarList() {
|
|
||||||
const {
|
|
||||||
reload
|
|
||||||
} = this
|
|
||||||
const {
|
|
||||||
list
|
|
||||||
} = this.tabbarConfig
|
|
||||||
if (reload) {}
|
|
||||||
if (list) {
|
|
||||||
return replaceTabbarList(list)
|
|
||||||
}
|
|
||||||
console.error('No tabbar config')
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
borderStyle() {
|
|
||||||
const {
|
|
||||||
reload
|
|
||||||
} = this
|
|
||||||
const {
|
|
||||||
borderStyle
|
|
||||||
} = this.tabbarConfig
|
|
||||||
if (reload) {}
|
|
||||||
return borderStyle
|
|
||||||
},
|
|
||||||
tabbarBoxStyle() {
|
|
||||||
const {
|
|
||||||
zIndex,
|
|
||||||
reload
|
|
||||||
} = this
|
|
||||||
if (reload) {}
|
|
||||||
return obj2strStyle({
|
|
||||||
'z-index': zIndex,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
tabbarFillStyle() {
|
|
||||||
const {
|
|
||||||
tabbarHeight,
|
|
||||||
safeBottom,
|
|
||||||
reload
|
|
||||||
} = this
|
|
||||||
if (reload) {}
|
|
||||||
return obj2strStyle({
|
|
||||||
'height': `${tabbarHeight}rpx`
|
|
||||||
})
|
|
||||||
},
|
|
||||||
tabbarStyle() {
|
|
||||||
const {
|
|
||||||
tabbarHeight,
|
|
||||||
reload
|
|
||||||
} = this
|
|
||||||
const {
|
|
||||||
backgroundColor
|
|
||||||
} = this.tabbarConfig
|
|
||||||
if (reload) {}
|
|
||||||
return obj2strStyle({
|
|
||||||
'height': `${tabbarHeight}rpx`,
|
|
||||||
'background-color': backgroundColor || '#fff',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
tabbarItemStyle() {
|
|
||||||
const {
|
|
||||||
currentIndex,
|
|
||||||
reload
|
|
||||||
} = this
|
|
||||||
const {
|
|
||||||
color,
|
|
||||||
selectedColor
|
|
||||||
} = this.tabbarConfig
|
|
||||||
if (reload) {}
|
|
||||||
return obj2strStyle({
|
|
||||||
'color': currentIndex ? selectedColor : color
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initTabbar()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initTabbar() {
|
|
||||||
const {
|
|
||||||
current,
|
|
||||||
fill,
|
|
||||||
native,
|
|
||||||
tabbarList
|
|
||||||
} = this
|
|
||||||
this.currentIndex = current * 1
|
|
||||||
if (native) {
|
|
||||||
const currentPage = `/${getCurrentPages()[0].route}`
|
|
||||||
const currentIndex = tabbarList.findIndex(item => item.pagePath === currentPage)
|
|
||||||
this.currentIndex = currentIndex
|
|
||||||
if (tabbarList.length > 0) {
|
|
||||||
uni.hideTabBar()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setTimeout(() => {
|
|
||||||
this.isShowTabBar = true
|
|
||||||
})
|
|
||||||
},
|
|
||||||
reLoad() {
|
|
||||||
this.reload = true
|
|
||||||
setTimeout(() => {
|
|
||||||
this.reload = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
checkMaxIndex(index) {
|
|
||||||
if (!this.tabbarConfig.list[index]) {
|
|
||||||
console.error('Max tabbar index')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
setTabBarBadge(obj) {
|
|
||||||
const {
|
|
||||||
index,
|
|
||||||
text
|
|
||||||
} = obj
|
|
||||||
if (this.checkMaxIndex(index)) {
|
|
||||||
this.tabbarConfig.list[index].dot = text
|
|
||||||
this.reLoad()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setTabBarItem(obj) {
|
|
||||||
const {
|
|
||||||
index,
|
|
||||||
text,
|
|
||||||
pagePath: newPagePath,
|
|
||||||
iconPath,
|
|
||||||
selectedIconPath
|
|
||||||
} = obj
|
|
||||||
const {
|
|
||||||
pagePath: oldPagePath
|
|
||||||
} = this.tabbarConfig.list[index]
|
|
||||||
if (this.checkMaxIndex(index)) {
|
|
||||||
this.tabbarConfig.list[index] = {
|
|
||||||
pagePath: newPagePath ? newPagePath : oldPagePath,
|
|
||||||
text,
|
|
||||||
iconPath,
|
|
||||||
selectedIconPath
|
|
||||||
}
|
|
||||||
this.reLoad()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showTabBar() {
|
|
||||||
this.isShowTabBar = true
|
|
||||||
},
|
|
||||||
hideTabBar() {
|
|
||||||
this.isShowTabBar = false
|
|
||||||
},
|
|
||||||
tabChange(index) {
|
|
||||||
const {
|
|
||||||
currentIndex
|
|
||||||
} = this
|
|
||||||
this.$emit('click', index)
|
|
||||||
if (index === currentIndex) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.beforeData = {
|
|
||||||
newIndex: index,
|
|
||||||
oldIndex: currentIndex,
|
|
||||||
next: this.jumpPage
|
|
||||||
}
|
|
||||||
if (this.beforeChange) {
|
|
||||||
this.beforeChange(this.jumpPage)
|
|
||||||
} else {
|
|
||||||
this.jumpPage()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
jumpPage() {
|
|
||||||
const {
|
|
||||||
native,
|
|
||||||
beforeData,
|
|
||||||
tabbarList: list
|
|
||||||
} = this
|
|
||||||
const {
|
|
||||||
newIndex: index
|
|
||||||
} = beforeData
|
|
||||||
const {
|
|
||||||
pagePath: url,
|
|
||||||
openType
|
|
||||||
} = list[index]
|
|
||||||
if (url) {
|
|
||||||
if (native) {
|
|
||||||
uni.switchTab({
|
|
||||||
url
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
if (openType !== 'navigate') {
|
|
||||||
this.currentIndex = index
|
|
||||||
}
|
|
||||||
switch (openType) {
|
|
||||||
case 'navigate':
|
|
||||||
uni.navigateTo({
|
|
||||||
url
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
case 'redirect':
|
|
||||||
uni.redirectTo({
|
|
||||||
url
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
case 'reLaunch':
|
|
||||||
uni.reLaunch({
|
|
||||||
url
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
case 'switchTab':
|
|
||||||
uni.switchTab({
|
|
||||||
url
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
case 'navigateBack':
|
|
||||||
uni.navigateBack({
|
|
||||||
delta: 1
|
|
||||||
})
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
uni.reLaunch({
|
|
||||||
url
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$emit('change', index)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.m-tabbar-box {
|
|
||||||
position: relative;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-tabbar {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&.fixed {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__safe {
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-tabbar__fill {
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-tabbar__flex {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-tabbar__border {
|
|
||||||
background-color: rgba(0, 0, 0, 0.33);
|
|
||||||
width: 100%;
|
|
||||||
height: 1rpx;
|
|
||||||
transform: scaleY(0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-tabbar__item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
flex: 1;
|
|
||||||
padding: 4px 0 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-tabbar__icon {
|
|
||||||
width: 48rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
margin-bottom: 6rpx;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&_img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-tabbar__badge {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #f00;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
font-size: 22rpx;
|
|
||||||
position: absolute;
|
|
||||||
right: -25rpx;
|
|
||||||
left: 40rpx;
|
|
||||||
padding: 2rpx 0;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-tabbar__label {
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue