初始上传
This commit is contained in:
61
app/component/view/search/css/design.css
Executable file
61
app/component/view/search/css/design.css
Executable file
@@ -0,0 +1,61 @@
|
||||
@CHARSET "UTF-8";
|
||||
.top-search .top-search-form{display: flex;align-items: center;height: 30px;}
|
||||
.top-search .top-search-form img{height: 30px;margin-right: 10px;max-width: 85px;}
|
||||
.top-search .top-search-form .icon-box {overflow: hidden;display: flex;justify-content: center;align-items: center;width: 30px;height: 30px;font-size: 30px;margin-right: 10px;}
|
||||
.top-search .top-search-form .top-search-box{flex:1;border-radius:3px;position:relative;height:30px;line-height:30px;overflow:hidden;margin-top: -3px; padding-left: 15px;}
|
||||
.top-search .top-search-form .top-search-box .top-search-intro{line-height: 30px;}
|
||||
.top-search .top-search-form .top-search-box .top-search-icon{display:block;position:absolute;width:30px;height:30px;right:6px;top:50%;margin-top:-15px;text-align: center;line-height: 30px;}
|
||||
.top-search .top-search-form .top-search-box .top-search-icon i{font-size: 18px;}
|
||||
.top-search .top-search-form .top-search-box input{border:0;outline:0;width:100%; padding: 0 15px; display:block;height:30px;}
|
||||
.top-search .top-search-form .top-search-box.border-circle{border-radius: 30px;}
|
||||
.top-search .search_logo{display: flex;align-items: center;margin: 15px 0 5px 30px;}
|
||||
|
||||
.top-search .search_logo .right-wrap {display: flex;flex-direction: column;flex: 1;width: 0;}
|
||||
.top-search .search_logo .action-box {display: flex;margin-bottom: 10px;}
|
||||
.top-search .search_logo .action {margin-right: 10px;width: 42px;height: 28px;line-height: 28px;text-align: center;border: 1px solid #EEEEEE;cursor: pointer;}
|
||||
.top-search .search_logo .action .iconfont {font-size: 20px;}
|
||||
.top-search .search_logo .action:hover {border-color: var(--base-color);color: var(--base-color);}
|
||||
.top-search .search_logo .desc{flex: 1;color: #B2B2B2;font-size: 12px;line-height: 1.6;}
|
||||
|
||||
.top-search .preview-box-3 .top-search-form .top-search-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
height: 34px;
|
||||
}
|
||||
.top-search .preview-box-3 .top-search-form .top-search-box .top-search-icon{
|
||||
padding-left: 13px;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
position: initial;
|
||||
}
|
||||
.top-search .preview-box-3 .top-search-form .top-search-box .top-search-icon i{
|
||||
font-size: 16px;
|
||||
}
|
||||
.top-search .preview-box-3 .top-search-form .top-search-box .top-search-intro{
|
||||
margin-left: 7px;
|
||||
flex: 1;
|
||||
}
|
||||
.top-search .preview-box-3 .top-search-form .top-search-box .top-search-btn{
|
||||
margin-left: auto;
|
||||
margin-right: 4px;
|
||||
width: 58px;
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 15px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.top-search .preview-box-3 .top-search-form .icon-box{
|
||||
margin-right: 0;
|
||||
width: auto;
|
||||
margin-left: 12px;
|
||||
color: #fff;
|
||||
font-size: 37px;
|
||||
}
|
||||
.top-search .preview-box-3 .top-search-form img{
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
139
app/component/view/search/design.html
Executable file
139
app/component/view/search/design.html
Executable file
@@ -0,0 +1,139 @@
|
||||
<nc-component :data="data[index]" class="top-search">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div :class="['preview-box',('preview-box-'+nc.searchStyle)]" :style="{background: nc.componentBgColor}">
|
||||
<div class="top-search-form" v-if="[1,2].includes(nc.searchStyle)">
|
||||
<template v-if="nc.searchStyle == 2">
|
||||
<img v-if="nc.iconType == 'img'" :src="changeImgUrl(nc.imageUrl)"/>
|
||||
<div v-if="nc.iconType == 'icon'" class="icon-box">
|
||||
<iconfont :icon="nc.icon" v-if="nc.icon" :value="nc.style ? nc.style : ''"></iconfont>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="top-search-box" :class="{'border-circle': nc.borderType == 2}" :style="{background: nc.elementBgColor, textAlign: nc.textAlign}">
|
||||
<span class="top-search-intro" :style="{color: nc.textColor ? nc.textColor : 'rgba(0,0,0,0)'}">{{ nc.title }}</span>
|
||||
<span class="top-search-icon"><i class="iconfont iconsousuo" :style="{color: nc.textColor ? nc.textColor : 'rgba(0,0,0,0)'}"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-search-form" v-if="nc.searchStyle == 3">
|
||||
<div :class="[{'border-circle': nc.borderType == 2},'top-search-box']" :style="{background: nc.elementBgColor, textAlign: nc.textAlign}">
|
||||
<span class="top-search-icon"><i class="iconfont iconsousuo" :style="{color: nc.textColor ? nc.textColor : 'rgba(0,0,0,0)'}"></i></span>
|
||||
<span class="top-search-intro" :style="{color: nc.textColor ? nc.textColor : 'rgba(0,0,0,0)'}">{{ nc.title }}</span>
|
||||
<span class="top-search-btn" :style="{background: nc.pageBgColor}">搜索</span>
|
||||
</div>
|
||||
|
||||
<img v-if="nc.iconType == 'img'" :src="changeImgUrl(nc.imageUrl)"/>
|
||||
<div v-if="nc.iconType == 'icon'" class="icon-box">
|
||||
<iconfont :icon="nc.icon" v-if="nc.icon" :value="nc.style ? nc.style : ''"></iconfont>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>搜索风格</h3>
|
||||
<div class="layui-form-item icon-radio">
|
||||
<label class="layui-form-label sm">搜索风格</label>
|
||||
<div class="layui-input-block">
|
||||
<span v-for="item in nc.tempData.styleList" v-if="nc.searchStyle==item.value">{{item.label}}</span>
|
||||
<ul class="icon-wrap">
|
||||
<li v-for="(item) in nc.tempData.styleList" class="search_type_left" @click="nc.searchStyle=item.value" :class="{'text-color border-color':nc.searchStyle==item.value}">
|
||||
<i class="iconfont" :class="[{'text-color': nc.searchStyle==item.value}, item.icon_img]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="search_logo" v-show="[2,3].includes(nc.searchStyle)">
|
||||
<img-icon-upload :data="{data : nc}"></img-icon-upload>
|
||||
<div class="right-wrap">
|
||||
<div class="action-box" v-show="nc.iconType == 'icon'">
|
||||
<div class="action" @click="nc.tempData.methods.iconStyle($event)"><i class="iconfont iconpifu"></i></div>
|
||||
<div class="action" :id="'search-color-' + nc.index"><i class="iconfont iconyanse"></i></div>
|
||||
</div>
|
||||
<div class="desc">宽度自适应（最大85px），高度38px</div>
|
||||
</div>
|
||||
</div>
|
||||
<nc-link v-show="nc.searchStyle == 3" :data="{ field : nc.searchLink }"></nc-link>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item icon-radio">
|
||||
<label class="layui-form-label sm">文本位置</label>
|
||||
<div class="layui-input-block">
|
||||
<span v-for="(item) in nc.tempData.textAlignList" v-if="nc.textAlign==item.value">{{item.label}}</span>
|
||||
<ul class="icon-wrap">
|
||||
<li v-for="(item) in nc.tempData.textAlignList" @click="nc.textAlign=item.value" :class="{'text-color border-color':nc.textAlign==item.value}">
|
||||
<i class="iconfont" :class="[{'text-color': nc.textAlign==item.value}, item.icon_img]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item icon-radio">
|
||||
<label class="layui-form-label sm">显示位置</label>
|
||||
<div class="layui-input-block">
|
||||
<div v-for="(item) in nc.tempData.positionWayList" @click="nc.positionWay=item.value" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.positionWay==item.value) }">
|
||||
<i class="layui-anim layui-icon">{{ nc.positionWay==item.value ? "" : "" }}</i>
|
||||
<div>{{item.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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="请输入搜索内容" class="layui-input" maxlength="20">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
|
||||
<template v-if="nc.lazyLoad">
|
||||
<search-resource></search-resource>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>搜索样式</h3>
|
||||
<div class="layui-form-item icon-radio">
|
||||
<label class="layui-form-label sm">框体样式</label>
|
||||
<div class="layui-input-block">
|
||||
<span v-for="item in nc.tempData.borderList" v-if="nc.borderType==item.value">{{item.label}}</span>
|
||||
<ul class="icon-wrap">
|
||||
<li v-for="(item) in nc.tempData.borderList" @click="nc.borderType=item.value" :class="{'text-color border-color':nc.borderType==item.value}">
|
||||
<i class="iconfont" :class="[{'text-color': nc.borderType==item.value}, item.icon_img]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<color :data="{ field : 'textColor', 'label' : '文本颜色','defaultColor': '#303133' }"></color>
|
||||
<color :data="{ field : 'elementBgColor', 'label' : '背景颜色' }"></color>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
var searchResourcePath = "{$resource_path}"; // http路径
|
||||
var searchRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
147
app/component/view/search/js/design.js
Executable file
147
app/component/view/search/js/design.js
Executable file
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* 商品搜索·组件
|
||||
*/
|
||||
var searchHtml = '<div style="display:none;"></div>';
|
||||
|
||||
Vue.component("search-resource", {
|
||||
template: searchHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
styleList: [
|
||||
{
|
||||
label: "样式1",
|
||||
value: 1,
|
||||
icon_img: "iconsousuo11",
|
||||
},
|
||||
{
|
||||
label: "样式2",
|
||||
value: 2,
|
||||
icon_img: "iconsousuo1",
|
||||
},
|
||||
{
|
||||
label: "样式3",
|
||||
value: 3,
|
||||
icon_img: "iconsousuo12",
|
||||
}
|
||||
],
|
||||
borderList: [
|
||||
{
|
||||
label: "方形",
|
||||
value: 1,
|
||||
icon_img: "icongl-square",
|
||||
},
|
||||
{
|
||||
label: "圆形",
|
||||
value: 2,
|
||||
icon_img: "iconyuanjiao",
|
||||
},
|
||||
],
|
||||
textAlignList: [
|
||||
{
|
||||
label: "居左",
|
||||
value: "left",
|
||||
icon_img: "iconzuoduiqi"
|
||||
},
|
||||
{
|
||||
label: "居中",
|
||||
value: "center",
|
||||
icon_img: "iconjuzhongduiqi"
|
||||
},
|
||||
],
|
||||
positionWayList: [
|
||||
{
|
||||
label: "正常显示",
|
||||
value: "static",
|
||||
},
|
||||
{
|
||||
label: "滚动至顶部固定",
|
||||
value: "fixed",
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
if (!this.$parent.data.verify) this.$parent.data.verify = [];
|
||||
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||||
|
||||
this.$parent.data.ignore = ['elementAngle', 'componentAngle']; //加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
styleList: this.styleList,
|
||||
textAlignList: this.textAlignList,
|
||||
positionWayList: this.positionWayList,
|
||||
borderList: this.borderList,
|
||||
methods: {
|
||||
addNotice: this.addNotice,
|
||||
iconStyle: this.iconStyle
|
||||
}
|
||||
};
|
||||
|
||||
this.fetchIconColor();
|
||||
},
|
||||
methods: {
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
return res;
|
||||
},
|
||||
/**
|
||||
* 选择图标风格
|
||||
* @param event
|
||||
*/
|
||||
iconStyle(event){
|
||||
var self = this;
|
||||
selectIconStyle({
|
||||
elem: event.currentTarget,
|
||||
icon: self.data.icon,
|
||||
callback: function (data) {
|
||||
if (data) {
|
||||
self.data.style = data;
|
||||
} else {
|
||||
iconStyleSet({
|
||||
style: JSON.stringify(self.data.style),
|
||||
query: {
|
||||
icon: self.data.icon
|
||||
}
|
||||
}, function(style){
|
||||
self.data.style = style;
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 渲染颜色组件
|
||||
* @param id
|
||||
* @param color
|
||||
* @param callback
|
||||
*/
|
||||
colorRender(id, color, callback){
|
||||
setTimeout(function () {
|
||||
Colorpicker.create({
|
||||
el: id,
|
||||
color: color,
|
||||
change: function (elem, hex) {
|
||||
callback(elem, hex)
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 渲染图标颜色选择器
|
||||
*/
|
||||
fetchIconColor(){
|
||||
var self = this;
|
||||
self.colorRender('search-color-' + self.data.index, '', function (elem, color) {
|
||||
if (self.data.style.iconBgColor.length || self.data.style.iconBgImg) {
|
||||
self.data.style.iconBgColor = [color];
|
||||
} else {
|
||||
self.data.style.iconColor = [color];
|
||||
}
|
||||
self.$forceUpdate();
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user