master

分支 (1)

管理

管理

master

day2-job
/
3.购物车.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* 商品列表图片样式 */
         .block {
        width: 20%;
         /* text-align: center; */
         font-size:5px;
         margin-bottom: 10px;
         display: flex;
          }

         .block img {
          width: 100%;
          margin-bottom: 10px;
          margin: 20px;
          }
          .dianpu .title{
            font-size: 20px;
            font-weight: bold;
            width: 220px;
            margin-top: 18px;
          }
          .dianpu .num{
            margin-left:10px ;
          }
          .dianpu1 {
            display: flex;
            margin-top: 35px;


          }
          .dianpu1 div{
            padding-right: 5px;
            width:20px;
          }
     .dianpu1 .cond{
        text-decoration: line-through;

     }

     .dianpu1 .jian{
        width: 10px;
        /* height: 10px; */
        margin-left: 90px;
        border: 1px solid blue;
        border-radius: 50%;
        text-align: center;
        line-height: 10px;
        padding-left: 5px;
     }
       .dianpu1 .jia{
        margin-left: 20px;
          width: 10px;
        /* height: 10px; */

        border: 1px solid blue;
        border-radius: 50%;
        text-align: center;
        line-height: 10px;
        padding-left: 5px;
     }
    .dianpu1 span{
        display: inline-block;
        margin-left: 20px;
    }


    </style>
</head>
<body>
    <div id="app">
        <!-- 商品列表图片 -->
        <div class="block" v-for="(item,index) in arr2">
            <img :src="item.pic" alt="">
            <div class="name"> {{ item.name }} </div>
            <!-- 店铺信息 -->
            <div class="dianpu">
                <div class="title">{{item.title}}</div>

                <div class="dianpu1">
                    <div class="price">￥{{item.price}}</div>
                    <div class="cond">￥{{item.cond}}</div>
                    <div class="jian" @click="jian(item)">-</div>
                    <span>{{item.num}}</span>
                    <div class="jia"  @click="jia(item)">+</div>
                </div>
            </div>
    </div>

</body>
</html>
<script src="vue-2.5.21.js"></script>
<script src="3.购物车.js"></script>