Browse Source

🎈 perf: 优化部分显示效果

Pchen. 3 weeks ago
parent
commit
88d4cf751c

+ 1 - 1
src/pages/power/accountList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="store-page power-page">
-    <div class="power-page__inner">
+    <div class="power-page__inner power-page__inner--wide">
       <Breadcrumb />
 
       <header class="page-header">

+ 1 - 1
src/pages/service/createOrder.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="store-page service-page">
-    <div class="service-page__inner">
+    <div class="service-page__inner service-page__inner--wide">
       <Breadcrumb />
 
       <header class="page-header">

+ 1 - 1
src/pages/service/orderDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="store-page service-page">
-    <div class="service-page__inner">
+    <div class="service-page__inner service-page__inner--wide">
       <Breadcrumb />
 
       <a-spin :loading="loading" class="store-spin">

+ 1 - 1
src/pages/service/orderList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="store-page service-page">
-    <div class="service-page__inner">
+    <div class="service-page__inner service-page__inner--wide">
       <Breadcrumb />
 
       <header class="page-header">

+ 13 - 4
src/styles/store-theme.less

@@ -12,12 +12,13 @@
 @store-shadow: 0 4px 24px rgba(27, 48, 34, 0.06);
 @store-shadow-hover: 0 12px 40px rgba(27, 48, 34, 0.12);
 @store-price: #e85d04;
+@store-layout-max-width: 1200px;
 
 // 由 style.css 全局引入,避免 scoped 导致样式失效
 .store-page {
   padding: 0 20px 32px;
   width: 100%;
-  max-width: 1200px;
+  max-width: @store-layout-max-width;
   margin: 0 auto;
   box-sizing: border-box;
 }
@@ -33,9 +34,13 @@
   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
+
+  &--wide {
+    max-width: @store-layout-max-width;
+  }
 }
 
-// 宿舍电费 — 略宽容器以容纳更多信息
+// 宿舍电费
 .power-page {
   width: 100%;
   max-width: none;
@@ -43,9 +48,13 @@
 
 .power-page__inner {
   width: 100%;
-  max-width: 960px;
+  max-width: 720px;
   margin-left: auto;
   margin-right: auto;
+
+  &--wide {
+    max-width: @store-layout-max-width;
+  }
 }
 
 // 云商城订单 — 列表与详情在内容区居中
@@ -57,7 +66,7 @@
 
 .order-page__inner {
   width: 100%;
-  max-width: 720px;
+  max-width: @store-layout-max-width;
   margin-left: auto;
   margin-right: auto;
 }