fix(theme): 移除container ,layout中的样式 (#306)

* fix(theme): 移除container ,layout中的样式

* fix(docs): 恢复container.layout的示例

examples/docs/resources/pc/demo/container/basic-usage.vue

@@ -23,3 +23,36 @@ export default {
 }
 </script>
 
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #ffecec;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+</style>

examples/docs/resources/pc/demo/container/classic.vue

@@ -30,3 +30,43 @@ export default {
   }
 }
 </script>
+
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #fff0f0;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+
+.demo-container .tiny-container .main .changePattern .tiny-radio {
+  color: #a3a355;
+  font-size: 16px;
+  margin: 0 7px;
+}
+</style>

examples/docs/resources/pc/demo/container/custom-container.vue

@@ -60,3 +60,43 @@ export default {
   }
 }
 </script>
+
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #fff0f0;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+
+.demo-container .tiny-container .main .changePattern .tiny-radio {
+  color: #a3a355;
+  font-size: 16px;
+  margin: 0 7px;
+}
+</style>

examples/docs/resources/pc/demo/container/custom-with-height.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="demo-container coBox7">
-    <tiny-container :pattern="pattern" :aside-width="asideWidth" :footer-height="footerHeight" :header-height="headerHeight">
+    <tiny-container
+      :pattern="pattern"
+      :aside-width="asideWidth"
+      :footer-height="footerHeight"
+      :header-height="headerHeight"
+    >
       <template #header>
         <tiny-layout>header-height：80</tiny-layout>
       </template>
@@ -33,3 +38,43 @@ export default {
   }
 }
 </script>
+
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #fff0f0;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+
+.demo-container .tiny-container .main .changePattern .tiny-radio {
+  color: #a3a355;
+  font-size: 16px;
+  margin: 0 7px;
+}
+</style>

examples/docs/resources/pc/demo/container/fashion.vue

@@ -23,3 +23,36 @@ export default {
 }
 </script>
 
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #ffecec;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+</style>

examples/docs/resources/pc/demo/container/legend.vue

@@ -26,3 +26,36 @@ export default {
 }
 </script>
 
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #ffecec;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+</style>

examples/docs/resources/pc/demo/container/simple.vue

@@ -20,3 +20,36 @@ export default {
 }
 </script>
 
+<style>
+.demo-container .tiny-container {
+  height: 200px;
+  color: #5f6774;
+  text-align: center;
+  font-size: 18px;
+  position: relative;
+}
+
+.demo-container .tiny-container .tiny-container__header {
+  background-color: #ecf8ff;
+  border: 3px solid #ffffff;
+  color: #5b90af;
+}
+
+.demo-container .tiny-container .tiny-container__aside {
+  background-color: #ffecec;
+  border: 3px solid #ffffff;
+  color: #d27070;
+}
+
+.demo-container .tiny-container .tiny-container__main {
+  background-color: #fffdec;
+  border: 3px solid #ffffff;
+  color: #b1a859;
+}
+
+.demo-container .tiny-container .tiny-container__footer {
+  background-color: #e8ffed;
+  border: 3px solid #ffffff;
+  color: #84a18a;
+}
+</style>

examples/docs/resources/pc/demo/layout/alignment.vue

@@ -34,17 +34,17 @@
           <div class="col">justify end</div>
         </tiny-col>
       </tiny-row>
-      <tiny-row :flex="true" class="row-bg" justify="space-between">
+      <tiny-col :flex="true" class="row-bg" justify="space-between">
         <tiny-col :span="3">
           <div class="col">justify space-between</div>
         </tiny-col>
         <tiny-col :span="3">
-          <div class="col">justify space-between</div>
+          <div class="col">justify space-betwee</div>
         </tiny-col>
         <tiny-col :span="3">
-          <div class="col">justify space-between</div>
+          <div class="col">justify space-betwee</div>
+        </tiny-col>
       </tiny-col>
-      </tiny-row>
       <tiny-row :flex="true" class="row-bg" justify="space-around">
         <tiny-col :span="3">
           <div class="col">justify space-around</div>
@@ -106,6 +106,26 @@ export default {
 </script>
 
 <style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+
+.tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+
 .row-bg {
   padding: 10px 0;
   background-color: #f9fafc;

examples/docs/resources/pc/demo/layout/base.vue

@@ -49,3 +49,25 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.content .tiny-row {
+  margin-bottom: 20px;
+}
+
+.content .tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.content .tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.content .tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+</style>

examples/docs/resources/pc/demo/layout/gutter.vue

@@ -28,3 +28,25 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+
+.tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+</style>

examples/docs/resources/pc/demo/layout/offset.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="content">
-    <tiny-layout class="tiny-layout-offset">
-      <tiny-row>
+    <tiny-layout>
       <tiny-col :span="2">
         <div class="col">offset 0</div>
       </tiny-col>
@@ -14,24 +13,47 @@
       <tiny-col :span="2" :offset="1">
         <div class="col">offset 4</div>
       </tiny-col>
-      </tiny-row>
     </tiny-layout>
   </div>
 </template>
 
 <script lang="jsx">
-import { Layout, Row, Col } from '@opentiny/vue'
+import { Layout, Col } from '@opentiny/vue'
 
 export default {
   components: {
     TinyLayout: Layout,
-    TinyRow: Row,
     TinyCol: Col
   }
 }
 </script>
 
 <style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+
+.tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
 .align {
   height: 120px;
 }
@@ -47,4 +69,28 @@ export default {
 .sm {
   height: 40px;
 }
+
+.button {
+  width: 70px;
+  line-height: 30px;
+  text-align: center;
+  background: #46c096;
+  color: #fff;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.title {
+  margin-bottom: 20px;
+  margin-top: 20px;
+  line-height: 30px;
+  height: 30px;
+  overflow: hidden;
+}
+
+.item {
+  margin-bottom: 100px;
+  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
+  min-height: 200px;
+}
 </style>

examples/docs/resources/pc/demo/layout/order.vue

@@ -16,7 +16,9 @@
         </tiny-col>
       </tiny-row>
       <tiny-row :flex="true" :gutter="20" justify="center">
-        <tiny-button @click="toggleOrder">{{ state.buttonLabel }}</tiny-button>
+        <tiny-button @click="toggleOrder">
+          {{ state.buttonLabel }}
+        </tiny-button>
       </tiny-row>
     </tiny-layout>
   </div>
@@ -53,3 +55,25 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+
+.tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+</style>

examples/docs/resources/pc/demo/layout/responsive-layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <tiny-layout class="tiny-layout-responsive-layout">
+    <tiny-layout>
       <tiny-row :gutter="10">
         <tiny-col :xs="4" :sm="3" :md="2" :lg="4" :xl="1">
           <div class="col">1</div>
@@ -32,6 +32,26 @@ export default {
 </script>
 
 <style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+
+.tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+
 .lg {
   height: 80px;
 }

packages/theme/src/container/aurora-theme.js

@@ -1,10 +0,0 @@
-export const tinyContainerAuroraTheme = {
-    'ti-container-bg-color': '#0067d1',
-    'ti-container-color': '#ffffff',
-    'ti-container-aside-bg-color': 'rgba(0, 103, 209, 0.5)',
-    'ti-container-aside-color': '#ffffff',
-    'ti-container-main-bg-color': 'rgba(0, 103, 209, 0.2)',
-    'ti-container-main-color': '#191919',
-    'ti-container-footer-bg-color': 'rgba(0, 103, 209, 0.1)',
-    'ti-container-footer-color': '#191919'
-  }

packages/theme/src/container/index.js

@@ -1,16 +0,0 @@
-/**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
-
-export default {
-  // container
-  
-}

packages/theme/src/container/index.less

@@ -10,21 +10,16 @@
 *
 */
 
-// @import '../mixins/common.less';
 @import '../custom.less';
-@import './var.less';
 
 @container-prefix-cls: ~'@{css-prefix}container';
 
 .@{container-prefix-cls} {
-  .component-css-vars-container();
-
   & &__header,
   & &__aside,
   & &__main,
   & &__footer {
     position: absolute;
-    border: 3px solid #ffffff;
     box-sizing: border-box;
     top: 0;
     left: 0;
@@ -33,39 +28,12 @@
     margin: 0;
   }
 
-  & {
-    height: 200px;
-    color: #5f6774;
-    text-align: center;
-    font-size: 18px;
-    position: relative;
-  }
-
-  & &__header {
-    background-color: var(--ti-container-bg-color);
-    color: var(--ti-container-color);
-  }
-
-  & &__aside {
-    background-color: var(--ti-container-aside-bg-color);
-    color: var(--ti-container-aside-color);
-  }
-
   & &__main {
-    background-color: var(--ti-container-main-bg-color);
-    color: var(--ti-container-main-color);
     overflow-y: auto;
   }
 
   & &__footer {
-    background-color: var(--ti-container-footer-bg-color);
-    color: var(--ti-container-footer-color);
     top: auto;
     width: auto;
   }
-   & .main .changePattern .tiny-radio {
-    color: #a3a355;
-    font-size: 16px;
-    margin: 0 7px;
-  }
 }

packages/theme/src/container/var.less

@@ -1,18 +0,0 @@
-.component-css-vars-container() {
-    // header背景色
-    --ti-container-bg-color: #ecf8ff;
-    // header字体颜色
-    --ti-container-color: #d27070;
-    // aside背景色
-    --ti-container-aside-bg-color: #ffecec;
-    // aside字体颜色
-    --ti-container-aside-color: #d27070;
-    // main背景颜色
-    --ti-container-main-bg-color: #fffdec;
-    // main字体颜色
-    --ti-container-main-color: #b1a859;
-    // footer背景颜色
-    --ti-container-footer-bg-color: #e8ffed;
-    // footer字体颜色
-    --ti-container-footer-color: #84a18a;
-}

packages/theme/src/layout/aurora-theme.js

@@ -1,14 +0,0 @@
-export const tinyLayoutAuroraTheme = {
-  'ti-layout-col-bg-color': '#0067d1',
-  'ti-layout-row-bg-color': '#0067d1',
-  'ti-layout-even-bg-color': '#0067d1',
-  'ti-layout-offset-bg-color': 'rgba(0, 103, 209, 0.5)',
-  'ti-layout-align-bg-color': '#0067d1',
-  'ti-layout-gutter-bg-color': '#0067d1',
-  'ti-layout-justify-bg-color': '#0067d1',
-  'ti-layout-order-bg-color': '#0067d1',
-  'ti-layout-responsive-bg-color': 'rgba(0, 103, 209, 0.5)',
-  'ti-layout-tag1-bg-color': '#0067d1',
-  'ti-layout-tag-bg-color': '#0067d1',
-  'ti-layout-move-bg-color': '#0067d1'
-}

packages/theme/src/layout/index.js

@@ -1,15 +0,0 @@
-/**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
-
-export default {
-  // layout
-}

packages/theme/src/layout/index.less

@@ -10,130 +10,3 @@
 *
 */
  
-@import '../custom.less';
-@import './var.less';
-
-@layout-prefix-cls: ~'@{css-prefix}layout';
-@layout-align-prefix-cls: ~'@{layout-prefix-cls}-align';
-@layout-offset-prefix-cls: ~'@{layout-prefix-cls}-offset';
-@layout-responsive-layout-prefix-cls: ~'@{layout-prefix-cls}-responsive-layout';
-@layout-gutter-prefix-cls: ~'@{layout-prefix-cls}-gutter';
-@layout-justify-prefix-cls: ~'@{layout-prefix-cls}-justify';
-@layout-order-prefix-cls: ~'@{layout-prefix-cls}-order';
-@layout-tag1-prefix-cls: ~'@{layout-prefix-cls}-tag1';
-@layout-tag-prefix-cls: ~'@{layout-prefix-cls}-tag';
-@layout-col-move-prefix-cls: ~'@{layout-prefix-cls}-col-move';
-@col-cls: ~'@{css-prefix}col';
-@row-cls: ~'@{css-prefix}row';
-
-.@{layout-prefix-cls} {
-    .component-css-vars-layout();
-
-    & .@{row-cls} {
-        margin-bottom: 20px;
-    }
-
-    & .@{row-cls} .last-child {
-        margin-bottom: 0;
-    }
-
-    & .@{row-cls} .@{col-cls} .col {
-        line-height: 30px;
-        text-align: center;
-        color: #fff;
-        background-color: var(--ti-layout-col-bg-color);
-        border-radius: 15px;
-    }
-
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-even-bg-color);
-    }
-}
-
-.@{layout-offset-prefix-cls} {
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-offset-bg-color);
-    }
-}
-
-.@{layout-responsive-layout-prefix-cls} {
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-even-bg-color);
-    }
-
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-responsive-bg-color);
-    }
-}
-
-
-.@{layout-align-prefix-cls} {
-    & .@{row-cls} .@{col-cls} .col {
-        background-color: var(--ti-layout-row-bg-color);
-    }
-
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-align-bg-color);
-    }
-}
-
-.@{layout-gutter-prefix-cls} {
-    & .@{row-cls} .@{col-cls} .col {
-        background-color: var(--ti-layout-row-bg-color);
-    }
-
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-gutter-bg-color);
-    }
-}
-
-.@{layout-justify-prefix-cls} {
-    & .@{row-cls} .@{col-cls} .col {
-        background-color: var(--ti-layout-row-bg-color);
-    }
-
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-justify-bg-color);
-    }
-}
-
-
-.@{layout-order-prefix-cls} {
-    & .@{row-cls} .@{col-cls} .col {
-        background-color: var(--ti-layout-row-bg-color);
-    }
-
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-order-bg-color);
-    }
-}
-
-.@{layout-tag1-prefix-cls} {
-    & .@{row-cls} .@{col-cls} .col {
-        background-color: var(--ti-layout-row-bg-color);
-    }
-
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-tag1-bg-color);
-    }
-}
-
-.@{layout-tag-prefix-cls} {
-    & .@{row-cls} .@{col-cls} .col {
-        background-color: var(--ti-layout-row-bg-color);
-    }
-
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-tag-bg-color);
-    }
-}
-
-.@{layout-col-move-prefix-cls} {
-    & .@{row-cls} .@{col-cls} .col {
-        background-color: var(--ti-layout-row-bg-color);
-    }
-
-    & .@{row-cls} .@{col-cls}:nth-child(even) .col {
-        background: var(--ti-layout-move-bg-color);
-    }
-}

packages/theme/src/layout/var.less

@@ -1,26 +0,0 @@
-.component-css-vars-layout() {
-    // 布局块col列背景色
-    --ti-layout-col-bg-color: #1f9ed8;
-    // 布局块为偶数背景色
-    --ti-layout-even-bg-color: #73d0fc;
-    // 布局块row行背景色
-    --ti-layout-row-bg-color: #1f9ed8;
-    // 自定义布局背景色
-    --ti-layout-tag1-bg-color: #1f9ed8;
-    // 垂直排列方式背景色
-    --ti-layout-align-bg-color: #1f9ed8;
-    // 栅格间隔背景色
-    --ti-layout-gutter-bg-color: #1f9ed8;
-    // 水平排列方式背景色
-    --ti-layout-justify-bg-color: #1f9ed8;
-    // 排序方式布局背景色
-    --ti-layout-order-bg-color: #1f9ed8;
-    // 偏移布局背景色
-    --ti-layout-offset-bg-color: #73d0fc;
-    // 响应式布局背景色
-    --ti-layout-responsive-bg-color: #73d0fc;
-    // 自定义元素标签布局背景色
-    --ti-layout-tag-bg-color: #1f9ed8;
-    // 移动布局背景色
-    --ti-layout-move-bg-color: #1f9ed8;
-}