初始上传
This commit is contained in:
16
app/component/view/article/css/design.css
Executable file
16
app/component/view/article/css/design.css
Executable file
@@ -0,0 +1,16 @@
|
||||
@CHARSET "UTF-8";
|
||||
/* 文章组件 */
|
||||
.article-wrap .list-wrap.style-1{}
|
||||
.article-wrap .list-wrap.style-1 .item{display: flex;padding: 10px;margin-bottom: 10px;}
|
||||
.article-wrap .list-wrap.style-1 .item:last-child{margin-bottom: 0;}
|
||||
.article-wrap .list-wrap.style-1 .item .img-wrap{text-align: center;margin-right: 10px;width: 80px;}
|
||||
.article-wrap .list-wrap.style-1 .item .img-wrap img{max-width: 100%;max-height: 100%;}
|
||||
.article-wrap .list-wrap.style-1 .item .img-wrap span{display: block;background-color:#F6F6F6;height: 50px;line-height: 50px;padding: 20px;}
|
||||
.article-wrap .list-wrap.style-1 .item .info-wrap {flex:1;display:flex;flex-direction:column;justify-content:space-between;}
|
||||
.article-wrap .list-wrap.style-1 .item .info-wrap .title {font-weight:bold;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;line-height:1.5;}
|
||||
.article-wrap .list-wrap.style-1 .item .info-wrap .abstract {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;}
|
||||
.article-wrap .list-wrap.style-1 .item .info-wrap .read-wrap {display:flex;color:#999ca7;justify-content:flex-start;align-items:center;margin-top:5px;line-height:1;}
|
||||
.article-wrap .list-wrap.style-1 .item .info-wrap .read-wrap text {font-size:12px;}
|
||||
.article-wrap .list-wrap.style-1 .item .info-wrap .read-wrap .iconfont {font-size:18px;vertical-align:bottom;margin-right:5px;}
|
||||
.article-wrap .list-wrap.style-1 .item .info-wrap .read-wrap .category-icon {width:4px;height:4px;border-radius:50%;margin-right:5px;}
|
||||
.article-wrap .list-wrap.style-1 .item .info-wrap .read-wrap .date {margin-left:10px;}
|
||||
105
app/component/view/article/design.html
Executable file
105
app/component/view/article/design.html
Executable file
@@ -0,0 +1,105 @@
|
||||
<nc-component :data="data[index]" class="article-wrap">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
<div :class="['list-wrap',nc.style]" :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),
|
||||
}">
|
||||
<template v-if="nc.previewList && Object.keys(nc.previewList).length">
|
||||
<div class="item" v-for="(item, previewIndex) in nc.previewList" :key="previewIndex" :style="{
|
||||
borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
|
||||
borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
|
||||
borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
|
||||
borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
|
||||
backgroundColor: nc.elementBgColor,
|
||||
boxShadow: nc.ornament.type == 'shadow' ? ('0 0 5px ' + nc.ornament.color) : '',
|
||||
border: nc.ornament.type == 'stroke' ? '1px solid ' + nc.ornament.color : ''
|
||||
}">
|
||||
<div class="img-wrap">
|
||||
<img :src="item.cover_img ? changeImgUrl(item.cover_img) : changeImgUrl('public/static/img/default_img/square.png')" />
|
||||
</div>
|
||||
<div class="info-wrap">
|
||||
<div class="title">{{ item.article_title }}</div>
|
||||
<div class="read-wrap">
|
||||
<span class="category-icon bg-color" v-if="item.category_name"></span>
|
||||
<span v-if="item.category_name">{{ item.category_name }}</span>
|
||||
<span class="date">{{ nc.tempData.methods ? nc.tempData.methods.timeFormat(item.create_time, 'YYYY-MM-DD') : '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<article-sources></article-sources>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>文章数据</h3>
|
||||
<div class="layui-form-item" v-if="nc.tempData.goodsSources">
|
||||
<label class="layui-form-label sm">数据来源</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="source-selected">
|
||||
<div class="source">{{ nc.tempData.goodsSources[nc.sources].text }}</div>
|
||||
<div v-for="(item,sourcesKey) in nc.tempData.goodsSources" :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 == 'diy'">
|
||||
<label class="layui-form-label sm">手动选择</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="selected-style" @click="nc.tempData.methods.addArticle()">
|
||||
<span v-if="nc.articleIds.length == 0">请选择</span>
|
||||
<span v-if="nc.articleIds.length > 0" class="text-color">已选{{ nc.articleIds.length }}个</span>
|
||||
<i class="iconfont iconyoujiantou"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slide :data="{ field : 'count', label: '文章数量', min:1, max: 30}" v-if="nc.sources != 'diy'"></slide>
|
||||
|
||||
</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>
|
||||
|
||||
<color :data="{ field : 'elementBgColor', 'label' : '文章背景' }"></color>
|
||||
|
||||
<slide v-show="nc.elementAngle == 'round'" :data="{ field : 'topElementAroundRadius', label : '上圆角', max : 50 }"></slide>
|
||||
<slide v-show="nc.elementAngle == 'round'" :data="{ field : 'bottomElementAroundRadius', label : '下圆角', max : 50 }"></slide>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
80
app/component/view/article/js/design.js
Executable file
80
app/component/view/article/js/design.js
Executable file
@@ -0,0 +1,80 @@
|
||||
var articleHtml = '<div></div>';
|
||||
|
||||
Vue.component("article-sources", {
|
||||
template: articleHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
goodsSources: {
|
||||
initial: {
|
||||
text: "默认",
|
||||
icon: "iconmofang"
|
||||
},
|
||||
diy: {
|
||||
text: "手动选择",
|
||||
icon: "iconshoudongxuanze"
|
||||
},
|
||||
},
|
||||
ornamentList: [
|
||||
{
|
||||
type: 'default',
|
||||
text: '默认',
|
||||
},
|
||||
{
|
||||
type: 'shadow',
|
||||
text: '投影',
|
||||
},
|
||||
{
|
||||
type: 'stroke',
|
||||
text: '描边',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
this.$parent.data.ignore = [];//加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
if(Object.keys(this.$parent.data.previewList).length == 0) {
|
||||
for (var i = 1; i < 3; i++) {
|
||||
this.$parent.data.previewList["brand_id_" + ns.gen_non_duplicate(i)] = {
|
||||
article_title: "文章标题",
|
||||
article_abstract: '这里是文章内容',
|
||||
read_num: (i + 1) * 12,
|
||||
category_name: '文章分类',
|
||||
create_time: 1662202804
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
goodsSources: this.goodsSources,
|
||||
ornamentList: this.ornamentList,
|
||||
methods: {
|
||||
addArticle: this.addArticle,
|
||||
timeFormat: this.timeFormat
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
if (vue.data[index].sources === 'diy' && vue.data[index].articleIds.length === 0) {
|
||||
res.code = false;
|
||||
res.message = "请选择文章";
|
||||
}
|
||||
return res;
|
||||
},
|
||||
addArticle: function () {
|
||||
var self = this;
|
||||
articleSelect(function (res) {
|
||||
self.$parent.data.articleIds = res.articleIds;
|
||||
self.$parent.data.previewList = res.list;
|
||||
}, {select_id: self.$parent.data.articleIds.toString()});
|
||||
},
|
||||
timeFormat(time, format){
|
||||
return ns.time_to_date(time, format)
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user