110 lines
3.1 KiB
Vue
110 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<view class="disac fw" :style="{paddingBottom:itemTop,backgroundColor: backc}">
|
||
|
|
<block v-for="(item,index) in list" :key="index">
|
||
|
|
<view @tap="chooseGe(item.url,index)" class="disjcac fc pad-s30" :style="{width:['50%','50%','50%','33.3%','25%','20%'][rowNum],paddingTop:itemTop}">
|
||
|
|
<view class="disjcac icon-box posir" :style="{width:iconwh,height:iconwh}" :class="ifShadow ? 'haveShadow' : ''">
|
||
|
|
<image :src="item.iconsrc" mode="aspectFill" :style="{width: item.iconWidth +'rpx',height: item.iconHeight +'rpx'}"></image>
|
||
|
|
<!-- <view class="posia fon24 textc bacf" v-if="item.num" style="right: -54rpx;bottom: -39rpx;border-radius: 100%; color: #666;">({{item.num}})</view> -->
|
||
|
|
</view>
|
||
|
|
<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}<text v-if="item.num" style="margin-left:3px; color:#666">({{item.num}})</text></view>
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:'column-function',
|
||
|
|
props:{
|
||
|
|
list:{
|
||
|
|
type:Array,
|
||
|
|
default:()=>{
|
||
|
|
return [
|
||
|
|
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题一',num:0},
|
||
|
|
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题二',num:0},
|
||
|
|
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题三',num:0},
|
||
|
|
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题四',num:0},
|
||
|
|
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五',num:0},
|
||
|
|
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五',num:0},
|
||
|
|
{url:'',iconsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',iconWidth:60,iconHeight:60,title:'标题五',num:0},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
ifShadow:{
|
||
|
|
type:Boolean,
|
||
|
|
default:true
|
||
|
|
},
|
||
|
|
// 背景颜色
|
||
|
|
backc:{
|
||
|
|
type:String,
|
||
|
|
default:'transparent'
|
||
|
|
},
|
||
|
|
// 一排显示数量
|
||
|
|
rowNum:{
|
||
|
|
type:String,
|
||
|
|
default:'5'
|
||
|
|
},
|
||
|
|
// 标题颜色
|
||
|
|
titlec:{
|
||
|
|
type:String,
|
||
|
|
default:'#000000'
|
||
|
|
},
|
||
|
|
// 字体大小
|
||
|
|
fonts:{
|
||
|
|
type:String,
|
||
|
|
default:'24rpx'
|
||
|
|
},
|
||
|
|
// 字体距离图标的距离
|
||
|
|
titleTop:{
|
||
|
|
type:String,
|
||
|
|
default:'20rpx'
|
||
|
|
},
|
||
|
|
// item的顶部距离
|
||
|
|
itemTop:{
|
||
|
|
type:String,
|
||
|
|
default:'30rpx'
|
||
|
|
},
|
||
|
|
// iconbox宽高
|
||
|
|
iconwh:{
|
||
|
|
type:String,
|
||
|
|
default:'110rpx'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
// 找图标高度最大值
|
||
|
|
maxHeight() {
|
||
|
|
let arr = [];
|
||
|
|
let max = '';
|
||
|
|
this.list.forEach(item=>{arr.push(item.iconHeight);})
|
||
|
|
if(arr.length) {
|
||
|
|
max = arr.reduce((a,b)=>{return b > a ? b : a})
|
||
|
|
}
|
||
|
|
return max;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
// 列表选择事件
|
||
|
|
chooseGe(url,index) {
|
||
|
|
// 抛出事件
|
||
|
|
this.$emit('chooseGe',{url,index})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.icon-box{
|
||
|
|
width: 110rpx;
|
||
|
|
height: 110rpx;
|
||
|
|
border-radius: 42%;
|
||
|
|
|
||
|
|
}
|
||
|
|
.haveShadow{
|
||
|
|
background: linear-gradient(to top,#ff3574 0%,#fd5648 100%);
|
||
|
|
box-shadow: 0rpx 10rpx 10rpx rgba(255, 53, 116, 0.6);
|
||
|
|
}
|
||
|
|
</style>
|