规格快捷操作
parent
daf255910a
commit
896f57788d
|
|
@ -42,6 +42,9 @@
|
|||
<li>
|
||||
<a href="#goods-nav-seo">SEO</a>
|
||||
</li>
|
||||
<li class="am-text-center am-padding-xs nav-shrink-submit">
|
||||
<i class="am-icon-angle-double-right am-icon-sm"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
|
@ -165,9 +168,68 @@
|
|||
<!-- 规格 -->
|
||||
<div id="goods-nav-operations" class="division-block" data-spec-add-max-number="{{:MyC('common_spec_add_max_number', 3, true)}}">
|
||||
<label class="block nav-detail-title">商品规格</label>
|
||||
<div class="spec-quick am-margin-bottom-lg">
|
||||
<span class="business-operations-submit quick-spec-title-add">+快捷操作</span>
|
||||
<span class="business-operations-submit am-margin-left-sm am-icon-gg quick-spec-created">生成规格</span>
|
||||
<div class="goods-specifications">
|
||||
<table class="am-table am-table-bordered am-table-centered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="spec-quick-th-title">规格名</th>
|
||||
<th class="spec-quick-th-value">规格值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="am-text-middle">
|
||||
<i class="am-close am-close-spin quick-title-remove" data-index="168">×</i>
|
||||
<input type="text" name="spec_quick_title_0" placeholder="规格名" />
|
||||
</td>
|
||||
<td class="spec-quick-td-value am-cf">
|
||||
<div class="am-fl am-margin-xs value-item">
|
||||
<input type="text" class="am-fl" name="spec_quick_value_0" placeholder="规格值" />
|
||||
<i class="am-close am-close-spin quick-value-remove" data-index="168">×</i>
|
||||
</div>
|
||||
<div class="am-fl am-margin-xs value-item">
|
||||
<input type="text" class="am-fl" name="spec_quick_value_0" placeholder="规格值" />
|
||||
<i class="am-close am-close-spin quick-value-remove" data-index="168">×</i>
|
||||
</div>
|
||||
|
||||
<div class="am-fl am-margin-xs value-item am-text-left">
|
||||
<span class="business-operations-submit quick-spec-value-add">+添加规格值</span>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="am-text-middle">
|
||||
<i class="am-close am-close-spin quick-title-remove" data-index="168">×</i>
|
||||
<input type="text" name="spec_quick_title_0" placeholder="规格名" />
|
||||
</td>
|
||||
<td class="spec-quick-td-value am-cf">
|
||||
<div class="am-fl am-margin-xs value-item">
|
||||
<input type="text" class="am-fl" name="spec_quick_value_0" placeholder="规格值" />
|
||||
<i class="am-close am-close-spin quick-value-remove" data-index="168">×</i>
|
||||
</div>
|
||||
<div class="am-fl am-margin-xs value-item">
|
||||
<input type="text" class="am-fl" name="spec_quick_value_0" placeholder="规格值" />
|
||||
<i class="am-close am-close-spin quick-value-remove" data-index="168">×</i>
|
||||
</div>
|
||||
|
||||
<div class="am-fl am-margin-xs value-item am-text-left">
|
||||
<span class="business-operations-submit quick-spec-value-add">+添加规格值</span>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="business-operations-submit specifications-nav-title-add">+添加规格</span>
|
||||
<div class="goods-specifications">
|
||||
<table class="am-table am-table-bordered am-table-centered specifications-table m-t-10 m-b-10">
|
||||
<table class="am-table am-table-bordered am-table-centered specifications-table am-margin-bottom-sm">
|
||||
<thead class="title-nav">
|
||||
<tr>
|
||||
{{if !empty($specifications['type'])}}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
return [
|
||||
// 开发模式
|
||||
'is_develop' => false,
|
||||
'is_develop' => true,
|
||||
|
||||
// 默认编码
|
||||
'default_charset' => 'utf-8',
|
||||
|
|
|
|||
|
|
@ -1,50 +1,134 @@
|
|||
/**
|
||||
* 列表
|
||||
*/
|
||||
.form-keyword { width: 55% !important; display: initial !important; }
|
||||
.more-submit input { display: none; }
|
||||
.param-where, .param-date input { display: initial !important; }
|
||||
.form-keyword {
|
||||
width:55% !important;
|
||||
display:initial !important;
|
||||
}
|
||||
.more-submit input {
|
||||
display:none;
|
||||
}
|
||||
.param-where,.param-date input {
|
||||
display:initial !important;
|
||||
}
|
||||
@media only screen and (max-width: 641px) {
|
||||
.param-where { width: 100% !important; margin-left: 0px !important; }
|
||||
.param-date input { width: 47% !important; }
|
||||
.images-list li { width: calc( 50% - 10px) !important; }
|
||||
.images-list { width: 100%; }
|
||||
.view-list .am-table tr th:nth-child(1) { width: 150px; }
|
||||
.param-where {
|
||||
width:100% !important;
|
||||
margin-left:0px !important;
|
||||
}
|
||||
.param-date input {
|
||||
width:47% !important;
|
||||
}
|
||||
.images-list li {
|
||||
width:calc( 50% - 10px) !important;
|
||||
}
|
||||
.images-list {
|
||||
width:100%;
|
||||
}
|
||||
.view-list .am-table tr th:nth-child(1) {
|
||||
width:150px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 641px) {
|
||||
.param-where { width: 32% !important; float: left; }
|
||||
.param-date input { width: 45% !important; }
|
||||
.param-where:nth-child(1) { margin-left: 0px !important; }
|
||||
.images-list { width: 75%; }
|
||||
.view-list .am-table tr th:nth-child(1) { width: 300px; }
|
||||
.param-where {
|
||||
width:32% !important;
|
||||
float:left;
|
||||
}
|
||||
.param-date input {
|
||||
width:45% !important;
|
||||
}
|
||||
.param-where:nth-child(1) {
|
||||
margin-left:0px !important;
|
||||
}
|
||||
.images-list {
|
||||
width:75%;
|
||||
}
|
||||
.view-list .am-table tr th:nth-child(1) {
|
||||
width:300px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 321px) {
|
||||
.view-operation button { margin: 2px 0px; }
|
||||
.view-operation button {
|
||||
margin:2px 0px;
|
||||
}
|
||||
}
|
||||
.goods-list.am-table .goods-images {
|
||||
width:60px;
|
||||
height:60px;
|
||||
float:left;
|
||||
margin-right:5px;
|
||||
}
|
||||
.goods-list.am-table .goods-images { width: 60px; height: 60px; float: left; margin-right: 5px; }
|
||||
|
||||
/**
|
||||
* 滚动导航
|
||||
*/
|
||||
.goods-nav { background: #f5f5f5; top: 100px; right: 0; width: 110px; position: fixed; z-index: 1000; border: 1px solid #eee; border-right: 0px; }
|
||||
.goods-nav ul { margin: 0; padding: 0; }
|
||||
.goods-nav li { display: inline-block; border-bottom: 1px solid #eee; width: 100%; }
|
||||
.goods-nav li:last-child { border-bottom: 0px; }
|
||||
.goods-nav li a { color: #666; padding: 10px 15px; display: inline-block; width: 100%; }
|
||||
.goods-nav li a:hover, .goods-nav-active { color: #333; background: #eee; }
|
||||
.goods-nav {
|
||||
background:#f5f5f5;
|
||||
top:100px;
|
||||
right:0;
|
||||
width:110px;
|
||||
position:fixed;
|
||||
z-index:1000;
|
||||
border:1px solid #eee;
|
||||
border-right:0px;
|
||||
}
|
||||
.goods-nav ul {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.goods-nav li {
|
||||
display:inline-block;
|
||||
border-bottom:1px solid #eee;
|
||||
width:100%;
|
||||
}
|
||||
.goods-nav li:last-child {
|
||||
border-bottom:0px;
|
||||
}
|
||||
.goods-nav li a {
|
||||
color:#666;
|
||||
padding:10px 15px;
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
}
|
||||
.goods-nav li a:hover,.goods-nav-active {
|
||||
color:#333;
|
||||
background:#eee;
|
||||
}
|
||||
.goods-nav li.nav-shrink-submit {
|
||||
background: #eaeaea;
|
||||
cursor: pointer;
|
||||
}
|
||||
.goods-nav-retract {
|
||||
/*right: -110px;*/
|
||||
}
|
||||
.goods-nav-retract .nav-shrink-submit {
|
||||
position: absolute;
|
||||
/*left: -50px;*/
|
||||
/*width: 50px;*/
|
||||
}
|
||||
|
||||
/**
|
||||
* 区域分割
|
||||
*/
|
||||
.division-block { margin-bottom: 30px; }
|
||||
.division-block .nav-detail-title { border-bottom: 3px ridge #c7c7c7; padding: 8px 5px 5px 5px; margin-bottom: 10px; background: #f3f3f3; font-weight: bold; }
|
||||
.division-block {
|
||||
margin-bottom:30px;
|
||||
}
|
||||
.division-block .nav-detail-title {
|
||||
border-bottom:3px ridge #c7c7c7;
|
||||
padding:8px 5px 5px 5px;
|
||||
margin-bottom:10px;
|
||||
background:#f3f3f3;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* 规格
|
||||
*/
|
||||
.specifications-table .title-nav th {
|
||||
.specifications-table .title-nav th,
|
||||
.spec-quick table thead th {
|
||||
background-color: #f5f7fa;
|
||||
position: relative;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.specifications-table .title-nav th input {
|
||||
width: calc(100% - 25px);
|
||||
|
|
@ -85,14 +169,86 @@
|
|||
* 属性
|
||||
* app详情
|
||||
*/
|
||||
i.drag-sort-submit { margin-left: 30px; }
|
||||
ul { margin: 0px; padding: 0px; overflow: hidden; }
|
||||
.content-app-items > li { border: 3px dashed #eee; padding: 10px; }
|
||||
ul li { list-style-type: none; }
|
||||
i.drag-sort-submit {
|
||||
margin-left:30px;
|
||||
}
|
||||
ul {
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.content-app-items > li {
|
||||
border:3px dashed #eee;
|
||||
padding:10px;
|
||||
}
|
||||
ul li {
|
||||
list-style-type:none;
|
||||
}
|
||||
|
||||
/**
|
||||
* app详情
|
||||
*/
|
||||
.content-app-left, .content-app-right { border-bottom: 0 !important; }
|
||||
.content-app-items li { padding-bottom: 10px; margin-bottom: 20px; overflow: hidden; }
|
||||
.content-app-left, .content-app-right { width: 45% !important; display: inline-table; margin-bottom: 5px; padding-right: 5px !important; }
|
||||
.content-app-left,.content-app-right {
|
||||
border-bottom:0 !important;
|
||||
}
|
||||
.content-app-items li {
|
||||
padding-bottom:10px;
|
||||
margin-bottom:20px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.content-app-left,.content-app-right {
|
||||
width:45% !important;
|
||||
display:inline-table;
|
||||
margin-bottom:5px;
|
||||
padding-right:5px !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* 规格快捷添加
|
||||
*/
|
||||
.spec-quick table td,
|
||||
.spec-quick table td.spec-quick-td-value .value-item {
|
||||
position: relative;
|
||||
}
|
||||
.spec-quick table td.am-text-middle {
|
||||
padding-right: 25px;
|
||||
}
|
||||
.spec-quick-td-value .value-item input {
|
||||
width: calc(100% - 23px) !important;
|
||||
}
|
||||
.spec-quick table td.am-text-middle i.quick-title-remove,
|
||||
.spec-quick table td.spec-quick-td-value i.quick-value-remove {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
z-index: 2;
|
||||
}
|
||||
.spec-quick table td.spec-quick-td-value i.quick-value-remove {
|
||||
top: 2px;
|
||||
}
|
||||
.spec-quick .goods-specifications {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 641px) {
|
||||
.spec-quick-th-title {
|
||||
width: 150px;
|
||||
}
|
||||
.spec-quick-td-value .value-item {
|
||||
width: calc(30% - 12px) !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1025px) {
|
||||
.spec-quick-td-value .value-item {
|
||||
width: calc(20% - 12px) !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 641px) {
|
||||
.spec-quick-th-title {
|
||||
width: 20%;
|
||||
}
|
||||
.spec-quick-td-value .value-item {
|
||||
width: calc(50% - 12px) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,29 @@ $(function()
|
|||
{
|
||||
$('.goods-nav li a').removeClass('goods-nav-active');
|
||||
$(this).addClass('goods-nav-active');
|
||||
})
|
||||
});
|
||||
|
||||
// 商品导航收缩
|
||||
$('.goods-nav li.nav-shrink-submit').on('click', function()
|
||||
{
|
||||
if($(this).find('i').hasClass('am-icon-angle-double-right'))
|
||||
{
|
||||
$(this).find('i').removeClass('am-icon-angle-double-right');
|
||||
$(this).find('i').addClass('am-icon-angle-double-left');
|
||||
$(this).parents('.goods-nav').addClass('goods-nav-retract');
|
||||
$('.goods-nav-retract').animate({right:'-110px'}, 500, function()
|
||||
{
|
||||
$('.goods-nav-retract li.nav-shrink-submit').animate({width: '50px', left:'-51px'});
|
||||
});
|
||||
|
||||
} else {
|
||||
$(this).find('i').removeClass('am-icon-angle-double-left');
|
||||
$(this).find('i').addClass('am-icon-angle-double-right');
|
||||
$(this).parents('.goods-nav').removeClass('goods-nav-retract');
|
||||
$('.goods-nav').animate({right:'-0px'});
|
||||
$('.goods-nav li.nav-shrink-submit').animate({width: '100%', left:'0px'});
|
||||
}
|
||||
});
|
||||
|
||||
// 规格列添加
|
||||
$('.specifications-nav-title-add').on('click', function()
|
||||
|
|
@ -197,4 +219,26 @@ $(function()
|
|||
}
|
||||
$extends_popup.modal();
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 快捷操作
|
||||
// 规格列添加
|
||||
$('.quick-spec-title-add').on('click', function()
|
||||
{
|
||||
var spec_max = $('#goods-nav-operations').data('spec-add-max-number') || 3;
|
||||
if($('.spec-quick table tbody tr').length >= spec_max)
|
||||
{
|
||||
Prompt('最多添加'+spec_max+'列规格');
|
||||
return false;
|
||||
}
|
||||
|
||||
Prompt('hello');
|
||||
});
|
||||
|
||||
// 生成规格
|
||||
$('.quick-spec-created').on('click', function()
|
||||
{
|
||||
Prompt('world');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,3 +1,13 @@
|
|||
// 楼层聚合数据高度处理
|
||||
function floor_resize_handle()
|
||||
{
|
||||
$('.floor').each(function(k, v)
|
||||
{
|
||||
var height = $(this).find('.goods-list').height();
|
||||
$(this).find('.aggregation').css('height', ((window.innerWidth || $(window).width()) <= 640) ? 'auto' : height+'px');
|
||||
});
|
||||
}
|
||||
|
||||
$(function()
|
||||
{
|
||||
// 新闻轮播
|
||||
|
|
@ -19,21 +29,15 @@ $(function()
|
|||
}, 3000);
|
||||
}
|
||||
|
||||
// 楼层聚合数据高度处理
|
||||
function floor_resize_handle()
|
||||
{
|
||||
$('.floor').each(function(k, v)
|
||||
{
|
||||
var height = $(this).find('.goods-list').height();
|
||||
$(this).find('.aggregation').css('height', ((window.innerWidth || $(window).width()) <= 640) ? 'auto' : height+'px');
|
||||
});
|
||||
}
|
||||
floor_resize_handle();
|
||||
|
||||
// 浏览器窗口实时事件
|
||||
$(window).resize(function()
|
||||
{
|
||||
floor_resize_handle();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$(window).load(function()
|
||||
{
|
||||
floor_resize_handle();
|
||||
});
|
||||
Loading…
Reference in New Issue