From 3096dccd0534c894ab4d8ba072d84015e9122c0d Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Fri, 10 Jun 2022 11:01:39 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84tagview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/u-container-layout/index.vue   |   9 +-
 src/components/u-info/index.vue               |   7 +-
 src/components/u-screenfull/index.vue         |   6 +
 src/layout/components/AppMain.vue             |   8 +-
 src/layout/components/UHeader/index.vue       |   3 +-
 src/layout/index.vue                          |   4 +-
 src/main.ts                                   |   2 +
 .../charts/components/migration/index.vue     | 537 +++++++++---------
 src/views/charts/migration.vue                |   3 +-
 src/views/charts/simple.vue                   |   4 +-
 src/views/chat/index.vue                      |  11 +-
 src/views/clipboard/index.vue                 |   6 +-
 src/views/components-demo/button.vue          | 259 ++++-----
 src/views/components-demo/checkbox.vue        | 167 +++---
 src/views/components-demo/datetimepicker.vue  | 123 ++--
 src/views/components-demo/flow-chart.vue      |   4 +-
 src/views/components-demo/form.vue            | 149 ++---
 src/views/components-demo/input.vue           | 181 +++---
 src/views/components-demo/inputnumber.vue     | 129 +++--
 src/views/components-demo/link.vue            | 103 ++--
 src/views/components-demo/radio.vue           | 121 ++--
 src/views/components-demo/scroll.vue          |  15 +-
 src/views/components-demo/slider.vue          | 167 +++---
 src/views/components-demo/timepicker.vue      |  85 +--
 src/views/components-demo/upload.vue          | 117 ++--
 src/views/error/401.vue                       |   6 +-
 src/views/error/404.vue                       |   6 +-
 src/views/excel/export-excel.vue              |   4 +-
 src/views/excel/export-merge-header.vue       |   4 +-
 src/views/excel/export-style-excel.vue        |   4 +-
 src/views/excel/upload-excel.vue              |   4 +-
 src/views/home/index.vue                      | 218 +++----
 src/views/other/count.vue                     |   4 +-
 src/views/other/cropper/index.vue             |   4 +-
 src/views/other/editor.vue                    |  55 +-
 src/views/other/grid-sorter.vue               |   4 +-
 src/views/other/mark-down.vue                 |   4 +-
 src/views/other/print.vue                     |   4 +-
 src/views/other/qrcode.vue                    |   4 +-
 src/views/other/right-menu.vue                |   4 +-
 src/views/other/splitpane.vue                 |   4 +-
 src/views/permission/page.vue                 |   4 +-
 src/views/table/comprehensive.vue             | 125 ++--
 src/views/table/edit.vue                      |   3 +
 src/views/table/inline-edit-table.vue         | 167 +++---
 src/views/table/multi-table.vue               |  29 +-
 src/views/zip/download.vue                    |   4 +-
 47 files changed, 1479 insertions(+), 1406 deletions(-)

diff --git a/src/components/u-container-layout/index.vue b/src/components/u-container-layout/index.vue
index a49ec35..f196deb 100644
--- a/src/components/u-container-layout/index.vue
+++ b/src/components/u-container-layout/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="m-container-layout">
+    <slot></slot>
   </div>
 </template>
 
@@ -7,6 +8,10 @@
 
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+  .m-container-layout{
+    margin: 20px;
+    padding: 20px;
+    background: white;
+  }
 </style>
diff --git a/src/components/u-info/index.vue b/src/components/u-info/index.vue
index aa17c29..068a132 100644
--- a/src/components/u-info/index.vue
+++ b/src/components/u-info/index.vue
@@ -6,7 +6,7 @@
         >
             <template #reference>
                 <el-badge :value="3"  class="item-info-pop">
-                    <el-icon><Bell /></el-icon>
+                    <el-icon class="bell"><Bell /></el-icon>
                 </el-badge>
             </template>
             <div>
@@ -58,4 +58,9 @@
         font-size: 13px;
     }
 }
+.transverseMenu{
+  .bell{
+    color: white;
+  }
+}
 </style>
diff --git a/src/components/u-screenfull/index.vue b/src/components/u-screenfull/index.vue
index 601564b..eb345c4 100644
--- a/src/components/u-screenfull/index.vue
+++ b/src/components/u-screenfull/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="m-screenful">
     <el-icon
+        class="full-screen"
             title="全屏"
             @click.stop="click"
             style="margin-right: 10px;cursor: pointer" ><full-screen /></el-icon>
@@ -58,4 +59,9 @@
     cursor: pointer;
     transition: all .3s;
   }
+  .transverseMenu{
+    .full-screen{
+      color: white;
+    }
+  }
 </style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index e6cab78..55a15e3 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,9 +1,9 @@
 <template>
-  <section class="app-main" >
+  <section class="app-main"  >
         <router-view v-slot="{ Component,route }">
           <transition name="fade-slide" mode="out-in" appear>
             <keep-alive :include="cachedViews">
-              <component :is="Component" :key="route.name" v-if="isReload"/>
+                <component :is="Component" :key="route.name" />
             </keep-alive>
           </transition>
         </router-view>
@@ -28,7 +28,7 @@
 
 <style lang="scss" scoped>
   .app-main{
-    padding: 20px;
+    //padding: 20px;
     /*padding-top: 110px;*/
     //min-height: 100%;
     //overflow: auto;
@@ -37,7 +37,7 @@
       overflow: hidden;
     box-sizing: border-box;
     //padding-top: 70px;
-      background: white;
+    //  background: white;
   }
 
 
diff --git a/src/layout/components/UHeader/index.vue b/src/layout/components/UHeader/index.vue
index d247869..5761617 100644
--- a/src/layout/components/UHeader/index.vue
+++ b/src/layout/components/UHeader/index.vue
@@ -2,7 +2,7 @@
   <div
           class="m-layout-header"
           :style="{left:`${mode==='horizontal'?0:isCollapse?'56':'210'}px`}">
-    <div class="header" :class="{
+        <div class="header" :class="{
             transverseMenu:mode==='horizontal'
           }">
       <menu-slide v-if="mode==='horizontal'"/>
@@ -161,4 +161,5 @@
     display: flex;
     align-items: center;
   }
+
 </style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index e86286c..ded73ae 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -98,9 +98,9 @@
     z-index: 999;
   }
   .m-container-content{
-    padding: 20px;
+    //padding: 20px;
     /*background: #f6f8f9;*/
-    padding-top: 110px;
+    padding-top: 93px;
     position: relative;
   }
   .app-main-hide-tag{
diff --git a/src/main.ts b/src/main.ts
index afa9219..1a35474 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,10 +6,12 @@ import store from './store'
 import './permission'
 import SvgIcon from './icons/index'
 import ElementPlus from 'element-plus'
+import UContainerLayout from '@/components/u-container-layout/index.vue'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 const app = createApp(App)
 app.component('svg-icon',SvgIcon)
+app.component('u-container-layout',UContainerLayout)
 import * as ElIconsModules from '@element-plus/icons-vue'
 // 全局注册element-plus icon图标组件
 Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
diff --git a/src/views/charts/components/migration/index.vue b/src/views/charts/components/migration/index.vue
index 9df1da3..f2c1989 100644
--- a/src/views/charts/components/migration/index.vue
+++ b/src/views/charts/components/migration/index.vue
@@ -3,280 +3,279 @@
   <div :id="id" :class="className" :style="{height:height,width:width}" />
 </template>
 <script lang="ts" setup>
-import 'echarts-liquidfill/src/liquidFill.js'
-import {geoJson} from './get.js'
-import * as echarts from "echarts";
-import {EChartsType} from "echarts/core";
-import {onMounted} from "vue";
+  import {geoJson} from './get.js'
+  import * as echarts from "echarts";
+  import {EChartsType} from "echarts/core";
+  import {onMounted} from "vue";
 
-let props = defineProps({
-  className: {
-    type: String,
-    default: 'chart'
-  },
-  config:{
-    type: Object,
-    default: ()=>{}
-  },
-  id: {
-    type: String,
-    default: 'chart'
-  },
-  width: {
-    type: String,
-    default: '200px'
-  },
-  height: {
-    type: String,
-    default: '200px'
-  }
-})
-
-var geoGpsMap = [109.1162, 34.2004]
-var geoCoordMap = {
-  "江苏": [118.8062, 31.9208],
-  '内蒙古': [110.3467, 41.4899],
-  "辽宁": [123.1238, 42.1216],
-  "陕西": [109.1162, 34.2004],
-  "甘肃": [103.5901, 36.3043],
-  "青海": [101.4038, 36.8207],
-  "新疆": [87.9236, 43.5883],
-
-  "河南": [113.4668, 34.6234],
-  "西藏": [116.3896, 39.91],
-  "浙江": [119.5313, 29.8773],
-  "福建": [119.4543, 25.9222],
-  "湖南": [113.0823, 28.2568],
-  "四川": [113.0823, 28.2568],
-  "云南": [102.9199, 25.4663],
-  "广东": [113.12244, 23.009505],
-  "海南": [110.3893, 19.8516]
-};
-
-var value = {
-  '江苏': 10000,
-  '内蒙古': 10000,
-  '辽宁': 10000,
-  '陕西': 10000,
-  '福建': 10000,
-  '甘肃': 10000,
-  '青海': 10000,
-  '新疆': 10000,
-  '湖北': 10000,
-  '浙江': 10000,
-  '河南': 10000,
-  '湖南': 10000,
-  '云南': 10000,
-  '广东': 10000,
-  '海南': 10000,
-  '西藏': 10000,
-
-
-
-};
-var colors = '#f9b207';
-
-var year = ["长春", "长春", "青岛", "青岛", "成都", "成都"];
-var mapData = [];
-
-/*柱子Y名称*/
-var categoryData = [];
-var barData = [];
-
-for (var key in geoCoordMap) {
-  mapData.push({
-    "year": '陕西',
-    "name": key,
-    "value": value[key] / 100,
-    "value1": value[key] / 100,
-  });
-}
-
-mapData.sort(function sortNumber(a, b) {
-  return a.value - b.value
-});
-for (var j = 0; j < mapData.length; j++) {
-  barData.push(mapData[j].value1);
-  categoryData.push(mapData[j].name);
-}
-
-echarts.registerMap('china', geoJson);
-var convertData = function(data) {
-  var res = [];
-  for (var i = 0; i < data.length; i++) {
-    var geoCoord = geoCoordMap[data[i].name];
-    if (geoCoord) {
-      res.push({
-        name: data[i].name,
-        value: geoCoord.concat(data[i].value)
-      });
-    }
-  }
-  return res;
-};
-var convertToLineData = function(data, gps) {
-  var res = [];
-  for (var i = 0; i < data.length; i++) {
-    var dataItem = data[i];
-    var toCoord = geoCoordMap[dataItem.name];
-    // debugger;
-    var fromCoord = gps; //郑州
-    //  var toCoord = geoGps[Math.random()*3];
-    if (fromCoord && toCoord) {
-      res.push([{
-        coord: fromCoord,
-        value: dataItem.value
-      }, {
-        coord: toCoord,
-      }]);
-    }
-  }
-  return res;
-};
-
-
-
-const options = {
-  backgroundColor: '#001540',
-  geo: {
-    show: true,
-    map: 'china',
-    roam: true,
-    zoom: 1,
-    center: [101.4038, 36.8207],
-    label: {
-      emphasis: {
-        show: false
-      }
+  let props = defineProps({
+    className: {
+      type: String,
+      default: 'chart'
     },
-    itemStyle: {
-      normal: {
-        borderColor: 'rgba(147, 235, 248, 1)',
-        borderWidth: 1,
-        areaColor: {
-          type: 'radial',
-          x: 0.5,
-          y: 0.5,
-          r: 0.8,
-          colorStops: [{
-            offset: 0,
-            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
-          }, {
-            offset: 1,
-            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
-          }],
-          globalCoord: false // 缺省为 false
-        },
-        shadowColor: 'rgba(128, 217, 248, 1)',
-        // shadowColor: 'rgba(255, 255, 255, 1)',
-        shadowOffsetX: -2,
-        shadowOffsetY: 2,
-        shadowBlur: 10
-      },
-      emphasis: {
-        areaColor: '#389BB7',
-        borderWidth: 0
-      }
-    }
-  },
-  series: [
-
-    //地图？
-    {
-      type: 'map',
-      map: 'china',
-      geoIndex: 0,
-      aspectScale: 0.75, //长宽比
-      showLegendSymbol: false, // 存在legend时显示
-      label: {
-        normal: {
-          show: false
-        },
-        emphasis: {
-          show: false,
-          textStyle: {
-            color: '#fff'
-          }
-        }
-      },
-      roam: true,
-      itemStyle: {
-        normal: {
-          areaColor: '#031525',
-          borderColor: '#FFFFFF',
-        },
-        emphasis: {
-          areaColor: '#2B91B7'
-        }
-      },
-      animation: false
+    config:{
+      type: Object,
+      default: ()=>{}
     },
-    //地图点的动画效果
-    {
-      //  name: 'Top 5',
-      type: 'effectScatter',
-      coordinateSystem: 'geo',
-      data: convertData(mapData.sort(function(a, b) {
-        return b.value - a.value;
-      }).slice(0, 20)),
-      symbolSize: function(val) {
-        return val[2] / 10;
-      },
-      showEffectOn: 'render',
-      rippleEffect: {
-        brushType: 'stroke'
-      },
-      hoverAnimation: true,
-      label: {
-        normal: {
-          formatter: '{b}',
-          position: 'right',
-          show: true
-        }
-      },
-      itemStyle: {
-        normal: {
-          color: colors,
-          shadowBlur: 10,
-          shadowColor: colors
-        }
-      },
-      zlevel: 1
+    id: {
+      type: String,
+      default: 'chart'
     },
-    //地图线的动画效果
-    {
-      type: 'lines',
-      zlevel: 2,
-      effect: {
-        show: true,
-        period: 4, //箭头指向速度，值越小速度越快
-        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
-        symbol: 'arrow', //箭头图标
-        symbolSize: 3, //图标大小
-      },
-      lineStyle: {
-        normal: {
-          color: colors,
-          width: 0.1, //尾迹线条宽度
-          opacity: 0.5, //尾迹线条透明度
-          curveness: .3 //尾迹线条曲直度
-        }
-      },
-      data: convertToLineData(mapData, geoGpsMap)
+    width: {
+      type: String,
+      default: '300px'
+    },
+    height: {
+      type: String,
+      default: '200px'
     }
-  ]
-};
-let chart:EChartsType;
-const initChart =()=> {
-  let chart = echarts.init(document.getElementById(props.id))
-  chart.setOption(options)
-  return chart
-}
-onMounted(()=>{
-  chart = initChart()
-  window.addEventListener('resize',function (){
-    chart&&chart.resize()
   })
 
-})
+  var geoGpsMap = [109.1162, 34.2004]
+  var geoCoordMap = {
+    "江苏": [118.8062, 31.9208],
+    '内蒙古': [110.3467, 41.4899],
+    "辽宁": [123.1238, 42.1216],
+    "陕西": [109.1162, 34.2004],
+    "甘肃": [103.5901, 36.3043],
+    "青海": [101.4038, 36.8207],
+    "新疆": [87.9236, 43.5883],
+
+    "河南": [113.4668, 34.6234],
+    "西藏": [116.3896, 39.91],
+    "浙江": [119.5313, 29.8773],
+    "福建": [119.4543, 25.9222],
+    "湖南": [113.0823, 28.2568],
+    "四川": [113.0823, 28.2568],
+    "云南": [102.9199, 25.4663],
+    "广东": [113.12244, 23.009505],
+    "海南": [110.3893, 19.8516]
+  };
+
+  var value = {
+    '江苏': 10000,
+    '内蒙古': 10000,
+    '辽宁': 10000,
+    '陕西': 10000,
+    '福建': 10000,
+    '甘肃': 10000,
+    '青海': 10000,
+    '新疆': 10000,
+    '湖北': 10000,
+    '浙江': 10000,
+    '河南': 10000,
+    '湖南': 10000,
+    '云南': 10000,
+    '广东': 10000,
+    '海南': 10000,
+    '西藏': 10000,
+
+
+
+  };
+  var colors = '#f9b207';
+
+  var year = ["长春", "长春", "青岛", "青岛", "成都", "成都"];
+  var mapData = [];
+
+  /*柱子Y名称*/
+  var categoryData = [];
+  var barData = [];
+
+  for (var key in geoCoordMap) {
+    mapData.push({
+      "year": '陕西',
+      "name": key,
+      "value": value[key] / 100,
+      "value1": value[key] / 100,
+    });
+  }
+
+  mapData.sort(function sortNumber(a, b) {
+    return a.value - b.value
+  });
+  for (var j = 0; j < mapData.length; j++) {
+    barData.push(mapData[j].value1);
+    categoryData.push(mapData[j].name);
+  }
+
+  echarts.registerMap('china', geoJson);
+  var convertData = function(data) {
+    var res = [];
+    for (var i = 0; i < data.length; i++) {
+      var geoCoord = geoCoordMap[data[i].name];
+      if (geoCoord) {
+        res.push({
+          name: data[i].name,
+          value: geoCoord.concat(data[i].value)
+        });
+      }
+    }
+    return res;
+  };
+  var convertToLineData = function(data, gps) {
+    var res = [];
+    for (var i = 0; i < data.length; i++) {
+      var dataItem = data[i];
+      var toCoord = geoCoordMap[dataItem.name];
+      // debugger;
+      var fromCoord = gps; //郑州
+      //  var toCoord = geoGps[Math.random()*3];
+      if (fromCoord && toCoord) {
+        res.push([{
+          coord: fromCoord,
+          value: dataItem.value
+        }, {
+          coord: toCoord,
+        }]);
+      }
+    }
+    return res;
+  };
+
+
+
+  const options = {
+    backgroundColor: '#001540',
+    geo: {
+      show: true,
+      map: 'china',
+      roam: true,
+      zoom: 1,
+      center: [101.4038, 36.8207],
+      label: {
+        emphasis: {
+          show: false
+        }
+      },
+      itemStyle: {
+        normal: {
+          borderColor: 'rgba(147, 235, 248, 1)',
+          borderWidth: 1,
+          areaColor: {
+            type: 'radial',
+            x: 0.5,
+            y: 0.5,
+            r: 0.8,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+            }],
+            globalCoord: false // 缺省为 false
+          },
+          shadowColor: 'rgba(128, 217, 248, 1)',
+          // shadowColor: 'rgba(255, 255, 255, 1)',
+          shadowOffsetX: -2,
+          shadowOffsetY: 2,
+          shadowBlur: 10
+        },
+        emphasis: {
+          areaColor: '#389BB7',
+          borderWidth: 0
+        }
+      }
+    },
+    series: [
+
+      //地图？
+      {
+        type: 'map',
+        map: 'china',
+        geoIndex: 0,
+        aspectScale: 0.75, //长宽比
+        showLegendSymbol: false, // 存在legend时显示
+        label: {
+          normal: {
+            show: false
+          },
+          emphasis: {
+            show: false,
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        roam: true,
+        itemStyle: {
+          normal: {
+            areaColor: '#031525',
+            borderColor: '#FFFFFF',
+          },
+          emphasis: {
+            areaColor: '#2B91B7'
+          }
+        },
+        animation: false
+      },
+      //地图点的动画效果
+      {
+        //  name: 'Top 5',
+        type: 'effectScatter',
+        coordinateSystem: 'geo',
+        data: convertData(mapData.sort(function(a, b) {
+          return b.value - a.value;
+        }).slice(0, 20)),
+        symbolSize: function(val) {
+          return val[2] / 10;
+        },
+        showEffectOn: 'render',
+        rippleEffect: {
+          brushType: 'stroke'
+        },
+        hoverAnimation: true,
+        label: {
+          normal: {
+            formatter: '{b}',
+            position: 'right',
+            show: true
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: colors,
+            shadowBlur: 10,
+            shadowColor: colors
+          }
+        },
+        zlevel: 1
+      },
+      //地图线的动画效果
+      {
+        type: 'lines',
+        zlevel: 2,
+        effect: {
+          show: true,
+          period: 4, //箭头指向速度，值越小速度越快
+          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
+          symbol: 'arrow', //箭头图标
+          symbolSize: 3, //图标大小
+        },
+        lineStyle: {
+          normal: {
+            color: colors,
+            width: 0.1, //尾迹线条宽度
+            opacity: 0.5, //尾迹线条透明度
+            curveness: .3 //尾迹线条曲直度
+          }
+        },
+        data: convertToLineData(mapData, geoGpsMap)
+      }
+    ]
+  };
+  let chart:EChartsType;
+  const initChart =()=> {
+    let chart = echarts.init(document.getElementById(props.id))
+    chart.setOption(options)
+    return chart
+  }
+  onMounted(()=>{
+    chart = initChart()
+    window.addEventListener('resize',function (){
+      chart&&chart.resize()
+    })
+
+  })
 </script>
diff --git a/src/views/charts/migration.vue b/src/views/charts/migration.vue
index 824dcd4..0578732 100644
--- a/src/views/charts/migration.vue
+++ b/src/views/charts/migration.vue
@@ -2,6 +2,7 @@
   <div class="echarts-map">
     <migration-charts height="100%" width="100%" id="migration"/>
   </div>
+
 </template>
 
 
@@ -12,6 +13,6 @@ import MigrationCharts from './components/migration/index.vue'
 
 <style>
 .echarts-map{
-  height: calc(100vh - 150px);
+  height: calc(100vh - 93px);
 }
 </style>
diff --git a/src/views/charts/simple.vue b/src/views/charts/simple.vue
index f55fb50..7473d84 100644
--- a/src/views/charts/simple.vue
+++ b/src/views/charts/simple.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%;">
+  <u-container-layout style="width: 100%;">
     <el-row class="row-bg" :gutter="10">
       <el-col :xs="24" :sm="12" :lg="8">
         <el-card class="box-card">
@@ -105,7 +105,7 @@
 
 
 
-  </div>
+  </u-container-layout>
 </template>
 <script setup lang="ts">
   import LineCharts from './components/simple/line.vue'
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 1502e4c..c58f244 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
-    <div style="margin-bottom: 15px">聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div>
-    <u-chat-box/>
-  </div>
-
+  <u-container-layout>
+    <div>
+      <div style="margin-bottom: 15px">聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div>
+      <u-chat-box/>
+    </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue
index d8c017e..2d0b288 100644
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <u-container-layout>
         <el-card style="margin-bottom: 20px">
             <div style="margin-bottom: 10px">输入内容，并点击复制按钮</div>
             <el-input v-model="inputData" placeholder="请输入" style="width:400px;max-width:100%;" />
@@ -11,7 +11,7 @@
             <div style="margin-bottom: 10px">复制成功后可在这粘贴测试</div>
             <el-input v-model="testValue" placeholder="请输入" style="width:400px;max-width:100%;" />
         </el-card>
-    </div>
+    </u-container-layout>
 </template>
 <script lang="ts" setup>
     import {ref} from 'vue'
@@ -22,4 +22,4 @@
     const handleCopy = (text, event)=> {
         clip(text, event)
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/components-demo/button.vue b/src/views/components-demo/button.vue
index 03b32d7..6f7c0c1 100644
--- a/src/views/components-demo/button.vue
+++ b/src/views/components-demo/button.vue
@@ -1,130 +1,131 @@
 <template>
-  <div>
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
+  <u-container-layout>
+    <div>
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
         <span>基础用法
       </span>
+          </div>
+        </template>
+        <div>
+          <el-button class="item">Default</el-button>
+          <el-button type="primary"  class="item">Primary</el-button>
+          <el-button type="success"  class="item">Success</el-button>
+          <el-button type="info"  class="item">Info</el-button>
+          <el-button type="warning"  class="item">Warning</el-button>
+          <el-button type="danger"  class="item">Danger</el-button>
+          <el-button  class="item">中文</el-button>
+          <el-button plain  class="item">Plain</el-button>
+          <el-button type="primary" plain  class="item">Primary</el-button>
+          <el-button type="success" plain  class="item">Success</el-button>
+          <el-button type="info" plain  class="item">Info</el-button>
+          <el-button type="warning" plain  class="item">Warning</el-button>
+          <el-button type="danger" plain  class="item">Danger</el-button>
+          <el-button round  class="item">Round</el-button>
+          <el-button type="primary" round  class="item">Primary</el-button>
+          <el-button type="success" round  class="item">Success</el-button>
+          <el-button type="info" round  class="item">Info</el-button>
+          <el-button type="warning" round  class="item">Warning</el-button>
+          <el-button type="danger" round  class="item">Danger</el-button>
+          <el-button :icon="Search" circle  class="item"/>
+          <el-button type="primary" :icon="Edit" circle  class="item"/>
+          <el-button type="success" :icon="Check" circle  class="item"/>
+          <el-button type="info" :icon="Message" circle  class="item"/>
+          <el-button type="warning" :icon="Star" circle  class="item"/>
+          <el-button type="danger" :icon="Delete" circle  class="item"/>
         </div>
-      </template>
-      <div>
-        <el-button class="item">Default</el-button>
-        <el-button type="primary"  class="item">Primary</el-button>
-        <el-button type="success"  class="item">Success</el-button>
-        <el-button type="info"  class="item">Info</el-button>
-        <el-button type="warning"  class="item">Warning</el-button>
-        <el-button type="danger"  class="item">Danger</el-button>
-        <el-button  class="item">中文</el-button>
-        <el-button plain  class="item">Plain</el-button>
-        <el-button type="primary" plain  class="item">Primary</el-button>
-        <el-button type="success" plain  class="item">Success</el-button>
-        <el-button type="info" plain  class="item">Info</el-button>
-        <el-button type="warning" plain  class="item">Warning</el-button>
-        <el-button type="danger" plain  class="item">Danger</el-button>
-        <el-button round  class="item">Round</el-button>
-        <el-button type="primary" round  class="item">Primary</el-button>
-        <el-button type="success" round  class="item">Success</el-button>
-        <el-button type="info" round  class="item">Info</el-button>
-        <el-button type="warning" round  class="item">Warning</el-button>
-        <el-button type="danger" round  class="item">Danger</el-button>
-        <el-button :icon="Search" circle  class="item"/>
-        <el-button type="primary" :icon="Edit" circle  class="item"/>
-        <el-button type="success" :icon="Check" circle  class="item"/>
-        <el-button type="info" :icon="Message" circle  class="item"/>
-        <el-button type="warning" :icon="Star" circle  class="item"/>
-        <el-button type="danger" :icon="Delete" circle  class="item"/>
-      </div>
-    </el-card>
+      </el-card>
 
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
         <span>禁用状态
       </span>
+          </div>
+        </template>
+        <div>
+          <el-button disabled class="item">Default</el-button>
+          <el-button type="primary" disabled class="item">Primary</el-button>
+          <el-button type="success" disabled class="item">Success</el-button>
+          <el-button type="info" disabled class="item">Info</el-button>
+          <el-button type="warning" disabled class="item">Warning</el-button>
+          <el-button type="danger" disabled class="item">Danger</el-button>
+          <el-button plain disabled class="item">Plain</el-button>
+          <el-button type="primary" plain disabled class="item">Primary</el-button>
+          <el-button type="success" plain disabled class="item">Success</el-button>
+          <el-button type="info" plain disabled class="item"> Info</el-button>
+          <el-button type="warning" plain disabled class="item">Warning</el-button>
+          <el-button type="danger" plain disabled class="item">Danger</el-button>
         </div>
-      </template>
-      <div>
-        <el-button disabled class="item">Default</el-button>
-        <el-button type="primary" disabled class="item">Primary</el-button>
-        <el-button type="success" disabled class="item">Success</el-button>
-        <el-button type="info" disabled class="item">Info</el-button>
-        <el-button type="warning" disabled class="item">Warning</el-button>
-        <el-button type="danger" disabled class="item">Danger</el-button>
-        <el-button plain disabled class="item">Plain</el-button>
-        <el-button type="primary" plain disabled class="item">Primary</el-button>
-        <el-button type="success" plain disabled class="item">Success</el-button>
-        <el-button type="info" plain disabled class="item"> Info</el-button>
-        <el-button type="warning" plain disabled class="item">Warning</el-button>
-        <el-button type="danger" plain disabled class="item">Danger</el-button>
-      </div>
-    </el-card>
+      </el-card>
 
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
         <span>文字按钮
       </span>
+          </div>
+        </template>
+        <div>
+          <el-button type="text" class="item">文字按钮</el-button>
+          <el-button type="text" disabled class="item">文字按钮</el-button>
         </div>
-      </template>
-      <div>
-        <el-button type="text" class="item">文字按钮</el-button>
-        <el-button type="text" disabled class="item">文字按钮</el-button>
-      </div>
-    </el-card>
+      </el-card>
 
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
         <span>图标按钮
       </span>
+          </div>
+        </template>
+        <div>
+          <el-button type="primary" :icon="Edit" class="item"/>
+          <el-button type="primary" :icon="Share" class="item"/>
+          <el-button type="primary" :icon="Delete" class="item"/>
+          <el-button type="primary" :icon="Search" class="item">Search</el-button>
+          <el-button type="primary" class="item">
+            Upload<el-icon class="el-icon--right"><Upload /></el-icon>
+          </el-button>
         </div>
-      </template>
-      <div>
-        <el-button type="primary" :icon="Edit" class="item"/>
-        <el-button type="primary" :icon="Share" class="item"/>
-        <el-button type="primary" :icon="Delete" class="item"/>
-        <el-button type="primary" :icon="Search" class="item">Search</el-button>
-        <el-button type="primary" class="item">
-          Upload<el-icon class="el-icon--right"><Upload /></el-icon>
-        </el-button>
-      </div>
-    </el-card>
+      </el-card>
 
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
         <span>按钮组
       </span>
+          </div>
+        </template>
+        <div>
+          <el-button type="primary" icon="ArrowLeft" class="item">上一页</el-button>
+          <el-button type="primary" class="item">
+            下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
+          </el-button>
+          <el-button type="primary" :icon="Edit" class="item"/>
+          <el-button type="primary" :icon="Share" class="item"/>
+          <el-button type="primary" :icon="Delete" class="item"/>
         </div>
-      </template>
-      <div>
-        <el-button type="primary" icon="ArrowLeft" class="item">上一页</el-button>
-        <el-button type="primary" class="item">
-          下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
-        </el-button>
-        <el-button type="primary" :icon="Edit" class="item"/>
-        <el-button type="primary" :icon="Share" class="item"/>
-        <el-button type="primary" :icon="Delete" class="item"/>
-      </div>
-    </el-card>
+      </el-card>
 
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
         <span>加载中
       </span>
-        </div>
-      </template>
-      <div>
-        <el-button type="primary" loading class="item">Loading</el-button>
-        <el-button type="primary" loading-icon="Eleme" loading class="item">Loading</el-button>
-        <el-button type="primary" loading class="item">
-          <template #loading>
-            <div class="custom-loading">
-              <svg class="circular" viewBox="-10, -10, 50, 50">
-                <path
-                    class="path"
-                    d="
+          </div>
+        </template>
+        <div>
+          <el-button type="primary" loading class="item">Loading</el-button>
+          <el-button type="primary" loading-icon="Eleme" loading class="item">Loading</el-button>
+          <el-button type="primary" loading class="item">
+            <template #loading>
+              <div class="custom-loading">
+                <svg class="circular" viewBox="-10, -10, 50, 50">
+                  <path
+                      class="path"
+                      d="
             M 30 15
             L 28 17
             M 25.61 25.61
@@ -132,35 +133,37 @@
             A 15 15, 0, 1, 1, 27.99 7.5
             L 15 15
           "
-                    style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
-                />
-              </svg>
-            </div>
-          </template>
-          Loading
-        </el-button>
-      </div>
-    </el-card>
+                      style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
+                  />
+                </svg>
+              </div>
+            </template>
+            Loading
+          </el-button>
+        </div>
+      </el-card>
 
 
-    <el-card class="box-card">
-      <template #header>
-        <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
         <span>自定义颜色
       </span>
-        </div>
-      </template>
-      <div>
-        <el-button color="#626aef"  class="item">Default</el-button>
-        <el-button color="#626aef"  plain class="item">Plain</el-button>
+          </div>
+        </template>
+        <div>
+          <el-button color="#626aef"  class="item">Default</el-button>
+          <el-button color="#626aef"  plain class="item">Plain</el-button>
+
+          <el-button color="#626aef"  disabled class="item">Disabled</el-button>
+          <el-button color="#626aef" disabled plain class="item"
+          >Disabled Plain</el-button
+          >
+        </div>
+      </el-card>
+    </div>
+  </u-container-layout>
 
-        <el-button color="#626aef"  disabled class="item">Disabled</el-button>
-        <el-button color="#626aef" disabled plain class="item"
-        >Disabled Plain</el-button
-        >
-      </div>
-    </el-card>
-  </div>
 </template>
 <script lang="ts" setup>
 import {
diff --git a/src/views/components-demo/checkbox.vue b/src/views/components-demo/checkbox.vue
index eb72234..a35755a 100644
--- a/src/views/components-demo/checkbox.vue
+++ b/src/views/components-demo/checkbox.vue
@@ -1,105 +1,106 @@
    <template>
-    <div>
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+     <u-container-layout>
+       <div>
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>基础用法
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox v-model="checked1" label="备选项1" />
-                <el-checkbox v-model="checked2" label="备选项1" />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox v-model="checked1" label="备选项1" />
+             <el-checkbox v-model="checked2" label="备选项1" />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                 <span>禁用状态
               </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox v-model="checked1" disabled>备选项11</el-checkbox>
-                <el-checkbox v-model="checked2">备选项2</el-checkbox>
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox v-model="checked1" disabled>备选项11</el-checkbox>
+             <el-checkbox v-model="checked2">备选项2</el-checkbox>
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>多选框组
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox-group v-model="checkList">
-                    <el-checkbox label="备选项 A" />
-                    <el-checkbox label="备选项 B" />
-                    <el-checkbox label="备选项 C" />
-                    <el-checkbox label="禁用" disabled />
-                    <el-checkbox label="选中且禁用" disabled />
-                </el-checkbox-group>
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox-group v-model="checkList">
+               <el-checkbox label="备选项 A" />
+               <el-checkbox label="备选项 B" />
+               <el-checkbox label="备选项 C" />
+               <el-checkbox label="禁用" disabled />
+               <el-checkbox label="选中且禁用" disabled />
+             </el-checkbox-group>
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>中间状态
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox
-                        v-model="checkAll"
-                        :indeterminate="isIndeterminate"
-                        @change="handleCheckAllChange"
-                >全选</el-checkbox
-                >
-                <el-checkbox-group
-                        v-model="checkedCities"
-                        @change="handleCheckedCitiesChange"
-                >
-                    <el-checkbox v-for="city in cities" :key="city" :label="city">{{
-                        city
-                        }}</el-checkbox>
-                </el-checkbox-group>
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox
+                 v-model="checkAll"
+                 :indeterminate="isIndeterminate"
+                 @change="handleCheckAllChange"
+             >全选</el-checkbox
+             >
+             <el-checkbox-group
+                 v-model="checkedCities"
+                 @change="handleCheckedCitiesChange"
+             >
+               <el-checkbox v-for="city in cities" :key="city" :label="city">{{
+                   city
+                 }}</el-checkbox>
+             </el-checkbox-group>
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>按钮样式
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox-group v-model="checkboxGroup1" >
-                    <el-checkbox-button v-for="city in cities" :key="city" :label="city">
-                        {{ city }}
-                    </el-checkbox-button>
-                </el-checkbox-group>
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox-group v-model="checkboxGroup1" >
+               <el-checkbox-button v-for="city in cities" :key="city" :label="city">
+                 {{ city }}
+               </el-checkbox-button>
+             </el-checkbox-group>
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>带有边框
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox v-model="checked1" label="备选项1" border />
-                <el-checkbox v-model="checked2" label="备选项2" border />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox v-model="checked1" label="备选项1" border />
+             <el-checkbox v-model="checked2" label="备选项2" border />
+           </div>
+         </el-card>
+       </div>
+     </u-container-layout>
 
-
-    </div>
 </template>
 <script lang="ts" setup>
     import { ref } from 'vue'
diff --git a/src/views/components-demo/datetimepicker.vue b/src/views/components-demo/datetimepicker.vue
index 403532b..014d5e0 100644
--- a/src/views/components-demo/datetimepicker.vue
+++ b/src/views/components-demo/datetimepicker.vue
@@ -1,80 +1,83 @@
    <template>
-    <div>
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+     <u-container-layout>
+       <div>
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>日期和时间点
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-date-picker
-                        v-model="value1"
-                        type="datetime"
-                        placeholder="选择日期时间点"
-                />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-date-picker
+                 v-model="value1"
+                 type="datetime"
+                 placeholder="选择日期时间点"
+             />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                 <span>日期时间格式
               </span>
-                </div>
-            </template>
-            <div>
-                <el-date-picker
-                        v-model="value4"
-                        type="datetime"
-                        placeholder="选择时间"
-                        format="YYYY/MM/DD hh:mm:ss"
-                />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-date-picker
+                 v-model="value4"
+                 type="datetime"
+                 placeholder="选择时间"
+                 format="YYYY/MM/DD hh:mm:ss"
+             />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>日期和时间范围
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-date-picker
-                        :shortcuts="shortcuts1"
-                        v-model="value3"
-                        type="datetimerange"
-                        range-separator="-"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"
-                />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-date-picker
+                 :shortcuts="shortcuts1"
+                 v-model="value3"
+                 type="datetimerange"
+                 range-separator="-"
+                 start-placeholder="开始日期"
+                 end-placeholder="结束日期"
+             />
+           </div>
+         </el-card>
 
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>默认的起始与结束时刻
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-date-picker
-                        v-model="value5"
-                        type="datetimerange"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"
-                        :default-time="defaultTime1"
-                />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-date-picker
+                 v-model="value5"
+                 type="datetimerange"
+                 start-placeholder="开始日期"
+                 end-placeholder="结束日期"
+                 :default-time="defaultTime1"
+             />
+           </div>
+         </el-card>
 
 
 
 
-    </div>
+       </div>
+     </u-container-layout>
+
 </template>
 <script lang="ts" setup>
     import { ref } from 'vue'
diff --git a/src/views/components-demo/flow-chart.vue b/src/views/components-demo/flow-chart.vue
index 808f81e..a40202b 100644
--- a/src/views/components-demo/flow-chart.vue
+++ b/src/views/components-demo/flow-chart.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <u-container-layout>
     <zb-pipeline/>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/components-demo/form.vue b/src/views/components-demo/form.vue
index 4762f53..07c19b5 100644
--- a/src/views/components-demo/form.vue
+++ b/src/views/components-demo/form.vue
@@ -1,77 +1,80 @@
 <template>
-  <div style="max-width: 800px">
-    <el-form
-        ref="ruleFormRef"
-        :model="ruleForm"
-        :rules="rules"
-        label-width="120px"
-        class="demo-ruleForm"
-        :size="formSize"
-    >
-      <el-form-item label="活动名称" prop="name">
-        <el-input v-model="ruleForm.name" />
-      </el-form-item>
-      <el-form-item label="活动区域" prop="region">
-        <el-select v-model="ruleForm.region" placeholder="活动区域">
-          <el-option label="区域1" value="上海" />
-          <el-option label="区域2" value="北京" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="即时配送" required>
-        <el-col :span="11">
-          <el-form-item prop="date1">
-            <el-date-picker
-                v-model="ruleForm.date1"
-                type="date"
-                placeholder="选择时间"
-                style="width: 100%"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col class="text-center" :span="2" style="text-align: center">
-          <span class="text-gray-500" >-</span>
-        </el-col>
-        <el-col :span="11">
-          <el-form-item prop="date2">
-            <el-time-picker
-                v-model="ruleForm.date2"
-                placeholder="选择时间"
-                style="width: 100%"
-            />
-          </el-form-item>
-        </el-col>
-      </el-form-item>
-      <el-form-item label="即时配送" prop="delivery">
-        <el-switch v-model="ruleForm.delivery" />
-      </el-form-item>
-      <el-form-item label="活动性质" prop="type">
-        <el-checkbox-group v-model="ruleForm.type">
-          <el-checkbox label="美食/餐厅线上活动" name="type" />
-          <el-checkbox label="地推活动" name="type" />
-          <el-checkbox label="线下主题活动" name="type" />
-          <el-checkbox label="单纯品牌曝光" name="type" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="特殊资源" prop="resource">
-        <el-radio-group v-model="ruleForm.resource">
-          <el-radio label="线上品牌商赞助" />
-          <el-radio label="线下场地免费" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="上传图片" prop="img">
-       <u-upload v-model="ruleForm.img"/>
-      </el-form-item>
-      <el-form-item label="备注" prop="desc">
-        <el-input v-model="ruleForm.desc" type="textarea" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm(ruleFormRef)"
-        >立即创建</el-button
-        >
-        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
+  <u-container-layout>
+    <div style="max-width: 800px">
+      <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="rules"
+          label-width="120px"
+          class="demo-ruleForm"
+          :size="formSize"
+      >
+        <el-form-item label="活动名称" prop="name">
+          <el-input v-model="ruleForm.name" />
+        </el-form-item>
+        <el-form-item label="活动区域" prop="region">
+          <el-select v-model="ruleForm.region" placeholder="活动区域">
+            <el-option label="区域1" value="上海" />
+            <el-option label="区域2" value="北京" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="即时配送" required>
+          <el-col :span="11">
+            <el-form-item prop="date1">
+              <el-date-picker
+                  v-model="ruleForm.date1"
+                  type="date"
+                  placeholder="选择时间"
+                  style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col class="text-center" :span="2" style="text-align: center">
+            <span class="text-gray-500" >-</span>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item prop="date2">
+              <el-time-picker
+                  v-model="ruleForm.date2"
+                  placeholder="选择时间"
+                  style="width: 100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="即时配送" prop="delivery">
+          <el-switch v-model="ruleForm.delivery" />
+        </el-form-item>
+        <el-form-item label="活动性质" prop="type">
+          <el-checkbox-group v-model="ruleForm.type">
+            <el-checkbox label="美食/餐厅线上活动" name="type" />
+            <el-checkbox label="地推活动" name="type" />
+            <el-checkbox label="线下主题活动" name="type" />
+            <el-checkbox label="单纯品牌曝光" name="type" />
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="特殊资源" prop="resource">
+          <el-radio-group v-model="ruleForm.resource">
+            <el-radio label="线上品牌商赞助" />
+            <el-radio label="线下场地免费" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="上传图片" prop="img">
+          <u-upload v-model="ruleForm.img"/>
+        </el-form-item>
+        <el-form-item label="备注" prop="desc">
+          <el-input v-model="ruleForm.desc" type="textarea" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm(ruleFormRef)"
+          >立即创建</el-button
+          >
+          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </u-container-layout>
+
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/components-demo/input.vue b/src/views/components-demo/input.vue
index 21506de..167011c 100644
--- a/src/views/components-demo/input.vue
+++ b/src/views/components-demo/input.vue
@@ -1,113 +1,116 @@
    <template>
-    <div>
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+     <u-container-layout>
+       <div>
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>基础用法
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input v-model="input" placeholder="请输入内容" />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input v-model="input" placeholder="请输入内容" />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                 <span>禁用状态
               </span>
-                </div>
-            </template>
-            <div>
-                <el-input v-model="input" disabled placeholder="请输入内容" />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input v-model="input" disabled placeholder="请输入内容" />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>一键清空
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input v-model="input" placeholder="请输入内容" clearable />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input v-model="input" placeholder="请输入内容" clearable />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>格式化
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input
-                        v-model="input"
-                        placeholder="请输入内容"
-                        :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
-                        :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
-                />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input
+                 v-model="input"
+                 placeholder="请输入内容"
+                 :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+                 :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
+             />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>密码框
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input
-                        v-model="input"
-                        type="password"
-                        placeholder="请输入密码"
-                        show-password
-                />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input
+                 v-model="input"
+                 type="password"
+                 placeholder="请输入密码"
+                 show-password
+             />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>带 icon 的输入框
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input
-                        v-model="input"
-                        placeholder="请输入内容"
-                        :suffix-icon="Calendar"
-                />
-                <el-input
-                        v-model="input2"
-                        placeholder="请输入内容"
-                        :prefix-icon="Search"
-                />
-            </div>
-        </el-card>
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+             </div>
+           </template>
+           <div>
+             <el-input
+                 v-model="input"
+                 placeholder="请输入内容"
+                 :suffix-icon="Calendar"
+             />
+             <el-input
+                 v-model="input2"
+                 placeholder="请输入内容"
+                 :prefix-icon="Search"
+             />
+           </div>
+         </el-card>
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>文本域
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input
-                        v-model="textarea"
-                        :rows="2"
-                        type="textarea"
-                        placeholder="请输入内容"
-                />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input
+                 v-model="textarea"
+                 :rows="2"
+                 type="textarea"
+                 placeholder="请输入内容"
+             />
+           </div>
+         </el-card>
+
+       </div>
+     </u-container-layout>
 
-    </div>
 </template>
 <script lang="ts" setup>
     import { ref } from 'vue'
diff --git a/src/views/components-demo/inputnumber.vue b/src/views/components-demo/inputnumber.vue
index 5ba534c..e5cd26b 100644
--- a/src/views/components-demo/inputnumber.vue
+++ b/src/views/components-demo/inputnumber.vue
@@ -1,86 +1,89 @@
    <template>
-    <div>
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+     <u-container-layout>
+       <div>
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>基础用法
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                 <span>禁用状态
               </span>
-                </div>
-            </template>
-            <div>
-                <el-input-number v-model="num" :disabled="true" />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input-number v-model="num" :disabled="true" />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>步进
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input-number v-model="num" :step="2" />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input-number v-model="num" :step="2" />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>严格步进
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input-number v-model="num" :step="2" step-strictly />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input-number v-model="num" :step="2" step-strictly />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>精度
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input-number v-model="num" :precision="2" :step="0.1" :max="10" />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input-number v-model="num" :precision="2" :step="0.1" :max="10" />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>按钮位置
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-input-number
-                        v-model="num"
-                        class="mx-4"
-                        :min="1"
-                        :max="10"
-                        controls-position="right"
-                        @change="handleChange"
-                />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-input-number
+                 v-model="num"
+                 class="mx-4"
+                 :min="1"
+                 :max="10"
+                 controls-position="right"
+                 @change="handleChange"
+             />
+           </div>
+         </el-card>
 
 
-    </div>
+       </div>
+     </u-container-layout>
+
 </template>
 <script lang="ts" setup>
     import { ref } from 'vue'
diff --git a/src/views/components-demo/link.vue b/src/views/components-demo/link.vue
index b3eb489..36a71b4 100644
--- a/src/views/components-demo/link.vue
+++ b/src/views/components-demo/link.vue
@@ -1,69 +1,72 @@
 <template>
+  <u-container-layout>
     <div>
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
         <span>基础用法
       </span>
-                </div>
-            </template>
-            <div>
-                <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
-                <el-link type="primary">主要链接</el-link>
-                <el-link type="success">成功链接</el-link>
-                <el-link type="warning">警告链接</el-link>
-                <el-link type="danger">危险链接</el-link>
-                <el-link type="info">信息链接</el-link>
-            </div>
-        </el-card>
+          </div>
+        </template>
+        <div>
+          <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
+          <el-link type="primary">主要链接</el-link>
+          <el-link type="success">成功链接</el-link>
+          <el-link type="warning">警告链接</el-link>
+          <el-link type="danger">危险链接</el-link>
+          <el-link type="info">信息链接</el-link>
+        </div>
+      </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
         <span>禁用状态
       </span>
-                </div>
-            </template>
-            <div>
-                <el-link disabled>默认链接</el-link>
-                <el-link type="primary" disabled>主要链接</el-link>
-                <el-link type="success" disabled>成功链接</el-link>
-                <el-link type="warning" disabled>警告链接</el-link>
-                <el-link type="danger" disabled>危险链接</el-link>
-                <el-link type="info" disabled>信息链接</el-link>
-            </div>
-        </el-card>
+          </div>
+        </template>
+        <div>
+          <el-link disabled>默认链接</el-link>
+          <el-link type="primary" disabled>主要链接</el-link>
+          <el-link type="success" disabled>成功链接</el-link>
+          <el-link type="warning" disabled>警告链接</el-link>
+          <el-link type="danger" disabled>危险链接</el-link>
+          <el-link type="info" disabled>信息链接</el-link>
+        </div>
+      </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-              <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
                     <span>下划线
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-link :underline="false">无下划线</el-link>
-                <el-link>有下划线</el-link>
-            </div>
-        </el-card>
+          </div>
+        </template>
+        <div>
+          <el-link :underline="false">无下划线</el-link>
+          <el-link>有下划线</el-link>
+        </div>
+      </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                  <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
                     <span>图标
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-link :icon="Edit">编辑</el-link>
-                <el-link>
-                    查看<el-icon class="el-icon--right"><icon-view /></el-icon>
-                </el-link>
-            </div>
-        </el-card>
+          </div>
+        </template>
+        <div>
+          <el-link :icon="Edit">编辑</el-link>
+          <el-link>
+            查看<el-icon class="el-icon--right"><icon-view /></el-icon>
+          </el-link>
+        </div>
+      </el-card>
 
 
     </div>
+  </u-container-layout>
+
 </template>
 <script lang="ts" setup>
     import { Edit, View as IconView } from '@element-plus/icons-vue'
diff --git a/src/views/components-demo/radio.vue b/src/views/components-demo/radio.vue
index 8053399..ecea46f 100644
--- a/src/views/components-demo/radio.vue
+++ b/src/views/components-demo/radio.vue
@@ -1,81 +1,84 @@
 <template>
+  <u-container-layout>
     <div>
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
                     <span>基础用法
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-radio v-model="radio4" label="1" >备选项</el-radio>
-                <el-radio v-model="radio4" label="2">备选项1</el-radio>
-            </div>
-        </el-card>
+          </div>
+        </template>
+        <div>
+          <el-radio v-model="radio4" label="1" >备选项</el-radio>
+          <el-radio v-model="radio4" label="2">备选项1</el-radio>
+        </div>
+      </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
                 <span>禁用状态
               </span>
-                </div>
-            </template>
-            <div>
-                <el-radio v-model="radio1" disabled label="disabled">备选项 1</el-radio>
-                <el-radio v-model="radio1" disabled label="selected and disabled"
-                >备选项 2</el-radio
-                >
-            </div>
-        </el-card>
+          </div>
+        </template>
+        <div>
+          <el-radio v-model="radio1" disabled label="disabled">备选项 1</el-radio>
+          <el-radio v-model="radio1" disabled label="selected and disabled"
+          >备选项 2</el-radio
+          >
+        </div>
+      </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
                     <span>单选框组
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-radio-group v-model="radio">
-                    <el-radio :label="3">备选项 1</el-radio>
-                    <el-radio :label="6">备选项 2</el-radio>
-                    <el-radio :label="9">备选项 3</el-radio>
-                </el-radio-group>
-            </div>
-        </el-card>
+          </div>
+        </template>
+        <div>
+          <el-radio-group v-model="radio">
+            <el-radio :label="3">备选项 1</el-radio>
+            <el-radio :label="6">备选项 2</el-radio>
+            <el-radio :label="9">备选项 3</el-radio>
+          </el-radio-group>
+        </div>
+      </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
                     <span>按钮样式
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-radio-group v-model="radio2">
-                    <el-radio-button label="上海" />
-                    <el-radio-button label="北京" />
-                    <el-radio-button label="广州" />
-                    <el-radio-button label="深圳" />
-                </el-radio-group>
-            </div>
-        </el-card>
+          </div>
+        </template>
+        <div>
+          <el-radio-group v-model="radio2">
+            <el-radio-button label="上海" />
+            <el-radio-button label="北京" />
+            <el-radio-button label="广州" />
+            <el-radio-button label="深圳" />
+          </el-radio-group>
+        </div>
+      </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+      <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
                     <span>带有边框
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-radio v-model="radio3" label="1" border>备选项1</el-radio>
-                <el-radio v-model="radio3" label="2" border>备选项2</el-radio>
-            </div>
-        </el-card>
+          </div>
+        </template>
+        <div>
+          <el-radio v-model="radio3" label="1" border>备选项1</el-radio>
+          <el-radio v-model="radio3" label="2" border>备选项2</el-radio>
+        </div>
+      </el-card>
 
 
     </div>
+  </u-container-layout>
+
 </template>
 <script lang="ts" setup>
     import { Edit, View as IconView } from '@element-plus/icons-vue'
diff --git a/src/views/components-demo/scroll.vue b/src/views/components-demo/scroll.vue
index eaa314d..9b39b7e 100644
--- a/src/views/components-demo/scroll.vue
+++ b/src/views/components-demo/scroll.vue
@@ -1,10 +1,13 @@
 <template>
-  <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
-    <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
-    <div v-if="isLoading"
-         style="height: 50px;width: 100%;display: flex;align-items: center;justify-content: center"
-    >正在加载中...</div>
-  </ul>
+  <u-container-layout>
+    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
+      <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
+      <div v-if="isLoading"
+           style="height: 50px;width: 100%;display: flex;align-items: center;justify-content: center"
+      >正在加载中...</div>
+    </ul>
+  </u-container-layout>
+
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/components-demo/slider.vue b/src/views/components-demo/slider.vue
index eb72234..f4baa5d 100644
--- a/src/views/components-demo/slider.vue
+++ b/src/views/components-demo/slider.vue
@@ -1,105 +1,108 @@
    <template>
-    <div>
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+     <u-container-layout>
+       <div>
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>基础用法
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox v-model="checked1" label="备选项1" />
-                <el-checkbox v-model="checked2" label="备选项1" />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox v-model="checked1" label="备选项1" />
+             <el-checkbox v-model="checked2" label="备选项1" />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                 <span>禁用状态
               </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox v-model="checked1" disabled>备选项11</el-checkbox>
-                <el-checkbox v-model="checked2">备选项2</el-checkbox>
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox v-model="checked1" disabled>备选项11</el-checkbox>
+             <el-checkbox v-model="checked2">备选项2</el-checkbox>
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>多选框组
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox-group v-model="checkList">
-                    <el-checkbox label="备选项 A" />
-                    <el-checkbox label="备选项 B" />
-                    <el-checkbox label="备选项 C" />
-                    <el-checkbox label="禁用" disabled />
-                    <el-checkbox label="选中且禁用" disabled />
-                </el-checkbox-group>
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox-group v-model="checkList">
+               <el-checkbox label="备选项 A" />
+               <el-checkbox label="备选项 B" />
+               <el-checkbox label="备选项 C" />
+               <el-checkbox label="禁用" disabled />
+               <el-checkbox label="选中且禁用" disabled />
+             </el-checkbox-group>
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>中间状态
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox
-                        v-model="checkAll"
-                        :indeterminate="isIndeterminate"
-                        @change="handleCheckAllChange"
-                >全选</el-checkbox
-                >
-                <el-checkbox-group
-                        v-model="checkedCities"
-                        @change="handleCheckedCitiesChange"
-                >
-                    <el-checkbox v-for="city in cities" :key="city" :label="city">{{
-                        city
-                        }}</el-checkbox>
-                </el-checkbox-group>
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox
+                 v-model="checkAll"
+                 :indeterminate="isIndeterminate"
+                 @change="handleCheckAllChange"
+             >全选</el-checkbox
+             >
+             <el-checkbox-group
+                 v-model="checkedCities"
+                 @change="handleCheckedCitiesChange"
+             >
+               <el-checkbox v-for="city in cities" :key="city" :label="city">{{
+                   city
+                 }}</el-checkbox>
+             </el-checkbox-group>
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>按钮样式
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox-group v-model="checkboxGroup1" >
-                    <el-checkbox-button v-for="city in cities" :key="city" :label="city">
-                        {{ city }}
-                    </el-checkbox-button>
-                </el-checkbox-group>
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox-group v-model="checkboxGroup1" >
+               <el-checkbox-button v-for="city in cities" :key="city" :label="city">
+                 {{ city }}
+               </el-checkbox-button>
+             </el-checkbox-group>
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>带有边框
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-checkbox v-model="checked1" label="备选项1" border />
-                <el-checkbox v-model="checked2" label="备选项2" border />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-checkbox v-model="checked1" label="备选项1" border />
+             <el-checkbox v-model="checked2" label="备选项2" border />
+           </div>
+         </el-card>
 
 
-    </div>
+       </div>
+     </u-container-layout>
+
 </template>
 <script lang="ts" setup>
     import { ref } from 'vue'
diff --git a/src/views/components-demo/timepicker.vue b/src/views/components-demo/timepicker.vue
index 2c1c771..31d995d 100644
--- a/src/views/components-demo/timepicker.vue
+++ b/src/views/components-demo/timepicker.vue
@@ -1,56 +1,59 @@
    <template>
-    <div>
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+     <u-container-layout>
+       <div>
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>任意时间点
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-time-picker v-model="value4" placeholder="选择时间" />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-time-picker v-model="value4" placeholder="选择时间" />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                 <span>限制时间选择范围
               </span>
-                </div>
-            </template>
-            <div>
-                <el-time-picker
-                        v-model="value1"
-                        :disabled-hours="disabledHours"
-                        :disabled-minutes="disabledMinutes"
-                        :disabled-seconds="disabledSeconds"
-                        placeholder="选择时间"
-                />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-time-picker
+                 v-model="value1"
+                 :disabled-hours="disabledHours"
+                 :disabled-minutes="disabledMinutes"
+                 :disabled-seconds="disabledSeconds"
+                 placeholder="选择时间"
+             />
+           </div>
+         </el-card>
 
-        <el-card class="box-card">
-            <template #header>
-                <div class="card-header">
+         <el-card class="box-card">
+           <template #header>
+             <div class="card-header">
                     <span>任意时间范围
                   </span>
-                </div>
-            </template>
-            <div>
-                <el-time-picker
-                        v-model="value3"
-                        is-range
-                        range-separator="-"
-                        start-placeholder="开始时间"
-                        end-placeholder="结束时间"
-                />
-            </div>
-        </el-card>
+             </div>
+           </template>
+           <div>
+             <el-time-picker
+                 v-model="value3"
+                 is-range
+                 range-separator="-"
+                 start-placeholder="开始时间"
+                 end-placeholder="结束时间"
+             />
+           </div>
+         </el-card>
 
 
 
-    </div>
+       </div>
+     </u-container-layout>
+
 </template>
 <script lang="ts" setup>
     import { ref } from 'vue'
diff --git a/src/views/components-demo/upload.vue b/src/views/components-demo/upload.vue
index 86dea12..623ebfa 100644
--- a/src/views/components-demo/upload.vue
+++ b/src/views/components-demo/upload.vue
@@ -1,65 +1,68 @@
 <template>
+  <u-container-layout>
     <div>
-        <el-card style="margin-bottom: 10px">
-            <template #header>
-                <span>按钮上传</span>
-            </template>
-            <div class="demo-image__preview">
-               <div
-                     class="upload-list"
-                     v-for="item,index in fileList">
-                   <el-image
-                           @click.stop="privew(index)"
-                           style="width: 100%; height: 100%"
-                           :src="item"
-                           :preview-src-list="fileList"
-                           :initial-index="initialIndex"
-                           fit="cover"
-                   />
-               </div>
-            </div>
-            <el-upload action="/" multiple :before-upload="beforeUploadAction">
-                <el-button type="primary">点击上传</el-button>
-            </el-upload>
-        </el-card>
-        <el-card>
-            <template #header>
-                <span>多图片上传</span>
-            </template>
-            <u-upload @update="update" v-model="imgs"/>
-        </el-card>
+      <el-card style="margin-bottom: 10px">
+        <template #header>
+          <span>按钮上传</span>
+        </template>
+        <div class="demo-image__preview">
+          <div
+              class="upload-list"
+              v-for="item,index in fileList">
+            <el-image
+                @click.stop="privew(index)"
+                style="width: 100%; height: 100%"
+                :src="item"
+                :preview-src-list="fileList"
+                :initial-index="initialIndex"
+                fit="cover"
+            />
+          </div>
+        </div>
+        <el-upload action="/" multiple :before-upload="beforeUploadAction">
+          <el-button type="primary">点击上传</el-button>
+        </el-upload>
+      </el-card>
+      <el-card>
+        <template #header>
+          <span>多图片上传</span>
+        </template>
+        <u-upload @update="update" v-model="imgs"/>
+      </el-card>
 
-        <el-card>
-            <template #header>
-                <span>拖拽上传</span>
-            </template>
-            <div
-                    class="upload-list"
-                    v-for="item,index in fileList1">
-                <el-image
-                        @click.stop="privew1(index)"
-                        style="width: 100%; height: 100%"
-                        :src="item"
-                        :preview-src-list="fileList1"
-                        :initial-index="initialIndex1"
-                        fit="cover"
-                />
-            </div>
-            <el-upload
-                    class="upload-demo"
-                    drag
-                    :before-upload="beforeUploadAction1"
-                    action="/"
-                    multiple
-            >
-                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-                <div class="el-upload__text">
-                    拖拽上传 <em>或者点击上传</em>
-                </div>
-            </el-upload>
-        </el-card>
+      <el-card>
+        <template #header>
+          <span>拖拽上传</span>
+        </template>
+        <div
+            class="upload-list"
+            v-for="item,index in fileList1">
+          <el-image
+              @click.stop="privew1(index)"
+              style="width: 100%; height: 100%"
+              :src="item"
+              :preview-src-list="fileList1"
+              :initial-index="initialIndex1"
+              fit="cover"
+          />
+        </div>
+        <el-upload
+            class="upload-demo"
+            drag
+            :before-upload="beforeUploadAction1"
+            action="/"
+            multiple
+        >
+          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+          <div class="el-upload__text">
+            拖拽上传 <em>或者点击上传</em>
+          </div>
+        </el-upload>
+      </el-card>
 
     </div>
+  </u-container-layout>
+
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
index c230e64..012a214 100644
--- a/src/views/error/401.vue
+++ b/src/views/error/401.vue
@@ -1,6 +1,6 @@
 
 <template>
-    <div class="m-error-page">
+    <u-container-layout class="m-error-page">
         <div class="error-page">
             <div class="img">
                 <img :src="fourPng" style="width: 100%">
@@ -11,7 +11,7 @@
                 <el-button type="primary" @click="goBackHome">返回首页</el-button></div>
 
         </div>
-    </div>
+    </u-container-layout>
 </template>
 
 <script lang="ts" setup>
@@ -67,4 +67,4 @@
             animation-fill-mode: forwards;
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
index 9e4de6e..a3b8bf1 100644
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -1,6 +1,6 @@
 
 <template>
-    <div class="m-error-page">
+    <u-container-layout class="m-error-page">
         <div class="error-page">
             <div class="img">
                 <img :src="fourPng" style="width: 100%">
@@ -12,7 +12,7 @@
                 <el-button type="primary" @click="goBackHome">返回首页</el-button></div>
 
         </div>
-    </div>
+    </u-container-layout>
 </template>
 
 <script lang="ts" setup>
@@ -68,4 +68,4 @@
             animation-fill-mode: forwards;
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/excel/export-excel.vue b/src/views/excel/export-excel.vue
index f8a89ae..4d6ba39 100644
--- a/src/views/excel/export-excel.vue
+++ b/src/views/excel/export-excel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <u-container-layout>
     <div style="margin-bottom: 15px;display: flex;align-items: center">
       <el-input v-model="input" placeholder="请输入文件名"  style="width: 200px;margin-right: 10px"/>
      <div>
@@ -18,7 +18,7 @@
         <el-table-column :prop="item.name" :label="item.label" :width="item.width" />
       </template>
     </el-table>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/excel/export-merge-header.vue b/src/views/excel/export-merge-header.vue
index b6d80d4..df876bb 100644
--- a/src/views/excel/export-merge-header.vue
+++ b/src/views/excel/export-merge-header.vue
@@ -1,6 +1,6 @@
 
 <template>
-  <div>
+  <u-container-layout>
     <div style="margin-bottom: 15px">
       <el-input v-model="input" placeholder="请输入文件名"  style="width: 200px;margin-right: 10px"/>
       <el-button @click="exportExcelAction" type="primary">
@@ -20,7 +20,7 @@
         <el-table-column :prop="item.name" :label="item.label" :width="item.width"  v-else/>
       </template>
     </el-table>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/excel/export-style-excel.vue b/src/views/excel/export-style-excel.vue
index 4a39758..854e2b2 100644
--- a/src/views/excel/export-style-excel.vue
+++ b/src/views/excel/export-style-excel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <u-container-layout>
     <div style="margin-bottom: 15px;display: flex;align-items: center">
       <el-input v-model="input" placeholder="请输入文件名"  style="width: 200px;margin-right: 10px"/>
       <el-button @click="exportExcelAction" type="primary">
@@ -11,7 +11,7 @@
         <el-table-column :prop="item.name" :label="item.label" :width="item.width" />
       </template>
     </el-table>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/excel/upload-excel.vue b/src/views/excel/upload-excel.vue
index 0a60bd3..afddb88 100644
--- a/src/views/excel/upload-excel.vue
+++ b/src/views/excel/upload-excel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-upload-excel">
+  <u-container-layout class="m-upload-excel">
     <el-upload
         style="width: 100%"
         class="upload-demo"
@@ -19,7 +19,7 @@
         </el-table-column>
       </el-table>
     </div>
-  </div>
+  </u-container-layout>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 5c461ae..9f7fef2 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,115 +1,118 @@
 
 <template>
-  <div style="width: 100%;">
-    <el-row class="row-bg" :gutter="10">
-      <el-col :xs="24" :sm="12" :lg="8">
-        <el-card class="box-card" style="height: 100%">
-          <div class="personal">
+  <u-container-layout>
+    <div>
+      <el-row class="row-bg" :gutter="10">
+        <el-col :xs="24" :sm="12" :lg="8">
+          <el-card class="box-card" style="height: 100%">
+            <div class="personal">
+              <div>
+                <el-avatar :size="50" :src="circleUrl" />
+              </div>
+              <div class="name"></div>
+              <div class="description"></div>
+              <div class="list">
+                <div>昵称：小狼</div>
+                <div>职业：前端</div>
+                <div>公司：小公司</div>
+                <div>年龄：~~</div>
+                <div>性别：男</div>
+                <div>现住址：中国-浙江-杭州</div>
+                <div>邮箱：1135957121@qq.com</div>
+                <div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
+              </div>
+              <el-divider></el-divider>
+              <div style="margin-bottom: 15px"><h5>个性标签</h5></div>
+              <div>
+                <el-tag style="margin-right: 10px">怕麻烦</el-tag>
+                <el-tag style="margin-right: 10px">健身运动</el-tag>
+                <el-tag style="margin-right: 10px">睡觉</el-tag>
+                <el-tag style="margin-right: 10px">漫威</el-tag>
+                <el-tag>向往</el-tag>
+              </div>
+              <el-divider></el-divider>
+              <div style="margin-bottom: 15px"><h5>最喜欢的一句话</h5></div>
+              <div>---------- 开心最重要</div>
+              <el-divider></el-divider>
+              <div style="margin-bottom: 15px"><h5>如果对你有帮助的话，可以麻烦点一颗 star! 你的鼓励是我继续优化的动力~~</h5></div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :xs="24" :sm="12" :lg="16">
+          <el-row class="custom" :gutter="10" >
+            <el-col :xs="24" :sm="12" :lg="8">
+              <el-card style="margin-bottom: 10px">
+                <div class="grid-content">
+                  <div class="left"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
+                  <div class="right">
+                    <h2 style="color: #2d8cf0"><count-to :start-val="0" :end-val="5268" :duration="2000"
+                                                         :autoplay="true" ></count-to></h2>
+                    <div>用户访问量
+                    </div>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="8">
+              <el-card style="margin-bottom: 10px">
+                <div class="grid-content" >
+                  <div class="left"  style="background: #64d572"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
+                  <div class="right">
+                    <h2 style="color: #64d572"><count-to :start-val="0" :end-val="9599" :duration="2000"
+                                                         :autoplay="true" ></count-to></h2>
+                    <div>系统消息
+                    </div>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="8">
+              <el-card style="margin-bottom: 10px">
+                <div class="grid-content" >
+                  <div class="left" style="background: #f25e43"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
+                  <div class="right">
+                    <h2 style="color: #f25e43"><count-to :start-val="0" :end-val="595453" :duration="2000"
+                                                         :autoplay="true" ></count-to></h2>
+                    <div>数量
+                    </div>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+          <el-card class="box-card">
+            <template #header>
+              <div class="card-header">
+                <span>系列开源产品</span>
+              </div>
+            </template>
+            <div style="display: flex">
+              <el-card style="flex: 1;margin-right: 20px;cursor: pointer" class="card-item" @click="goTo('https://ext.dcloud.net.cn/plugin?id=7511')">
+                <div style="color: white;margin-bottom: 10px"><h3>zb-table</h3></div>
+                <div style="font-size: 12px;color: white">uniapp 表格组件 支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端</div>
+              </el-card>
+              <el-card style="flex: 1;cursor: pointer" class="card-item" @click="goTo('https://github.com/zouzhibin/vue-admin-perfect')">
+                <div style="color: white;margin-bottom: 10px"><h3>vue-admin-perfect</h3></div>
+                <div style="font-size: 12px;color: white">系统基于vue3+vuex+ element-plus+ts后台管理系统</div>
+              </el-card>
+            </div>
+          </el-card>
+          <el-card class="box-card">
+            <template #header>
+              <div class="card-header">
+                <span>每周用户活跃量</span>
+              </div>
+            </template>
             <div>
-              <el-avatar :size="50" :src="circleUrl" />
+              <bar-charts height="300px" width="100%" id="bar1"></bar-charts>
             </div>
-            <div class="name"></div>
-            <div class="description"></div>
-            <div class="list">
-              <div>昵称：小狼</div>
-              <div>职业：前端</div>
-              <div>公司：小公司</div>
-              <div>年龄：~~</div>
-              <div>性别：男</div>
-              <div>现住址：中国-浙江-杭州</div>
-              <div>邮箱：1135957121@qq.com</div>
-              <div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
-            </div>
-            <el-divider></el-divider>
-            <div style="margin-bottom: 15px"><h5>个性标签</h5></div>
-            <div>
-              <el-tag style="margin-right: 10px">怕麻烦</el-tag>
-              <el-tag style="margin-right: 10px">健身运动</el-tag>
-              <el-tag style="margin-right: 10px">睡觉</el-tag>
-              <el-tag style="margin-right: 10px">漫威</el-tag>
-              <el-tag>向往</el-tag>
-            </div>
-            <el-divider></el-divider>
-            <div style="margin-bottom: 15px"><h5>最喜欢的一句话</h5></div>
-            <div>---------- 开心最重要</div>
-            <el-divider></el-divider>
-            <div style="margin-bottom: 15px"><h5>如果对你有帮助的话，可以麻烦点一颗 star! 你的鼓励是我继续优化的动力~~</h5></div>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :lg="16">
-        <el-row class="custom" :gutter="10" >
-          <el-col :xs="24" :sm="12" :lg="8">
-            <el-card style="margin-bottom: 10px">
-              <div class="grid-content">
-                <div class="left"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
-                <div class="right">
-                  <h2 style="color: #2d8cf0"><count-to :start-val="0" :end-val="5268" :duration="2000"
-                                                           :autoplay="true" ></count-to></h2>
-                  <div>用户访问量
-                  </div>
-                </div>
-              </div>
-            </el-card>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="8">
-            <el-card style="margin-bottom: 10px">
-              <div class="grid-content" >
-                <div class="left"  style="background: #64d572"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
-                <div class="right">
-                  <h2 style="color: #64d572"><count-to :start-val="0" :end-val="9599" :duration="2000"
-                                                    :autoplay="true" ></count-to></h2>
-                  <div>系统消息
-                  </div>
-                </div>
-              </div>
-            </el-card>
-          </el-col>
-          <el-col :xs="24" :sm="12" :lg="8">
-            <el-card style="margin-bottom: 10px">
-              <div class="grid-content" >
-                <div class="left" style="background: #f25e43"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
-                <div class="right">
-                  <h2 style="color: #f25e43"><count-to :start-val="0" :end-val="595453" :duration="2000"
-                                                              :autoplay="true" ></count-to></h2>
-                  <div>数量
-                  </div>
-                </div>
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>系列开源产品</span>
-            </div>
-          </template>
-          <div style="display: flex">
-            <el-card style="flex: 1;margin-right: 20px;cursor: pointer" class="card-item" @click="goTo('https://ext.dcloud.net.cn/plugin?id=7511')">
-              <div style="color: white;margin-bottom: 10px"><h3>zb-table</h3></div>
-              <div style="font-size: 12px;color: white">uniapp 表格组件 支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端</div>
-            </el-card>
-            <el-card style="flex: 1;cursor: pointer" class="card-item" @click="goTo('https://github.com/zouzhibin/vue-admin-perfect')">
-              <div style="color: white;margin-bottom: 10px"><h3>vue-admin-perfect</h3></div>
-              <div style="font-size: 12px;color: white">系统基于vue3+vuex+ element-plus+ts后台管理系统</div>
-            </el-card>
-          </div>
-        </el-card>
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>每周用户活跃量</span>
-            </div>
-          </template>
-          <div>
-            <bar-charts height="300px" width="100%" id="bar1"></bar-charts>
-          </div>
-        </el-card>
+          </el-card>
+
+        </el-col>
+      </el-row>
+    </div>
+  </u-container-layout>
 
-      </el-col>
-    </el-row>
-  </div>
 </template>
 <script setup lang="ts">
   import {
@@ -140,6 +143,7 @@
       margin-top: 18px;
       line-height: 30px;
       text-align: left;
+      color: red;
     }
   }
   .card-header {
diff --git a/src/views/other/count.vue b/src/views/other/count.vue
index 0a4098c..760b7a5 100644
--- a/src/views/other/count.vue
+++ b/src/views/other/count.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="components-container">
+  <u-container-layout class="components-container">
     <count-to ref="example" class="example" :start-val="options.startValInput" :end-val="options.endValInput" :duration="options.durationInput" :decimals="options.decimals"
                :prefix="options.prefix" :suffix="options.suffix" :autoplay="true" :separator="options.separator"></count-to>
     <div style="margin-top: 40px;">
@@ -29,7 +29,7 @@
       <el-button type="primary" @click="start">开始</el-button>
       <el-button type="danger" @click="pauseResume">暂停/恢复</el-button>
     </div>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/other/cropper/index.vue b/src/views/other/cropper/index.vue
index c1360e7..0afaed7 100644
--- a/src/views/other/cropper/index.vue
+++ b/src/views/other/cropper/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-cropper">
+  <u-container-layout class="m-cropper">
     <div class="left">
       <div class="cropper-content">
         <vue-cropper
@@ -50,7 +50,7 @@
         <img :src="option.cropImg" style="width: 100%;height: 100%" v-if="option.cropImg"/>
       </div>
     </div>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/other/editor.vue b/src/views/other/editor.vue
index 6f5ba47..4c168c2 100644
--- a/src/views/other/editor.vue
+++ b/src/views/other/editor.vue
@@ -1,36 +1,39 @@
 <template>
-  <el-form
-      ref="formRef"
-      :model="dynamicValidateForm"
-      label-width="80px"
-      class="demo-dynamic"
-  >
-    <el-form-item
-        prop="title"
-        label="标题"
-        :rules="[
+  <u-container-layout>
+    <el-form
+        ref="formRef"
+        :model="dynamicValidateForm"
+        label-width="80px"
+        class="demo-dynamic"
+    >
+      <el-form-item
+          prop="title"
+          label="标题"
+          :rules="[
         {  required: true,  message: '请输入标题', trigger: 'blur',  },
 
       ]"
-    >
-      <el-input v-model="dynamicValidateForm.title" />
-    </el-form-item>
-    <el-form-item
-        prop="content"
-        label="标题"
-        :rules="[
+      >
+        <el-input v-model="dynamicValidateForm.title" />
+      </el-form-item>
+      <el-form-item
+          prop="content"
+          label="标题"
+          :rules="[
         {  required: true,  message: '请输入内容', trigger: 'blur',  },
 
       ]"
-    >
-      <u-wang-edior v-model="dynamicValidateForm.content"/>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
-<!--      <el-button @click="preview">预览</el-button>-->
-      <el-button @click="resetForm(formRef)">取消</el-button>
-    </el-form-item>
-  </el-form>
+      >
+        <u-wang-edior v-model="dynamicValidateForm.content"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
+        <!--      <el-button @click="preview">预览</el-button>-->
+        <el-button @click="resetForm(formRef)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </u-container-layout>
+
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/other/grid-sorter.vue b/src/views/other/grid-sorter.vue
index f29bd21..4719dba 100644
--- a/src/views/other/grid-sorter.vue
+++ b/src/views/other/grid-sorter.vue
@@ -1,6 +1,6 @@
 
 <template>
-  <div class="row">
+  <u-container-layout class="row">
     <div style="margin-bottom: 10px">卡片拖拽排序</div>
     <el-button class="btn " @click="sorter" type="primary" style="margin-bottom: 20px">
       还原
@@ -42,7 +42,7 @@
       </draggable>
       </el-row>
     </div>
-  </div>
+  </u-container-layout>
 </template>
 <!--<li class="list-group-item" :style="{backgroundColor:`${element.color}` }">-->
 <!--  <i-->
diff --git a/src/views/other/mark-down.vue b/src/views/other/mark-down.vue
index b89ae78..d6fbbff 100644
--- a/src/views/other/mark-down.vue
+++ b/src/views/other/mark-down.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="mark-down">
+    <u-container-layout class="mark-down">
       <el-alert
           title="Markdown 是基于 md-editor-v3"
           type="success"
@@ -11,7 +11,7 @@
       <div style="margin-top: 20px;flex-shrink: 0">
         <el-button type="primary" @click="submit">提交</el-button>
       </div>
-    </div>
+    </u-container-layout>
 </template>
 <script lang="ts">
   // https://imzbf.github.io/md-editor-v3/index
diff --git a/src/views/other/print.vue b/src/views/other/print.vue
index 7602db4..4b0d77d 100644
--- a/src/views/other/print.vue
+++ b/src/views/other/print.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <u-container-layout>
     <div>
       <el-button type="primary" @click="print(1)">打印图片</el-button>
       <el-button type="primary" @click="print(2)">打印表格</el-button>
@@ -14,7 +14,7 @@
         <el-table-column prop="address" label="地址" />
       </el-table>
     </div>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/other/qrcode.vue b/src/views/other/qrcode.vue
index e24f4a2..ef39f7f 100644
--- a/src/views/other/qrcode.vue
+++ b/src/views/other/qrcode.vue
@@ -1,6 +1,6 @@
 
 <template>
-    <div>
+    <u-container-layout>
         <el-input v-model="inputData" placeholder="请输入" style="width:400px;max-width:100%;" />
         <el-button type="primary" @click="handleQrcode(1)">
             <el-icon style="margin-right: 6px"><collection /></el-icon> 生成二维码
@@ -9,7 +9,7 @@
         <div>
             <vue-qr  :logoSrc="src" :text="inputData" :size="200"></vue-qr>
         </div>
-    </div>
+    </u-container-layout>
 </template>
 <script lang="ts" setup>
     import {ref} from 'vue'
diff --git a/src/views/other/right-menu.vue b/src/views/other/right-menu.vue
index a1a1390..9a1c4ca 100644
--- a/src/views/other/right-menu.vue
+++ b/src/views/other/right-menu.vue
@@ -1,8 +1,8 @@
 <template>
-  <div style="min-height: 300px">
+  <u-container-layout style="min-height: 300px">
     <el-button @contextmenu.prevent="rightClick">右键菜单</el-button>
     <u-right-click-menu :left="clientX" :top="clientY" @ok="operatingRightAction" :data="data"/>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/other/splitpane.vue b/src/views/other/splitpane.vue
index 14e0bb5..31f22a8 100644
--- a/src/views/other/splitpane.vue
+++ b/src/views/other/splitpane.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <u-container-layout>
     <splitpanes style="height: 800px">
       <pane min-size="20" class="left">1</pane>
       <pane>
@@ -11,7 +11,7 @@
       </pane>
       <pane class="item4">5</pane>
     </splitpanes>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/permission/page.vue b/src/views/permission/page.vue
index ad957fd..4a164ab 100644
--- a/src/views/permission/page.vue
+++ b/src/views/permission/page.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-permission-page">
+  <u-container-layout class="m-permission-page">
     <div style="margin-bottom: 20px">
       权限列表{{store.getters.roles}}
     </div>
@@ -7,7 +7,7 @@
       <el-radio-button label="other" />
       <el-radio-button label="admin" />
     </el-radio-group>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/table/comprehensive.vue b/src/views/table/comprehensive.vue
index e8f89e8..975c898 100644
--- a/src/views/table/comprehensive.vue
+++ b/src/views/table/comprehensive.vue
@@ -1,76 +1,79 @@
 <template>
-  <div class="app-container">
-    <comprehensive-table
-            :loading="loading"
-            @selection-change="selectionChange"
-            :columns="column" :data="list" @reset="reset" @onSubmit="onSubmit">
-      <template v-slot:btn>
-       <div style="display: flex;justify-content: flex-end">
-         <el-button type="primary" @click="add"><el-icon><plus /></el-icon> 添加</el-button>
-         <el-button type="danger" @click="batchDelete"><el-icon><delete /></el-icon>删除</el-button>
-       </div>
-      </template>
-      <template v-slot:sex="scope">{{scope.row.sex?'男':'女'}}</template>
-      <template v-slot:operation="scope">
-        <el-button
-            type="primary"
-            size="small"
-            icon="Edit"
-            @click="edit(scope.row)"
-        >
-          编辑
-        </el-button>
-        <el-button
-                @click="del(scope.row)"
-            type="danger"
-            size="small"
-            icon="Delete"
-        >
-          删除
-        </el-button>
-      </template>
-    </comprehensive-table>
+  <u-container-layout>
+    <div class="app-container">
+      <comprehensive-table
+          :loading="loading"
+          @selection-change="selectionChange"
+          :columns="column" :data="list" @reset="reset" @onSubmit="onSubmit">
+        <template v-slot:btn>
+          <div style="display: flex;justify-content: flex-end">
+            <el-button type="primary" @click="add"><el-icon><plus /></el-icon> 添加</el-button>
+            <el-button type="danger" @click="batchDelete"><el-icon><delete /></el-icon>删除</el-button>
+          </div>
+        </template>
+        <template v-slot:sex="scope">{{scope.row.sex?'男':'女'}}</template>
+        <template v-slot:operation="scope">
+          <el-button
+              type="primary"
+              size="small"
+              icon="Edit"
+              @click="edit(scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-button
+              @click="del(scope.row)"
+              type="danger"
+              size="small"
+              icon="Delete"
+          >
+            删除
+          </el-button>
+        </template>
+      </comprehensive-table>
 
-    <el-dialog
-            v-model="dialogVisible"
-            :title="title"
-            width="50%"
-    >
-      <el-form
-              ref="ruleFormRef"
-              :model="ruleForm"
-              :rules="rules"
-              label-width="120px"
-              class="demo-ruleForm"
-              :size="formSize"
+      <el-dialog
+          v-model="dialogVisible"
+          :title="title"
+          width="50%"
       >
-        <el-form-item label="活动名称" prop="name">
-          <el-input v-model="ruleForm.name" />
-        </el-form-item>
-        <el-form-item label="性别" prop="sex">
-          <el-radio-group v-model="ruleForm.sex">
-            <el-radio :label="1" >男</el-radio>
-            <el-radio :label="0" >女</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="价格" prop="price">
-          <el-input v-model="ruleForm.price" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
+        <el-form
+            ref="ruleFormRef"
+            :model="ruleForm"
+            :rules="rules"
+            label-width="120px"
+            class="demo-ruleForm"
+            :size="formSize"
+        >
+          <el-form-item label="活动名称" prop="name">
+            <el-input v-model="ruleForm.name" />
+          </el-form-item>
+          <el-form-item label="性别" prop="sex">
+            <el-radio-group v-model="ruleForm.sex">
+              <el-radio :label="1" >男</el-radio>
+              <el-radio :label="0" >女</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="价格" prop="price">
+            <el-input v-model="ruleForm.price" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
       <span class="dialog-footer">
         <el-button @click="dialogVisible = false">取消</el-button>
         <el-button type="primary" @click="handleClose(ruleFormRef)"
         >确定</el-button
         >
       </span>
-      </template>
-    </el-dialog>
+        </template>
+      </el-dialog>
+
+    </div>
+  </u-container-layout>
 
-  </div>
 </template>
 <script lang="ts" setup>
-import {ref, reactive, onMounted} from "vue";
+  import {ref, reactive, onMounted} from "vue";
   import * as dayjs from 'dayjs'
   import { ElMessage,ElMessageBox } from 'element-plus'
   import type { FormInstance } from 'element-plus'
diff --git a/src/views/table/edit.vue b/src/views/table/edit.vue
index 2ceed97..cadd6d7 100644
--- a/src/views/table/edit.vue
+++ b/src/views/table/edit.vue
@@ -1,4 +1,5 @@
 <template>
+  <u-container-layout>
     <div>
       <div style="display: flex;justify-content: flex-end">
         <el-radio-group v-model="radio">
@@ -24,6 +25,8 @@
         <el-button type="primary" @click="config">提交</el-button>
       </div>
     </div>
+  </u-container-layout>
+
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/table/inline-edit-table.vue b/src/views/table/inline-edit-table.vue
index 702b77b..99f9916 100644
--- a/src/views/table/inline-edit-table.vue
+++ b/src/views/table/inline-edit-table.vue
@@ -1,90 +1,93 @@
 <template>
-  <div class="inline-edit-table">
-    <el-form :inline="true" :model="formInline1" class="demo-form-inline">
-      <el-form-item label="姓名">
-        <el-input v-model="formInline1.username" placeholder="请输入姓名" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">搜索</el-button>
-      </el-form-item>
-    </el-form>
-    <el-table :data="list" style="width: 100%" :border="true" v-loading="loading">
-      <el-table-column prop="id" width="60" label="id"/>
-      <el-table-column prop="name" label="姓名" min-width="200px">
-        <template #default="scope">
-          <template v-if="scope.row.edit">
-            <div style="display: flex;align-items: center;">
-              <el-input v-model="scope.row.name"  size="small" />
-              <el-button
-                  size="small"
-                  icon="Refresh"
-                  type="warning"
-                  @click="cancelEdit(scope.row)"
-              >
-                取消
-              </el-button>
-            </div>
+  <u-container-layout>
+    <div class="inline-edit-table">
+      <el-form :inline="true" :model="formInline1" class="demo-form-inline">
+        <el-form-item label="姓名">
+          <el-input v-model="formInline1.username" placeholder="请输入姓名" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="list" style="width: 100%" :border="true" v-loading="loading">
+        <el-table-column prop="id" width="60" label="id"/>
+        <el-table-column prop="name" label="姓名" min-width="200px">
+          <template #default="scope">
+            <template v-if="scope.row.edit">
+              <div style="display: flex;align-items: center;">
+                <el-input v-model="scope.row.name"  size="small" />
+                <el-button
+                    size="small"
+                    icon="Refresh"
+                    type="warning"
+                    @click="cancelEdit(scope.row)"
+                >
+                  取消
+                </el-button>
+              </div>
+            </template>
+            <template v-else>{{scope.row.name}}</template>
           </template>
-          <template v-else>{{scope.row.name}}</template>
-        </template>
-      </el-table-column>
-      <el-table-column prop="age" label="年龄" />
-      <el-table-column prop="sex" label="性别" >
-        <template #default="scope">
-          {{scope.row.sex?'男':'女'}}
-        </template>
-      </el-table-column>
-      <el-table-column prop="price" label="价格" />
-      <el-table-column prop="admin" label="账号"  />
-      <el-table-column prop="address" label="地址"  />
-      <el-table-column prop="date" label="日期"  />
-      <el-table-column prop="province" label="省份"  />
-      <el-table-column prop="city" label="城市"  />
-      <el-table-column prop="operator" label="操作" width="180px" fixed="right">
-        <template #default="scope">
-          <el-button
-              v-if="scope.row.edit"
-              type="success"
-              size="small"
-              icon="CircleCheckFilled"
-              @click="confirmEdit(scope.row)"
-          >
-            保存
-          </el-button>
-          <el-button
-             v-else
-              type="primary"
-              size="small"
-              icon="Edit"
-             @click="scope.row.edit=!scope.row.edit"
-          >
-            编辑
-          </el-button>
+        </el-table-column>
+        <el-table-column prop="age" label="年龄" />
+        <el-table-column prop="sex" label="性别" >
+          <template #default="scope">
+            {{scope.row.sex?'男':'女'}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="price" label="价格" />
+        <el-table-column prop="admin" label="账号"  />
+        <el-table-column prop="address" label="地址"  />
+        <el-table-column prop="date" label="日期"  />
+        <el-table-column prop="province" label="省份"  />
+        <el-table-column prop="city" label="城市"  />
+        <el-table-column prop="operator" label="操作" width="180px" fixed="right">
+          <template #default="scope">
+            <el-button
+                v-if="scope.row.edit"
+                type="success"
+                size="small"
+                icon="CircleCheckFilled"
+                @click="confirmEdit(scope.row)"
+            >
+              保存
+            </el-button>
+            <el-button
+                v-else
+                type="primary"
+                size="small"
+                icon="Edit"
+                @click="scope.row.edit=!scope.row.edit"
+            >
+              编辑
+            </el-button>
 
-          <el-button
-              type="danger"
-              size="small"
-              icon="Delete"
-              @click="deleteAction(scope.row)"
-          >
-            删除
-          </el-button>
+            <el-button
+                type="danger"
+                size="small"
+                icon="Delete"
+                @click="deleteAction(scope.row)"
+            >
+              删除
+            </el-button>
 
-        </template>
-      </el-table-column>
-    </el-table>
-    <div style="width: 100%;display: flex;justify-content: center;padding-top: 20px">
-      <el-pagination
-          v-model:currentPage="currentPage1"
-          :page-size="10"
-          background
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="transData.length"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-      />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="width: 100%;display: flex;justify-content: center;padding-top: 20px">
+        <el-pagination
+            v-model:currentPage="currentPage1"
+            :page-size="10"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="transData.length"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+        />
+      </div>
     </div>
-  </div>
+  </u-container-layout>
+
 </template>
 
 <script lang="ts" setup >
diff --git a/src/views/table/multi-table.vue b/src/views/table/multi-table.vue
index 825b668..a9ee9d0 100644
--- a/src/views/table/multi-table.vue
+++ b/src/views/table/multi-table.vue
@@ -1,19 +1,22 @@
 <template>
-  <div class="app-container">
-    <el-table :data="list" style="width: 100%">
-      <el-table-column prop="date" label="Date" width="150" />
-      <el-table-column label="Delivery Info">
-        <el-table-column prop="name" label="Name" width="120" />
-        <el-table-column label="Address Info">
-          <el-table-column prop="state" label="State" width="120" />
-          <el-table-column prop="city" label="City" width="120" />
-          <el-table-column prop="address" label="Address" />
-          <el-table-column prop="zip" label="Zip" width="120" />
+  <u-container-layout>
+    <div class="app-container">
+      <el-table :data="list" style="width: 100%">
+        <el-table-column prop="date" label="Date" width="150" />
+        <el-table-column label="Delivery Info">
+          <el-table-column prop="name" label="Name" width="120" />
+          <el-table-column label="Address Info">
+            <el-table-column prop="state" label="State" width="120" />
+            <el-table-column prop="city" label="City" width="120" />
+            <el-table-column prop="address" label="Address" />
+            <el-table-column prop="zip" label="Zip" width="120" />
+          </el-table-column>
         </el-table-column>
-      </el-table-column>
-    </el-table>
+      </el-table>
+
+    </div>
+  </u-container-layout>
 
-  </div>
 </template>
 <script lang="ts" setup>
 import {ref} from "vue";
diff --git a/src/views/zip/download.vue b/src/views/zip/download.vue
index 28c5e44..703f262 100644
--- a/src/views/zip/download.vue
+++ b/src/views/zip/download.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <u-container-layout>
     <div style="margin-bottom: 15px;display: flex;align-items: center">
       <el-input v-model="input" placeholder="请输入文件名"  style="width: 200px;margin-right: 10px"/>
       <el-button @click="exportExcelAction" type="primary">
@@ -11,7 +11,7 @@
         <el-table-column :prop="item.name" :label="item.label" :width="item.width" />
       </template>
     </el-table>
-  </div>
+  </u-container-layout>
 </template>
 
 <script lang="ts" setup>