fe / yohobuy-node · Commits

Go to a project

Authored by 王水玲
Commit ecbe95e3ab97e60eb970222165da7840978b283c 1 parent 9bc6425b

商品素材列表

Inline Side-by-side
Showing 6 changed files with 89 additions and 37 deletions
... ... @@ -14,15 +14,17 @@
<meta content="email=no" name="format-detection" /> {{#dnsPrefetch.hosts}}
<link rel="dns-prefetch" href="{{this}}"> {{/dnsPrefetch.hosts}}
{{#if devEnv}}
<link rel="stylesheet" href="//{{devHost}}:5002/css/index.css">
<link rel="stylesheet" href="//{{devHost}}:5002/css/base.css">
<link rel="stylesheet" href="//{{devHost}}:5002/css/{{#if cssModule}}{{cssModule}}.css{{^}}{{module}}.css{{/if}}">
{{^}}
<link rel="stylesheet" href="//{{#isEqual cdn 'qcloud'}}qcdn.yoho.cn{{^}}cdn.yoho.cn{{/isEqual}}/yohobuy-node/{{version}}/index.css">
<link rel="stylesheet" href="//{{#isEqual cdn 'qcloud'}}qcdn.yoho.cn{{^}}cdn.yoho.cn{{/isEqual}}/yohobuy-node/{{version}}/base.css">
<link rel="stylesheet" href="//{{#isEqual cdn 'qcloud'}}qcdn.yoho.cn{{^}}cdn.yoho.cn{{/isEqual}}/yohobuy-node/{{version}}/{{#if cssModule}}{{cssModule}}.css{{^}}{{module}}.css{{/if}}">
{{/if}}
</head>
<body>
<div class="product_material">
<h1>商品素材列表页</h1>
<h1><i class="logo"></i>商品素材列表页</h1>
<div class="line">
<label>品牌：</label>
<input id="brand" type="text" readonly="readonly">
... ... @@ -37,8 +39,8 @@
<select name="" id="category-1" class="sel"></select>
<select name="" id="category-2" class="sel"></select>
<select name="" id="category-3" class="sel"></select>
<div class="search-recommend-btn">商品素材推荐列表</div>
<div class="search-btn">商品素材列表</div>
<div class="search-recommend-btn">推荐</div>
<div class="search-btn">搜索</div>
</div>
<div class="table-data">
{{> tbl}}
... ...
... ... @@ -23,7 +23,4 @@ module.exports = app => {
// 第三方，如广告联盟
app.use('/3party', require('./apps/3party'));
app.use('/service', require('./apps/service')); // 客服
// 商品素材
app.use('/material', require('./apps/material'));
};
... ...

6.19 KB | W: | H:

6.57 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -10,6 +10,12 @@ var query = {
middleSortId: 0,
smallSortId: 0
};
var brandList = {
list1: [],
list2: [],
list3: [],
list4: []
};
function brandItemEventBind() {
$('#brand_container .item').off().on('click', function() {
... ... @@ -32,6 +38,7 @@ function getBrandList(_index, yhChannel) {
return { name: item, content: data.data.all_list[item] };
});
list['focus' + _index] = true;
brandList['list' + _index] = list;
$('#brand_container').html(brandTmp({ list }));
brandItemEventBind();
});
... ... @@ -106,10 +113,17 @@ $mask.click(function() {
$(document).on('click', '#brand_container .nav span', function() {
var yhChannel = $(this).attr('yh_channel');
var index = $(this).attr('_index');
$('#brand_container .nav span').removeClass('focus');
$(this).addClass('focus');
getBrandList($(this).attr('_index'), yhChannel);
if(brandList['list' + index].length > 0) {
$('#brand_container').html(brandTmp({list: brandList['list' + index]}));
brandItemEventBind();
} else {
getBrandList(index, yhChannel);
}
});
$('.start-time').on('change', function() {
... ...
.product_material {
width: 1200px;
margin: auto;
font-family: '微软雅黑';
font-size: 14px;
.logo {
width: 171px;
height: 40px;
display: inline-block;
background-image: url(../img/sprite.3party.png);
background-position: 0px 0px;
vertical-align: middle;
margin-right: 10px;
}
input, select {
outline: none;
}
select {
margin-right: 10px;
}
h1 {
font-size: 30px;
margin: 15px 0 50px;
text-align: center;
font-size: 22px;
margin: 0 0 50px;
text-align: left;
width: 100%;
padding: 20px;
color: #a5a5a5;
box-sizing: border-box;
border-bottom: 1px solid #e2e2e2;
background: #f7f7f7;
}
/* 过滤 */
.line {
width: 1200px;
margin: 10px auto;
width: 90%;
margin: 20px auto;
}
.sel {
width: 173px;
vertical-align: middle;
height: 24px;
padding: 9px;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid #d6d6d6;
}
label,
... ... @@ -31,8 +56,12 @@
/* 品牌 */
#brand {
position: relative;
height: 24px;
height: 40px;
width: 173px;
padding: 10px;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid #d6d6d6;
label {
cursor: pointer
... ... @@ -41,11 +70,11 @@
#brand_container {
position: absolute;
width: 1200px;
background: #ccc;
width: 90%;
background: #101010;
z-index: 2;
display: none;
height: 800px;
height: 640px;
overflow: auto;
.nav {
... ... @@ -55,26 +84,32 @@
display: inline-block;
width: 25%;
text-align: center;
height: 30px;
line-height: 30px;
height: 40px;
line-height: 40px;
cursor: pointer;
float: left;
color: #fff;
}
.focus {
background: #eee;
background: #ececec;
color: #000;
}
}
.title {
padding: 5px 0;
background: #555;
color: #fff;
text-align: center;
padding: 10px 20px;
background: #f9f9f9;
color: #292929;
font-weight: bold;
text-align: left;
box-sizing: border-box;
}
.content {
background: #fff;
padding: 0 10px;
box-sizing: border-box;
}
.item {
... ... @@ -89,9 +124,11 @@
overflow: hidden;
text-overflow: ellipsis;
margin: 5px 0;
&:hover {
background: #eee;
cursor: pointer;
border-radius: 5px;
}
}
}
... ... @@ -106,9 +143,9 @@
.search-btn {
float: right;
border-radius: 2px;
border-radius: 4px;
background: #000;
padding: 5px 15px;
padding: 10px 25px;
color: #fff;
font-size: 14px;
cursor: pointer;
... ... @@ -117,9 +154,9 @@
.search-recommend-btn {
float: right;
border-radius: 2px;
border-radius: 4px;
background: #000;
padding: 5px 15px;
padding: 10px 25px;
color: #fff;
font-size: 14px;
cursor: pointer;
... ... @@ -127,8 +164,8 @@
/*表格*/
table {
width: 1200px;
margin: 20px auto;
width: 90%;
margin: 35px auto;
}
table {
... ... @@ -142,23 +179,25 @@
}
td {
height: 30px;
height: 36px;
}
.table {
border: 1px solid #cad9ea;
border: 1px solid #d6d6d6;
color: #666;
}
.table th {
background-repeat: repeat-x;
height: 30px;
font-weight: bold;
}
.table td,
.table th {
border: 1px solid #cad9ea;
padding: 0 1em 0;
border: 1px solid #d6d6d6;
padding: 5px;
text-align: center;
}
.table tr.alter {
... ...