初始上传
This commit is contained in:
400
app/component/view/graphic_nav/css/design.css
Executable file
400
app/component/view/graphic_nav/css/design.css
Executable file
@@ -0,0 +1,400 @@
|
||||
@CHARSET "UTF-8";
|
||||
|
||||
/*图文导航组件*/
|
||||
.graphic-navigation .preview-draggable .preview-box {
|
||||
padding: 8px 0;
|
||||
margin: 0 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.graphic-navigation .preview-draggable ul {
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.graphic-navigation .preview-draggable ul.horizontal-scroll {
|
||||
overflow-x: scroll;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.graphic-navigation .preview-draggable ul.horizontal-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.graphic-navigation .preview-draggable li {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.graphic-navigation .preview-draggable li img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.graphic-navigation .preview-draggable li:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.graphic-navigation .preview-draggable li span {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/*.graphic-navigation .preview-draggable .graphic-nav{visibility: hidden;}*/
|
||||
.graphic-navigation .preview-draggable .graphic-nav>.wrap {
|
||||
/* overflow-x: hidden;white-space: nowrap; background: #ffffff; */
|
||||
display: flex;
|
||||
/* justify-content: space-around; */
|
||||
flex-wrap: wrap;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav-list .template-list .template-item {
|
||||
float: left;
|
||||
text-align: center;
|
||||
border: 1px solid #e5e5e5;
|
||||
margin-right: 20px;
|
||||
padding: 5px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav-list .template-list .template-item img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.graphic-navigation .add-item {
|
||||
padding: 10px;
|
||||
border: 1px dashed #e5e5e5;
|
||||
margin: 16px 0 10px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.graphic-navigation .add-item i {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.graphic-navigation .add-item span {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.graphic-navigation .error-msg {
|
||||
margin: 5px 0 0 53px;
|
||||
color: #f44;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 新的css */
|
||||
.graphic-navigation .graphic-nav{
|
||||
padding: 10px 5px;
|
||||
}
|
||||
/* 预览 */
|
||||
/* 固定显示 */
|
||||
.graphic-navigation .graphic-nav.fixed{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/* 单边滑动 */
|
||||
.graphic-navigation .graphic-nav.singleSlide{
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.graphic-navigation .graphic-nav.singleSlide::-webkit-scrollbar {
|
||||
height: 5px;
|
||||
}
|
||||
.graphic-navigation .graphic-nav.singleSlide::-webkit-scrollbar-track {
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav.singleSlide::-webkit-scrollbar-thumb {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav.singleSlide .graphic-nav-item{
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 分页 */
|
||||
.graphic-navigation .graphic-nav.pageSlide{
|
||||
position: relative;
|
||||
}
|
||||
.graphic-navigation .graphic-nav.pageSlide .graphic-nav-wrap{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.graphic-navigation .graphic-nav.pageSlide .carousel-btn{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav.pageSlide .carousel-btn .arrows{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav.pageSlide .carousel-btn .arrows i{
|
||||
display: none;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, .35);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav.pageSlide .carousel-btn .dot-wrap{
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav.pageSlide .carousel-btn .dot-wrap.hide{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav.pageSlide .carousel-btn .dot-wrap.straightLine i{
|
||||
width: 12px;
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav.pageSlide .carousel-btn .dot-wrap i{
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav.pageSlide .carousel-btn .dot-wrap i.active{
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav.pageSlide .carousel-btn:hover .arrows i{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav .graphic-nav-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 7px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav .graphic-nav-item .graphic-text{
|
||||
padding-top: 6px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav .graphic-nav-item .graphic-img{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav .graphic-nav-item .graphic-img .tag{
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -12px;
|
||||
color: #fff;
|
||||
background-color: red;
|
||||
border-radius: 12px;
|
||||
border-bottom-left-radius: 0;
|
||||
transform: scale(0.8);
|
||||
padding: 2px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav .graphic-nav-item .graphic-img img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav .graphic-nav-item .graphic-img i{
|
||||
font-size: 25px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 图文导航项 */
|
||||
.graphic-navigation p.hint {
|
||||
padding-left: 15px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav-list>ul {
|
||||
padding: 10px 0 10px 15px;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav-list>ul>li {
|
||||
padding: 10px 10px 10px 0px;
|
||||
background: #ffffff;
|
||||
border: 1px dashed #e5e5e5;
|
||||
position: relative;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav-list>ul>li>.iconfont {
|
||||
position: absolute;
|
||||
top: calc(50% - 10px);
|
||||
left: 15px;
|
||||
cursor: move;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav-list>ul>li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.graphic-navigation .graphic-nav-list>ul>li:hover .del {
|
||||
display: block;
|
||||
}
|
||||
.graphic-navigation .edit-attribute .attr-wrap .restore-wrap .img-block, .graphic-navigation .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image > div{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.graphic-navigation .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
.graphic-navigation .edit-attribute .icon-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 60px;
|
||||
border: 1px dashed #ddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0!important;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.graphic-navigation .edit-attribute .icon-box .select-icon {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
.graphic-navigation .edit-attribute .icon-box .select-icon .add {
|
||||
font-size: 26px;
|
||||
color: var(--base-color);
|
||||
}
|
||||
|
||||
.graphic-navigation .edit-attribute .icon-box .operation {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,.6);
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.graphic-navigation .edit-attribute .icon-box:hover .operation {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.graphic-navigation .edit-attribute .icon-box .operation-warp {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
.graphic-navigation .edit-attribute .icon-box .iconfont {
|
||||
margin: 0 3px;
|
||||
font-size: 16px!important;
|
||||
}
|
||||
.graphic-navigation .edit-attribute .icon-box .operation .js-replace{
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
background: rgba(0,0,0,.7);
|
||||
font-size: 12px;
|
||||
height: unset;
|
||||
}
|
||||
.graphic-navigation .edit-attribute .graphic-nav-list .icon-box .icon-wrap:hover .operation{
|
||||
display: block;
|
||||
}
|
||||
.graphic-navigation .edit-attribute .graphic-nav-list .img-upload .upload-img-box:hover .operation{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.graphic-navigation .edit-attribute .navigation-set-list .img-upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.graphic-navigation .edit-attribute .navigation-set-list .img-upload img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.graphic-navigation .edit-attribute .navigation-set-list .action-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.graphic-navigation .edit-attribute .navigation-set-list .action {
|
||||
margin-right: 3px;
|
||||
width: 42px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
border: 1px solid #EEEEEE;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.graphic-navigation .edit-attribute .navigation-set-list .action:hover {
|
||||
border-color: var(--base-color);
|
||||
color: var(--base-color);
|
||||
}
|
||||
|
||||
.graphic-navigation .img-icon-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
225
app/component/view/graphic_nav/design.html
Executable file
225
app/component/view/graphic_nav/design.html
Executable file
@@ -0,0 +1,225 @@
|
||||
<nc-component :data="data[index]" class="graphic-navigation">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div :class="['graphic-nav',nc.showStyle] " :style="{
|
||||
backgroundColor: nc.componentBgColor,
|
||||
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||
boxShadow: nc.ornament.type == 'shadow' ? ('0 0 5px ' + nc.ornament.color) : '',
|
||||
border: nc.ornament.type == 'stroke' ? '1px solid ' + nc.ornament.color : ''
|
||||
}">
|
||||
<template v-if="nc.showStyle == 'pageSlide'">
|
||||
<div class="graphic-nav-wrap" v-for="(numItem,numIndex) in Math.ceil(nc.list.length / (nc.pageCount * nc.rowCount))">
|
||||
<div :class="['graphic-nav-item',{'layui-hide': nc.tempData.carouselIndex != numIndex}]"
|
||||
v-for="(item,previewIndex) in nc.list" :key="previewIndex"
|
||||
v-if="previewIndex >= [(numItem-1) * (nc.pageCount * nc.rowCount)] && previewIndex < [numItem * (nc.pageCount * nc.rowCount)]"
|
||||
:style="{width: (100 / nc.rowCount + '%')}"
|
||||
>
|
||||
<div class="graphic-img" v-show="nc.mode != 'text'" :style="{'font-size' : nc.imageSize + 'px'}">
|
||||
<img v-if="item.iconType == 'img' && item.imageUrl" :src="changeImgUrl(item.imageUrl)" alt="" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px', borderRadius: nc.aroundRadius + 'px'}">
|
||||
<iconfont v-if="item.iconType == 'icon' && item.icon" :icon="item.icon" :value="(item.style ? item.style : null)" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px'}"></iconfont>
|
||||
<img v-if="!item.icon && !item.imageUrl" :src="changeImgUrl('public/static/img/default_img/square.png')" alt="" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px', borderRadius: nc.aroundRadius + 'px'}">
|
||||
|
||||
<span class="tag" v-if="item.label.control" :style="{color: item.label.textColor,backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')'}">{{item.label.text}}</span>
|
||||
</div>
|
||||
<span v-show="nc.mode != 'img'" class="graphic-text" :style="{fontSize: nc.font.size + 'px',fontWeight: nc.font.weight, color: nc.font.color}">{{item.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="carousel-btn" v-if="Math.ceil(nc.list.length / (nc.pageCount * nc.rowCount)) -1">
|
||||
<div class="arrows">
|
||||
<i class="iconfont iconback_light" @click="nc.tempData.carouselIndex = (nc.tempData.carouselIndex ? nc.tempData.carouselIndex-1 : nc.tempData.carouselIndex)"></i>
|
||||
<i class="iconfont iconyoujiantou" @click="nc.tempData.carouselIndex = [nc.tempData.carouselIndex < Math.ceil(nc.list.length / (nc.pageCount * nc.rowCount))-1 ? + nc.tempData.carouselIndex + 1 : Math.ceil(nc.list.length / (nc.pageCount * nc.rowCount))-1]"></i>
|
||||
</div>
|
||||
<div :class="['dot-wrap',nc.carousel.type]">
|
||||
<i v-for="(numItem,numIndex) in Math.ceil(nc.list.length / (nc.pageCount * nc.rowCount))" :class="{'active': nc.tempData.carouselIndex == numIndex}" @click="nc.tempData.carouselIndex = numIndex"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="graphic-nav-item" v-for="(item) in nc.list" :key="item.id" :style="{width: (100 / nc.rowCount + '%')}">
|
||||
<div class="graphic-img" v-show="nc.mode != 'text'" :style="{'font-size' : nc.imageSize + 'px', width: nc.imageSize + 'px', height: nc.imageSize + 'px'}">
|
||||
<img v-if="item.iconType == 'img' && item.imageUrl" :src="changeImgUrl(item.imageUrl)" alt="" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px', borderRadius: nc.aroundRadius + 'px'}">
|
||||
<iconfont v-if="item.iconType == 'icon' && item.icon" :icon="item.icon" :value="(item.style ? item.style : null)" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px'}"></iconfont>
|
||||
<img v-if="!item.icon && !item.imageUrl" :src="changeImgUrl('public/static/img/default_img/square.png')" alt="" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px', borderRadius: nc.aroundRadius + 'px'}">
|
||||
<span class="tag" v-if="item.label.control" :style="{color: item.label.textColor,backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')'}">{{item.label.text}}</span>
|
||||
</div>
|
||||
<span v-show="nc.mode != 'img'" class="graphic-text" :style="{fontSize: nc.font.size+'px',fontWeight: nc.font.weight, color: nc.font.color}">{{item.title}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<graphic-nav-list></graphic-nav-list>
|
||||
<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.modeList" :class="[item.value == nc.mode ? '' : 'layui-hide']">{{item.name}}</span>
|
||||
<ul class="icon-wrap">
|
||||
<li v-for="item in nc.tempData.modeList" :class="[item.value == nc.mode ? 'text-color border-color' : '']" @click="nc.mode = item.value">
|
||||
<i :class="['iconfont',item.src]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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.showStyleList" :class="[item.value == nc.showStyle ? '' : 'layui-hide']">{{item.name}}</span>
|
||||
<ul class="icon-wrap">
|
||||
<li v-for="item in nc.tempData.showStyleList" :class="[item.value == nc.showStyle ? 'text-color border-color' : '']" @click="nc.showStyle = item.value">
|
||||
<i :class="['iconfont',item.src]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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.rowCountList" :class="[{'layui-hide': item.value != nc.rowCount}]">{{item.name}}</span>
|
||||
<ul class="icon-wrap">
|
||||
<li v-for="item in nc.tempData.rowCountList" :class="[item.value == nc.rowCount ? 'text-color border-color' : '']" @click="nc.rowCount = item.value">
|
||||
<i :class="['iconfont',item.src]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item icon-radio" v-show="nc.showStyle == 'pageSlide'">
|
||||
<label class="layui-form-label sm">每页行数</label>
|
||||
<div class="layui-input-block">
|
||||
<span v-for="item in nc.tempData.pageCountList" :class="[item.value == nc.pageCount ? '' : 'layui-hide']">{{item.name}}</span>
|
||||
<ul class="icon-wrap">
|
||||
<li v-for="item in nc.tempData.pageCountList" :class="[item.value == nc.pageCount ? 'text-color border-color' : '']" @click="nc.pageCount = item.value">
|
||||
<i :class="['iconfont',item.src]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>图文导航项</h3>
|
||||
<div class="graphic-nav-list">
|
||||
<p class="hint">建议上传尺寸相同的图片(60px * 60px)</p>
|
||||
<ul class="navigation-set-list">
|
||||
<li v-for="(item,previewIndex) in nc.list" :key="item.id" class="content-block">
|
||||
<template v-if="['graphic','img'].includes(nc.mode)">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">图片</label>
|
||||
<div class="layui-input-block">
|
||||
<image-upload :data="{ data : item }" :condition="['graphic','img'].includes(nc.mode)" data-disabled="1"></image-upload>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<div class="layui-form-item" v-if="['graphic','text'].includes(nc.mode)">
|
||||
<label class="layui-form-label sm">标题</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name='title' v-model="item.title" maxlength="20" class="layui-input" autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
<nc-link :data="{ field : item.link, label:'链接' }"></nc-link>
|
||||
|
||||
<i class="del" @click="nc.list.splice(previewIndex,1)" data-disabled="1">x</i>
|
||||
<div class="error-msg"></div>
|
||||
<div class="iconfont icontuodong"></div>
|
||||
</li>
|
||||
|
||||
<div class="add-item text-color" @click="nc.tempData.methods.addNav()">
|
||||
<i>+</i>
|
||||
<span>添加一个图文导航</span>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="template-edit-title">
|
||||
<h3>图文导航</h3>
|
||||
|
||||
<div class="layui-form-item tag-wrap">
|
||||
<label class="layui-form-label sm">样式</label>
|
||||
<div class="layui-input-block">
|
||||
<div v-for="(item,ornamentIndex) in nc.tempData.ornamentList" :key="ornamentIndex" @click="nc.ornament.type=item.type" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.ornament.type==item.type) }">
|
||||
<i class="layui-anim layui-icon">{{ nc.ornament.type == item.type ? "" : "" }}</i>
|
||||
<div>{{item.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<color v-if="nc.ornament.type != 'default'" :data="{ field : 'color', 'label' : '边框颜色', parent : 'ornament', defaultColor : '#EDEDED' }"></color>
|
||||
|
||||
<div class="layui-form-item icon-radio" v-show="nc.showStyle == 'pageSlide'">
|
||||
<label class="layui-form-label sm">轮播点样式</label>
|
||||
<div class="layui-input-block">
|
||||
<span v-for="item in nc.tempData.carouselList" :class="[{'layui-hide': item.value != nc.carousel.type}]">{{item.name}}</span>
|
||||
<ul class="icon-wrap">
|
||||
<li v-for="item in nc.tempData.carouselList" :class="[item.value == nc.carousel.type ? 'text-color border-color' : '']" @click="nc.carousel.type = item.value">
|
||||
<i :class="['iconfont',item.src]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title" v-show="['graphic','img'].includes(nc.mode) && nc.type == 'img'">
|
||||
<h3>图片设置</h3>
|
||||
<template v-if="nc.type == 'img'">
|
||||
<slide :data="{ field : 'aroundRadius', label : '图片圆角', max : 50 }"></slide>
|
||||
<slide :data="{ field : 'imageSize', label : '图片大小', min: 30, max : 60 }"></slide>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title" v-if="['graphic','text'].includes(nc.mode)">
|
||||
<h3>文字设置</h3>
|
||||
|
||||
<slide :data="{ field : 'size',parent:'font', label : '文字大小', min: 12, max : 16 }"></slide>
|
||||
|
||||
<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.thicknessList" :class="[item.value == nc.font.weight ? '' : 'layui-hide']">{{item.name}}</span>
|
||||
<ul class="icon-wrap">
|
||||
<li v-for="(item, index) in nc.tempData.thicknessList" :class="[item.value == nc.font.weight ? 'text-color border-color' : '']" @click="nc.font.weight = item.value">
|
||||
<i class="iconfont" :class="[{'text-color': item.value == nc.font.weight}, item.src]"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<color :data="{ field : 'color', label : '文字颜色',parent:'font',defaultColor: '#303133' }"></color>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
var graphicNavResourcePath = "{$resource_path}"; // http路径
|
||||
var graphicNavRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
367
app/component/view/graphic_nav/js/design.js
Executable file
367
app/component/view/graphic_nav/js/design.js
Executable file
@@ -0,0 +1,367 @@
|
||||
/**
|
||||
* [图片导航的图片]·组件
|
||||
*/
|
||||
var graphicNavListHtml = '<div style="display: none;"></div>';
|
||||
Vue.component("graphic-nav-list", {
|
||||
template: graphicNavListHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
list: this.$parent.data.list,
|
||||
modeList: [
|
||||
{
|
||||
name: "图文导航",
|
||||
value: "graphic",
|
||||
src: "icontuwendaohang3"
|
||||
},
|
||||
{
|
||||
name: "图片导航",
|
||||
value: "img",
|
||||
src: "icontudaohang"
|
||||
},
|
||||
{
|
||||
name: "文字导航",
|
||||
value: "text",
|
||||
src: "iconwendaohang"
|
||||
}
|
||||
],
|
||||
showStyleList: [
|
||||
{
|
||||
name: "固定显示",
|
||||
value: "fixed",
|
||||
src: "icongudingzhanshi"
|
||||
},
|
||||
{
|
||||
name: "单行滑动",
|
||||
value: "singleSlide",
|
||||
src: "icondanhanghuadong"
|
||||
},
|
||||
{
|
||||
name: "分页滑动",
|
||||
value: "pageSlide",
|
||||
src: "iconfenyehuadong"
|
||||
}
|
||||
],
|
||||
ornamentList: [
|
||||
{
|
||||
type: 'default',
|
||||
text: '默认',
|
||||
},
|
||||
{
|
||||
type: 'shadow',
|
||||
text: '投影',
|
||||
},
|
||||
{
|
||||
type: 'stroke',
|
||||
text: '描边',
|
||||
},
|
||||
],
|
||||
carouselList: [
|
||||
{
|
||||
name: "圆点",
|
||||
value: "circle",
|
||||
src: "iconshenglvehao"
|
||||
},
|
||||
{
|
||||
name: "直线",
|
||||
value: "straightLine",
|
||||
src: "iconshixian"
|
||||
},
|
||||
{
|
||||
name: "隐藏",
|
||||
value: "hide",
|
||||
src: "iconyincang"
|
||||
}
|
||||
],
|
||||
rowCountList: [
|
||||
{
|
||||
name: "3个",
|
||||
value: 3,
|
||||
src: "iconyihangsange"
|
||||
},
|
||||
{
|
||||
name: "4个",
|
||||
value: 4,
|
||||
src: "iconyihangsige"
|
||||
},
|
||||
{
|
||||
name: "5个",
|
||||
value: 5,
|
||||
src: "iconyihang5ge"
|
||||
}
|
||||
],
|
||||
pageCountList: [
|
||||
{
|
||||
name: "1行",
|
||||
value: 1,
|
||||
src: "iconfuzhushuxian"
|
||||
},
|
||||
{
|
||||
name: "2行",
|
||||
value: 2,
|
||||
src: "iconyihangliangge"
|
||||
}
|
||||
],
|
||||
thicknessList: [
|
||||
{name: "加粗", src: "iconbold", value: "bold"},
|
||||
{name: "常规", src: "iconbold-copy", value: "normal"}
|
||||
]
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
if (!this.$parent.data.verify) this.$parent.data.verify = [];
|
||||
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||||
|
||||
this.$parent.data.ignore = ['textColor', 'elementBgColor', 'elementAngle'];//加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
...this.$parent.data.tempData,
|
||||
modeList: this.modeList,
|
||||
showStyleList: this.showStyleList,
|
||||
ornamentList: this.ornamentList,
|
||||
carouselList: this.carouselList,
|
||||
rowCountList: this.rowCountList,
|
||||
pageCountList: this.pageCountList,
|
||||
thicknessList:this.thicknessList,
|
||||
carouselIndex: 0,
|
||||
methods: {
|
||||
addNav: this.addNav
|
||||
}
|
||||
};
|
||||
|
||||
this.list.forEach(function (e, i) {
|
||||
if(!e.id ) e.id = ns.gen_non_duplicate(6);
|
||||
});
|
||||
this.$parent.data.list = this.list;
|
||||
|
||||
var moveBeforeIndex = 0;
|
||||
var _this = this;
|
||||
setTimeout(function () {
|
||||
var componentIndex = _this.data.index;
|
||||
$('[data-index="' + componentIndex + '"] .navigation-set-list').DDSort({
|
||||
target: 'li',
|
||||
floatStyle: {
|
||||
'border': '1px solid #ccc',
|
||||
'background-color': '#fff'
|
||||
},
|
||||
//设置可拖拽区域
|
||||
draggableArea: "icontuodong",
|
||||
down: function (index) {
|
||||
moveBeforeIndex = index;
|
||||
},
|
||||
up: function () {
|
||||
var index = $(this).index();
|
||||
var temp = _this.list[moveBeforeIndex];
|
||||
_this.list.splice(moveBeforeIndex, 1);
|
||||
_this.list.splice(index, 0, temp);
|
||||
_this.$parent.data.list = _this.list;
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
"data.pageCount"() {
|
||||
if (this.data.showStyle == 'pageSlide')
|
||||
this.data.tempData.carouselIndex = 0
|
||||
},
|
||||
"data.rowCount"() {
|
||||
if (this.data.showStyle == 'pageSlide')
|
||||
this.data.tempData.carouselIndex = 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addNav() {
|
||||
this.list.push({
|
||||
"title": "",
|
||||
"icon": "",
|
||||
"imageUrl": "",
|
||||
"iconType": "img",
|
||||
"style": {
|
||||
"fontSize": "60",
|
||||
"iconBgColor": [],
|
||||
"iconBgColorDeg": 0,
|
||||
"iconBgImg": "",
|
||||
"bgRadius": 0,
|
||||
"iconColor": [
|
||||
"#000000"
|
||||
],
|
||||
"iconColorDeg": 0
|
||||
},
|
||||
"link": {
|
||||
"name": ""
|
||||
},
|
||||
"label": {
|
||||
"control": false,
|
||||
"text": "热门",
|
||||
"textColor": "#FFFFFF",
|
||||
"bgColorStart": "#F83287",
|
||||
"bgColorEnd": "#FE3423"
|
||||
},
|
||||
id: ns.gen_non_duplicate(6)
|
||||
});
|
||||
},
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
$(".draggable-element[data-index='" + index + "'] .graphic-navigation .graphic-nav-list .navigation-set-list>li").each(function (i) {
|
||||
if (vue.data[index].mode === "img") {
|
||||
$(this).find("input[name='title']").removeAttr("style");//清空输入框的样式
|
||||
//检测是否有未上传的图片
|
||||
if (vue.data[index].list[i].imageUrl === "") {
|
||||
res.code = false;
|
||||
res.message = "请选择一张图片";
|
||||
$(this).find(".error-msg").text("请选择一张图片").show();
|
||||
return res;
|
||||
} else {
|
||||
$(this).find(".error-msg").text("").hide();
|
||||
}
|
||||
} else {
|
||||
if (vue.data[index].list[i].title === "") {
|
||||
res.code = false;
|
||||
res.message = "请输入标题";
|
||||
$(this).find("input[name='title']").attr("style", "border-color:red !important;").focus();
|
||||
$(this).find(".error-msg").text("请输入标题").show();
|
||||
return res;
|
||||
} else {
|
||||
$(this).find("input[name='title']").removeAttr("style");
|
||||
$(this).find(".error-msg").text("").hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return res;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var uploadImgHtml = '<div class="img-icon-box">';
|
||||
uploadImgHtml += '<img-icon-upload :data="{data:myData.data}"></img-icon-upload>';
|
||||
uploadImgHtml += '<div class="action-box">';
|
||||
uploadImgHtml += '<div class="action" v-if="myData.data.iconType == \'icon\'" title="风格" @click="iconStyle($event)"><i class="iconfont iconpifu"></i></div>';
|
||||
uploadImgHtml += '<div class="action" v-if="myData.data.iconType == \'icon\'" title="背景" @click="selectColor(\'graphic-nav-color-\' +id)" :id="\'graphic-nav-color-\' +id"><i class="iconfont iconyanse"></i></div>';
|
||||
uploadImgHtml += '<div class="action" title="标签" @click="selectLabel()"><i class="iconfont iconbiaoqian1"></i></div>';
|
||||
uploadImgHtml += '</div>';
|
||||
uploadImgHtml += '</div>';
|
||||
|
||||
Vue.component("image-upload", {
|
||||
template: uploadImgHtml,
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
data: {},
|
||||
field: "",
|
||||
callback: null
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
myData: this.data,
|
||||
list: [],
|
||||
parent: this.$parent.data,
|
||||
id: ns.gen_non_duplicate(10),
|
||||
colorPicker:{}
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
if (this.myData.field === undefined) this.myData.field = "imageUrl";
|
||||
this.id = ns.gen_non_duplicate(10);
|
||||
},
|
||||
methods: {
|
||||
// 选择图标风格
|
||||
iconStyle(event) {
|
||||
var self = this;
|
||||
selectIconStyle({
|
||||
elem: event.currentTarget,
|
||||
icon: self.myData.data.icon,
|
||||
callback: function (data) {
|
||||
if (data) {
|
||||
self.myData.data.style = data;
|
||||
} else {
|
||||
iconStyleSet({
|
||||
style: JSON.stringify(self.myData.data.style),
|
||||
query: {
|
||||
icon: self.myData.data.icon
|
||||
}
|
||||
}, function (style) {
|
||||
self.myData.data.style = style;
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 渲染颜色组件
|
||||
* @param id
|
||||
* @param color
|
||||
* @param callback
|
||||
*/
|
||||
colorRender(id, color, callback) {
|
||||
var self = this;
|
||||
if (this.colorPicker[id]) return;
|
||||
setTimeout(function () {
|
||||
self.colorPicker[id] = Colorpicker.create({
|
||||
el: id,
|
||||
color: color,
|
||||
change: function (elem, hex) {
|
||||
callback(elem, hex)
|
||||
}
|
||||
});
|
||||
$('#' + id).click();
|
||||
}, 10)
|
||||
},
|
||||
selectColor(id) {
|
||||
let self = this;
|
||||
this.colorRender(id, '', function (elem, color) {
|
||||
if (self.myData.data.style['iconBgImg'] || self.myData.data.style['iconBgColor'].length) {
|
||||
self.myData.data.style['iconBgColor'] = [color];
|
||||
} else {
|
||||
self.myData.data.style['iconColor'] = [color];
|
||||
}
|
||||
self.$forceUpdate();
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 标签设置
|
||||
* @param data
|
||||
* @param callback
|
||||
*/
|
||||
labelStyle(data, callback) {
|
||||
layer.open({
|
||||
title: "标签设置",
|
||||
type: 2,
|
||||
area: ['800px', '420px'],
|
||||
fixed: false, //不固定
|
||||
btn: ['保存', '取消'],
|
||||
content: ns.url("shop/diy/selectlabel?request_mode=iframe", data ? data : {}),
|
||||
yes: function (index, layero) {
|
||||
var iframeWin = document.getElementById(layero.find('iframe')[0]['name']).contentWindow;//得到iframe页的窗口对象，执行iframe页的方法：
|
||||
iframeWin.selectLabelListener(function (obj) {
|
||||
if (typeof callback == "string") {
|
||||
try {
|
||||
eval(callback + '(obj)');
|
||||
layer.close(index);
|
||||
} catch (e) {
|
||||
console.error('回调函数' + callback + '未定义');
|
||||
}
|
||||
} else if (typeof callback == "function") {
|
||||
callback(obj);
|
||||
layer.close(index);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
selectLabel() {
|
||||
let self = this;
|
||||
this.labelStyle(self.myData.data.label, function (data) {
|
||||
self.myData.data.label = data;
|
||||
self.$forceUpdate();
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user