فهرست منبع

'购买服务整个流程'

Ethan 6 سال پیش
والد
کامیت
185261ef0b

+ 2 - 2
application/admin/view/homeinfo/index.html

@@ -4,7 +4,7 @@
     {include file="layout/admin_items" /}
     <div class="layui-tab-content page-tab-content">
         <!-- 搜索框开始 -->
-        <div class="search-form">
+        <!--<div class="search-form">
         <form class="" method="post">
             <div class="layui-form-item">
                 <div class="layui-inline">
@@ -18,7 +18,7 @@
                 </div>
             </div>
         </form>
-        </div>
+        </div>-->
         <!-- 搜索框结束 -->
         <table class="layui-table lay-even">
             <colgroup>

+ 10 - 0
application/home/controller/Index.php

@@ -39,4 +39,14 @@ class Index extends Common
         return $this->fetch();
     }//end index()
 
+    public function isLogin()
+    {
+        $userId = session('user_id');
+        if ($userId) {
+            return ["success"=>true];
+        } else {
+            return ["success"=>false];
+        }
+    }//end index()
+
 }

+ 149 - 0
application/home/controller/Product.php

@@ -41,12 +41,14 @@ class Product extends Common
         ];
         $fatherProductWhere = [
             'product_pid' => 0,
+            'product_status' => 1,
         ];
         $getFatherProduct = model('Product')->getSelect($fatherProductField, $fatherProductWhere);
         $this->assign('fatherProduct', $getFatherProduct);
         $id = input('get.id') ?? $getFatherProduct[0]->product_id;
         $productWhere = [
             'product_pid' => $id,
+            'product_status' => 1,
         ];
         $getProduct = model('Product')->getSelect($fatherProductField, $productWhere);
         $this->assign('product', $getProduct);
@@ -70,12 +72,159 @@ class Product extends Common
         ];
         $getProductInfo = model('Productinfo')->getSelect($productWhere);
         $this->assign('productInfo', $getProductInfo);
+        $productWhere['product_status'] = 1;
         $getProduct = model('Product')->getFind($productWhere);
         $this->assign('product', $getProduct);
+        $fatherProductWhere = [
+            'product_id' => $getProduct->product_pid,
+        ];
+        $getFatherProduct = model('Product')->getFind($fatherProductWhere);
+        $this->assign('fatherProduct', $getFatherProduct);
         $getRenewal = model('Renewal')->getRenewal();
         $this->assign('renewal', $getRenewal);
 
         return $this->fetch();
     }
 
+    /**
+     * 选购产品
+     *
+     * @access public
+     * @return array JsonString
+     */
+    public function shopping()
+    {
+        $userId = session('user_id');
+        $userInfo = model('userinfo')->getInfo($userId);
+        $this->assign('userInfo', $userInfo);
+        $product_id = input('get.product_id');
+        $productWhere = [
+            'product_id' => $product_id,
+            'product_status' => 1,
+        ];
+        $getProduct = model('Product')->getFind($productWhere);
+        $this->assign('product', $getProduct);
+        $fatherProductWhere = [
+            'product_id' => $getProduct->product_pid,
+        ];
+        $getFatherProduct = model('Product')->getFind($fatherProductWhere);
+        $this->assign('fatherProduct', $getFatherProduct);
+        $renewal_identity = input('get.renewal_identity');
+        $renewalWhere = [
+            'renewal_identity' => $renewal_identity,
+        ];
+        $getRenewal = model('Renewal')->findRenewal($renewalWhere);
+        $this->assign('renewal', $getRenewal);
+
+        return $this->fetch();
+    }
+    public function purchased()
+    {
+        $product_id = input('post.product_id');
+        if ($product_id) {
+            $renewal_identity = input('post.renewal_identity');
+            $userId = session('user_id');
+            $userInfo = model('userinfo')->getInfo($userId);
+            $productWhere = [
+                'product_id' => $product_id,
+                'product_status' => 1,
+            ];
+            $product = model('Product')->getFind($productWhere);
+            $fatherProductWhere = [
+                'product_id' => $product->product_pid,
+            ];
+            $getFatherProduct = model('Product')->getFind($fatherProductWhere);
+            if (!$product) {
+                return ["success" => false, "msg" => "错误:该产品已停售"];
+            }
+            switch($renewal_identity){
+                case 1:
+                    $money = $product->product_TypeOne;
+                    break;
+                case 2:
+                    $money = $product->product_TypeTwo;
+                    break;
+                case 3:
+                    $money =  $product->product_TypeThree;
+                    break;
+                case 4:
+                    $money =  $product->product_TypeFour;
+                    break;
+            }
+            if (isset($money) && $money <= $userInfo->userInfo_money) {
+                $findRenewal = model('renewal')->findRenewal(['renewal_status' => 1, 'renewal_identity' => $renewal_identity]);
+            } else {
+                return ["msg" => "错误:您的余额不足", "success"=>false];
+            }
+            if (!$findRenewal) {
+                return ["msg" => "错误:该期限已不支持购买", "success"=>false];
+            }
+            $day = $findRenewal->renewal_day;
+            $cashMoney = $userInfo->userInfo_money - $money;
+            $dbUserInfo = model('Userinfo');
+            $dbUserProduct = model('Userproduct');
+            $dbOrder = model('Order');
+            $dbUserInfo->startTrans();
+            $dbUserProduct->startTrans();
+            $dbOrder->startTrans();
+            /*try {*/
+                $userProduct = model('Userproduct')->findUserProduct(['user_id'=>$userId,'product_id'=>$product_id]);
+                $dbUserInfo->updateInfo($userId, ['userInfo_money' => $cashMoney]);
+                $nowDate = date('Y-m-d');
+                $orderID = OrderID();
+                $data['userproduct_identity'] = $orderID;
+                $data['userProduct_buyTime'] = $nowDate;
+                if ($userProduct) {
+                    $data['userProduct_dayNumber'] = $userProduct->userProduct_dayNumber + $day;
+                    if ($userProduct->userProduct_maturityTime > $nowDate) {
+                        $data['userProduct_maturityTime'] = date('Y-m-d', strtotime(intval($day) . " day", strtotime($userProduct->userProduct_maturityTime)));
+                    } else {
+                        $data['userProduct_maturityTime'] = date('Y-m-d', strtotime(intval($day) . " day"));
+                    }
+                    $dbUserProduct->updateUserProduct(['userProduct_id' => $userProduct->userProduct_id], $data);
+                } else {
+                    $data['userProduct_dayNumber'] = $day;
+                    $data['user_id'] = $userId;
+                    $data['product_id'] = $product_id;
+                    $data['userProduct_maturityTime'] = date('Y-m-d', strtotime(intval($day) . " day"));
+                    $dbUserProduct->addUserProduct($data);
+                }
+                $addOrderData = [
+                    'order_identity' => $orderID,
+                    'user_id' => $userId,
+                    'product_id' => $product_id,
+                    'order_dayNumber' => $day,
+                    'order_buyTime' => $nowDate,
+                    'order_money' => $money,
+                ];
+                $dbOrder->addOrder($addOrderData);
+                // 提交事务
+                $dbUserInfo->commit();
+                $dbUserProduct->commit();
+                $dbOrder->commit();
+                $returnData = [
+                    "msg" => "恭喜你购买成功",
+                    "success"=> true,
+                    "data"=> json_encode([
+                        "orderID" => $orderID,
+                        "product" => $getFatherProduct->product_name . " ▪ " . $product->product_name,
+                        "order_money" => $money,
+                        "userProduct_maturityTime" => $data['userProduct_maturityTime'],
+                    ]),
+                ];
+                return $returnData;
+            /*} catch (\Exception $e) {
+                // 回滚事务
+                $dbUserInfo->rollBack();
+                $dbUserProduct->rollBack();
+                $dbOrder->rollBack();
+                return ["msg" => "操作失败", "success"=>false];
+            }*/
+        }
+        $data = json_decode(input('get.data'));//print_r($data->orderID);die;
+        $this->assign('data', $data);
+
+        return $this->fetch();
+    }
+
 }

+ 28 - 0
application/home/model/Order.php

@@ -0,0 +1,28 @@
+<?php
+namespace app\home\model;
+
+use think\Model;
+
+/**
+ * 用户管理
+ */
+class Order extends Model
+{
+    public function getOrder($condition)
+    {
+        $result = $this
+            ->alias('a')
+            ->join('product b', 'a.product_id = b.product_id')
+            ->where($condition)
+            ->paginate(10);
+
+        return $result;
+    }
+    public function addOrder($data)
+    {
+        $result = $this->insert($data);
+
+        return $result;
+    }
+
+}

+ 25 - 0
application/home/model/Userinfo.php

@@ -0,0 +1,25 @@
+<?php
+namespace app\home\model;
+
+use think\Model;
+
+/**
+ * 主页导航管理模型
+ */
+class Userinfo extends Model
+{
+    public function getInfo($userId)
+    {
+        $result = $this->where(['user_id'=>$userId])->find();
+
+        return $result;
+    }
+    public function updateInfo($userId, $data)
+    {
+        $result = $this->where(['user_id'=>$userId])->update($data);
+
+        return $result;
+    }
+
+
+}

+ 34 - 0
application/home/model/Userproduct.php

@@ -0,0 +1,34 @@
+<?php
+namespace app\home\model;
+
+use think\Model;
+
+/**
+ * 用户管理
+ */
+class Userproduct extends Model
+{
+    public function addUserProduct($data)
+    {
+        $result = $this->insert($data);
+
+        return $result;
+    }
+    public function findUserProduct($condition)
+    {
+        $result = $this
+            ->where($condition)
+            ->find();
+
+        return $result;
+    }
+    public function updateUserProduct($condition, $data)
+    {
+        $result = $this
+            ->where($condition)
+            ->update($data);
+
+        return $result;
+    }
+
+}

+ 8 - 8
application/home/view/layout/header.html

@@ -65,20 +65,20 @@
     <div class="container" style="height: 30px; line-height: 1;">
         {if $user_info['user_id']}
             <nav class="navbar navbar-expand-lg navbar-light" style="display: flex; justify-content: flex-end;">
-                <a href="/user/register/index.html" class="px-2 text-uppercase font-weight-bold"
+                <!--<a href="/user/register/index.html" class="px-2 text-uppercase font-weight-bold"
                    style="cursor: pointer; color: #fff; font-size: 12px;">
                     购物车
+                </a>-->
+                <a href="{:url('home/product/product')}" class="btn-lg-block w3ls-btn px-4 text-uppercase font-weight-bold"
+                          style="cursor: pointer; color: #fff; font-size: 12px;">
+                支持服务
                 </a>
-                <a href="/User/login/index.html" class="px-2 text-uppercase font-weight-bold"
-                   style="cursor: pointer; color: #fff; font-size: 12px;">
-                    支持服务
-                </a>
-                <a href="/User/index/index.html" class="px-2 text-uppercase font-weight-bold"
+                <a href="/User/index/index.html" class="btn-lg-block w3ls-btn px-4 text-uppercase font-weight-bold"
                    style="cursor: pointer; color: #fff; font-size: 12px;">
                     {$Think.session.user_email}
                 </a>
-                <a href="/User/Login/logout.html" class="px-2 text-uppercase font-weight-bold"
-                   style="cursor: pointer; color: #fff; font-size: 12px; margin-right: 18px;">
+                <a href="/User/Login/logout.html" class="btn-lg-block w3ls-btn px-4 text-uppercase font-weight-bold"
+                   style="cursor: pointer; color: #fff; font-size: 12px;">
                     安全退出
                 </a>
             </nav>

+ 29 - 9
application/home/view/product/details.html

@@ -10,13 +10,13 @@
                     <li>
                         <div class="slider-info" style="text-align: left !important;">
                             <p style="font-size: 2.8vw;">
-                                {$product.product_name}
+                                {$fatherProduct.product_name} ▪ {$product.product_name}
                             </p>
                             <p style="font-size: 1vw;">
                                 {$product.product_content}
                             </p>
                             <div style="text-align: right">
-                                <button>立即选购</button>
+                                <button onclick="goShopping()">立即选购</button>
                             </div>
                         </div>
                     </li>
@@ -47,21 +47,24 @@
     <div class="container" style="font-size: 18px; font-weight: 800; margin-top: 50px;">
         产品价格
     </div>
+</section>
+
+<section class="wthree-row" id="shopping">
     <div class="container" style="margin-top: 10px; margin-bottom: 50px;">
         <table class="gridtable">
             <tr>
-                <td style="border-right: 0;">产品名称</td>
-                <td style="border-right: 0; border-left: 0;">时</td>
+                <td style="border-right: 0;">服务名称</td>
+                <td style="border-right: 0; border-left: 0;">时</td>
                 <td style="border-right: 0; border-left: 0;">价格</td>
                 <td style="border-left: 0;">选购</td>
             </tr>
             {volist name="renewal" id="value"}
             <tr>
-                <td>{$value.renewal_name}</td>
+                <td>{$fatherProduct.product_name} ▪ {$product.product_name}</td>
                 <td>{$value.renewal_name}</td>
                 <td>
                     <?php
-                        switch($value->renewal_id){
+                        switch($value->renewal_identity){
                             case 1:
                                 echo $product->product_TypeOne;
                                 break;
@@ -77,7 +80,7 @@
                         }
                     ?>元
                 </td>
-                <td onclick="shopping('{$value.renewal_id}')" style="color: #0d93bf; cursor:pointer;">选购</td>
+                <td onclick="shopping('{$product.product_id}','{$value.renewal_identity}')" style="color: #0d93bf; cursor:pointer;">选购</td>
             </tr>
             {/volist}
         </table>
@@ -85,8 +88,25 @@
 </section>
 <script>
     const myHost = "http://" + window.location.host;
-    function shopping(id) {
-        window.location.href = myHost + "/home/product/details.html?id=" + id;
+    function shopping(product_id, renewal_identity) {
+        $.ajax({
+            url: myHost + "/home/index/isLogin.html",
+            type: 'get',
+            dataType: 'json',
+            success: function(res){
+                if (res['success']) {
+                    window.location.href = myHost + "/home/product/shopping.html?product_id=" + product_id + "&renewal_identity=" + renewal_identity;
+                } else {
+                    window.location.href = myHost + "/User/login/index.html?login=0";
+                }
+            },
+            error: function(){
+                alert("服务器连接失败");
+            }
+        });
+    }
+    function goShopping(product_id, renewal_identity) {
+        window.location.href = "#shopping";
     }
 </script>
 {include file="layout/footer" /}

+ 43 - 0
application/home/view/product/purchased.html

@@ -0,0 +1,43 @@
+{include file="layout/header" /}
+<style type="text/css">
+</style>
+<!-- banner -->
+
+<section class="wthree-row" id="pricing">
+    <div class="container" style="font-size: 18px; font-weight: 800; margin-top: 20px; text-align: center; height: 100px; line-height: 5; background: #ebebeb;">
+        恭喜您!购买成功!
+    </div>
+    <div class="container" style="color: #595959; font-size: 18px; margin-top: 40px; display: flex;">
+        <span style="width: 50%; text-align: right;">订单编号:</span>
+        {$data->orderID}
+    </div>
+    <div class="container" style="color: #595959; font-size: 18px; margin-top: 10px; display: flex;">
+        <span style="width: 50%; text-align: right;">购买服务:</span>
+        {$data->product}
+    </div>
+    <div class="container" style="color: #595959; font-size: 18px; margin-top: 10px; display: flex;">
+        <span style="width: 50%; text-align: right;">到期时间:</span>
+        {$data->userProduct_maturityTime}
+    </div>
+    <div class="container" style="color: #595959; font-size: 18px; margin-top: 10px; display: flex;">
+        <span style="width: 50%; text-align: right; ">购买金额:</span>
+        <span style="color: #FF2929">¥{$data->order_money}</span>
+    </div>
+    <div class="container" style="color: #595959; font-size: 18px; display: flex; justify-content: center; margin-top: 40px; margin-bottom: 60px">
+        <div style="display: flex; justify-content: center">
+            <div onclick="loadUrl(1)" style="border: 2px solid #afafaf; padding: 5px 25px; margin-right: 20px; cursor:pointer;">返回首页</div>
+            <div onclick="loadUrl(2)" style="border: 2px solid #afafaf; padding: 5px 25px; cursor:pointer;">继续购买</div>
+        </div>
+    </div>
+</section>
+<script>
+    const myHost = "http://" + window.location.host;
+    function loadUrl(value) {
+        if (value == 1) {
+            window.location.href = myHost + "/home/index/index.html";
+        } else {
+            window.location.href = myHost + "/home/product/product.html";
+        }
+    }
+</script>
+{include file="layout/footer" /}

+ 126 - 0
application/home/view/product/shopping.html

@@ -0,0 +1,126 @@
+{include file="layout/header" /}
+<style type="text/css">
+</style>
+<!-- banner -->
+
+<section class="wthree-row" id="pricing">
+    <div class="container" style="font-size: 18px; font-weight: 800; margin-top: 50px;">
+        <img src="{$Think.HOME_SITE_ROOT}/images/shopping.png">
+        订单支付
+    </div>
+    <div class="container" style="font-size: 16px; margin-top: 50px; color: #B7B7B7;">
+        <div style="display: flex; justify-content: center">
+            <div>
+                <div class="shopping_step">1</div>
+                <div>选购服务</div>
+            </div>
+            <div class="shopping_line"></div>
+            <div>
+                <div class="shopping_step" style="background: #0074FF; color: #fff; border: 0;">2</div>
+                <div style="color: #0074FF">订单支付</div>
+            </div>
+            <div class="shopping_line"></div>
+            <div>
+                <div class="shopping_step">3</div>
+                <div>支付成功</div>
+            </div>
+        </div>
+    </div>
+    <div class="container" style="margin-top: 50px; margin-bottom: 50px;">
+        <table class="gridtable">
+            <tr>
+                <td style="width: 33%;background: #ccc !important;">服务名称</td>
+                <td style="width: 33%;background: #ccc !important;">时长</td>
+                <td style="width: 33%;background: #ccc !important;">价格</td>
+            </tr>
+        </table>
+        <table class="gridtable" style="margin-top: 20px;">
+            <tr style="height: 50px;">
+                <td style="border-right: 0; width: 33%;">{$fatherProduct.product_name} ▪ {$product.product_name}</td>
+                <td style="border-right: 0; border-left: 0; width: 33%;">{$renewal.renewal_name}</td>
+                <td style="border-left: 0; width: 33%;color: #FF2929">¥
+                    <?php
+                        switch($renewal->renewal_identity){
+                    case 1:
+                    echo $product->product_TypeOne;
+                    break;
+                    case 2:
+                    echo $product->product_TypeTwo;
+                    break;
+                    case 3:
+                    echo $product->product_TypeThree;
+                    break;
+                    case 4:
+                    echo $product->product_TypeFour;
+                    break;
+                    }
+                    ?>
+                </td>
+            </tr>
+        </table>
+    </div>
+    <div class="container" style="margin-top: 50px; margin-bottom: 50px; display: flex;">
+        <div>
+            <span>应付金额:¥
+                <?php
+                    $money = 0;
+                    switch($renewal->renewal_identity){
+                        case 1:
+                        $money = $product->product_TypeOne;
+                        break;
+                        case 2:
+                        $money = $product->product_TypeTwo;
+                        break;
+                        case 3:
+                        $money =  $product->product_TypeThree;
+                        break;
+                        case 4:
+                        $money =  $product->product_TypeFour;
+                        break;
+                       }
+                       echo $money;
+                ?>
+            </span>
+            <br/>
+            {if $money <= $userInfo.userInfo_money}
+            <span>账户余额:¥{$userInfo.userInfo_money}</span>
+            {else}
+            <span style="color: #FF2929">账户余额:¥{$userInfo.userInfo_money}</span>
+            {/if}
+        </div>
+        <div style="flex: 1; text-align: right;">
+            {if $money <= $userInfo.userInfo_money}
+            <button onclick="shopping('{$product.product_id}','{$renewal.renewal_identity}')" style="background: #0074FF; border: 0;" type="button" class="btn btn-info btn-lg-block w3ls-btn px-4 text-uppercase font-weight-bold">
+                确认支付
+            </button>
+            {else}
+            <!--<span style="color: #FF2929; margin-right: 10px; font-size: 14px;">当前余额不足</span>-->
+            <div style="background: #DDDDDD; border: 0; cursor: not-allowed" class="btn btn-info btn-lg-block w3ls-btn px-4 text-uppercase font-weight-bold">
+                确认支付
+            </div>
+            {/if}
+        </div>
+    </div>
+</section>
+<script>
+    const myHost = "http://" + window.location.host;
+    function shopping(product_id, renewal_identity) {
+        $.ajax({
+            url: myHost + "/home/product/purchased.html",
+            type: 'post',
+            dataType: 'json',
+            data: {product_id: product_id, renewal_identity: renewal_identity},
+            success: function(res){
+                if (res['success']) {
+                    window.location.href = myHost + "/home/product/purchased.html?data=" + res['data'];
+                } else {
+                    console.log(res);
+                }
+            },
+            error: function(){
+                alert("服务器连接失败");
+            }
+        });
+    }
+</script>
+{include file="layout/footer" /}

+ 2 - 2
application/user/controller/UserControl.php

@@ -165,11 +165,11 @@ class UserControl extends Controller
                 'text' => lang('ds_renewal_management'),
                 'url' => url('Renewal/index'),
             ),
-            'access_control' => array(
+            /*'access_control' => array(
                 'name' => 'access_control',
                 'text' => lang('ds_access_control'),
                 'url' => url('Config/index'),
-            ),
+            ),*/
             'my_massage' => array(
                 'name' => 'my_massage',
                 'text' => lang('ds_my_massage'),

+ 3 - 3
application/user/view/cost/recharge.html

@@ -30,7 +30,7 @@
     </ul>
     {if $status == 3}
         {if $bank}
-        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex">
+        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex; margin-bottom: 100px">
             <div style="font-size: 17px; width: 300px">
                 <div style="margin-top: 20px; display: flex">
                     <div style="min-width: 100px;">开户名称:</div>
@@ -65,7 +65,7 @@
         {/if}
     {elseif $status == 2}
         {if $weixin}
-        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex">
+        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex; margin-bottom: 100px">
             <div>
                 <div style="margin-top: 20px;">
                     <img src="{$Think.USER_SITE_ROOT}/images/weixin.png">
@@ -95,7 +95,7 @@
         {/if}
     {else}
         {if $zhifubao}
-        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex">
+        <div class="layui-tab-content page-tab-content" style="font-size: 18px; display: flex; margin-bottom: 100px">
             <div>
                 <div style="margin-top: 20px;">
                     <img src="{$Think.USER_SITE_ROOT}/images/zhifubao.png">

+ 3 - 3
application/user/view/index/index.html

@@ -57,9 +57,9 @@
     <div class="navbar">
         <ul class="fr" style="float:right;">
             <!--<a href="javascript:dsLayerConfirm('{:url('Index/clear')}','{$Think.lang.ds_clear_cache_confirm}')">{$Think.lang.ds_shop_car}</a>-->
-            <a style="font-size: 16px; color: black" href="javascript:dsLayerConfirm('{:url('Index/clear')}')">{$Think.lang.ds_shop_car}</a>
-            <a style="font-size: 16px; color: black; margin-left: 20px" href="javascript:dsLayerConfirm('{:url('Index/clear')}')">{$Think.lang.support_services}</a>
-            <a style="font-size: 16px; color: black; margin-left: 20px;" href="javascript:dsLayerConfirm('{:url('Index/clear')}')">{$Think.session.user_email}</a>
+            <!--<a style="font-size: 16px; color: black" href="javascript:dsLayerConfirm('{:url('Index/clear')}')">{$Think.lang.ds_shop_car}</a>-->
+            <a style="font-size: 16px; color: black; margin-left: 20px" href="{:url('home/product/product')}">{$Think.lang.support_services}</a>
+            <a style="font-size: 16px; color: black; margin-left: 20px;" href="{:url('index/index')}">{$Think.session.user_email}</a>
             <a style="font-size: 16px; color: black; margin-left: 20px; margin-right: 20px" href="{:url('Login/logout')}">{$Think.lang.ds_safe_withdrawing}</a>
         </ul>
     </div>

+ 12 - 0
public/static/home/css/style.css

@@ -1443,6 +1443,18 @@ table.gridtable td {
     border-color: #ccc;
     background-color: #ffffff;
 }
+.shopping_step {
+    border-radius: 50%;
+    border: 1px solid;
+    width: 25px;
+    text-align: center;
+    margin: 0 auto;
+}
+.shopping_line {
+    border-bottom: 2px solid #A4A4A4;
+    width: 20vw;
+    margin-bottom: 35px;
+}
 
 /* //modal */
 

BIN
public/static/home/images/shopping.png