审核页面添加2

ct_goods/index.html

@@ -9,13 +9,17 @@
         * {
             padding: 0;
             margin: 0;
-            box-sizing: border-box;
+            box-sizing: content-box;
         }
 
         .flex {
             display: flex;
         }
 
+        .inline-block {
+            display: inline-block;
+        }
+
         .w-full {
             width: 100%;
         }
@@ -24,6 +28,10 @@
             width: 466px;
         }
 
+        .mt44 {
+            margin-top: 44px;
+        }
+
         .mt109 {
             margin-top: 109px;
         }
@@ -32,6 +40,13 @@
             margin-left: 360px;
         }
 
+        .ml40 {
+            margin-left: 40px;
+        }
+        .ml48{
+            margin-left: 48px;
+        }
+
         .mr20 {
             margin-right: 20px;
         }
@@ -59,6 +74,74 @@
         .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>
 
@@ -75,19 +158,68 @@
             <img class="w466" src="./img/good1.png">
             <div class="ml25">
                 <span class="font30 font-blod">福州 | 华威夜间模拟灯光全套（东南V5）</span>
-                <div>
+                <div class="align-middle">
                     <span>价格：</span><span class="font40 text-red">¥ 35.00</span>
                 </div>
-                <div class="flex">
-                    <span>规格：<div>考场视频</div>
-                        <div>考场视频</div>
-                    </span>
+                <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;"
+                            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;"
+                            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>