fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 129f0d558fe563e8dabb799e7c8c3fdbc2f54c63 1 parent e1b4d56d

label-style

Inline Side-by-side
Showing 2 changed files with 76 additions and 0 deletions
... ... @@ -35,6 +35,21 @@
{{else}}
<img class="lazy" data-original={{image2 bigImage q=60}}>
{{/if}}
<div class="label-box">
<div class="lable-focus">
<div class="focus-big">
<div class="focus-small"></div>
</div>
</div>
<div class="lable-info-box">
<span class="lable-text">这个是商品标题</span>
</div>
<div class="lable-btn">
<span class="iconfont">&#xe62c;</span>
<span class="iconfont plus">&#xe624;</span>
</div>
</div>
</div>
{{/if}}
... ...
... ... @@ -95,12 +95,73 @@
.big-img-block {
padding-bottom: 5px;
background: #fff;
position: relative;
img {
width: 100%;
}
}
.big-img-block > .label-box {
font-size: 20px;
overflow: hidden;
position: absolute;
top: 30px;
left: 50px;
.lable-focus {
float: left;
display: flex;
align-items: center;
width: 46px;
height: 46px;
margin-right: 32px;
.focus-big {
display: flex;
align-items: center;
width: 38px;
height: 38px;
border-radius: 38px;
border: 4px solid rgba(253, 157, 43, 0.5);
justify-content: center;
}
.focus-small {
width: 16px;
height: 16px;
border-radius: 16px;
background: rgba(253, 157, 43, 1);
}
}
.lable-info-box {
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 0 20px;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
float: left;
line-height: 46px;
height: 46px;
}
.lable-btn {
background-color: #000;
color: #fff;
padding: 0 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
float: left;
line-height: 46px;
height: 46px;
}
.lable-btn > .plus {
font-size: 16px;
}
}
.small-img-block {
padding-bottom: 8px;
background: #fff;
... ...