You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
4.5 KiB
90 lines
4.5 KiB
<template>
|
|
<view class="dp-menu" :style="{
|
|
fontSize:params.fontsize*2+'rpx',
|
|
backgroundColor:params.bgcolor,
|
|
margin:params.margin_y*2.2+'rpx '+params.margin_x*2.2+'rpx 0',
|
|
padding:params.padding_y*2.2+'rpx '+params.padding_x*2.2+'rpx',
|
|
borderRadius:params.boxradius*2.2+'rpx'
|
|
}">
|
|
<view style="padding-top:16rpx;">
|
|
<view v-if="params.showtitle==1" class="menu-title" :style="{color:params.titlecolor,fontSize:params.titlesize*2.2+'rpx'}">{{params.title}}</view>
|
|
<block v-if="params.newdata.length >1">
|
|
<swiper :autoplay="false" :indicator-dots="false" :current="0" @change="bannerchange" :style="{
|
|
width:'100%',
|
|
height:(params.newdata_linenum*(params.iconsize*2.2 + params.fontsize*2 + 50)+'rpx' || '350rpx'),
|
|
overflow:'hidden'
|
|
}">
|
|
<swiper-item v-for="item in params.newdata" :key="item.id">
|
|
<view class="swiper-item" :style="{
|
|
width:'100%',
|
|
height:(params.newdata_linenum*(params.iconsize*2.2 + params.fontsize*2 + 50)+'rpx' || '350rpx'),
|
|
overflow:'hidden'
|
|
}">
|
|
<view v-for="item2 in item" :key="item2.id" :class="'menu-nav'+params.num+' '+(params.showicon==0 && params.showline==1 ? ' showline':'')" @click="goto" :data-url="item2.hrefurl">
|
|
<image v-if="params.showicon==1" :src="item2.imgurl" :style="{borderRadius:params.radius/2+'%',width:params.iconsize*2.2+'rpx',height:params.iconsize*2.2+'rpx'}"></image>
|
|
<view class="menu-text" :style="{color:'#333333',height:params.fontheight*2.2+'rpx',lineHeight:params.fontheight*2.2+'rpx'}">{{item2.text|| '按钮文字'}}</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="swiper-pagination" style="justify-content:center;bottom:8px">
|
|
<block v-for="(item,index) in params.newdata" :key="item.id">
|
|
<view v-if="bannerindex==index" class="swiper-shape4 swiper-shape4-active" style="background-color:#3db51e"></view>
|
|
<view v-else class="swiper-shape4" style="background-color:#edeef0"></view>
|
|
</block>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="swiper-item">
|
|
<view v-for="item in data" :key="item.id" :class="'menu-nav'+params.num+' '+(params.showicon==0 && params.showline==1 ? ' showline':'')" @click="goto" :data-url="item.hrefurl">
|
|
<image v-if="params.showicon==1" :src="item.imgurl" :style="{borderRadius:params.radius/2+'%',width:params.iconsize*2.2+'rpx',height:params.iconsize*2.2+'rpx'}"></image>
|
|
<view class="menu-text" :style="{color:'#333333',height:params.fontheight*2.2+'rpx',lineHeight:params.fontheight*2.2+'rpx'}">{{item.text|| '按钮文字'}}</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {"bannerindex":0}
|
|
},
|
|
props: {
|
|
params:{},
|
|
data:{}
|
|
},
|
|
methods:{
|
|
bannerchange:function(e){
|
|
console.log(this.params)
|
|
var that = this
|
|
var idx = e.detail.current;
|
|
that.bannerindex = idx
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.dp-menu {height:auto;position:relative;padding-left:20rpx; padding-right:20rpx; background: #fff;}
|
|
.dp-menu .menu-title{width:100%;font-size:30rpx;color:#333333;font-weight:bold;padding:0 0 32rpx 24rpx}
|
|
.dp-menu .swiper-item{display:flex;flex-wrap:wrap;flex-direction: row;height:auto;overflow: hidden;}
|
|
.dp-menu .swiper-item .menu-text {font-size: 24rpx;}
|
|
.dp-menu .menu-nav {flex:1;text-align:center;}
|
|
.dp-menu .menu-nav5 {width:20%;text-align:center;margin-bottom:16rpx;position:relative}
|
|
.dp-menu .menu-nav4 {width:25%;text-align:center;margin-bottom:16rpx;position:relative}
|
|
.dp-menu .menu-nav3 {width:33.3%;text-align:center;margin-bottom:16rpx;position:relative}
|
|
.dp-menu .menu-nav2 {width:50%;text-align:center;margin-bottom:16rpx;position:relative}
|
|
.dp-menu .showline:after{position:absolute;top:50%;right:0;margin-top:-16rpx;content:'';height:36rpx;border-right:1px solid #eee}
|
|
.dp-menu .menu-nav2.showline:nth-child(2n+2):after{border-right:0}
|
|
.dp-menu .menu-nav3.showline:nth-child(3n+3):after{border-right:0}
|
|
.dp-menu .menu-nav4.showline:nth-child(4n+4):after{border-right:0}
|
|
.dp-menu .menu-nav5.showline:nth-child(5n+5):after{border-right:0}
|
|
.swiper-pagination{padding:0 10px;bottom:12px;left:0;position:absolute;display:flex;justify-content:center;width:100%}
|
|
.swiper-shape0{width:3px;height:3px;margin:0 2px!important;}
|
|
.swiper-shape0-active{width:13px;border-radius:1.5px;}
|
|
.swiper-shape1{width:12px;height:6px;border-radius:0;margin:0 2px}
|
|
.swiper-shape2{width:8px;height:8px;border-radius:0;margin:0 2px}
|
|
.swiper-shape3{width:8px;height:8px;border-radius:50%;margin:0 2px;}
|
|
.swiper-shape4{width:8px;height:3px;border-radius:50%;margin:0 1px;}
|
|
.swiper-shape4-active{width:13px;border-radius:1.5px;}
|
|
</style>
|