<template>
	<view class="quick-action1">
		<view class="quick-action1_li" :style="{width: (730/4) + 'rpx'}" v-for="(item,index) in widget" :key="index">
			<view class="quick-action1_li-box" :style="{backgroundColor: item.bgColor + ';',height: (650/4) + 'rpx'}" @click="to(item.link.url)">
				<x-icon style="height: 25px;" :name="item.icon.name" size="20" color="#ffffff"></x-icon>
				<text class="quick-action1_li-box-text" :style="{width: (700/4) + 'rpx;'}">{{item.link.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import mixin from '@/service/mixins'
	export default {
		mixins: [mixin],
		props:{
			widget:{}
		}
	}
</script>

<style lang="scss">
.quick-action1{
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 10rpx;
	&_li{
		padding: 10rpx;
		&-box{
			flex-direction: column;
			align-items: center;
			justify-content: center;
			&-text{
				margin-top: 20rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFFFFF;
				text-overflow: ellipsis;
				overflow: hidden;     
				/* #ifdef H5 */
				white-space: nowrap;
				/* #endif */
				lines: 1; 
			}
		}
	}
}
</style>
