Authored by 郭成尧

label-style

@@ -35,6 +35,21 @@ @@ -35,6 +35,21 @@
35 {{else}} 35 {{else}}
36 <img class="lazy" data-original={{image2 bigImage q=60}}> 36 <img class="lazy" data-original={{image2 bigImage q=60}}>
37 {{/if}} 37 {{/if}}
  38 +
  39 + <div class="label-box">
  40 + <div class="lable-focus">
  41 + <div class="focus-big">
  42 + <div class="focus-small"></div>
  43 + </div>
  44 + </div>
  45 + <div class="lable-info-box">
  46 + <span class="lable-text">这个是商品标题</span>
  47 + </div>
  48 + <div class="lable-btn">
  49 + <span class="iconfont">&#xe62c;</span>
  50 + <span class="iconfont plus">&#xe624;</span>
  51 + </div>
  52 + </div>
38 </div> 53 </div>
39 {{/if}} 54 {{/if}}
40 55
@@ -95,12 +95,73 @@ @@ -95,12 +95,73 @@
95 .big-img-block { 95 .big-img-block {
96 padding-bottom: 5px; 96 padding-bottom: 5px;
97 background: #fff; 97 background: #fff;
  98 + position: relative;
98 99
99 img { 100 img {
100 width: 100%; 101 width: 100%;
101 } 102 }
102 } 103 }
103 104
  105 + .big-img-block > .label-box {
  106 + font-size: 20px;
  107 + overflow: hidden;
  108 + position: absolute;
  109 + top: 30px;
  110 + left: 50px;
  111 +
  112 + .lable-focus {
  113 + float: left;
  114 + display: flex;
  115 + align-items: center;
  116 + width: 46px;
  117 + height: 46px;
  118 + margin-right: 32px;
  119 +
  120 + .focus-big {
  121 + display: flex;
  122 + align-items: center;
  123 + width: 38px;
  124 + height: 38px;
  125 + border-radius: 38px;
  126 + border: 4px solid rgba(253, 157, 43, 0.5);
  127 + justify-content: center;
  128 + }
  129 +
  130 + .focus-small {
  131 + width: 16px;
  132 + height: 16px;
  133 + border-radius: 16px;
  134 + background: rgba(253, 157, 43, 1);
  135 + }
  136 + }
  137 +
  138 + .lable-info-box {
  139 + background-color: rgba(0, 0, 0, 0.6);
  140 + color: #fff;
  141 + padding: 0 20px;
  142 + border-top-left-radius: 40px;
  143 + border-bottom-left-radius: 40px;
  144 + float: left;
  145 + line-height: 46px;
  146 + height: 46px;
  147 + }
  148 +
  149 + .lable-btn {
  150 + background-color: #000;
  151 + color: #fff;
  152 + padding: 0 20px;
  153 + border-top-right-radius: 40px;
  154 + border-bottom-right-radius: 40px;
  155 + float: left;
  156 + line-height: 46px;
  157 + height: 46px;
  158 + }
  159 +
  160 + .lable-btn > .plus {
  161 + font-size: 16px;
  162 + }
  163 + }
  164 +
104 .small-img-block { 165 .small-img-block {
105 padding-bottom: 8px; 166 padding-bottom: 8px;
106 background: #fff; 167 background: #fff;