Authored by 阿达

全部商品模板

@import "new-arrival", "discount", "list", "detail", "suspend-cart", "hot-rank", "_recommend-for-you.scss", "limit", "_shop-index";
@import "new-arrival", "discount", "list", "detail", "suspend-cart", "hot-rank", "_recommend-for-you.scss", "limit", "_shop-index", "product-category", "shop-prodfile";
... ...
.product-category {
font-size: 30rem / $pxConvertRem;
background-color: #fff;
.allproduct {
position: relative;
padding: 15px 0px;
background: #f8f8f8;
border-top: 15px;
border-bottom: 15px;
padding-left: 32rem / $pxConvertRem;
border-top: 1px solid #e6e6e6;
}
.margin-under-allproduct{
width: 100%;
height: 30rem / $pxConvertRem;
background-color: #f0f0f0;
}
.category-container{
border-top: 1px solid #e6e6e6;
}
.arrow-icon {
position: absolute;
font-size: 12px;
top: 15px;
right: 20px;
}
.allproductParagaraph {
font-size: 18px;
left: 20px;
}
.content {
background: #f8f8f8;
&.hide {
display: none;
}
}
.primary-level {
float: left;
box-sizing: border-box;
width: 100%;
position: absolute;
> li {
position:relative;
height: 89rem / $pxConvertRem;
line-height: 89rem / $pxConvertRem;
padding-left: 32rem / $pxConvertRem;
box-sizing: border-box;
border-bottom: 1px solid #e6e6e6;
background-color: #fff;
}
}
.primary-level-trilangle{
float:right;
margin-right:56%;
}
.trilanglefont {
font-family: "iconfont" !important;
font-size: 30px;
font-style: normal;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
color: #f4f4f4;
}
.sub-level-container {
float: right;
box-sizing: border-box;
background: #f4f4f4;
width: 55%;
height: 100%;
position: relative;
}
.sub-level {
width: 100%;
&.hide {
display: none;
}
> li {
box-sizing: border-box;
height: 89rem / $pxConvertRem;
line-height: 89rem / $pxConvertRem;
border-bottom: 1px solid #e6e6e6;
padding-left: 2rem / $pxConvertRem;
//border-left: 50rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
&.highlight {
background: #dbdbdb;
}
&:last-child {
border-bottom: none;
}
}
a {
display: block;
height: 100%;
width: 100%;
color: #afafaf;
}
}
}
\ No newline at end of file
... ...
.shop-introduce{
.banner {
margin: 30px auto;
width: auto;
height: auto;
display: block;
background-size: 100%;
}
.descripition {
margin: 40px 20px 0px 20px;
font-size: 16px;
line-height: 22px;
padding: 20px 0;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
text-indent:2em;
}
.sign-icon {
font-size: 20px;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: 100;
}
.sign-icon > span {
width:auto;
}
}
.brand{
.brand-list{
margin-left: 20px;
font-size: 18px;
border-bottom: 1px solid #e6e6e6;
text-align: left;
height: 44px;
line-height: 44px;
vertical-align:middle;
display: block;
width: 100%;
}
}
\ No newline at end of file
... ...
... ... @@ -16,7 +16,7 @@
text-indent:2em;
}
.fo {
.sign-icon {
font-size: 20px;
height: 40px;
line-height: 40px;
... ... @@ -24,7 +24,7 @@
font-weight: 100;
}
.fo > span {
.sign-icon > span {
width:auto;
}
... ...
{{> layout/header}}
<div class="good-list-page yoho-page">
{{> product/list}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div>
<div class="shop-introduce">
<a class="banner">
<img src="{{content.shop_logo}}">
</a>
... ... @@ -8,7 +8,7 @@
{{content.shop_intro}}
</div>
<p class="fo">
<p class="sign-icon">
<span class="iconfont">&#xe649;</span>
100%品牌授权正品
</p>
... ...
{{> layout/header}}
{{# brands}}
<a class="brand-list" href="{{url}}">
{{brandname}}
</a>
{{/ brands}}
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="product-category yoho-page">
<div id="allproduct" class="allproduct">
<a href={{allproduct}}>
<p class="allproductParagaraph">全部商品</p>
<i class="arrow-icon iconfont">&#xe614;</i>
</a>
</div>
<div class="margin-under-allproduct">
</div>
<div class="category-container clearfix">
<div class="content">
{{# content}}
<ul class="primary-level">
{{# class}}
<li class="p-level-item">{{name}}
<div class="primary-level-trilangle trilanglefont hide">&#xe64a;</div>
</li>{{/ class}}
</ul>
<div class="sub-level-container hide">
{{# category}}
<ul class="sub-level">
{{# subcategory}}
<li>
<a href={{url}}>
{{category_name}}
</a>
</li>
{{/ subcategory}}
</ul>
{{/ category}}
</div>
{{/ content}}
</div>
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="shop-introduce">
<a class="banner">
<img src="{{content.shop_logo}}">
</a>
<div class="descripition">
{{content.shop_intro}}
</div>
<p class="sign-icon">
<span class="iconfont">&#xe649;</span>
100%品牌授权正品
</p>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...