yuyue/static/diycomponent/special/index.html

<cm-construct v-bind:data="data[index]" class="component-special">

	<!-- 预览 -->
	<template slot="preview">
		<div class="preview-box" v-bind:style="{ backgroundColor : nc.backgroundColor, margin: nc.marginTop + 'px 15px 0' }">
			<div class="marketing-wrap marketing-wrap-1 marketing-wrap-4" v-if="nc.style == 1">
				<div class="marketing-box">
					<template v-if="nc.lazyLoad&&nc.list[0].imageUrl">
						<img :src="nc.list[0].imageUrl" alt="">
					</template>
					
					<div class="list-wrap">
						<div class="item">
							<div class="img-wrap">
								<img src="/static/images/diy/crack_figure.png" />
							</div>
							<div class="content">
								<div class="content-desc">商品名称</div>
								<div class="content-price">
									¥<span>99.00</span>
								</div>
							</div>
						</div>
						
						<div class="item">
							<div class="img-wrap">
								<img src="/static/images/diy/crack_figure.png" />
							</div>
							<div class="content">
								<div class="content-desc">商品名称</div>
								<div class="content-price">
									¥<span>99.00</span>
								</div>
							</div>
						</div>
						
						<div class="item">
							<div class="img-wrap">
								<img src="/static/images/diy/crack_figure.png" />
							</div>
							<div class="content">
								<div class="content-desc">商品名称</div>
								<div class="content-price">
									¥<span>99.00</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 风格四 -->
			<div class="marketing-wrap marketing-wrap-1" v-if="nc.style == 4">
				<img v-if="nc.bgSelect == 'red'" src="{$resourceurl}/special/img/red.png" />
				<img v-if="nc.bgSelect == 'blue'" src="{$resourceurl}/special/img/blue.png" />
				<img v-if="nc.bgSelect == 'yellow'" src="{$resourceurl}/special/img/yellow.png" />
				<img v-if="nc.bgSelect == 'violet'" src="{$resourceurl}/special/img/violet.png" />
				
				<div class="marketing-box">
					<template v-if="nc.lazyLoad">
						<special-top-content></special-top-content>
					</template>
					
					<div class="list-wrap">
						<div class="item">
							<div class="img-wrap">
								<img src="/static/images/diy/crack_figure.png" />
							</div>
							<div class="content">
								<div class="content-desc">商品名称</div>
								<div class="content-num">2人团</div>
								<div class="content-price">
									¥<span>99.00</span>
								</div>
							</div>
						</div>
						
						<div class="item">
							<div class="img-wrap">
								<img src="/static/images/diy/crack_figure.png" />
							</div>
							<div class="content">
								<div class="content-desc">商品名称</div>
								<div class="content-num">2人团</div>
								<div class="content-price">
									¥<span>99.00</span>
								</div>
							</div>
						</div>
						
						<div class="item">
							<div class="img-wrap">
								<img src="/static/images/diy/crack_figure.png" />
							</div>
							<div class="content">
								<div class="content-desc">商品名称</div>
								<div class="content-num">2人团</div>
								<div class="content-price">
									¥<span>99.00</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 风格二/风格三 -->
			<div class="marketing-box marketing-box-two" v-bind:class="'marketing-box-'+ nc.style" v-if="nc.style == 2 || nc.style == 3">
				<template v-if="nc.lazyLoad">
					<special-top-content></special-top-content>
				</template>
				
				<div class="list-wrap">
					<div class="item">
						<div class="img-wrap">
							<img src="/static/images/diy/crack_figure.png" />
						</div>
						<div class="content">
							<div class="top">
								<div class="content-desc">商品名称</div>
								<div class="label">
									<div class="label-person"><i class="layui-icon layui-icon-user"></i><span>2人团</span></div>
									<div class="label-num"><span>已拼10件</span></div>
								</div>
							</div>
							
							<div class="bot">
								<div class="content-price">
									<div>¥<span>99.00</span></div>
									<div class="content-num">￥139.00</div>
								</div>
								<button class="layui-btn">去拼团</button>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="img-wrap">
							<img src="/static/images/diy/crack_figure.png" />
						</div>
						<div class="content">
							<div class="top">
								<div class="content-desc">商品名称</div>
								<div class="label">
									<div class="label-person"><i class="layui-icon layui-icon-user"></i><span>2人团</span></div>
									<div class="label-num"><span>已拼10件</span></div>
								</div>
							</div>
							
							<div class="bot">
								<div class="content-price">
									<div>¥<span>99.00</span></div>
									<div class="content-num">￥139.00</div>
								</div>
								<button class="layui-btn">去拼团</button>
							</div>
						</div>
					</div>
					<div class="item">
						<div class="img-wrap">
							<img src="/static/images/diy/crack_figure.png" />
						</div>
						<div class="content">
							<div class="top">
								<div class="content-desc">商品名称</div>
								<div class="label">
									<div class="label-person"><i class="layui-icon layui-icon-user"></i><span>2人团</span></div>
									<div class="label-num"><span>已拼10件</span></div>
								</div>
							</div>
							
							<div class="bot">
								<div class="content-price">
									<div>¥<span>99.00</span></div>
									<div class="content-num">￥139.00</div>
								</div>
								<button class="layui-btn">去拼团</button>
							</div>
						</div>
					</div>
				</div>
				
				<div class="more" v-if="nc.style == 3">
					<span>更多拼团</span><i class="layui-icon layui-icon-right"></i>
				</div>
			</div>
		</div>
	</template>

	<!-- 编辑 -->
	<template slot="edit">
		<template v-if="nc.lazyLoad">
			<!-- <special-list></special-list> -->
			<!-- <special-style></special-style> -->
		</template>
		
		<template v-if="nc.lazyLoad">
			<special-color v-if="nc.style == 4"></special-color>
			<!-- <change-type v-if="nc.style == 4"></change-type> -->
		</template>
		
		<div class="template-edit-title">
			<h3>顶部标题设置</h3>
			<i class="layui-icon layui-icon-down" onclick="closeBox(this)"></i>
		</div>
		<template v-if="nc.lazyLoad">
			<special-top-list></special-top-list>
		</template>
		
		<div class="template-edit-title">
			<h3>其他设置</h3>
			<i class="layui-icon layui-icon-down" onclick="closeBox(this)"></i>
		</div>
		<template v-if="nc.lazyLoad">
			<slide v-bind:data="{ field : 'marginTop', label : '页面间距' }"></slide>
		</template>

		<!-- 弹框 -->
		<div class="special-list-style">
			<div class="style-list-special layui-form">
				<div class="style-list-con-special">
					<div class="style-li-special" v-bind:class="{'selected ns-border-color': nc.style == 1}">
						<img src="{$resourceurl}/special/img/special_style_1.png" />
						<span class="layui-hide">风格一</span>
					</div>
					<div class="style-li-special" v-bind:class="{'selected ns-border-color': nc.style == 2}">
						<img src="{$resourceurl}/special/img/special_style_2.png" />
						<span class="layui-hide">风格二</span>
					</div>
					<div class="style-li-special" v-bind:class="{'selected ns-border-color': nc.style == 3}">
						<img src="{$resourceurl}/special/img/special_style_3.png" />
						<span class="layui-hide">风格三</span>
					</div>
					<div class="style-li-special" v-bind:class="{'selected ns-border-color': nc.style == 4}">
						<img src="{$resourceurl}/special/img/special_style_4.png" />
						<span class="layui-hide">风格四</span>
					</div>
				</div>
				
				<input type="hidden" name="style">
				<input type="hidden" name="style_name" />
			</div>
		</div>

	</template>

	<!-- 资源 -->
	<template slot="resource">
		<js>
			var specialResourcePath = "{$resourceurl}";
		</js>
		<css src="{$resourceurl}/special/css/style.css"></css>
		<js src="{$resourceurl}/special/js/style.js"></js>

	</template>

</cm-construct>