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 86 additions and 16 deletions
@@ -7,18 +7,18 @@ @@ -7,18 +7,18 @@
7 <!-- 店招 --> 7 <!-- 店招 -->
8 [[if item.moduleType == 'ShopBanner']] 8 [[if item.moduleType == 'ShopBanner']]
9 [[if item.moduleData]] 9 [[if item.moduleData]]
10 - <div class="modular-editor pc-shop-banner" non-delete="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]"> 10 + <div class="modular-editor pc-shop-banner" non-delete="true" non-added="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
11 <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item"> 11 <img src="[[item.moduleData.data[0].pic]]" alt="#" class="img-item">
12 </div> 12 </div>
13 [[else]] 13 [[else]]
14 - <div class="modular-editor pc-shop-banner" non-delete="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]"> 14 + <div class="modular-editor pc-shop-banner" non-delete="true" non-added="true" data-type="ShopBanner" data-title="编辑店招模块" data-index="[[index]]">
15 <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo"> 15 <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
16 </div> 16 </div>
17 [[/if]] 17 [[/if]]
18 [[/if]] 18 [[/if]]
19 <!-- 导航 --> 19 <!-- 导航 -->
20 [[if item.moduleType == 'ShopNavbar']] 20 [[if item.moduleType == 'ShopNavbar']]
21 - <div class="pc-shop-navbar modular-editor" non-delete="true" data-type="ShopNavbar" data-title="编辑导航条" data-index="[[index]]"> 21 + <div class="pc-shop-navbar modular-editor" non-delete="true" non-added="true" data-type="ShopNavbar" data-title="编辑导航条" data-index="[[index]]">
22 <ul> 22 <ul>
23 <li><a href="javascript:;">店铺首页</a></li> 23 <li><a href="javascript:;">店铺首页</a></li>
24 <li><a href="javascript:;">全部商品</a></li> 24 <li><a href="javascript:;">全部商品</a></li>
@@ -42,13 +42,37 @@ @@ -42,13 +42,37 @@
42 <!-- 整图 --> 42 <!-- 整图 -->
43 [[if item.moduleType == 'ImageSet']] 43 [[if item.moduleType == 'ImageSet']]
44 <div class="modular-editor pc-image-set" data-type="ImageSet" data-title="编辑整图模块" data-index="[[index]]"> 44 <div class="modular-editor pc-image-set" data-type="ImageSet" data-title="编辑整图模块" data-index="[[index]]">
  45 + [[if item.moduleData]]
  46 + [[each item.moduleData.data as data _index]]
  47 + <img src="[[data.pic]]" alt="#" class="img-item">
  48 + [[/each]]
  49 + [[else]]
45 <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo"> 50 <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
  51 + [[/if]]
46 </div> 52 </div>
47 [[/if]] 53 [[/if]]
48 <!-- 小图文 --> 54 <!-- 小图文 -->
49 [[if item.moduleType == 'Teletext']] 55 [[if item.moduleType == 'Teletext']]
50 <div class="modular-editor pc-tele-text" data-type="Teletext" data-title="编辑小图文模块" data-index="[[index]]"> 56 <div class="modular-editor pc-tele-text" data-type="Teletext" data-title="编辑小图文模块" data-index="[[index]]">
51 - <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo"> 57 + [[if item.moduleData]]
  58 + [[each item.moduleData.data as data _index]]
  59 + <div class="tele-text-item">
  60 + <div class="classic-name">
  61 + <div class="title">[[data.text]]</div>
  62 + </div>
  63 + <img src="[[data.pic]]" alt="#" class="img-item">
  64 + </div>
  65 + [[/each]]
  66 + [[else]]
  67 + <div class="tele-text-item">
  68 + <div class="classic-name">
  69 + <div class="title">文字内容</div>
  70 + </div>
  71 + <div class="img-area">
  72 + <img src="/static/assets/images/decorator/yoho-logo.png" alt="#" class="logo">
  73 + </div>
  74 + </div>
  75 + [[/if]]
52 </div> 76 </div>
53 [[/if]] 77 [[/if]]
54 [[/each]] 78 [[/each]]
@@ -257,14 +257,16 @@ var Bll = { @@ -257,14 +257,16 @@ var Bll = {
257 // 增加双击可编辑的提示信息 257 // 增加双击可编辑的提示信息
258 $(this).attr('title', '双击以编辑模块'); 258 $(this).attr('title', '双击以编辑模块');
259 259
260 - var _this = $(this);  
261 - var moduleType = $(this).data('type');  
262 - var editorTitle = $(this).data('title');  
263 - var height = $(this).height();  
264 - var index = $(_this).data("index");  
265 - var nonDelete = $(_this).attr("non-delete"); // 模块是否不可删除，为true，不可删除  
266 -  
267 - var editorIcon = ''; 260 + let _this = $(this);
  261 + let moduleType = $(this).data('type');
  262 + let editorTitle = $(this).data('title');
  263 + let height = $(this).height();
  264 + let index = $(_this).data("index");
  265 + let nonDelete = $(_this).attr("non-delete"); // 模块是否不可删除，为true，不可删除
  266 + let nonAdded = $(_this).attr("non-added"); // 为true，模块下无需添加模块
  267 +
  268 +
  269 + let editorIcon = '';
268 // 边框 270 // 边框
269 editorIcon += '<div class="editor-border"></div>'; 271 editorIcon += '<div class="editor-border"></div>';
270 272
@@ -288,7 +290,9 @@ var Bll = { @@ -288,7 +290,9 @@ var Bll = {
288 editorIcon += '<a class="editor-icon" href="javascript:;" title="编辑模块"><img src="/static/assets/images/decorator/editor-icon.png"></a>'; 290 editorIcon += '<a class="editor-icon" href="javascript:;" title="编辑模块"><img src="/static/assets/images/decorator/editor-icon.png"></a>';
289 291
290 // 添加模块 292 // 添加模块
291 - editorIcon += '<a class="add-module-icon" href="javascript:;" title="添加模块"><img src="/static/assets/images/decorator/add-icon.png"></a>'; 293 + if(!nonAdded) {
  294 + editorIcon += '<a class="add-module-icon" href="javascript:;" title="添加模块"><img src="/static/assets/images/decorator/add-icon.png"></a>';
  295 + }
292 296
293 _this.append(editorIcon); 297 _this.append(editorIcon);
294 298
@@ -57,7 +57,7 @@ @@ -57,7 +57,7 @@
57 /* 整图模块 */ 57 /* 整图模块 */
58 .left-area .pc-image-set { 58 .left-area .pc-image-set {
59 width: 160px; 59 width: 160px;
60 - height: 240px; 60 + min-height: 240px;
61 text-align: center; 61 text-align: center;
62 } 62 }
63 63
@@ -65,12 +65,54 @@ @@ -65,12 +65,54 @@
65 top: 111px !important; 65 top: 111px !important;
66 } 66 }
67 67
  68 +.pc-image-set .img-item {
  69 + width: 160px;
  70 + height: 240px;
  71 +}
  72 +
  73 +/* 小图文模块 */
68 .left-area .pc-tele-text { 74 .left-area .pc-tele-text {
69 width: 160px; 75 width: 160px;
  76 + min-height: 50px;
  77 +}
  78 +
  79 +.tele-text-item .classic-name {
  80 + width: 96px;
  81 + display: inline-block;
  82 + line-height: 14px;
  83 +}
  84 +
  85 +.tele-text-item .classic-name .title {
  86 + font-size: 14px;
  87 + font-weight: 700;
  88 + text-overflow: ellipsis;
  89 + white-space: nowrap;
  90 + overflow: hidden;
  91 + float: left;
  92 + padding-left: 14px;
  93 + margin-top: 15px;
  94 +}
  95 +
  96 +.tele-text-item .img-item {
  97 + width: 50px;
70 height: 50px; 98 height: 50px;
71 - text-align: center; 99 + float: right;
  100 +}
  101 +
  102 +.pc-tele-text .img-area {
  103 + float: right;
  104 + width: 50px;
  105 + height: 100%;
  106 + background: #E7E7E7;
72 } 107 }
73 108
74 .pc-tele-text .logo { 109 .pc-tele-text .logo {
75 - top: 16px !important; 110 + top: 15px!important;
  111 + width: 50px;
  112 +}
  113 +
  114 +.pc-tele-text .tele-text-item {
  115 + margin-top: 5px;
  116 + height: 50px;
  117 + background: #F5F5F5;
76 } 118 }