miaxis
/
simple-page


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财仝驾考商品</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            box-sizing: content-box;
        }

        .flex {
            display: flex;
        }

        .inline-block {
            display: inline-block;
        }

        .w-full {
            width: 100%;
        }

        .w466 {
            width: 466px;
        }

        .mt44 {
            margin-top: 44px;
        }

        .mt109 {
            margin-top: 109px;
        }

        .ml360 {
            margin-left: 360px;
        }

        .ml40 {
            margin-left: 40px;
        }
        .ml48{
            margin-left: 48px;
        }

        .mr20 {
            margin-right: 20px;
        }

        .ml25 {
            margin-left: 25px;
        }

        .w28 {
            width: 28px;
        }

        .font30 {
            font-size: 30px;
        }

        .font40 {
            font-size: 40px;
        }

        .font-blod {
            font-weight: bold;
        }

        .text-red {
            color: red;
        }

        .align-middle {
            vertical-align: middle;
        }

        .pr15 {
            padding-right: 15px;
        }

        .pl15 {
            padding-left: 15px;
        }

        .pt8 {
            padding-top: 8px;
        }

        .pb8 {
            padding-bottom: 8px;
        }

        .mt8 {
            margin-top: 8px;
        }

        .mt50 {
            margin-top: 50px;
        }

        .h50 {
            height: 50px;
        }

        .lh50 {
            line-height: 50px;
        }

        .w45 {
            width: 45px;
        }

        .text-center {
            text-align: center;
        }

        .w54 {
            width: 54px;
        }

        .w120 {
            width: 120px;
        }

        .w214 {
            width: 214px;
        }

        .w282 {
            width: 282px;
        }

        .w1102 {
            width: 1102px;
        }

        .round5 {
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div>
        <div class="mt109 ml360 flex">
            <div class="w28 mr20">
                <img src="./img/mini_good1.png" class="w-full">
                <img src="./img/mini_good2.png" class="w-full">
                <img src="./img/mini_good3.png" class="w-full">
                <img src="./img/mini_good4.png" class="w-full">
                <img src="./img/mini_good5.png" class="w-full">
            </div>
            <img class="w466" src="./img/good1.png">
            <div class="ml25">
                <span class="font30 font-blod">福州 | 华威夜间模拟灯光全套（东南V5）</span>
                <div class="align-middle">
                    <span>价格：</span><span class="font40 text-red">¥ 35.00</span>
                </div>
                <div class=" mt8">
                    <div>规格：<div style="
                        border: 1px solid #5C6066;display: inline-block;" class="pr15 pl15 pt8 pb8">考场视频</div>
                        <div style="
                        border: 1px solid red;display: inline-block;color: red;" class="pr15 pl15 pt8 pb8">考场视频</div>
                    </div>
                </div>
                <div class=" mt8 flex round5">
                    <span class="lh50">数量：</span>
                    <div class="h50  flex lh50">
                        <div onclick="reduceQuantity1()" style="
                            border: 1px solid #5C6066;border-top-left-radius: 5px;border-bottom-left-radius: 5px;cursor: pointer;"
                            class="w45 h50 text-center inline-block ">-</div>

                        <input value="1" class="w54 h50 inline-block text-center"
                            style="border: 1px solid #5C6066;outline: none;border-left: none;border-right: none;"
                            type="text" name="" id="quantity1">
                        <div onclick="addQuantity1()" style="
                            border: 1px solid #5C6066;border-top-right-radius: 5px;border-bottom-right-radius: 5px;cursor: pointer;"
                            class="w45 h50 text-center inline-block">+</div>
                        <span class="ml40">库存充足</span>

                    </div>

                </div>
                <div class="mt44">
                    <img class="w214" src="./img/btn1.png">
                    <img class="w282" src="./img/btn2.png">
                </div>


            </div>
        </div>
        <div class="ml360 mt50">
            <div>
                <img class="w120" src="./img/good_detail1.png">
            </div>
            <div class="ml48 mt50"> <img class="w1102" src="./img/good_detail2.png"></div>

           
        </div>

    </div>
</body>
<script>
    function addQuantity1(){
        document.getElementById('quantity1').value =Number( document.getElementById('quantity1').value)+1+''
    }
    function reduceQuantity1(){
        if(Number( document.getElementById('quantity1').value)==0){
            document.getElementById('quantity1').value='0'
            return

        }
        document.getElementById('quantity1').value =Number( document.getElementById('quantity1').value)-1+''
        
    }
    
    
</script>

</html>