初始上传
This commit is contained in:
28
app/component/view/top_category/css/design.css
Executable file
28
app/component/view/top_category/css/design.css
Executable file
@@ -0,0 +1,28 @@
|
||||
@CHARSET "UTF-8";
|
||||
.draggable-element .top-category .preview-draggable .preview-box {border-radius: 0;}
|
||||
.top-category .top-category-item{display: inline-block;padding: 3px 10px;font-size: 14px;}
|
||||
.top-category .top-category-wrap{display: flex;align-items: center;height: 35px;padding: 0 12px;position: relative;}
|
||||
.top-category .preview-box-line .top-category-wrap{height: 35px;padding: 0 12px;}
|
||||
.top-category .preview-box-line .top-category-item{padding: 3px 0;margin-right: 20px;}
|
||||
.top-category .preview-box-line .top-category-item.active{position: relative;}
|
||||
.top-category .preview-box-line .top-category-item.active .line{position: absolute;bottom: 0;left: 50%;width: 12px;height: 2px;background-color: #fff;border-radius: 2px;transform: translateX(-50%);}
|
||||
.top-category .top-category-wrap .iconfont{color: rgb(51, 51, 51);position: absolute;right: 12px;}
|
||||
|
||||
|
||||
/* 弹框 */
|
||||
.top-category .top-category-style {display: none;}
|
||||
.style-list-con-top-category {display: flex;flex-wrap: wrap;}
|
||||
.style-list-con-top-category .style-li-top-category {width: 48%;height: 100px;margin-right: 2%;margin-bottom: 60px;cursor: pointer;border: 1px solid #ededed;background: #f7f8fa;box-sizing: border-box;}
|
||||
.style-list-con-top-category .style-li-top-category:nth-child(3n) {margin-right: 0;}
|
||||
.style-list-con-top-category .style-li-top-category .title{margin-top:20px;text-align: center;display: block;}
|
||||
|
||||
.style-list-con-top-category .style-li-top-category .style-list1{display: flex;justify-content: center;line-height: 100px;}
|
||||
.style-list-con-top-category .style-li-top-category .style-list1>div{position:relative;font-size: 12px;margin:0 5px;}
|
||||
.style-list-con-top-category .style-li-top-category .style-list1>div:first-child{font-size: 14px;font-weight: 600;}
|
||||
.style-list-con-top-category .style-li-top-category .style-list1>div:first-child>.line{position: absolute;height:2px;width:100%;bottom: 30px;left:0;}
|
||||
.style-list-con-top-category .style-li-top-category .style-list1>div:last-child{ margin-right: 0;}
|
||||
|
||||
.style-list-con-top-category .style-li-top-category .style-list2{display: flex;justify-content: center;line-height: 100px;height: 100px;}
|
||||
.style-list-con-top-category .style-li-top-category .style-list2>div{position:relative;border-radius: 25px;font-size: 12px;height: 25px;line-height: 25px; padding: 0 3px; text-align: center;margin-right:5px;margin-top: 37.5px;}
|
||||
.style-list-con-top-category .style-li-top-category .style-list2>div:first-child{ color: #fff;}
|
||||
.style-list-con-top-category .style-li-top-category .style-list2>div:last-child{ margin-right: 0;}
|
||||
104
app/component/view/top_category/design.html
Executable file
104
app/component/view/top_category/design.html
Executable file
@@ -0,0 +1,104 @@
|
||||
<nc-component :data="data[index]" class="top-category">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
<div :class="['preview-box',('preview-box-'+nc.styleType)]" :style="{backgroundColor: nc.componentBgColor}">
|
||||
<div class="top-category-wrap" v-if="nc.styleType == 'line'">
|
||||
<div class="top-category-item active" :style="{ color : nc.selectColor}">
|
||||
<p>{{nc.title}}</p>
|
||||
<p class="line" :style="{ background : nc.selectColor}"></p>
|
||||
</div>
|
||||
<div class="top-category-item" :style="{ color : nc.noColor }">分类1</div>
|
||||
<div class="top-category-item" :style="{ color : nc.noColor }">分类2</div>
|
||||
<div class="top-category-item" :style="{ color : nc.noColor }">分类3</div>
|
||||
<div class="iconfont iconunfold" :style="{ color : nc.moreColor } "></div>
|
||||
</div>
|
||||
<div class="top-category-wrap fill" v-if="nc.styleType == 'fill'">
|
||||
<div class="top-category-item" :style="{ background : nc.selectColor}" style="border-radius: 50px;">
|
||||
<p style="color: #fff;">{{nc.title}}</p>
|
||||
</div>
|
||||
<div class="top-category-item" :style="{ color : nc.noColor}">分类1</div>
|
||||
<div class="top-category-item" :style="{ color : nc.noColor}">分类2</div>
|
||||
<div class="top-category-item" :style="{ color : nc.noColor}">分类3</div>
|
||||
<div class="iconfont iconunfold" :style="{ color : nc.moreColor } "></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="template-edit-title">
|
||||
<h3>风格选择</h3>
|
||||
<style-choose></style-choose>
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>内容设置</h3>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">首页名称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" v-model="nc.title" :id="'title_'+index" placeholder="请输入文本" maxlength="10" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 弹框 -->
|
||||
<article class="top-category-style">
|
||||
<div class="style-list-top-category layui-form">
|
||||
<div class="style-list-con-top-category">
|
||||
<div class="style-li-top-category" :class="{'selected border-color': nc.styleType == 'line'}">
|
||||
<div class="style-list1">
|
||||
<div :style="{color:nc.selectColor}">标签一<div class="line" :style="{background:nc.selectColor}"></div></div>
|
||||
<div :style="{color:nc.noColor}">标签二</div>
|
||||
</div>
|
||||
<span class="title" data-type="line">线条标签</span>
|
||||
</div>
|
||||
<div class="style-li-top-category" :class="{'selected border-color': nc.styleType == 'fill'}">
|
||||
<div class="style-list2">
|
||||
<div :style="{background:nc.selectColor}">标签一</div>
|
||||
<div :style="{color:nc.noColor}">标签二</div>
|
||||
</div>
|
||||
<span class="title" data-type="fill">填充标签</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="style">
|
||||
<input type="hidden" name="style_name" />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
<template v-if="nc.lazyLoad">
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>分类样式</h3>
|
||||
<color :data="{ field : 'noColor', 'label' : '未选中颜色', defaultColor : '#333333' }"></color>
|
||||
<color :data="{ field : 'selectColor', 'label' : '选中颜色', defaultColor : '#FF4444' }"></color>
|
||||
<color :data="{ field : 'moreColor', 'label' : '箭头颜色', defaultColor : '#333333' }"></color>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
var topCategoryResourcePath = "{$resource_path}"; // http路径
|
||||
var topCategoryRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
57
app/component/view/top_category/js/design.js
Executable file
57
app/component/view/top_category/js/design.js
Executable file
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 顶部分类·组件
|
||||
*/
|
||||
var topStyleHtml = '<div>';
|
||||
|
||||
topStyleHtml += '<div class="layui-form-item" >';
|
||||
topStyleHtml += '<label class="layui-form-label sm">风格</label>';
|
||||
topStyleHtml += '<div class="layui-input-block">';
|
||||
topStyleHtml += '<div v-if="styleName" class="input-text text-color selected-style" @click="selectGroupbuyStyle()">{{styleName}} <i class="layui-icon layui-icon-right"></i></div>';
|
||||
topStyleHtml += '<div v-else class="input-text selected-style" @click="selectGroupbuyStyle()">选择 <i class="layui-icon layui-icon-right"></i></div>';
|
||||
topStyleHtml += '</div>';
|
||||
topStyleHtml += '</div>';
|
||||
|
||||
topStyleHtml += '</div>';
|
||||
|
||||
Vue.component("style-choose",{
|
||||
template : topStyleHtml,
|
||||
data : function() {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
styleName: '线条标签'
|
||||
};
|
||||
},
|
||||
created:function() {
|
||||
if (this.data.styleType == 'line') this.styleName = '线条标签';
|
||||
else this.styleName = '填充标签';
|
||||
|
||||
this.$parent.data.ignore = ['marginBoth', 'marginTop', 'marginBottom', 'textColor', 'elementAngle', 'componentAngle', 'elementBgColor']; //加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
},
|
||||
methods:{
|
||||
selectGroupbuyStyle: function() {
|
||||
var self = this;
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '风格选择',
|
||||
area:['500px','300px'],
|
||||
btn: ['确定', '返回'],
|
||||
content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .top-category-style").html(),
|
||||
success: function(layero, index) {
|
||||
$(".layui-layer-content input[name='style']").val(self.data.styleType);
|
||||
$(".layui-layer-content input[name='style_name']").val(self.styleName);
|
||||
$("body").off("click", ".layui-layer-content .style-list-con-top-category .style-li-top-category").on("click", ".layui-layer-content .style-list-con-top-category .style-li-top-category", function () {
|
||||
$(this).addClass("selected border-color").siblings().removeClass("selected border-color");
|
||||
$(".layui-layer-content input[name='style']").val($(this).find("span").attr('data-type'));
|
||||
$(".layui-layer-content input[name='style_name']").val($(this).find("span").text());
|
||||
});
|
||||
},
|
||||
yes: function (index, layero) {
|
||||
self.data.styleType = $(".layui-layer-content input[name='style']").val();
|
||||
self.styleName = $(".layui-layer-content input[name='style_name']").val();
|
||||
layer.closeAll()
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user