Future há 3 anos atrás
pai
commit
409cef2690

+ 67 - 68
src/main/webapp/ShoppingCart.html

@@ -8,84 +8,82 @@
     <link rel="stylesheet" type="text/css" href="css/testingCss.css">
 </head>
 <body>
-    <div id="Cartlist">
-        <div id="Store">
-            <div class="lable">
-                <input type="checkbox">
-                <div id="StoreIcon">
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
-                </div>
-                <h3>StoreA</h3>
+    <div id="Store">
+        <div class="lable">
+            <input type="checkbox">
+            <div id="StoreIcon">
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
             </div>
-            <div class="goods">
-                <input type="checkbox">
-                <div id="GoodsIcon">
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
-                </div>
-                <div id="exp">
-                    <h3>GoodsA</h3>
-                    <p>info & selected</p>
-                    <div id="count">
-                        <button>-</button>
-                        <input type="text">
-                        <button>+</button>
-                    </div>
-                </div>
+            <h3>StoreA</h3>
+        </div>
+        <div class="goods">
+            <input type="checkbox">
+            <div id="GoodsIcon">
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
             </div>
-            <div class="goods">
-                <input type="checkbox">
-                <div id="GoodsIcon">
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
+            <div id="exp">
+                <h3>GoodsA</h3>
+                <p>info & selected</p>
+                <div id="count">
+                    <button>-</button>
+                    <input type="text">
+                    <button>+</button>
                 </div>
-                <div id="exp">
-                    <h3>GoodsB</h3>
-                    <p>info & selected</p>
-                    <div id="count">
-                        <button>-</button>
-                        <input type="text">
-                        <button>+</button>
-                    </div>
+            </div>
+        </div>
+        <div class="goods">
+            <input type="checkbox">
+            <div id="GoodsIcon">
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
+            </div>
+            <div id="exp">
+                <h3>GoodsB</h3>
+                <p>info & selected</p>
+                <div id="count">
+                    <button>-</button>
+                    <input type="text">
+                    <button>+</button>
                 </div>
             </div>
         </div>
+    </div>
 
 
-        <div id="Store">
-            <div class="lable">
-                <input type="checkbox">
-                <div id="StoreIcon">
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
-                </div>
-                <h3>StoreB</h3>
+    <div id="Store">
+        <div class="lable">
+            <input type="checkbox">
+            <div id="StoreIcon">
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
             </div>
-            <div class="goods">
-                <input type="checkbox">
-                <div id="GoodsIcon">
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
-                </div>
-                <div id="exp">
-                    <h3>GoodsC</h3>
-                    <p>info & selected</p>
-                    <div id="count">
-                        <button>-</button>
-                        <input type="text">
-                        <button>+</button>
-                    </div>
-                </div>
+            <h3>StoreB</h3>
+        </div>
+        <div class="goods">
+            <input type="checkbox">
+            <div id="GoodsIcon">
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
             </div>
-            <div class="goods">
-                <input type="checkbox">
-                <div id="GoodsIcon">
-                    <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
+            <div id="exp">
+                <h3>GoodsC</h3>
+                <p>info & selected</p>
+                <div id="count">
+                    <button>-</button>
+                    <input type="text">
+                    <button>+</button>
                 </div>
-                <div id="exp">
-                    <h3>GoodsD</h3>
-                    <p>info & selected</p>
-                    <div id="count">
-                        <button>-</button>
-                        <input type="text">
-                        <button>+</button>
-                    </div>
+            </div>
+        </div>
+        <div class="goods">
+            <input type="checkbox">
+            <div id="GoodsIcon">
+                <img src="https://assets.burberry.com/is/image/Burberryltd/0c498f053ef33c97aab8f9a472265caed3e75a39.jpg?$BBY_V2_SL_3x4$=&wid=1903&hei=2537">
+            </div>
+            <div id="exp">
+                <h3>GoodsD</h3>
+                <p>info & selected</p>
+                <div id="count">
+                    <button>-</button>
+                    <input type="text">
+                    <button>+</button>
                 </div>
             </div>
         </div>
@@ -93,7 +91,7 @@
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script>
-        $("div#Cartlist>div#Store>div.goods>div#exp>div#count>Button").click(function()
+        $("body>div#Store>div.goods>div#exp>div#count>Button").click(function()
         {
             if(this.innerHTML == "-")
             {
@@ -105,6 +103,7 @@
                 text.value = num;
             }
             else
+            if(this.innerHTML == "+")
             {
                 let text = $(this).prev()[0];
                 let num = Number.parseInt(text.value);

+ 50 - 27
src/main/webapp/css/testingCss.css

@@ -1,56 +1,63 @@
 
 body{
-    background-color: transparent;
+    /* background-color: transparent; */
+    position: relative;
     margin: 0;
+    font-family: 'Harmony SC';
+    min-height: 100px;
+    min-width: 500px;
+    background-color: whitesmoke;
 }
 
-div#Cartlist
+/* div#Cartlist
 {
     border-radius: 10px;
-    position: r;
+    position: relative;
     width: 100%;
     min-height: 100px;
     min-width: 500px;
-    background-color: gainsboro;
-    border: 2px solid gray;
-}
-div#Cartlist>div#Store
+    background-color: whitesmoke;
+} */
+body>div#Store
 {
     position: relative;
-    margin-bottom: 10px;
+    margin-top: 10px;
+    margin-left: 15px;
+    margin-right: 15px;
     border-radius: 10px;
     background-color: white;
     font-size: 16px;
     overflow: hidden;
 }
-div#Cartlist>div#Store:last-child
+/* div#Cartlist>div#Store:last-child
 {
     margin-bottom: 0;
-}
-div#Cartlist>div#Store>div{
-    border-bottom: 1px solid gray;
+} */
+body>div#Store>div{
+    border-bottom: 1px solid gainsboro;
 }
 
-div#Cartlist>div#Store>div:last-child{
+body>div#Store>div:last-child{
     border-bottom: 0;
 }
 
-div#Cartlist>div#Store>div.lable
+body>div#Store>div.lable
 {
     height: 48px;
     line-height: 48px;
     display: flex;
     justify-items: center;
     overflow: hidden;
+    background-color: transparent;
 }
-div#Cartlist>div#Store>div.lable>input
+body>div#Store>div.lable>input
 {
     height: 24px;
     width: 24px;
     margin: 12px;
     margin-left: calc(1ch + 12px);
 }
-div#Cartlist>div#Store>div.lable>div#StoreIcon
+body>div#Store>div.lable>div#StoreIcon
 {
     height: 40px;
     width: 40px;
@@ -58,31 +65,31 @@ div#Cartlist>div#Store>div.lable>div#StoreIcon
     margin-left: calc(1ch + 4px);
     text-align: center;
 }
-div#Cartlist>div#Store>div.lable>div#StoreIcon>img
+body>div#Store>div.lable>div#StoreIcon>img
 {
     max-width: 100%;
     max-height: 100%;
 }
-div#Cartlist>div#Store>div.lable>h3
+body>div#Store>div.lable>h3
 {
     margin: 0;
 }
 
-div#Cartlist>div#Store>div.goods{
+body>div#Store>div.goods{
     height: 96px;
     display: flex;
     justify-items: center;
     overflow: hidden;
-    background-color:aliceblue;
+    background-color:transparent;
 }
-div#Cartlist>div#Store>div.goods>input{
+body>div#Store>div.goods>input{
     height: 24px;
     min-width: 24px;
     margin: 36px;
     margin-left: calc(1ch + 12px);
     margin-right: calc(1ch + 12px);
 }
-div#Cartlist>div#Store>div.goods>div#GoodsIcon
+body>div#Store>div.goods>div#GoodsIcon
 {
     height: 88px;
     min-width: 88px;
@@ -90,24 +97,24 @@ div#Cartlist>div#Store>div.goods>div#GoodsIcon
     margin-left: calc(1ch + 4px);
     text-align: center;
 }
-div#Cartlist>div#Store>div.goods>div#GoodsIcon>img
+body>div#Store>div.goods>div#GoodsIcon>img
 {
     max-width: 100%;
     max-height: 100%;
 }
-div#Cartlist>div#Store>div.goods>div#exp
+body>div#Store>div.goods>div#exp
 {
     position: relative;
     margin: 8px;
     height: 80px;
     width: 100%;
 }
-div#Cartlist>div#Store>div.goods>div#exp>*
+body>div#Store>div.goods>div#exp>*
 {
     width: 100%;
     margin: 0;
 }
-div#Cartlist>div#Store>div.goods>div#exp>div#count
+body>div#Store>div.goods>div#exp>div#count
 {
     position: absolute;
     width: 25%;
@@ -121,7 +128,7 @@ div#Cartlist>div#Store>div.goods>div#exp>div#count
     display: flex;
     overflow: hidden;
 }
-div#Cartlist>div#Store>div.goods>div#exp>div#count>*{
+body>div#Store>div.goods>div#exp>div#count>*{
     width: 100%;
     height: 100%;
     margin: 0;
@@ -129,4 +136,20 @@ div#Cartlist>div#Store>div.goods>div#exp>div#count>*{
     border: 0;
     outline: 1px solid gray;
     text-align: center;
+    background-color: white;
+}
+body>div#Store>div.goods>div#exp>div#count>*:hover
+{
+    background-color: gainsboro;
+}
+body>div#Store>div.goods>div#exp>div#count>*:active
+{
+    background-color: gray;
+}
+
+
+@font-face
+{
+    font-family: 'Harmony SC';
+    src: url(../font/HarmonyOS_Sans_SC_Medium.ttf);
 }

BIN
src/main/webapp/font/HarmonyOS_Sans_SC_Medium.ttf