161 lines
7.2 KiB
HTML
161 lines
7.2 KiB
HTML
<nc-component :data="data[index]" class="notice">
|
||
|
||
<!-- 预览 -->
|
||
<template slot="preview">
|
||
<template v-if="nc.lazyLoad">
|
||
<div class="preview-box"
|
||
:style="{
|
||
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),
|
||
backgroundColor : nc.componentBgColor }">
|
||
<div :class="['notice-box',nc.contentStyle]">
|
||
<div class="notice-con" v-for="(item, previewIndex) in nc.list" v-if="previewIndex < 1">
|
||
<div :class="['img-wrap',nc.iconType]" v-if="previewIndex == 0">
|
||
<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 class="notice-con-split"></div>
|
||
<span v-if="nc.contentStyle=='style-2'" class="iconfont icongonggao notice-icon-one" :style="{color: nc.textColor ? nc.textColor : 'rgba(0,0,0,0)'}"></span>
|
||
<span class="notice-con-font" :style="{color: nc.textColor ? nc.textColor : 'rgba(0,0,0,0)'}">{{ item.title }}</span>
|
||
<span v-if="nc.contentStyle=='style-2'" class="iconfont iconyoujiantou notice-icon-two"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
|
||
<!-- 内容编辑 -->
|
||
<template slot="edit-content">
|
||
<template v-if="nc.lazyLoad">
|
||
<notice-sources></notice-sources>
|
||
|
||
<div class="template-edit-title">
|
||
<h3>公告风格</h3>
|
||
<div class="goods-list-edit layui-form" v-if="nc.tempData.iconList">
|
||
<div class="layui-form-item icon-radio">
|
||
<label class="layui-form-label sm">公告图标</label>
|
||
<div class="layui-input-block">
|
||
<span v-for="(item, sourcesKey) in nc.tempData.iconList" :key="sourcesKey" :class="[sourcesKey == nc.iconSources ? '' : 'layui-hide']">{{item.text}}</span>
|
||
<ul class="icon-wrap">
|
||
<li v-for="(item, sourcesKey) in nc.tempData.iconList" :key="sourcesKey" :class="[sourcesKey == nc.iconSources ? 'text-color border-color' : '']" @click="nc.iconSources=sourcesKey;nc.iconType=item.type;">
|
||
<i class="iconfont" :class="[{'text-color': sourcesKey == nc.iconSources}, item.src]"></i>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div v-if="nc.iconSources == 'initial'" class="system-img">
|
||
<div class="system-img-item" v-for="item in nc.tempData.iconList[nc.iconSources].icon" :class="{'border-color': nc.imageUrl == item}" @click="nc.imageUrl = item">
|
||
<img :src="item"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="diy-img" v-show="nc.iconSources == 'diy'">
|
||
<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="'notice-color-' + nc.index"><i class="iconfont iconyanse"></i></div>
|
||
</div>
|
||
<div class="desc">高度20像素，宽度自适应</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label sm">风格</label>
|
||
<div class="layui-input-block">
|
||
<div @click="nc.contentStyle='style-1'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.contentStyle=='style-1') }">
|
||
<i class="layui-anim layui-icon">{{ nc.contentStyle=='style-1' ? "" : "" }}</i>
|
||
<div>风格一</div>
|
||
</div>
|
||
<div @click="nc.contentStyle='style-2'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.contentStyle=='style-2') }">
|
||
<i class="layui-anim layui-icon">{{ nc.contentStyle=='style-2' ? "" : "" }}</i>
|
||
<div>风格二</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label sm">滚动方式</label>
|
||
<div class="layui-input-block">
|
||
<div @click="nc.scrollWay='upDown'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.scrollWay=='upDown') }">
|
||
<i class="layui-anim layui-icon">{{ nc.scrollWay=='upDown' ? "" : "" }}</i>
|
||
<div>上下滚动</div>
|
||
</div>
|
||
<div @click="nc.scrollWay='horizontal'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (nc.scrollWay=='horizontal') }">
|
||
<i class="layui-anim layui-icon">{{ nc.scrollWay=='horizontal' ? "" : "" }}</i>
|
||
<div>横向滚动</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="template-edit-title">
|
||
<h3>公告内容</h3>
|
||
<div class="layui-form-item" v-if="nc.tempData.noticeSources">
|
||
<label class="layui-form-label sm">数据来源</label>
|
||
<div class="layui-input-block">
|
||
<div class="source-selected">
|
||
<div class="source">{{ nc.tempData.noticeSources[nc.sources].text }}</div>
|
||
<div v-for="(item,sourcesKey) in nc.tempData.noticeSources" :key="sourcesKey" class="source-item" :title="item.text" @click="nc.sources=sourcesKey" :class="{ 'text-color border-color' : (nc.sources == sourcesKey) }">
|
||
<i class='iconfont' :class='item.icon'></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item" v-if="nc.sources == 'initial' && nc.tempData.methods">
|
||
<label class="layui-form-label sm">选择公告</label>
|
||
<div class="layui-input-block">
|
||
<div class="input-text selected-style" @click="nc.tempData.methods.addNotice()">
|
||
<span v-if="nc.noticeIds.length == 0">请选择</span>
|
||
<span v-if="nc.noticeIds.length > 0" class="text-color">已选{{ nc.noticeIds.length }}个</span>
|
||
<i class="iconfont iconyoujiantou"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="notice-config" v-if="nc.sources == 'diy'">
|
||
<ul>
|
||
<li v-for="(item,index) in nc.list">
|
||
<div class="content-block">
|
||
<div class="layui-form-item" >
|
||
<label class="layui-form-label sm">公告内容</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name='title' v-model="item.title" class="layui-input" />
|
||
</div>
|
||
</div>
|
||
<nc-link :data="{ field : nc.list[index].link }"></nc-link>
|
||
</div>
|
||
<i class="del" @click="nc.list.splice(index,1)">x</i>
|
||
</li>
|
||
</ul>
|
||
<div class="add-item text-color border-color" @click="nc.list.push({ title:'公告',link:{name:''}})">
|
||
<i>+</i>
|
||
<span>添加一条公告</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
</template>
|
||
|
||
<!-- 样式编辑 -->
|
||
<template slot="edit-style">
|
||
<template v-if="nc.lazyLoad">
|
||
<div class="template-edit-title">
|
||
<h3>公告样式</h3>
|
||
<color :data="{ field : 'textColor', 'label' : '文本颜色','defaultColor': '#303133' }"></color>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
|
||
<!-- 资源 -->
|
||
<template slot="resource">
|
||
<js>
|
||
var noticeResourcePath = "{$resource_path}";
|
||
</js>
|
||
<css src="{$resource_path}/css/design.css"></css>
|
||
<js src="{$resource_path}/js/design.js"></js>
|
||
</template>
|
||
|
||
</nc-component> |