首页展示

app/api/controller/Article.php

@@ -24,7 +24,7 @@ class Article extends Controller
     /**
      * 文章列表
      * @param int $categoryId
-     * @return array
+     * @return array|\think\response\Json
      * @throws \think\db\exception\DbException
      */
     public function list(int $categoryId = 0)

app/api/controller/Goods.php

@@ -30,7 +30,7 @@ class Goods extends Controller
     {
         // 获取列表数据
         $model = new GoodsModel;
-        $list = $model->getList($this->request->param());
+        $list = $model->getList($this->request->param(),2);
         return $this->renderSuccess(compact('list'));
     }
 

app/api/controller/Index.php

@@ -2,21 +2,56 @@
 
 namespace app\api\controller;
 
-use think\facade\View;
+use app\api\model\Article as ArticleModel;
+use app\api\model\Goods as GoodsModel;
 /**
  * 默认控制器
  * Class Index
  * @package app\api\controller
  */
-class Index
+class Index extends Controller
 {
     public function index()
     {
+        //banner位
 
+        //商品区。new,video,bestseller
+        $model = new GoodsModel;
+        $newArrival = $model->getList(['listType'=>'on_sale'],4)->toArray()['data'];
+        $bestseller = $model->getList(['sortType'=>'sales'],4)->toArray()['data'];
+        //return $this->renderSuccess(compact('bestseller'));
+
+        $newGoodsId = array_column($newArrival,'goods_id');
+        $bestGoodsId = array_column($bestseller,'goods_id');
+
+        //获取评价数量
+        $goodsIds = array_unique(array_merge($newGoodsId,$bestGoodsId));
+        $commentModel = new \app\api\model\Comment();
+        $rows = $commentModel->rowsTotalBatch($goodsIds)->toArray();
+        $rowsByGoodsId = array_column($rows,'cnt','goods_id');
+        //可考虑缓存
+
+        foreach ($newArrival as &$item){
+            $item['comment_cnt'] = $rowsByGoodsId[$item['goods_id']] ?? 0;
+        }
+
+        foreach ($bestseller as &$item){
+            $item['comment_cnt'] = $rowsByGoodsId[$item['goods_id']] ?? 0;
+        }
+
+        $model = new ArticleModel;
+        $article = $model->getList(0,5)->toArray()['data'];
+
+        foreach ($article as &$datum){
+            $datum['year'] = substr($datum['create_time'],0,4);
+            $datum['month_day'] = substr($datum['create_time'],5,5);
+        }
+        //dd($article);
 
         return view('index', [
-            'name'  => 'ThinkPHP',
-            'email' => 'thinkphp@qq.com'
+            'newGoods'  => $newArrival,
+            'bestseller' => $bestseller,
+            'article' => $article,
         ]);
 
         echo '当前访问的index.php，请将index.html设为默认站点入口';

app/api/model/Article.php

@@ -29,7 +29,7 @@ class Article extends ArticleModel
     protected $hidden = [
         'is_delete',
         'store_id',
-        'create_time',
+        //'create_time',
         'update_time'
     ];
 

app/api/model/Comment.php

@@ -34,7 +34,7 @@ class Comment extends CommentModel
         'status',
         'sort',
         'order_id',
-        'goods_id',
+        //'goods_id',
         'order_goods_id',
         'is_delete',
         'update_time'
@@ -86,6 +86,14 @@ class Comment extends CommentModel
         return $this->where($filter)->count();
     }
 
+    public function rowsTotalBatch(array $goodsIds)
+    {
+        $filter =[
+            ['status', '=', 1],
+            ['is_delete', '=', 0],];
+        return $this->field('goods_id, count(comment_id) as cnt')->where($filter)->whereIn('goods_id', $goodsIds)->group('goods_id')->select();
+    }
+
     /**
      * 获取查询条件
      * @param int $goodsId 商品ID

public/assets/api/css/common.css

@@ -59,11 +59,17 @@ a:active, a:focus {
 /* <-- start 头部模块 */
 .headerContainer{
     width: 100%;
-    height: 1.18rem; 
     background-color: #FFF;
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 99;
+    -webkit-box-shadow: 0 .02rem .05rem rgba(0,0,0,.01);
+    box-shadow: 0 .02rem .05rem rgba(0,0,0,.01);
 }
 .warnContainer{
-    background-color: #FFF; 
+    background-color: #434344; 
     width: 100%;
     height: .5rem;
     display: flex;
@@ -71,20 +77,220 @@ a:active, a:focus {
     justify-content: center;
 }
 .warnContainer .warnText{
-    max-width: 12rem;
+    max-width: 13.2rem;
     word-break: break-all;
     line-height: 1.4;
     font-weight: bold;
     font-size: .18rem;
-    color: #000000;
+    color: rgba(255, 255, 255, .7);
 }
+/* PC端头部 */
 .computerEndHeader{
-    border: 1px solid green;
-    max-width: 12rem;
+    width: 13.2rem;
+    height: .7rem;
     margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+.computerEndHeader .computerLogo{
+    color: rgba(79, 73, 222, 1);
+    font-weight: bold;
+    font-size: .28rem;
+    padding-right: .5rem;
+}
+.computerEndHeader .computerLogo img{
+    height: .22rem;
+    width: auto;
+}
+.headNavContainer{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+.headNavItem{
+    height: .7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-right: .36rem;
+}
+.headNavItem .headNavTitle{
+    padding: 0 .28rem;
+    font-weight: bold;
+    color: #333333;
+    font-size: .24rem;
+    position: relative;
+    z-index: 2;
+    letter-spacing: .02rem;
+    min-width: 1.5rem;
+}
+
+.headNavItem.active .headNavTitle{
+    color: #FFFFFF;
+    font-size: .28rem;
+}
+.headNavItem.active .back{
+    position: absolute;
+    width: 100%;
+    height: 116%;
+    top: -8%;
+    left: 0;
+    border-radius: .04rem;
+    background-color: rgba(79, 73, 222, 1);
+    z-index: 1;
+}
+.headIconContainer{
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+.headIconContainer .headIconItem{
+    padding: 0 .2rem;
+    height: .7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.headIconContainer .headIconItem img{
+    height: .24rem;
+}
+.headIconContainer .headIconItem .cart img{
+    height: .28rem;
 }
 
 
+/* 移动端头部 */
+.mobileEndHeader{
+    display: none;
+    position: relative;
+}
+.mobileEndHeaderConten{
+    padding: 0 .24rem;
+    height:.9rem;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+}
+.mobileEndHeaderConten .mobileLogo{
+    color: rgba(79, 73, 222, 1);
+    font-weight: bold;
+    font-size: .28rem;
+    padding-right: .5rem;
+}
+.mobileEndHeaderConten .mobileLogo img{
+    height: .3rem;
+    width: auto; 
+}
+.mobileUserIconList{
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: .24rem;
+}   
+.mobileUserIcon img{
+    height: .3rem;
+}
+#mobileMenuBot {
+    height: .4rem;
+    display: flex;
+    align-items: center;
+}
+
+#mobileMenuLink {
+    display: block;
+    position: relative;
+    width: .42rem;
+    height: .06rem;
+    background-color: #666666;
+    border-radius: .08rem;
+}
+#mobileMenuLink:before,
+#mobileMenuLink:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: .08rem;
+    margin-top: .13rem;
+    position: absolute;
+    background: #666666;
+    -webkit-transition-property: margin, -webkit-transform;
+    transition-property: margin, -webkit-transform;
+    transition-property: margin, transform;
+    transition-property: margin, transform, -webkit-transform;
+    -webkit-transition-duration: 200ms;
+    transition-duration: 200ms;
+}
+
+#mobileMenuLink:before {
+    margin-top: -.13rem;
+}
+
+#mobileMenuLink:after {
+    margin-top: .13rem;
+}
+
+.open #mobileMenuLink {
+    background: none
+}
+
+.open #mobileMenuLink:before {
+    margin-top: 0;
+    transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+}
+
+.open #mobileMenuLink:after {
+    margin-top: 0;
+    transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+}
+
+.open #mobileMenuLink:before,
+.open #mobileMenuLink:after {
+    background: #666666;
+}
+.mobileMenuFixed{
+    position: absolute; 
+    background: white;
+    border-radius: .12rem; 
+    min-width: 3rem;
+    max-width: 5rem;
+    padding: .12rem .24rem;
+    top: 1rem;
+    right: .08rem;
+    z-index: 999;
+    display: none;
+}
+.mobileMenuItem{
+    border-bottom: .01rem solid #dfdfdf;
+}
+.mobileMenuFixed .mobileMenuItem:last-child{
+    border: none;
+}
+.mobileMenuItem .menuItemTitle{
+    height: .8rem;
+    display: flex;
+    align-items: center;
+    font-size: .22rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #434343; 
+}
+.mobileMenuItem.active .menuItemTitle{
+    color: rgba(79, 73, 222, 1);
+}
 /* end 头部模块 --> */
 
 /* start 年龄提示模块 --> */
@@ -156,13 +362,13 @@ a:active, a:focus {
 /* <-- start 底部模块 */
 .footerContainer{
     width: 100%;
-    height: 1.34rem;
+    height: 1.50rem;
     background-color: rgba(32, 32, 32, 1);
 }
 
 .footerConter{
     color: #FFF;
-    padding-top: .24rem;
+    padding-top: .3rem;
     display: flex;
 }
 .leftText{
@@ -187,13 +393,13 @@ a:active, a:focus {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 .24rem;
+    padding: 0 .16rem 0 .12rem;
     max-width: 5rem;
     margin-right: 1.5rem;
 }
 .footerInuptBox .mailIcon{
-    width: .28rem;
-    height: .28rem;
+    width: .38rem;
+    height: .38rem;
 }
 .footerInupt{
     flex: 1;
@@ -203,8 +409,8 @@ a:active, a:focus {
     margin: 0 .12rem;
 }
 .footerInuptBox .arrowIcon{
-    width: .28rem;
-    height: .28rem;
+    height: .19rem;
+    width: auto;
 }
 .footerIconContainer{
     max-width: 4rem;
@@ -217,23 +423,44 @@ a:active, a:focus {
     display: none;
 }
 .footerIconItem{
-    margin-right: .12rem;
+    margin-right: .1rem;
     display: inline-flex;
 }
 .footerIconItem img{
-    width: .4rem;
-    height: .4rem;
+    width: .48rem;
+    height: .48rem; 
     border-radius: 50%;
 }
 .footerVlsaImg{
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: .1rem;
+}
+.footerVlsaItem{
     font-size: 0;
 }
 .footerVlsaImg img{
-    height: .3rem;
-    width: auto;
+    width: .4rem;
+    height: .26rem;
 }
 /* end 底部模块 --> */
-
+@media (max-width: 1320px) {
+    .computerEndHeader{
+        width: auto;
+    }
+    .computerLogo{
+        margin-left: .12rem;
+    }
+    .headIconContainer{
+        margin-right: .12rem;
+    }
+    .headNavItem .headNavTitle{
+        font-size: .22rem;
+    }
+    .headNavItem.active .headNavTitle{
+        font-size: .26rem;
+    }
+}
 @media (max-width: 1199px) {
     .warnContainer{
         height: auto;
@@ -242,6 +469,15 @@ a:active, a:focus {
         font-size: .22rem;
         padding: .06rem .24rem;
     }
+    .warnContainer .warnText{
+        font-size: .15rem;
+    }
+    .computerEndHeader{
+        display: none;
+    }
+    .mobileEndHeader{
+        display: flex;
+    }
     .footerContainer{
         height: auto;
     }
@@ -283,9 +519,6 @@ a:active, a:focus {
 }
 
 @media (max-width: 899px) {
-    .warnContainer .warnText{
-        font-size: .24rem;
-    }
     .ageReminderBox{
         width: 7rem;
         margin-left: -3.5rem;

public/assets/api/css/index.css

@@ -17,18 +17,96 @@ body{
     -webkit-box-sizing: border-box; 
     box-sizing: border-box;
 }
+
 /* 轮播图 */
-.swiperContainer { 
+.swiperContainer {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    overflow: hidden;
+    height: 5.62rem;
+}
+
+.swiperContainer img {
+    vertical-align: middle;
     width: 100%;
-    height: 5.6rem;
+    height: 100%;
+    object-fit: cover;
+}
+
+.swiperContainer .swiperBox {
     position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    margin: auto;
     overflow: hidden;
 }
-.swiperContainer .swiper-slide img{
+
+.swiperContainer .swiperItem {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 0;
     width: 100%;
     height: 100%;
+    text-align: center;
+}
+.swiperContainer .swiperItem div{
+    height: 100%;
+}
+.swiperContainer .swiperItem~.swiperItem {
+    z-index: 0;
+}
+
+.swiperContainer .swiperItem.icur {
+    position: relative;
+    z-index: 2;
+}
+
+.swiperContainer .swiperItem.prev {
+    position: absolute;
+    left: -100%;
+    z-index: 2;
+}
+
+.swiperContainer .swiperItem.next {
+    position: absolute;
+    left: 100%;
+    z-index: 2;
+}
+
+.swiperContainer .swiperNav {
+    position: absolute;
+    z-index: 20;
+    left: 0;
+    bottom: .1rem;
+    width: 100%;
+    text-align: center;
+}
+
+.swiperContainer .swiperNav center {
+    display: inline-block;
+}
+
+.swiperContainer .swiperNav span {
+    display: inline-block;
+    width: .14rem;
+    height: .14rem;
+    border-radius: 50%;
+    background-color: #FFF;
+    cursor: pointer;
+}
+
+.swiperContainer .swiperNav span~span {
+   margin-left: .12rem;
 }
 
+.swiperContainer .swiperNav span.icur {
+    background-color: rgba(79, 73, 222, 1);
+}
+
+
 .tabContainer{
     height: 1.5rem;
     display: flex;
@@ -46,14 +124,15 @@ body{
 }
 .tabItem .tabName{
     font-size: .26rem;
-    color: #000000;
-    font-weight: 400; 
+    color: #333333;
+    font-weight: 400;  
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }
 .tabItem.active .tabName{
     font-weight: bold;
+    color: rgba(79, 73, 222, 1);
 }
 .tabItem .tabUnderline{
     background-color: rgba(209, 75, 241, 1); 
@@ -88,7 +167,7 @@ body{
 }
 
 .newGoodsItem{ 
-    height: 4.5rem;
+    height: 4.54rem;
     display: flex;
     flex-direction: column;
     background-color: #fff;
@@ -108,14 +187,14 @@ body{
     left: 0;
     color: #FFF;
     background-color: rgba(74, 134, 98, 1);
-    border-radius: 0 0 .12rem 0;
-    padding: 0 .06rem;
+    border-radius: 0 0 .1rem 0;
+    padding: .02rem .08rem;
     max-width: 1rem;
     font-size: .12rem;
 }
-.goodsImgBox{
-    padding: .12rem .06rem;
-    height: 2.78rem;
+.goodsImgBox{ 
+    height: 3rem;
+    margin-bottom: .1rem;
 }
 .goodsImgBox img{
     width: 100%;
@@ -127,27 +206,27 @@ body{
 }
 .goodsInfo{
     flex: 1;
-    padding: .02rem .12rem .12rem .12rem;
+    padding: .02rem .2rem 0 .2rem;
     display: flex;
     flex-direction: column;
 }
 .goodsTitleBox{
-    height: .65rem;
+    height: .58rem;
 }
 .goodsTitle{
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
-    font-size: .2rem;
+    font-size: .17rem;
     word-break: break-all;
-    color: #000;
+    color: #666666;
 }
 
 .goodsTitle .preTag{
-    border-radius: .04rem; 
+    border-radius: .06rem; 
     color: #FFF;
-    background-color: cornflowerblue;
+    background-color: rgba(61, 121, 246, 1);
     font-size: .12rem;
     padding: .02rem .04rem;
     vertical-align: middle;
@@ -178,14 +257,28 @@ body{
     padding-left: .04rem;
 }
 .goodsCollect img{
-    width: .16rem;
-    height: .16rem;
+    height: .12rem;
 }
-
 .goodsReviews{
     display: flex;
     align-items: center;
-    padding-top: .1rem;
+    padding-top: .12rem;
+}
+
+.goodsStarContainer{
+    display: flex;
+    align-items: center;
+    gap: .04rem;
+    margin-right: .12rem;
+    padding-bottom: .04rem;
+}
+.goodsStarItem{
+    font-size: 0;
+}
+.goodsStarItem img{
+    width: .15rem;
+    height: .15rem;
+    vertical-align: middle;
 }
 .reviewsNumber{
     display: flex;
@@ -207,7 +300,7 @@ body{
     padding-top: .5rem;
 }
 .newConterItem{
-   border: .01rem dashed #000000; 
+   border: .02rem solid rgba(0, 0, 0, .1); 
    display: flex;
    align-items: center;
    padding: .2rem .2rem .2rem .14rem;
@@ -263,7 +356,7 @@ body{
     display: none;
 }
 .newsInfoRl .newsMore{
-    border: .02rem solid #999999;
+    border: .02rem solid rgba(0, 0, 0, .1);
     border-radius: .22rem;
     height: .46rem;
     min-width: 1.5rem;
@@ -276,13 +369,15 @@ body{
     color: #999999;
     font-size: .18rem;
 }
+.newsInfoRl .newsMore.active{
+    color: #FFF;
+    background-color: rgba(79, 73, 222, 1);
+}
 .newsInfoRl .newsMore p{
    flex: 1;
 }
 /* end 新闻中心模块 --> */
 
-
-
 /* <-- start 超级交易模块 */
 .superDealContainer{
     margin-bottom: .8rem;
@@ -312,10 +407,10 @@ body{
     display: -ms-grid; 
     display: grid;
     grid-template-columns: repeat(8, 1fr);
-    grid-gap: .24rem .12rem; 
-}
-.partnersItem{
-    height: .5rem;
+    grid-gap: .08rem .02rem; 
+} 
+.partnersItem{ 
+    height: .77rem;
     font-size: 0;
     display: flex;
     align-items: center;
@@ -328,7 +423,11 @@ body{
 }
 /* end 盟友模块 --> */
 
-
+@media (min-width: 1920px) {
+    .swiperContainer{
+        height: 8rem !important;
+    }
+}
 
 @media (max-width: 1320px) {
  #main{
@@ -343,11 +442,95 @@ body{
     grid-template-columns: repeat(3, 1fr);
     grid-gap: .3rem .24rem; 
   }
+  .newGoodsItem{
+    height: 6rem;
+  }
+  .goodsImgBox{
+    height: 4.3rem; 
+  }
+  .goodsTitleBox{
+    height: .7rem;
+  }
+  .goodsTitle{
+    font-size: .2rem;
+  }
+
+  .newGoodsTag{
+    font-size: .2rem;
+  }
+  .goodsTitle .preTag{
+        font-size: .14rem;
+  }
+  .goodsPriceInfo .goodsPrice{
+    font-size: .24rem;
+  }
+  .goodsCollect img{
+    height: .14rem;
+  }
+  .goodsCollect .collectNumber{
+    font-size: .16rem;
+  }
+  .goodsStarItem img{
+    width: .18rem;
+    height: .18rem;
+  }
+  .reviewsNumber{
+    font-size: .16rem;
+  }
   .partnersList{
     grid-template-columns: repeat(6, 1fr);
   }
 }   
-  
+@media (max-width: 1024px) {
+    .newGoodsContainer{
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: .2rem .14rem !important; 
+     }
+     .newGoodsItem{
+        height: 6.1rem;
+     }
+      .newGoodsTag{
+         padding: 0 .1rem;
+         line-height: 1;
+         max-width: 1.5rem;
+         font-size: .2rem;
+         border-radius: 0 0 .18rem 0;
+      }
+      .newGoodsTag{
+         font-size: .24rem;
+      }
+      .goodsTitleBox{
+         height: .78rem;
+      } 
+      .goodsTitle{
+         font-size: .22rem;
+         line-height: 1.4;
+      }
+      .goodsTitle .preTag{
+         font-size: .2rem;  
+         padding: .02rem .06rem;
+      }
+      .goodsPriceInfo .goodsPrice{
+         font-size: .28rem;
+      }
+      .goodsCollect .collectNumber{
+         font-size: .20rem;
+         padding-left: .08rem;
+      }
+      .goodsCollect img{
+         height: .24rem;
+      }
+      .superDealTitle{
+         font-size: .3rem; 
+         padding-bottom: .32rem;
+      }
+      .superDealContainer .newGoodsContainer{
+         margin-bottom: .42rem;
+     }
+      .reviewsNumber{
+         font-size: .20rem;
+      } 
+}
 @media (max-width: 899px) {
     .swiperContainer{
         height: 4.6rem;
@@ -355,62 +538,11 @@ body{
     .superDealContainer{
         margin-bottom: .5rem;
     }
-    .newGoodsContainer{
-       grid-template-columns: repeat(2, 1fr);
-       grid-gap: .2rem .14rem !important; 
-    }
-    .newGoodsItem{ 
-        height: 5.2rem;
-     }
-     .newGoodsTag{
-        padding: 0 .1rem;
-        max-width: 1.5rem;
-        font-size: .2rem;
-        border-radius: 0 0 .18rem 0;
-     }
-     .goodsImgBox{
-        height: 3rem;
-     }
-     .newGoodsTag{
-        font-size: .24rem;
-     }
-     .goodsTitleBox{
-        height: .92rem;
-     }
-     .goodsTitle{
-        font-size: .28rem;
-        line-height: 1.3;
-     }
-     .goodsTitle .preTag{
-        font-size: .2rem;  
-        padding: .02rem .06rem;
-     }
-     .goodsPriceInfo .goodsPrice{
-        font-size: .32rem;
-     }
-     .goodsCollect .collectNumber{
-        font-size: .22rem;
-        padding-left: .08rem;
-     }
-     .goodsCollect img{
-        width: .24rem;
-        height: .24rem;
-     }
-     .superDealTitle{
-        font-size: .3rem; 
-        padding-bottom: .32rem;
-     }
-     .superDealContainer .newGoodsContainer{
-        margin-bottom: .42rem;
-    }
-     .reviewsNumber{
-        font-size: .22rem;
-     } 
     .partnersList{
         grid-template-columns: repeat(4, 1fr);
     }
     .newConterItem{
-        padding: .24rem .2rem .24rem .14rem;
+        padding: .16rem .2rem .16rem .14rem;
     }
     .newConterItem .newsDateBox{
         display: none;
@@ -419,8 +551,8 @@ body{
         display: block;
     }
     .newConterItem .newConterImg img{
-        width: 1.88rem;
-        height: 1.4rem;
+        width: 1.8rem;
+        height: 1.3rem;
     }
     .newConterItem .newConterInfo{
        flex-direction: column;
@@ -429,7 +561,7 @@ body{
     }
     .newConterInfo .newConterTitle{
         flex: none;
-        font-size: .28rem;
+        font-size: .24rem;
         line-height: 1.3;
     }
     .newConterItem .newsInfoRl{
@@ -443,11 +575,13 @@ body{
         font-size: .2rem;
     }
 }   
-
 @media (max-width: 750px) {
     .swiperContainer{
         height: 3.6rem; 
     }
+    .tabContainer{
+        height: 1.3rem;
+    }
     .tabContainer .tabItem{
         flex: 1;
         padding: 0 !important;
@@ -456,22 +590,39 @@ body{
         border-radius: .12rem;
     }
     .tabItem .tabName{
-        font-size: .28rem;
+        font-size: .24rem;
     }
     .tabItem .tabUnderline{
-        width: .7rem;
+        width: .6rem;
     }
     .newGoodsContainer{
         grid-gap: .12rem .12rem !important;  
      }
-     
+     .superDealTitle{
+        font-size: .28rem;
+     }
      .partnersTitle{
+        font-size: .28rem;
         margin-bottom: .12rem;
      }
      .partnersList{
         grid-template-columns: repeat(3, 1fr);
     }
     .partnersItem{
-        height: .7rem;
+        height: .8rem;
     } 
+    .goodsCollect .collectNumber{
+        font-size: .18rem;
+        padding-left: .06rem;
+     }
+     .goodsCollect img{
+        height: .2rem;
+     }
+     .goodsStarItem img{
+        width: .16rem;
+        height: .16rem;
+     }
+     .reviewsNumber{
+        font-size: .2rem;
+     }
 }   

public/assets/api/js/index.js

@@ -1,14 +1,17 @@
 $(document).ready(function () {
-    const LOCAL_AGEREMINDER = "local_ageReminder"
+    const VAPES_AGEREMINDER = "vapes_ageReminder"
 
     $("img.lazy").lazyload();
 
+    //菜单按钮
+    const mobileMenuBot = $('#mobileMenuBot');
+
 
     /**
      * 年龄提示方法
      */
     function ageReminderMethod() {
-        const ageReminder = localStorage.getItem(LOCAL_AGEREMINDER);
+        const ageReminder = localStorage.getItem(VAPES_AGEREMINDER);
         const maskElement = $(".maskContainer");
         if (!ageReminder) {
             maskElement.show(0)
@@ -18,6 +21,24 @@ $(document).ready(function () {
     }
 
     /**
+     * 手机端菜单展开收起
+     */
+    function starSlideToggle() {
+        $(".mobileMenuFixed").stop().slideToggle(80);
+        if (mobileMenuBot.hasClass('open')) {
+            mobileMenuBot.removeClass('open');
+        } else {
+            mobileMenuBot.addClass('open');
+        }
+    }
+
+    /**
+    * 手机端菜单绑定事件
+    */
+    mobileMenuBot.on('tap', starSlideToggle)
+
+
+    /**
      * 年龄提示 NO 点击
      */
     $(".ageReminderNo").on('click', function () {
@@ -30,7 +51,7 @@ $(document).ready(function () {
      * 年龄提示 Yes 点击
      */
     $(".ageReminderYes").on('click', function () {
-        localStorage.setItem(LOCAL_AGEREMINDER, "1");
+        localStorage.setItem(VAPES_AGEREMINDER, "1");
         $(".maskContainer").hide(0)
     });
 
@@ -38,5 +59,4 @@ $(document).ready(function () {
     ageReminderMethod()
 
 
-
 })

public/assets/api/js/swiper.js

@@ -0,0 +1,156 @@
+let tap = "ontouchstart" in window ? "tap" : "click";
+(function ($, fn) {
+    $(document).ready(fn);
+}(jQuery, function () {
+    var wrap = $(".swiperContainer");
+    $.each(wrap, function (index, el) {
+        var _this = $(this);
+        (function (banner) {
+            var navs, imgs, adnav, center, icur, prev, next, showIndex, btn_prev, btn_next, clickDown, bannerTimer, moveEnd;
+            if (!banner[0]) return;
+            imgs = banner.find(".swiperItem");
+            adnav = banner.find(".swiperNav");
+            btn_prev = banner.find(".prevbtn");
+            btn_next = banner.find(".nextbtn");
+            showIndex = 0;
+            moveEnd = false;
+            clickDown = false;
+
+            function animateLeft(index) {
+                if (moveEnd) return;
+                moveEnd = true;
+                showIndex = index;
+                next = imgs.eq(showIndex);
+                next.addClass("next");
+                navs.removeClass("icur").eq(showIndex).addClass("icur");
+                icur.stop().animate({
+                    "left": "-100%"
+                }, 500, "swing");
+                next.stop().animate({
+                    "left": "0"
+                }, 500, "swing", function () {
+                    imgs.removeClass("icur").removeClass("prev").removeClass("next");
+
+                    icur = imgs.eq(showIndex);
+                    icur.addClass("icur");
+
+                    imgs.removeAttr("style");
+                    moveEnd = false;
+                    clickDown = false;
+                });
+            }
+
+            function animateRight(index) {
+                if (moveEnd) return;
+                moveEnd = true;
+                showIndex = index;
+                prev = imgs.eq(showIndex);
+                prev.addClass("prev");
+                navs.removeClass("icur").eq(showIndex).addClass("icur");
+                icur.stop().animate({
+                    "left": "100%"
+                }, 500, "swing");
+                prev.stop().animate({
+                    "left": "0"
+                }, 500, "swing", function () {
+                    imgs.removeClass("icur").removeClass("prev").removeClass("next");
+                    icur = imgs.eq(showIndex);
+                    icur.addClass("icur");
+                    imgs.removeAttr("style");
+                    moveEnd = false;
+                    clickDown = false;
+                });
+            }
+
+            function autoplay() {
+                showIndex++;
+                showIndex %= imgs.length;
+                animateLeft(showIndex);
+            }
+
+            (
+                function () {
+                    if (imgs.length < 2) return;
+                    center = $("<center></center>");
+                    for (var i = 0, len = imgs.length; i < len; i++) {
+                        var ovar = $("<span></span>");
+                        if (i == 0) {
+                            ovar.addClass("icur");
+                        }
+                        center.append(ovar);
+                    }
+                    adnav.append(center);
+                }(),
+
+                function () {
+                    navs = adnav.find("span");
+                    icur = imgs.eq(0);
+                    icur.addClass("icur");
+
+                    $.each(navs, function (index) {
+                        var _this = $(this);
+                        (function (nav, index) {
+                            nav.hover(function () {
+                                var poor = index - showIndex;
+                                if (index == showIndex) return false;
+                                poor > 0 ? animateLeft(index) : animateRight(index);
+                            });
+                        }(_this, index));
+                    });
+
+                }(),
+
+                function () {
+                    if (imgs.length < 2) return;
+                    bannerTimer = setInterval(autoplay, 4000);
+                    banner.on("mouseenter", function () {
+                        clearInterval(bannerTimer);
+                    });
+                    banner.on("mouseleave", function () {
+                        clearInterval(bannerTimer);
+                        bannerTimer = setInterval(autoplay, 4000);
+                    });
+                    banner.on("touchstart", function () {
+
+                        clearInterval(bannerTimer);
+                        bannerTimer = setInterval(autoplay, 4000);
+                    });
+                    banner.touchleft(function () {
+                        var num = 0;
+                        clearInterval(bannerTimer);
+                        num = showIndex + 1;
+                        num %= imgs.length;
+                        animateLeft(num);
+                        bannerTimer = setInterval(autoplay, 4000);
+                    });
+                    banner.touchright(function () {
+                        var num = 0;
+                        clearInterval(bannerTimer);
+                        num = showIndex - 1;
+                        num = num < 0 ? imgs.length - 1 : num;
+                        animateRight(num);
+                        bannerTimer = setInterval(autoplay, 4000);
+                    });
+                    btn_prev.on(tap, function () {
+                        var num = 0;
+                        if (clickDown) return;
+                        clickDown = true;
+                        clearInterval(bannerTimer);
+                        num = showIndex - 1;
+                        num = num < 0 ? imgs.length - 1 : num;
+                        animateRight(num);
+                    });
+                    btn_next.on(tap, function () {
+                        var num = 0;
+                        if (clickDown) return;
+                        clickDown = true;
+                        clearInterval(bannerTimer);
+                        num = showIndex + 1;
+                        num %= imgs.length;
+                        animateLeft(num);
+                    });
+                }()
+            );
+        }(_this));
+    });
+}));