拼单秒杀页面

后端研发-倪永富
1 parent 21457b39
Showing 32 changed files with 557 additions and 99 deletions
app.wxss
images/00.png
images/111.png
images/classify.png
images/clock-black.png
images/clock-rad.png
images/cosmetics.png
images/fire-black.png
images/fire-red.png
images/fril.png
images/man_region.png
images/mask.png
images/nursing.png
images/scanning.png
images/seckill-ttitle.png
images/seckill_top_img.jpg
images/skincare.png
images/team.jpg
images/title.png
images/top-img.png
@@ -312,9 +312,12 @@ color: #b9b9b9;
 position: fixed;
  
 }
-.yellow{
+.yellow-b{
   background-color: #ffb03f;
 }
+.yellow-co{
+  color: #ffb03f;
+}
 .green{
   background-color: #16ba63;
 }
@@ -346,4 +349,4 @@ background: #ffe3e2;
 }
 .fs40 {
   font-size: 40rpx;
-}
 \ No newline at end of file
+}
-var e = getApp(), i = e.request, a = e.globalData.setting,os=a,ut = require("../../../utils/util.js");
+var e = getApp(), 
+i = e.request,
+ a = e.globalData.setting,
+ os=a,ut = require("../../../utils/util.js");
 var regeneratorRuntime = require('../../../utils/runtime.js');
  
 Page({
@@ -11,6 +14,7 @@ Page({
         timer:null,
         ismore:1,
         isshow:0,
+      iurl: os.imghost,
     },
  
     onShow: function(t) {
 <block wx:if="{{isshow}}">
-<view class="kill-time">
-    <view class="theader" >
-        <view bindtap='tip' data-ty="1" class="timeac left {{type==1?'active':''}}">进行中</view>
-        <view bindtap='tip' data-ty="0"  class="timeac right {{type==0?'active':''}}">即将开始</view>
-    </view>
-</view>
+
+<view class=" body_frame">
+
+<image class="xc-top-img" src="../../../images/team.jpg">
+</image>
+
+
+
+
 <view class="kill-list">
     <view class="kill-item" wx:for="{{goodlist}}" >
-        <navigator class="kill-pic" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}">
+        <navigator class="kill-pic " url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}">
             <image class="wh100" src="{{url+item.original_img}}" data-val="{{item.original_img}}"
                   data-errorimg="goodlist[{{index}}].original_img" binderror="bind_bnerr2" lazy-load="true"></image>
-             <view wx:if="{{item.kttype==1}}"  class="tbiao">商家团</view>
-             <view wx:if="{{item.kttype==2}}"  class="tbiao">会员团</view>
-             <view wx:if="{{item.kttype==3}}"  class="tbiao">阶梯团</view>
+             
         </navigator>
         <view class="kill-cont">
             <navigator class="goods-name ellipsis-2" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}">{{item.title}}</navigator>
-            <view class="tneirong">已团{{item.buy_num}}件  {{item.ct_num}}人团</view>
-            <view class="goods-num">
-                <view>
-                    <view class="co-red">￥{{item.price}}<span class="underline">￥{{item.market_price}}</span></view>
-                    <view>
+            <view class="flex">
+            <view class="tneirong red-b flex-vertical rel" wx:if="{{type==1}}">
+            <image class="xc-team-img abs" src="../../../images/fril.png"></image>
+            已拼11{{item.buy_num}}份</view>
+            <view class="fs20 flex xc-people-val-frame" 
+            style="border-color:{{type==1?'#d60021':'#059de5'}};margin-left:{{type==1?'15rpx':'0rpx'}}">
+            <view class=" flex-center val-img {{type==1?'red-b':'blue_b'}}">
+            <image class="people-img"src="{{iurl}}/miniapp/images/bai-ren.png"></image>
+            </view>
+           <text  class="{{type==1?'red-co':'blue_c'}}" style="margin-left:8rpx; margin-right:8rpx">{{item.ct_num}}人团</text> 
+            </view>
+<view class="fs20 blue_c time-blue" wx:if="{{type==0}}">
+                        距开始:
                         <text class='tui-conutdown-box'>{{item.djs.day}}</text>天
                         <text class='tui-conutdown-box'>{{item.djs.hou}}</text>时
                         <text class='tui-conutdown-box'>{{item.djs.min}}</text>分
                         <text class='tui-conutdown-box tui-countdown-bg'>{{item.djs.sec}}</text>秒
                     </view>
+
+
+            </view>
+              <view class="fs24 red-co" wx:if="{{type==1}}">
+                        <text class='tui-conutdown-box'>{{item.djs.day}}</text>天
+                        <text class='tui-conutdown-box'>{{item.djs.hou}}</text>时
+                        <text class='tui-conutdown-box'>{{item.djs.min}}</text>分
+                        <text class='tui-conutdown-box tui-countdown-bg'>{{item.djs.sec}}</text>秒
+                    </view>
+            <view class="goods-num"style="margin-top:{{type==0?'70rpx':'40rpx'}}">
+                <view>
+                
+                    <view class="fs40 flex  xc-top15 {{type==1?'red-co ai-bas':'blue_c'}}">
+                    <text class="fs28 {{type==0?'martop13':''}}">￥</text>
+                   <text style="margin-left:-5rpx">{{item.price}}</text>
+                    <span class="underline {{type==0?'martop18':''}}">零售价￥{{item.market_price}}</span>
+                    </view>
+                  
                 </view>
-                <view class="kill-btn ">
-                     <navigator class="huise"  url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{type==0 && item.kttype==1 }}" >去参团</navigator>
-                     <navigator class="huise"  url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{type==0 && item.kttype==2 }}" >去开团</navigator>
-                     <navigator class="huise"  url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{type==0 && item.kttype==3 }}" >去开团</navigator>
+                <view class="kill-btn">
+                     <navigator class="huise"style="background-color: #059de5;"   url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{type==0 && item.kttype==1 }}">即将开始</navigator>
+                     <navigator class="huise"style="background-color: #059de5;"   url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{type==0 && item.kttype==2 }}" >即将开始</navigator>
+                     <navigator class="huise"style="background-color: #059de5;"   url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{type==0 && item.kttype==3 }}" >即将开始</navigator>
  
-                    <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{item.status==1 && type==1 && item.kttype==1}}">去参团</navigator>
+                    <navigator class="blue_b" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{item.status==1 && type==1 && item.kttype==1}}">去参团</navigator>
                     <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{item.status==1 && type==1 && item.kttype==2}}">去开团</navigator>
                     <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{item.status==1 && type==1 && item.kttype==3}}">去开团</navigator>
  
@@ -42,6 +69,21 @@
         </view>
     </view>
 </view>
+<view class="kill-time xc-seckill-bottom">
+    
+     <view class="theader" >
+        <view bindtap='tip' data-ty="1" class="xc-border-right flex-center timeac left {{type==1?'active':''}}">
+        <image class="xc-bottom"
+        src="{{type==1?'../../../images/fire-red.png':'../../../images/fire-black.png'}}"></image>
+        火热进行中</view>
+        <view bindtap='tip' data-ty="0"  class=" flex-center timeac right {{type==0?'active':''}}">
+        <image class="xc-bottom"
+        src="{{type==0?'../../../images/clock-rad.png':'../../../images/clock-black.png'}}"></image>
+        即将开始</view>
+    </view>
+
+</view>
  
 <view class="no-more" wx:if="{{goodlist.length==0}}">没有相关内容</view>
+</view>
 </block>
 \ No newline at end of file
+page{
+  background: #eee
+}
+.kill-list{
+  width: 95%;
+  margin-top: -50rpx;
+  position:absolute;
+  left: 2.5%;
+  height: 807rpx;
+overflow-y: scroll;
+
+
+}
 .kill-time {
     text-align: center;
     justify-content: space-around;
     align-items: center;
-    height: 178rpx;
+    height: 101rpx;
     border-bottom: 1px solid #ddd;
     border-top: 1px solid #ddd;
     background-color: #f6f6f6;
 }
 .kill-time .theader{
-    width: 86%; display: flex; margin: 0 auto;
+      display: flex; margin: 0 auto; align-items: center;
+   height: 100rpx;
+
 }
  
+
 .kill-time .theader .timeac {
-    font-size: 32rpx; height: 78rpx; line-height:78rpx; width: 50%; margin-top: 50rpx;
+    font-size: 32rpx; height:100%; width: 50%; 
     color: #333; background-color: #fff;
+
 }
-.kill-time .theader .timeac.left{border-top-left-radius: 86rpx; border-bottom-left-radius: 86rpx;}
-.kill-time .theader .timeac.right{border-top-right-radius: 86rpx; border-bottom-right-radius: 86rpx;}
-.kill-time .theader .timeac.active{background-color: #c4182e;color: #fff}
+
+/* .kill-time .theader .timeac.left{border-top-left-radius: 86rpx; border-bottom-left-radius: 86rpx;}
+.kill-time .theader .timeac.right{border-top-right-radius: 86rpx; border-bottom-right-radius: 86rpx;} */
+.kill-time .theader .timeac.active{color: #c4182e}
+
  
 .kill-item {
-    display: flex;
+     display: flex;
     justify-content: space-between;
     background-color: #fff;
     padding: 10rpx 20rpx;
     margin-bottom: 10rpx;
+    border-radius: 10rpx;
+    height: 249rpx;
+    align-items: center;
+    padding-left: 20rpx;
+   
+
 }
  
 .kill-pic {
-    width: 200rpx;
-    height: 200rpx;
+    width: 215rpx;
+    height: 215rpx;
     position: relative;
 }
  
@@ -40,23 +65,28 @@
 }
  
 .kill-cont {
-    width: 480rpx;
+   width: 440rpx;
+    height: 215rpx;
+    margin-left: 16rpx;
 }
  
 .goods-name {
-    height: 48rpx;
-    line-height: 48rpx;
-    font-size: 24rpx;
-    color: #555;
+  max-height: 60rpx;
+  margin-bottom: 18rpx;  
+  font-size: 27rpx;
+  color: #555;
+  line-height: 30rpx;
+
 }
  
 .goods-num {
-    padding-top: 10rpx;
+ height: 50rpx;
     display: flex;
     justify-content: space-between;
-    line-height: 42rpx;
+margin-top: 10rpx;
     font-size: 24rpx;
     color: #999;
+    
 }
  
 .goods-num .co-red {
@@ -70,12 +100,18 @@
  
 .kill-btn {
     text-align: right;
+    padding-top: 15rpx;
+
 }
  
+
 .kill-btn>navigator {
     padding: 0 20rpx;
     background: #e23245;
     color: #fff;
+    border-radius: 20rem;
+line-height: 43rpx;
+margin-top: 4rpx;
 }
  
 .kill-btn .gray {
@@ -89,5 +125,72 @@
     color: #333;
 }
  
-.kill-btn>navigator.huise{background-color: gainsboro;}
-.tneirong{color:#555; font-size: 21rpx;}
 \ No newline at end of file
+.kill-btn>navigator.huise{background-color:#999999;}
+.tneirong{
+  color:#fff; 
+  font-size: 20rpx;
+  border-radius:20rpx;
+  padding-left: 32rpx;
+  padding-right: 15rpx;
+  padding-bottom: 2rpx;
+  height: 28rpx;
+ line-height: 28rpx;
+
+
+  }
+.body_frame {
+width: 100%;
+height: 100%;
+
+}
+.xc-top-img{  
+  width: 100%;
+  height: 333rpx;
+  margin-top: 5rpx;
+ 
+}
+.xc-seckill-bottom{
+  position: fixed;
+bottom: 0rpx;
+width: 100%;
+}
+.xc-bottom{
+  width: 45rpx;
+  height: 45rpx;
+  margin-right: 13rpx;
+}
+.xc-border-right{
+  border-right: 4rpx solid #eee;
+}
+.xc-team-img{
+width:38rpx;
+height: 45rpx; 
+left: -1rpx;
+top: -16rpx;
+}
+
+.xc-people-val-frame{
+  border: 3rpx solid #d60021;border-radius: 8rpx;overflow: hidden;
+
+}
+.xc-people-val-frame .val-img{
+width:33rpx;height:28rpx;border-radius: 8rpx;margin-left: -2rpx;
+}
+.xc-top15{
+  padding-top: 15rpx;
+  margin-top: 4rpx;
+}
+.people-img{
+  width:20rpx;height:20rpx
+}
+.time-blue{
+margin-left: 10rpx;
+}
+.martop13{
+margin-top: 13rpx;
+
+}
+.martop18{
+margin-top: 18rpx;
+
+}
 \ No newline at end of file
 <block wx:if="{{isshow}}">
-<view class="kill-time">
-    <view class="theader" >
-        <view bindtap='tip' data-ty="1" class="timeac left {{type==1?'active':''}}">秒杀中</view>
-        <view bindtap='tip' data-ty="0"  class="timeac right {{type==0?'active':''}}">即将秒杀</view>
-    </view>
-</view>
-<view class="kill-list">
+<view class=" body_frame">
+
+<image class="xc-top-img" src="../../../images/seckill_top_img.jpg">
+</image>
+
+
+<view class="kill-list abs  seckill_list">
     <view class="kill-item" wx:for="{{goodlist}}" >
-        <navigator class="kill-pic" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}">
+        <navigator class="kill-pic rel" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}">
+        <image class="abs xc-miaosha" src="../../../images/zms.png"></image>
             <image class="wh100" src="{{url+item.original_img}}" data-val="{{item.original_img}}"
                 data-errorimg="goodlist[{{index}}].original_img" binderror="bind_bnerr2" lazy-load="true"></image>
         </navigator>
         <view class="kill-cont">
             <navigator class="goods-name ellipsis-2" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}">{{item.title}}</navigator>
+            <view class="flex-vertical xc-strip-frame">
+            <view class="xc-strip-blank rel">
+
+            <view class="flex-vertical rel total">
+             <view class="t-c abs xc-fill"style="width:{{type==1?100-item.buy_num/item.goods_num*100:'100'}}%;background:{{type==1?'#e4374d':'#059de5'}};">
+             </view>
+               <text class="fs20 white abs xc-fill-text" style="">剩余{{type==1?100-item.buy_num/item.goods_num*100:'100'}}%</text>
+            </view>
+           
+            </view>
+            <view class=" ml10 fs20 " > 已抢{{item.buy_num}}件</view>
+           </view>
+
+
             <view class="goods-num">
                 <view>
-                    <view class="co-red">￥{{item.price}}<span class="underline">￥{{item.market_price}}</span></view>
-                    <view>
-                        <text class='tui-conutdown-box'>{{item.djs.day}}</text>天
+                <view class="{{type==1?'xc-wc':'blue_c'}}"> 
+                    <text>剩余:</text>
+                        <text class='tui-conutdown-box'> {{item.djs.day}}</text>天
                         <text class='tui-conutdown-box'>{{item.djs.hou}}</text>时
                         <text class='tui-conutdown-box'>{{item.djs.min}}</text>分
                         <text class='tui-conutdown-box tui-countdown-bg'>{{item.djs.sec}}</text>秒
                     </view>
+                    <view class="fs40 flex xc-buttom-money {{type==1?'xc-wc':'blue_c'}}" >
+                    <view class="fs28" style="line-height: 16px;">￥</view>
+                    <text>{{item.price}}</text> 
+                    <span class="underline fs20">零售价￥{{item.market_price}}</span></view>
+                    
                 </view>
                 <view class="kill-btn ">
-                    <navigator class="huise"  url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{type==0}}" >马上抢</navigator>
+                    <navigator style="background-color: #059de5;"  url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{type==0}}" >立即开始</navigator>
                     <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{item.status==1 && type==1}}">马上抢</navigator>
-                    <navigator class="huise"   url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{item.status==3 && type==1}}">已抢光</navigator>
+                    <navigator class="huise"url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}" wx:if="{{item.status==3 && type==1}}">已抢光</navigator>
                 </view>
             </view>
         </view>
     </view>
 </view>
+
+<view class="kill-time xc-seckill-bottom">
+    <view class="theader" >
+        <view bindtap='tip' data-ty="1" class="xc-border-right flex-center timeac left {{type==1?'active':''}}">
+        <image class="xc-bottom"
+        src="{{type==1?'../../../images/fire-red.png':'../../../images/fire-black.png'}}"></image>
+        火热进行中</view>
+        <view bindtap='tip' data-ty="0"  class=" flex-center timeac right {{type==0?'active':''}}">
+        <image class="xc-bottom"
+        src="{{type==0?'../../../images/clock-rad.png':'../../../images/clock-black.png'}}"></image>
+        即将开始</view>
+    </view>
+</view>
+
+
 <view class="no-more" wx:if="{{goodlist.length==0}}">没有相关内容</view>
+</view>
+
 </block>
+ page{
+   background: #eee;
+   color: #333;
+ }
+ .body_frame{
+    width: 100%;
+    height: 100%;
+    
+ }
+.xc-top-img{  
+  width: 100%;
+  height: 333rpx;
+  margin-top: 5rpx;
+ 
+}
+.kill-list{
+    height: 807rpx;
+overflow-y: scroll;
+}
+.seckill_list{
+position: absolute;
+margin-top: -50rpx;
+left: 2%;
+
+}
+.seckill{
+  width: 95%;
+margin: auto;
+
+}
 .kill-time {
     text-align: center;
     justify-content: space-around;
     align-items: center;
-    height: 178rpx;
+    height: 101rpx;
     border-bottom: 1px solid #ddd;
     border-top: 1px solid #ddd;
     background-color: #f6f6f6;
 }
 .kill-time .theader{
-    width: 86%; display: flex; margin: 0 auto;
+   display: flex; margin: 0 auto; align-items: center;
+   height: 100rpx;
+
 }
 .kill-time .theader .timeac {
-    font-size: 32rpx; height: 78rpx; line-height:78rpx; width: 50%; margin-top: 50rpx;
+    font-size: 32rpx; height:100%; width: 50%; 
     color: #333; background-color: #fff;
+
 }
-.kill-time .theader .timeac.left{border-top-left-radius: 86rpx; border-bottom-left-radius: 86rpx;}
-.kill-time .theader .timeac.right{border-top-right-radius: 86rpx; border-bottom-right-radius: 86rpx;}
-.kill-time .theader .timeac.active{background-color: #c4182e;color: #fff}
+/* .kill-time .theader .timeac.left{border-top-left-radius: 86rpx; border-bottom-left-radius: 86rpx;}
+.kill-time .theader .timeac.right{border-top-right-radius: 86rpx; border-bottom-right-radius: 86rpx;} */
+.kill-time .theader .timeac.active{color: #c4182e}
  
 .kill-item {
     display: flex;
     justify-content: space-between;
     background-color: #fff;
-    padding: 10rpx 20rpx;
+    padding: 10rpx 10rpx;
     margin-bottom: 10rpx;
+    border-radius: 10rpx;
+    height: 249rpx;
+    align-items: center;
 }
  
 .kill-pic {
-    width: 200rpx;
-    height: 200rpx;
+    width: 215rpx;
+    height: 215rpx;
 }
  
 .kill-cont {
-    width: 480rpx;
+    width: 465rpx;
+    margin-left:20rpx;
+    margin-right: 5rpx;
 }
  
 .goods-name {
-    height: 96rpx;
-    line-height: 48rpx;
-    font-size: 24rpx;
+   max-height: 60rpx;
+    font-size: 27rpx;
     color: #555;
+   line-height: 30rpx;
+
 }
  
 .goods-num {
@@ -57,17 +96,28 @@
 }
  
 .underline {
-    text-decoration: line-through; color:#999999; font-size: 20rpx; margin-left: 5rpx;
+    text-decoration: line-through;
+     color:#999999; font-size: 20rpx;
+     margin-left: 10rpx;
+     line-height: 30rpx;
 }
  
 .kill-btn {
     text-align: right;
+    display: flex;
+height: 100%;
+align-items: flex-end;
+padding-top: 4rpx;
+
 }
  
 .kill-btn>navigator {
     padding: 0 20rpx;
     background: #e23245;
     color: #fff;
+    border-radius: 20rpx;
+    margin-top: 37px;
+
 }
  
 .kill-btn .gray {
@@ -81,4 +131,51 @@
     color: #333;
 }
  
-.kill-btn>navigator.huise{background-color: gainsboro;}
 \ No newline at end of file
+.kill-btn>navigator.huise{background-color: #999;}
+.xc-seckill-bottom{
+  position: fixed;
+bottom: 0rpx;
+width: 100%;
+
+}
+.xc-bottom{
+  width: 45rpx;
+  height: 45rpx;
+  margin-right: 13rpx;
+}
+.xc-border-right{
+  border-right: 4rpx solid #eee;
+
+}
+.ml10{
+margin-left: 45rpx;
+}
+.total{
+  width:215rpx;height:26rpx;border-radius:20rpx;
+  background: #ffe3e2;
+}
+.xc-buttom-money{
+  align-items: baseline;
+padding-top: 43rpx;
+}
+
+.xc-miaosha{
+width: 50rpx;
+height: 40rpx;
+
+}
+.xc-strip-frame{
+  width:440rpx;margin-top: 10rpx;
+}
+.xc-strip-blank{
+  width:180rpx;
+height: 26rpx;
+}
+.xc-fill{
+border-radius:20rpx;height:26rpx;
+}
+.xc-fill-text{
+  left:34%;
+  line-height: 26rpx;
+
+}
 \ No newline at end of file
@@ -1139,7 +1139,7 @@ left:31rpx;}
     width: 100%;
     height: 42rpx;
     padding-left: 34rpx;
-    color: #948485;
+    color: #333;
  
 }
 .xc_comment-have-pictures{
@@ -42,14 +42,24 @@ Page({
     isTemplate:0,
     template_arr:null,
     bgcolor_t:'',
-
-    
   },
+ 
   onLoad: function () {
+
+    wx.setNavigationBarColor({
+      frontColor: '#ff7295',
+      backgroundColor: '#000',
+
+    });
+
+
     var th = this;
     n.init(th, "", "recommend");
+
+    
   },
   async onShow() {
+   
     await this.init_load();
     //显示的时候要开启计时器
     this.data.is_timer=1;
@@ -450,6 +460,7 @@ Page({
     }
     setTimeout(th.countDown2, 1000);
   },
+  
  
  
 });
 \ No newline at end of file
 {
-    "navigationBarBackgroundColor": "#eeeeee",
+  "navigationBarBackgroundColor": "#ff7295",
+  "navigationBarTextStyle": "white",
     "usingComponents": {
         "nav": "/components/diy_nav/diy_nav",
         "advertising":"/components/diy_advertising/diy_advertising",
 <!--普通界面-->
-<view class="container" wx:if="{{ishow}}">
+<view class="container rel" wx:if="{{ishow}}">
+<image class="xc-top-img abs"  src="../../../images/top-img.png"></image>
     <!--搜索框-->
-    <view class="search-box {{scrollTop>10?'search-fixed':''}}">
+    <view class="search-box {{scrollTop>10?'search-fixed':''}} flex-center white ">
+        <view class="classify-frame t-c">
+        <image class="classify-img" src="../../../images/classify.png"></image>
+        <view class="fs20">分<text class="white fs22">类</text></view>
+        </view>
         <view class="search-inner">       
             <view class="search-img">
                 <image class="wh100" src="{{url}}/miniapp/images/search.png"></image>
             </view>
             <input bindfocus="jumpSearch" class="search-cont" placeholder="请输入您所搜索的商品" type="text"></input>
         </view>
+        <view class="classify-frame t-c">
+        <image class="classify-img" src="../../../images/scanning.png"></image>
+        <view class="fs20">扫一扫</view>
+        </view>
     </view>
     <!--滚动广告-->
-    <view wx:if="{{banner}}">
+    <view wx:if="{{banner}}" style="margin-top: 150rpx;">
         <swiper autoplay="true" class="swiper_box" duration="1000" indicatorDots="true" interval="3000" vertical="">
             <swiper-item wx:for="{{banner}}"  wx:key="banner">
-                <navigator url="{{item.media_link}}">
+                <view url="{{item.media_link}}" class="slide-image-frame">
                     <image class="slide-image" src="{{item.ad_code}}" lazy-load="true"  binderror="bind_bnerr" data-errorimg="banner[{{index}}].ad_code"></image>
-                </navigator>
+                </view>
             </swiper-item>
         </swiper>
     </view>
@@ -56,19 +65,93 @@
             </view>
         </view>
     </view>
+
+
+    <view class="flex-center-around">
+    <view class="flex">
+      <view class="circle white xc-hook fs20 yellow-b">Г
+      </view>
+     <text class="yellow-co fs24 margin-left">人工优先</text>
+    </view>
+
+
+    <view class="flex">
+
+      <view class="circle white xc-hook fs20 yellow-b">Г
+      </view>
+     <text class="yellow-co fs24 margin-left">正品保证</text>
+    </view>
+
+    <view class="flex">
+      <view class="circle white xc-hook fs20 yellow-b">Г
+      </view>
+     <text class="yellow-co fs24 margin-left">售后无忧</text>
+    </view>
+    </view>
+
+
+       <view class="flex-center-around">
+        <view>
+          <view class="circle  xc-class-frame t-c">
+          <image  class="xc-class-img" src="../../../images/skincare.png"></image>
+          <view class="fs28">护肤</view>
+          </view>
+       </view>
+
+       <view>
+          <view class="circle  xc-class-frame t-c">
+          <image  class="xc-class-img" src="../../../images/cosmetics.png"></image>
+          <view class="fs28">彩妆</view>
+          </view>
+       </view>
+
+       <view>
+          <view class="circle  xc-class-frame t-c">
+          <image  class="xc-class-img" src="../../../images/mask.png"></image>
+          <view class="fs28">面膜</view>
+          </view>
+       </view>
+
+
+       <view>
+          <view class="circle  xc-class-frame t-c">
+          <image  class="xc-class-img" src="../../../images/nursing.png"></image>
+          <view class="fs28">个人护理</view>
+          </view>
+       </view>
+
+
+       <view>
+          <view class="circle  xc-class-frame t-c">
+          <image  class="xc-class-img" src="../../../images/man_region.png"></image>
+          <view class="fs28">男士专区</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="title-img-frame">
+        <image class="xc-title-img"src="../../../images/title.png"></image>
+        </view>
+        <view class="split-line">
+        </view>
+
     <!--秒杀-->
     <view class="seckill" wx:if="{{saleGoods!=null && pindGoods.length!=0 }}">
         <navigator url="/pages/activity/seckill_list/seckill_list">
             <view class="seckill-time">
-                <view class="classname">
-                    <text class="sk-tips">秒杀特区</text>
+                <view class="classname flex">
+                   <image class="clock-img" src="../../../images/clock-rad.png"></image>
+                   <image class="seckill-ttitle-img"src="../../../images/seckill-ttitle.png"></image>
                 </view>
+                <view class="flex  seckill-list">
+                <text class="fs28 xc-marfin-right">查看全部</text>
                 <image class="arrow-right" src="{{url}}/miniapp/images/icon-arrowdown.png"></image>
+                </view>
             </view>
         </navigator>
         <view class="seckill-list">
             <swiper class="s_prom" indicator-active-color='red'  indicator-dots="true">
-                <swiper-item wx:for="{{saleGoods}}" wx:key="{{index}}" class="p_swiper" wx:key="saleGoods">
+                <swiper-item wx:for="{{saleGoods}}" wx:key="{{index}}" class="p_swiper flex-center-around" wx:key="saleGoods">
                     <navigator url="/pages/goods/goodsInfo/goodsInfo?goods_id={{aitem.goods_id}}"
                                wx:for="{{item}}" wx:key="item"  wx:for-item="aitem" wx:for-index="aind"
                     >
 .search-box {
+
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 88rpx;
     z-index: 10;
-    background: linear-gradient(rgba(0,0,0,.2),rgba(255,255,255,0));
+    /* background: linear-gradient(rgba(0,0,0,.2),rgba(255,255,255,0)); */
+}
+.classify-img{
+  width: 50rpx;
+  height: 45rpx
 }
-
 .logo {
     width: 48rpx;
     height: 48rpx;
@@ -19,19 +23,23 @@
 .search-inner {
     display: flex;
     align-items: center;
-    margin: 15rpx 30rpx;
-    width: 675rpx;
+    margin: 20rpx 25rpx;
+    width: 566rpx;
     height: 58rpx;
     border-radius: 29rpx;
     background-color: #fff;
+    justify-content: center;
 }
  
 .search-img {
-    margin-right: 12rpx;
+ 
     width: 30rpx;
     height: 30rpx;
-    margin-top: -6rpx;
-    margin-left: 20rpx;
+   margin-left: 36rpx;
+display: flex;
+align-items: center;
+position: absolute
+
 }
  
 .search-cont {
@@ -44,7 +52,7 @@
 }
  
 .search-fixed {
-    background: rgba(242,48,48,0.8);
+    background: #ff7295;
 }
  
 .swiper_box {
@@ -58,9 +66,11 @@
  
 swiper-item image {
     width: 100%;
-    height: 380rpx;
+    height: 203rpx;
     display: inline-block;
     overflow: hidden;
+    border-radius: 10rpx;
+
 }
  
 .venues_box {
@@ -221,18 +231,15 @@ swiper-item image {
 }
  
 .seckill-list {
-    height: 360rpx;
+   
     overflow: hidden;
 }
  
 .seckill-list navigator {
-    width: 236rpx; margin-right: 10rpx; position: relative;
+    width: 212rpx; position: relative;
 }
  
-.seckill-list image {
-    width: 236rpx;
-    height: 236rpx;
-}
+
  
 .seckill-list view {
     height: 45rpx;
@@ -243,8 +250,8 @@ swiper-item image {
 }
  
 .seckill-list view.imgview{
-    width: 236rpx;
-    height: 236rpx;
+    width: 203rpx;
+    height: 226rpx;
     position: relative;
     overflow: hidden
 }
@@ -294,3 +301,73 @@ swiper-item image {
  
 .arrow-right{width: 30rpx; height: 30rpx;}
 .pd-view{height: 80rpx;}
+.xc-top-img{
+width: 100%;
+top: -1rpx;
+
+height: 315rpx;
+
+}
+
+.classify-frame{
+line-height: 25rpx;
+}
+.slide-image-frame{
+  width: 95%;
+margin: auto;
+
+}
+.xc-hook{
+  width: 30rpx;
+  height: 30rpx;
+  transform: rotate(-145deg);
+line-height: 35rpx;
+text-align: center;
+
+}
+.margin-left{
+margin-left: 10rpx;
+}
+.xc-class-img{
+ width: 83rpx;
+ height: 83rpx;
+}
+.xc-class-frame{
+  line-height: 40rpx;
+  margin-top: 40rpx;
+
+}
+.xc-title-img{
+  height: 220rpx;
+  width: 100%;
+}
+
+.title-img-frame{
+  width: 95%;
+margin: auto;
+margin-top: 30rpx;
+
+}
+.seckill-list{
+  line-height: 30rpx;
+
+}
+
+.xc-marfin-right{
+margin-right: 15rpx;
+}
+.clock-img{
+  width:36rpx;
+  height: 36rpx;
+  margin-right: 10rpx;
+}
+.seckill-ttitle-img{
+  width:150rpx;
+  height: 40rpx;
+  margin-left: -10rpx;
+
+ 
+}
+.split-line{
+  width:100%;height:10rpx;background:#eee;
+}
 \ No newline at end of file
@@ -4,7 +4,7 @@ var t = require(&quot;../../../utils/util.js&quot;),
   a = require("../../../utils/wxParse/wxParse.js"),
   s = getApp(),
   i = s.request,
-  rq = i,
+  rq = i, 
   oo = s.globalData,
   o = s.globalData.setting,
   os = o;