修复CSS样式

xa1st · Dec 1, 2023 · c9a798d · c9a798d
1 parent 1797432
commit c9a798d
Show file tree

Hide file tree

Showing 3 changed files with 309 additions and 182 deletions.
diff --git a/src/assets/base.scss b/src/assets/base.scss
@@ -27,6 +27,9 @@ $border-color:#c8c7cc;
 // 边框圆角
 $border-radius: 0.2rem;
 
+// 最大宽度
+$max-width: 1280px; 
+
 
 // 通用元素样式设计
 *, *::before, *::after {box-sizing: border-box; margin: 0; font-weight: normal;}
@@ -57,4 +60,4 @@ body {min-height: 100vh;font-size: 15px; background-color: $bg-color-grey;}
 input:focus {outline:1px solid $color-primary}
 
 // 默认容器大小
-#app {max-width: 1280px; margin: 0 auto; font-weight: normal;}
+#app {max-width: $max-width; margin: 0 auto; font-weight: normal;}
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -25,9 +25,9 @@
 
   </section>
 
-  <footer>
+  <footer class="fixed tool ">
     <!-- 总计 -->
-    <div class="tool fixed flex justify-between padding-24">
+    <div class="flex justify-between padding-24">
 			<div class="num">共计：<span class="val">{{ cartStore.total }}</span>件商品</div>
 			<div class="sum">总计：<span class="val">{{ sum }}</span>元</div>
 		</div>
@@ -186,7 +186,7 @@
   @import '@/assets/base.scss';
   // 加载图标
 	@import '@/assets/icon/iconfont.css';
-
+  header, section, footer {max-width: $max-width;}
   .titbox, .tool {width: 100%; background-color: $bg-color; height: 3.5rem; line-height: 3.5rem;}
   .titbox .clear {right: .8rem;top: 0;}
   .tool {bottom: 0;}