fe / yohobuy-portal-fe2 · Commits

Go to a project

Authored by leo
Commit 1c8d63946021271b664b7c325ee6a0f0a009e836 1 parent d2e56a11

Update: PC端，增加小图文模块

Inline Side-by-side
Showing 3 changed files with 84 additions and 14 deletions
... ... @@ -7,18 +7,18 @@
<!-- 店招 -->
[[if item.moduleType == 'ShopBanner']]
[[if item.moduleData]]
<div class="modular-editor pc-shop-banner" non-delete="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
<div class="modular-editor pc-shop-banner" non-delete="true" non-added="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
<img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item">
</div>
[[else]]
<div class="modular-editor pc-shop-banner" non-delete="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
<div class="modular-editor pc-shop-banner" non-delete="true" non-added="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
<img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
</div>
[[/if]]
[[/if]]
<!-- 导航 -->
[[if item.moduleType == 'ShopNavbar']]
<div class="pc-shop-navbar modular-editor" non-delete="true" data-type="ShopNavbar" data-title="编辑导航条" data-index="[[index]]">
<div class="pc-shop-navbar modular-editor" non-delete="true" non-added="true" data-type="ShopNavbar" data-title="编辑导航条" data-index="[[index]]">
<ul>
<li><a href="javascript:;">店铺首页</a></li>
<li><a href="javascript:;">全部商品</a></li>
... ... @@ -42,14 +42,38 @@
<!-- 整图 -->
[[if item.moduleType == 'ImageSet']]
<div class="modular-editor pc-image-set" data-type="ImageSet" data-title="编辑整图模块" data-index="[[index]]">
[[if item.moduleData]]
[[each item.moduleData.data as data _index]]
<img src="[[data.pic]]" alt="#" class="img-item">
[[/each]]
[[else]]
<img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
[[/if]]
</div>
[[/if]]
<!-- 小图文 -->
[[if item.moduleType == 'Teletext']]
<div class="modular-editor pc-tele-text" data-type="Teletext" data-title="编辑小图文模块" data-index="[[index]]">
[[if item.moduleData]]
[[each item.moduleData.data as data _index]]
<div class="tele-text-item">
<div class="classic-name">
<div class="title">[[data.text]]</div>
</div>
<img src="[[data.pic]]" alt="#" class="img-item">
</div>
[[/each]]
[[else]]
<div class="tele-text-item">
<div class="classic-name">
<div class="title">文字内容</div>
</div>
<div class="img-area">
<img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
</div>
</div>
[[/if]]
</div>
[[/if]]
[[/each]]
</div>
... ...
... ... @@ -257,14 +257,16 @@ var Bll = {
// 增加双击可编辑的提示信息
$(this).attr('title', '双击以编辑模块');
var _this = $(this);
var moduleType = $(this).data('type');
var editorTitle = $(this).data('title');
var height = $(this).height();
var index = $(_this).data("index");
var nonDelete = $(_this).attr("non-delete"); // 模块是否不可删除，为true，不可删除
var editorIcon = '';
let _this = $(this);
let moduleType = $(this).data('type');
let editorTitle = $(this).data('title');
let height = $(this).height();
let index = $(_this).data("index");
let nonDelete = $(_this).attr("non-delete"); // 模块是否不可删除，为true，不可删除
let nonAdded = $(_this).attr("non-added"); // 为true，模块下无需添加模块
let editorIcon = '';
// 边框
editorIcon += '<div class="editor-border"></div>';
... ... @@ -288,7 +290,9 @@ var Bll = {
editorIcon += '<a class="editor-icon" href="javascript:;" title="编辑模块"><img src="/static/assets/images/decorator/editor-icon.png"></a>';
// 添加模块
if(!nonAdded) {
editorIcon += '<a class="add-module-icon" href="javascript:;" title="添加模块"><img src="/static/assets/images/decorator/add-icon.png"></a>';
}
_this.append(editorIcon);
... ...
... ... @@ -57,7 +57,7 @@
/* 整图模块 */
.left-area .pc-image-set {
width: 160px;
height: 240px;
min-height: 240px;
text-align: center;
}
... ... @@ -65,12 +65,54 @@
top: 111px !important;
}
.pc-image-set .img-item {
width: 160px;
height: 240px;
}
/* 小图文模块 */
.left-area .pc-tele-text {
width: 160px;
min-height: 50px;
}
.tele-text-item .classic-name {
width: 96px;
display: inline-block;
line-height: 14px;
}
.tele-text-item .classic-name .title {
font-size: 14px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
float: left;
padding-left: 14px;
margin-top: 15px;
}
.tele-text-item .img-item {
width: 50px;
height: 50px;
text-align: center;
float: right;
}
.pc-tele-text .img-area {
float: right;
width: 50px;
height: 100%;
background: #E7E7E7;
}
.pc-tele-text .logo {
top: 16px !important;
top: 15px!important;
width: 50px;
}
.pc-tele-text .tele-text-item {
margin-top: 5px;
height: 50px;
background: #F5F5F5;
}
\ No newline at end of file
... ...