diff --git a/src/views/pages/process/channeltype/channel-type-edit-dialog.vue b/src/views/pages/process/channeltype/channel-type-edit-dialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8f9d868fd61435a89271816d63fb2ff4428d2de8
--- /dev/null
+++ b/src/views/pages/process/channeltype/channel-type-edit-dialog.vue
@@ -0,0 +1,309 @@
+<template>
+  <div>
+    <TsDialog
+      v-bind="dialogSetting"
+      @on-ok="okDialog"
+      @on-close="closeDialog"
+    >
+      <template v-slot>
+        <TsForm
+          ref="form"
+          :itemList="formSetting"
+        >
+          <template slot="color">
+            <Poptip
+              class="channeltype-color"
+              trigger="hover"
+              placement="bottom-start"
+              popper-class="channeltype-color"
+              padding="0px"
+              offset="25"
+              transfer
+              @on-popper-show="isColorListShow = true"
+              @on-popper-hide="isColorListShow = false"
+            >
+              <div class="color-selected">
+                <div class="color-block radius-sm" :style="{backgroundColor:selectedColor}"></div>
+                <i class="tsfont-down" :class="{'arrow-rotate':isColorListShow}"></i>
+              </div>
+              <div slot="content">
+                <ul class="color-block-list">
+                  <li
+                    v-for="color in colorList"
+                    :key="color"
+                    class="color-block color-block-item radius-sm"
+                    :class="{'border-primary':color === selectedColor}"
+                    :style="{backgroundColor:color}"
+                    @click="selectedColor = color"
+                  ></li>
+                </ul>
+              </div>
+            </Poptip>
+          </template>
+        </TsForm>
+      </template>
+    </TsDialog>
+  </div>
+</template>
+<script>
+export default {
+  name: '',
+  components: {
+    TsForm: resolve => require(['@/resources/plugins/TsForm/TsForm'], resolve)
+  },
+  props: {
+    uuid: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      isColorListShow: false,
+      policyList: [],
+      dialogSetting: {
+        type: 'modal',
+        title: this.uuid ? this.$t('dialog.title.edittarget', {target: this.$t('term.process.sertype')}) : this.$t('dialog.title.addtarget', {target: this.$t('term.process.sertype')}),
+        isShow: true,
+        width: 'medium'
+      },
+      colorList: [
+        '#D18CBD',
+        '#FFBA5A',
+        '#78D8DE',
+        '#A78375',
+        '#B9D582',
+        '#898DDD',
+        '#F3E67B',
+        '#527CA6',
+        '#50BFF2',
+        '#FF6666',
+        '#15BF81',
+        '#90A4AE'
+      ],
+      selectedColor: '#50BFF2',
+      formSetting: [],
+      defaultFormSetting: [
+        {
+          type: 'text',
+          name: 'uuid',
+          isHidden: true,
+          label: this.$t('page.primarykey'),
+          value: null
+        },
+        {
+          type: 'text',
+          name: 'name',
+          maxlength: 30,
+          label: this.$t('page.name'),
+          value: '',
+          validateList: [
+            'required',
+            { 
+              name: 'searchUrl', 
+              url: 'api/rest/process/channeltype/save',
+              message: this.$t('message.targetisexists', {target: this.$t('term.process.sertype')}),
+              params: () => ({uuid: this.uuid})
+            }
+          ]
+        },
+        {
+          type: 'radio',
+          name: 'isActive',
+          value: 1,
+          label: this.$t('page.status'),
+          validateList: ['required'],
+          valueName: 'value',
+          textName: 'text',
+          dataList: [
+            { value: 1, text: this.$t('page.enable') },
+            { value: 0, text: this.$t('page.disable') }
+          ]
+        },
+        {
+          type: 'text',
+          name: 'prefix',
+          maxlength: 30,
+          label: this.$t('term.process.worknumper'),
+          validateList: ['required'],
+          value: ''
+        },
+        {
+          type: 'select',
+          name: 'handler',
+          label: this.$t('term.process.worknumrules'),
+          validateList: ['required'],
+          url: '/api/rest/processtask/serialnumber/policy/list',
+          textName: 'name',
+          valueName: 'handler',
+          onChange: this.handleHandler,
+          value: ''
+        },
+        {
+          name: 'color',
+          type: 'slot',
+          value: '#50BFF2',
+          label: this.$t('page.color'),
+          validateList: ['required']
+        },
+        {
+          type: 'textarea',
+          name: 'description',
+          label: this.$t('page.description'),
+          value: ''
+        }
+      ]
+    };
+  },
+  beforeCreate() {},
+  async created() {
+    this.formSetting = this.$utils.deepClone(this.defaultFormSetting);
+    await this.searchPolicyList();
+    this.searchData();
+  },
+  beforeMount() {},
+  mounted() {},
+  beforeUpdate() {},
+  updated() {},
+  activated() {},
+  deactivated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  methods: {
+    searchData() {
+      if (this.$utils.isEmpty(this.uuid)) {
+        return false;
+      }
+      let params = { uuid: this.uuid, timestamp: new Date().getTime() };
+      this.$api.process.channeltype
+        .get(params)
+        .then(res => {
+          if (res.Status == 'OK') {
+            this.handleHandler(res.Return['handler']);
+            this.selectedColor = res.Return['color'];
+            this.formSetting.forEach(item => {
+              if (item?.name) {
+                item.value = res.Return[item.name];
+              }
+            });
+          }
+        });
+    },
+    handleHandler(data) {
+      const formSetting = this.$utils.deepClone(this.formSetting);
+      const formValue = {};
+      const formAttributeList = [];
+
+      this.defaultFormSetting.forEach(item => {
+        if (item?.name) {
+          const selectedValue = formSetting.find(formItem => formItem.name === item.name);
+          if (selectedValue) {
+            formValue[item.name] = selectedValue.value;
+          }
+        }
+      });
+
+      this.formSetting = this.$utils.deepClone(this.defaultFormSetting);
+
+      const obj = this.policyList.find(d => d.handler === data);
+      if (obj) {
+        if (obj.formAttributeList && obj.formAttributeList.length) {
+          obj.formAttributeList.forEach(f => {
+            formAttributeList.push({
+              ...f,
+              value: f.defaultValue ?? null,
+              width: '100%'
+            });
+          });
+        }
+
+        this.formSetting.forEach(item => {
+          if (item?.name && formValue[item.name]) {
+            item.value = formValue[item.name];
+          }
+        });
+  
+        this.formSetting.splice(5, 0, ...formAttributeList);
+      }
+    },
+    searchPolicyList() {
+      const data = {
+        needPage: false
+      };
+      return this.$api.process.channeltype.policyList(data).then(res => {
+        if (res.Status == 'OK') {
+          this.policyList = res.Return;
+        }
+      });
+    },
+    okDialog() {
+      let form = this.$refs.form;
+      if (!form.valid()) {
+        return false;
+      }
+      let params = {
+        ...form.getFormValue(),
+        color: this.selectedColor
+      };
+      this.$api.process.channeltype
+        .save(params)
+        .then(res => {
+          if (res.Status == 'OK') {
+            this.$Message.success(this.$t('message.savesuccess'));
+            this.searchData();
+          }
+        })
+        .finally(() => {
+          this.closeDialog(true);
+        });
+    },
+    closeDialog(needRefresh = false) {
+      this.$emit('close', needRefresh);
+    }
+  },
+  filter: {},
+  computed: {},
+  watch: {}
+};
+</script>
+<style lang="less" scoped>
+.channeltype-color {
+  /deep/ .ivu-poptip-arrow {
+    display: none;
+  }
+  /deep/ .ivu-poptip-inner {
+    transform: translateY(-8px);
+  }
+  .color-block {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+  }
+  .color-selected {
+    cursor: pointer;
+    .color-block {
+      display: inline-block;
+      margin-right: 4px;
+    }
+    .tsfont-down {
+      transition: transform 0.25s ease-out;
+      &.arrow-rotate {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+  .color-block-list {
+    box-sizing: border-box;
+    width: 152px;
+    height: 120px;
+    padding: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: space-between;
+    .color-block-item {
+      margin: 4px;
+    }
+  }
+}
+</style>
diff --git a/src/views/pages/process/channeltype/channeltype-manage.vue b/src/views/pages/process/channeltype/channeltype-manage.vue
index 0e320958580d8782ae2f531c7db5a87290d951c5..2b2e622cbcead41d2400dfdfe78da01d765816c4 100644
--- a/src/views/pages/process/channeltype/channeltype-manage.vue
+++ b/src/views/pages/process/channeltype/channeltype-manage.vue
@@ -3,28 +3,30 @@
     <Loading :loadingShow="loadingShow" type="fix"></Loading>
     <TsContain>
       <template slot="topLeft">
-        <span class="text-action tsfont-plus" @click="addRow()">{{ $t('term.process.sertype') }}</span>
+        <span class="text-action tsfont-plus" @click="addChannelType()">{{ $t('term.process.sertype') }}</span>
       </template>
       <template slot="topRight">
         <TsRow>
-          <Col :span="6"><TsFormSelect v-bind="isActiveSelectSetting"></TsFormSelect>
+          <Col :span="6">
+            <TsFormSelect v-bind="isActiveSelectSetting"></TsFormSelect>
           </Col>
           <Col :span="18">
             <InputSearcher
               v-model="searchParam.keyword"
-              @change="getTableDataSearch(1)"
+              @change="() => changeCurrent()"
             ></InputSearcher>
           </Col>
         </TsRow>
       </template>
-      <div slot="content" ref="maintable">
+      <div slot="content">
         <TsTable
-          v-if="tableData"
           v-bind="tableData"
-          @changeCurrent="getPageData"
+          :theadList="theadList"
+          @changeCurrent="changeCurrent"
+          @changePageSize="changePageSize"
         >
           <template slot="name" slot-scope="{ row }">
-            <div :style="{ color: row.color ? row.color : '' }" class="cur" @click="editRow(row.uuid)">{{ row.name }}</div>
+            <div :style="{ color: row.color ? row.color : '' }" class="cursor" @click="editChannelType(row.uuid)">{{ row.name }}</div>
           </template>
           <template slot="isActive" slot-scope="{ row }">
             <div>{{ row.isActive == 1 ? $t('page.enable') : $t('page.disable') }}</div>
@@ -40,61 +42,7 @@
         </TsTable>
       </div>
     </TsContain>
-    <TsDialog
-      v-if="editTsDialog && editTsDialog.isShow"
-      v-bind="editTsDialog"
-      :isShow.sync="editTsDialog.isShow"
-      :okBtnDisable="disabledConfig.saving"
-      @on-ok="saveEditRow"
-      @on-close="cancelEditRow"
-    >
-      <template v-slot>
-        <div class="editForm">
-          <TsForm
-            ref="mainForm"
-            :itemList="formSetting"
-            type="type"
-            labelPosition="right"
-          >
-            <template slot="icon">
-              <a href="javascript:void(0)" @click="iconTsDialog.isShow = true">
-                <i class="menuIcon" :class="[selectedIcon, { square: selectedIcon == null }]" style="color:#666;"></i>
-              </a>
-            </template>
-            <template slot="color">
-              <Poptip
-                class="channeltype-color"
-                trigger="hover"
-                placement="bottom-start"
-                popper-class="channeltype-color"
-                padding="0px"
-                offset="25"
-                transfer
-                @on-popper-show="isColorListShow = true"
-                @on-popper-hide="isColorListShow = false"
-              >
-                <div class="color-selected">
-                  <div class="color-block radius-sm" :style="{backgroundColor:selectedColor}"></div>
-                  <i class="tsfont-down" :class="{'arrow-rotate':isColorListShow}"></i>
-                </div>
-                <div slot="content">
-                  <ul class="color-block-list">
-                    <li
-                      v-for="color in colorList"
-                      :key="color"
-                      class="color-block color-block-item radius-sm"
-                      :class="{'border-primary':color === selectedColor}"
-                      :style="{backgroundColor:color}"
-                      @click="selectedColor = color"
-                    ></li>
-                  </ul>
-                </div>
-              </Poptip>
-            </template>
-          </TsForm>
-        </div>
-      </template>
-    </TsDialog>
+    <ChannelTypeEditDialog v-if="isShowChannelTypeEditDialog" :uuid="uuid" @close="closeDialog"></ChannelTypeEditDialog>
   </div>
 </template>
 <script>
@@ -102,21 +50,17 @@ export default {
   name: 'ChanneltypeManage',
   components: {
     TsTable: resolve => require(['@/resources/components/TsTable/TsTable.vue'], resolve),
-    TsForm: resolve => require(['@/resources/plugins/TsForm/TsForm'], resolve),
     TsFormSelect: resolve => require(['@/resources/plugins/TsForm/TsFormSelect'], resolve),
-    InputSearcher: resolve => require(['@/resources/components/InputSearcher/InputSearcher.vue'], resolve)
+    InputSearcher: resolve => require(['@/resources/components/InputSearcher/InputSearcher.vue'], resolve),
+    ChannelTypeEditDialog: resolve => require(['./channel-type-edit-dialog'], resolve)
   },
   filters: {},
   props: [],
   data() {
-    let _this = this;
     return {
+      uuid: '',
       loadingShow: true,
-      colorList: ['#D18CBD', '#FFBA5A', '#78D8DE', '#A78375', '#B9D582', '#898DDD', '#F3E67B', '#527CA6', '#50BFF2', '#FF6666', '#15BF81', '#90A4AE'],
-      selectedColor: '#50BFF2',
-      isColorListShow: false,
-      tableheight: 0,
-      policyList: [],
+      isShowChannelTypeEditDialog: false,
       theadList: [
         { title: this.$t('page.name'), key: 'name', minWidth: 300, resizable: true },
         { title: this.$t('page.status'), key: 'isActive', minWidth: 300, resizable: true },
@@ -125,94 +69,11 @@ export default {
         { title: this.$t('page.description'), key: 'description', minWidth: 300, resizable: true },
         { title: ' ', key: 'action', align: 'right', width: 10 }
       ],
-      tableData: null,
-      editTsDialog: {
-        type: 'modal',
-        title: '',
-        maskClose: false,
-        isShow: false,
-        width: '700px'
+      tableData: {
+        currentPage: 1,
+        pageSize: 20,
+        tbodyList: []
       },
-      oldformSetting: [
-        {
-          type: 'text',
-          name: 'uuid',
-          value: null,
-          defaultValue: null,
-          isHidden: true,
-          label: this.$t('page.primarykey')
-        },
-        {
-          type: 'text',
-          name: 'name',
-          value: '',
-          defaultValue: '',
-          maxlength: 30,
-          width: '100%',
-          label: this.$t('page.name'),
-          validateList: [
-            'required',
-            { 
-              name: 'searchUrl', 
-              url: 'api/rest/process/channeltype/save',
-              message: this.$t('message.targetisexists', {target: this.$t('term.process.sertype')}),
-              params: () => ({uuid: this.oldformSetting[0].value})
-            }
-          ]
-        },
-        {
-          type: 'radio',
-          name: 'isActive',
-          value: 1,
-          defaultValue: 1,
-          label: this.$t('page.status'),
-          validateList: ['required'],
-          valueName: 'value',
-          textName: 'text',
-          dataList: [
-            { value: 1, text: this.$t('page.enable') },
-            { value: 0, text: this.$t('page.disable') }
-          ]
-        },
-        {
-          type: 'text',
-          name: 'prefix',
-          value: '',
-          defaultValue: '',
-          maxlength: 30,
-          width: '100%',
-          label: this.$t('term.process.worknumper'),
-          validateList: ['required']
-        },
-        {
-          type: 'select',
-          name: 'handler',
-          value: '',
-          defaultValue: '',
-          label: this.$t('term.process.worknumrules'),
-          width: '100%',
-          validateList: ['required'],
-          url: '/api/rest/processtask/serialnumber/policy/list',
-          textName: 'name',
-          valueName: 'handler',
-          onChange: _this.handlerSelect
-        },
-        {
-          name: 'color',
-          type: 'slot',
-          label: this.$t('page.color'),
-          validateList: ['required']
-        },
-        {
-          type: 'textarea',
-          name: 'description',
-          label: this.$t('page.description'),
-          width: '100%',
-          value: '',
-          defaultValue: ''
-        }
-      ],
-      formSetting: [],
       searchParam: {
         keyword: null,
         isActive: null,
@@ -232,12 +93,11 @@ export default {
           { value: 1, text: this.$t('page.enable') },
           { value: 0, text: this.$t('page.disable') }
         ],
-        onChange: function(value) {
-          Object.assign(_this.searchParam, {
+        onChange: (value) => {
+          Object.assign(this.searchParam, {
             isActive: value === '' ? null : value
           });
-
-          _this.getTableDataSearch(1);
+          this.changeCurrent();
         }
       },
       disabledConfig: { //禁止按钮连续调用接口
@@ -248,81 +108,47 @@ export default {
   },
   created() {},
   mounted() {
-    let _this = this;
-    this.getTableDataSearch(1);
-    this.settableheight();
+    this.changeCurrent();
     let isCatalogManage = this.$route.query.isCatalogManage;
     if (isCatalogManage == '1') {
-      this.addRow();
+      this.addChannelType();
     }
-    window.addEventListener('resize', this.settableheight);
-    this.getHandlerList();
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.settableheight);
   },
+  beforeDestroy() {},
   methods: {
-    getTableDataSearch(currentPage, pageSize) {
-      let _this = this;
-      if (currentPage) {
-        _this.searchParam.currentPage = currentPage;
-      }
-      if (pageSize) {
-        _this.searchParam.pageSize = pageSize;
-      } else {
-        _this.searchParam.pageSize = this.pageSize;
-      }
-      _this.searchParam.timestamp = new Date().getTime();
-      _this.$api.process.channeltype
-        .search(_this.searchParam)
+    searchData() {
+      this.loadingShow = true;
+      let params = {
+        currentPage: this.searchParam.currentPage,
+        pageSize: this.searchParam.pageSize,
+        timestamp: new Date().getTime()
+      };
+      this.$api.process.channeltype
+        .search(params)
         .then(res => {
           if (res.Status == 'OK') {
-            _this.tableData = res.Return;
-            _this.tableData.theadList = _this.theadList;
-            this.loadingShow = false;
+            this.tableData = Object.assign(this.tableData, res.Return || {});
           }
+        }).finally(() => {
+          this.loadingShow = false;
         });
     },
-    getPageData(currentPage) {
-      this.getTableDataSearch(currentPage);
+    changeCurrent(currentPage = 1) {
+      this.searchParam.currentPage = currentPage;
+      this.searchData();
     },
-    addRow() {
-      let _this = this;
-      _this.selectedColor = '#62BCFA';
-      _this.formSetting.forEach(item => {
-        item.value = item.defaultValue;
-      });
-      this.editTsDialog.title = this.$t('dialog.title.addtarget', {target: this.$t('term.process.sertype')});
-      this.editTsDialog.isShow = true;
-      this.resetForm();
+    changePageSize(pageSize) {
+      this.searchParam.currentPage = 1;
+      this.searchParam.pageSize = pageSize;
+      this.searchData();
     },
-    getRowData(uuid) {
-      let _this = this;
-      let params = { uuid: uuid, timestamp: new Date().getTime() };
-      _this.$api.process.channeltype
-        .get(params)
-        .then(res => {
-          if (res.Status == 'OK') {
-            this.handlerSelect(res.Return['handler']);
-            _this.editTsDialog.isShow = true;
-            _this.selectedColor = res.Return['color'];
-            _this.formSetting.forEach(item => {
-              item.value = res.Return[item.name];
-              item.width = '100%';
-            });
-          }
-        })
-        .catch(error => {
-          if (error.data.Message) {
-            this.$Message.error(this.$t('term.process.getsertypeinfofail') + error.data.Message);
-          } else {
-            this.$Message.error(this.$t('message.apierror'));
-          }
-        });
+    addChannelType() {
+      this.uuid = '';
+      this.isShowChannelTypeEditDialog = true;
     },
-    editRow(uuid) {
-      this.editTsDialog.title = this.$t('dialog.title.edittarget', {target: this.$t('term.process.sertype')});
-      this.getRowData(uuid);
+    editChannelType(uuid) {
+      this.uuid = uuid;
+      this.isShowChannelTypeEditDialog = true;
     },
     deleteRow(uuid, name) {
       this.$createDialog({
@@ -336,7 +162,7 @@ export default {
             this.$api.process.channeltype.delete(params).then(res => {
               if (res.Status == 'OK') {
                 this.$Message.success(this.$t('message.deletesuccess'));
-                this.getTableDataSearch();
+                this.searchData();
                 vnode.isShow = false;
               }
             }).finally(() => {
@@ -346,66 +172,6 @@ export default {
         }
       });
     },
-    saveEditRow() {
-      var form = this.$refs.mainForm;
-      if (!this.disabledConfig.saving) {
-        if (form.valid()) {
-          this.disabledConfig.saving = true;
-          let data = form.getFormValue();
-          data.color = this.selectedColor;
-          this.$api.process.channeltype
-            .save(data)
-            .then(res => {
-              this.disabledConfig.saving = false;
-              if (res.Status == 'OK') {
-                this.$Message.success(this.$t('message.savesuccess'));
-                this.editTsDialog.isShow = false;
-                this.getTableDataSearch();
-              }
-            })
-            .catch(error => {
-              this.disabledConfig.saving = false;
-              if (error.data.Message) {
-                this.$Message.error(this.$t('term.process.savefail') + error.data.Message);
-              } else {
-                this.$Message.error(this.$t('message.apierror'));
-              }
-            });
-        }
-      }
-    },
-    cancelEditRow() {
-      this.editTsDialog.isShow = false;
-    },
-    settableheight() {
-      let tableheight = window.innerHeight - this.$refs.maintable.getBoundingClientRect().top - 80;
-      this.tableheight = tableheight;
-    },
-    handlerSelect(data) {
-      this.resetForm();
-      const obj = this.policyList.find(d => d.handler === data);
-      if (obj) {
-        if (obj.formAttributeList && obj.formAttributeList.length) {
-          obj.formAttributeList.forEach(f => {
-            Object.assign(f, {
-              value: f.defaultValue || null
-            });
-          });
-        }
-
-        this.formSetting.splice(5, 0, ...obj.formAttributeList);
-      } 
-    },
-    getHandlerList() {
-      const data = {
-        needPage: false
-      };
-      this.$api.process.channeltype.policyList(data).then(res => {
-        if (res.Status == 'OK') {
-          this.policyList = res.Return;
-        }
-      });
-    },
     updateUuid(uuid) {
       let data = {
         channelTypeUuid: uuid
@@ -413,104 +179,20 @@ export default {
       this.$api.process.channeltype.updateUuid(data).then(res => {
         if (res.Status == 'OK') {
           this.$Message.success(this.$t('message.executesuccess'));
-          this.getTableDataSearch();
+          this.searchData();
         }
       });
     },
-    resetForm() {
-      this.formSetting = [];
-      this.formSetting.push(...this.oldformSetting);
+    closeDialog(needRefresh) {
+      this.isShowChannelTypeEditDialog = false;
+      if (needRefresh) {
+        this.searchData();
+      }
     }
   },
   computed: {},
-  watch: {
-    'editTsDialog.isShow'(val) {
-      if (!val) {
-        this.resetForm();
-      }
-    }
-  }
+  watch: {}
 };
 </script>
-
-<style lang="less">
-@import (reference) '~@/resources/assets/css/variable.less';
-.PriorityManagement {
-  .content {
-    background: #fff;
-    padding: 16px;
-  }
-  tr {
-    cursor: default;
-  }
-}
-</style>
-<style lang="less">
-.cur{
-  cursor: pointer;
-}
-.editForm {
-  .ivu-input-word-count {
-    background: #fff;
-  }
-}
-.channeltype-color {
-  /deep/ .ivu-poptip-arrow {
-    display: none;
-  }
-  /deep/ .ivu-poptip-inner {
-    transform: translateY(-8px);
-  }
-  .color-block {
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-  }
-  .color-selected {
-    cursor: pointer;
-    .color-block {
-      display: inline-block;
-      margin-right: 4px;
-    }
-    .tsfont-down {
-      transition: transform 0.25s ease-out;
-      &.arrow-rotate {
-        transform: rotate(-180deg);
-      }
-    }
-  }
-  .color-block-list {
-    box-sizing: border-box;
-    width: 152px;
-    height: 120px;
-    padding: 8px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: space-between;
-    .color-block-item {
-      margin: 4px;
-      &.tsfont-check {
-        font-size: 24px;
-        text-align: center;
-        line-height: 24px;
-        &::before {
-          text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
-        }
-      }
-    }
-  }
-}
-.menuIcon {
-  font-size: 1.6em;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 5px;
-}
-.square {
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  width: 32px;
-  height: 32px;
-}
+<style lang="less" scoped>
 </style>