qimall/addons/SmartForm/backend/views/components/formDiy/form-diy-menus.php

<template id="form-diy-menus">
	<div class="diy_l_box">
		<div class="diy_d_box" v-for="(t,ti) in list" :key="ti">
			<div class="diy_l_tag_box">
				{{t.title}}
			</div>
			<div class="form_tool_diy_box" >
				<div class="foem_tool_l_box" @click="chooseTool(y)" v-for="(y,yi) in t.toolList" :key="yi">
					<!-- <el-image :src="require(y.icon)" class="form_img_diy" ></el-image> -->
					<img class="form_img_diy" :src="y.img" />
					<div>
						<span>{{y.title}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	Vue.component('form-diy-menus',{
		template: '#form-diy-menus',
		props:{
			list:{
				type: Array,
				default:[],
				tempalateStr: "resources/img/decorate/func/template.png"
			}
		},
		methods:{
			chooseTool(item){
				console.log(item)
				this.$emit('add-prev-item',item)
			}
		}
	})
</script>

<style scoped>
	.diy_l_box{
		width: 260px;
		height: 80vh;
		overflow-y: auto;
		border-left: 1px solid #efefef;
		padding-bottom: 30px;
	}
	.diy_d_box{
		width: 100%;
		
	}
	.diy_l_tag_box{
		    width: 100%;
		    height: 32px;
		    line-height: 32px;
		    padding-left: 12px;
		    padding-right: 12px;
		    border-bottom: 1px solid #efefef;
		    border-right: 1px solid #efefef;
		    color: #6b7685;
		    font-size: 12px;
		    font-weight: 700;
		    float: left;
		    background: #fafafa;
	}
	.form_tool_diy_box{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.foem_tool_l_box{
	height: 60px;
	    width: 33.33%;
	    text-align: center;
	    border-bottom: 1px solid #f3f3f3;
	    border-right: 1px solid #f3f3f3;
	    border-radius: 0;
	    color: #999;
	    font-size: 12px;
	    padding: 0;
	    float: left;
	    cursor: pointer;
	}
	.form_img_diy{
		width: 19px;
		height: 19px;
		margin-top: 10px;
	}
</style>