diff --git a/epmet-oper-web/src/assets/img/footbar_bc1.png b/epmet-oper-web/src/assets/img/footbar_bc1.png
new file mode 100644
index 0000000..4275634
Binary files /dev/null and b/epmet-oper-web/src/assets/img/footbar_bc1.png differ
diff --git a/epmet-oper-web/src/js/columns/productConfig/footBar.js b/epmet-oper-web/src/js/columns/productConfig/footBar.js
index feacc05..7706114 100644
--- a/epmet-oper-web/src/js/columns/productConfig/footBar.js
+++ b/epmet-oper-web/src/js/columns/productConfig/footBar.js
@@ -32,8 +32,8 @@ export default {
       block: 100,
       width: 120,
       tableType: 'image',
-      imgWidth: '50px',
-      imgHeight: '50px'
+      imgWidth: '40px',
+      imgHeight: '40px'
     },
     {
       key: 'selectedIconPath',
@@ -43,8 +43,19 @@ export default {
       block: true,
       width: 100,
       tableType: 'image',
-      imgWidth: '50px',
-      imgHeight: '50px'
+      imgWidth: '40px',
+      imgHeight: '40px'
+    },
+    {
+      key: 'floatIconPath',
+      title: '浮起图标',
+      display: ['formA', 'formU', 'table', 'model'],
+      fixed: false,
+      block: true,
+      width: 100,
+      tableType: 'image',
+      imgWidth: '40px',
+      imgHeight: '40px'
     },
     {
       key: 'display',
@@ -97,8 +108,8 @@ export default {
       block: 100,
       width: 120,
       tableType: 'image',
-      imgWidth: '50px',
-      imgHeight: '50px'
+      imgWidth: '40px',
+      imgHeight: '40px'
     },
     {
       key: 'selectedIconPath',
@@ -108,8 +119,8 @@ export default {
       block: true,
       width: 100,
       tableType: 'image',
-      imgWidth: '50px',
-      imgHeight: '50px'
+      imgWidth: '40px',
+      imgHeight: '40px'
     },
     {
       key: 'display',
diff --git a/epmet-oper-web/src/views/components/CTable.vue b/epmet-oper-web/src/views/components/CTable.vue
index fb62aad..2de9e79 100644
--- a/epmet-oper-web/src/views/components/CTable.vue
+++ b/epmet-oper-web/src/views/components/CTable.vue
@@ -270,6 +270,7 @@ export default {
         this.url,
         this.table.params,
         (data, rspMsg) => {
+
           if (data) {
             this.total = data.total
             this.tableData = data.list
@@ -287,7 +288,9 @@ export default {
             }
 
           }
+
           this.loading = false
+
         },
         (rspMsg, data) => {
           this.$message.error(rspMsg)
@@ -387,6 +390,9 @@ export default {
     // 解决表格错位
     doLayout () {
       this.$refs['table'].doLayout()
+    },
+    getTableData () {
+      return this.tableData
     }
   }
 }
diff --git a/epmet-oper-web/src/views/components/CTableNoPage.vue b/epmet-oper-web/src/views/components/CTableNoPage.vue
index 425327e..86720f1 100644
--- a/epmet-oper-web/src/views/components/CTableNoPage.vue
+++ b/epmet-oper-web/src/views/components/CTableNoPage.vue
@@ -127,6 +127,7 @@
 
 import CDialog from './CDialog'
 import { mapGetters } from 'vuex'
+import { requestPost } from "@/js/dai/request";
 export default {
   components: { CDialog },
   data () {
@@ -234,7 +235,7 @@ export default {
     render () {
       this.loadData()
     },
-    loadData () {
+    async loadData () {
       this.$refs.table.doLayout() // 解决表格错位
       this.templateRadio = ''
       this.loading = true
@@ -245,37 +246,66 @@ export default {
       })
       Object.assign(this.table.params, this.params)
       //  获取数据
-      window.app.ajax.post(
-        this.url,
-        this.table.params,
-        (data, rspMsg) => {
-          if (data) {
-            this.tableData = data
-            console.log(this.filterParams)
-            if (this.filterParams.length > 0) {
-
-              this.filterParams.forEach(paramItem => {
-                const key = this.filterParams[0].key
-                const value = this.filterParams[0].value
-
-                this.tableData = this.tableData.filter(item => {
-                  // console.log(item[key])
-                  // console.log(item[key].indexOf(value))
-                  return item[key].indexOf(value) != -1
-
-                })
+
+      const { data, code, rspMsg } = await requestPost(this.url, this.table.params)
+      if (code === 0) {
+        if (data) {
+          this.tableData = data
+          // console.log("this.filterParams", this.filterParams)
+          if (this.filterParams.length > 0) {
+
+            this.filterParams.forEach(paramItem => {
+              const key = this.filterParams[0].key
+              const value = this.filterParams[0].value
+
+              this.tableData = this.tableData.filter(item => {
+                // console.log(item[key])
+                // console.log(item[key].indexOf(value))
+                return item[key].indexOf(value) != -1
+
               })
+            })
 
-            }
           }
-          this.loading = false
-        },
-        (rspMsg, data) => {
-          this.$message.error(rspMsg)
-
-          this.loading = false
         }
-      )
+        this.loading = false
+      } else {
+        this.$message.error(rspMsg)
+
+        this.loading = false
+      }
+
+      // await window.app.ajax.post(
+      //   this.url,
+      //   this.table.params,
+      //   (data, rspMsg) => {
+      //     if (data) {
+      //       this.tableData = data
+      //       console.log("this.filterParams", this.filterParams)
+      //       if (this.filterParams.length > 0) {
+
+      //         this.filterParams.forEach(paramItem => {
+      //           const key = this.filterParams[0].key
+      //           const value = this.filterParams[0].value
+
+      //           this.tableData = this.tableData.filter(item => {
+      //             // console.log(item[key])
+      //             // console.log(item[key].indexOf(value))
+      //             return item[key].indexOf(value) != -1
+
+      //           })
+      //         })
+
+      //       }
+      //     }
+      //     // console.log(this.tableData)
+      //     this.loading = false
+
+      //   },
+      //   (rspMsg, data) => {
+
+      //   }
+      // )
     },
     handleClearSelection () {
       //  清空选择
diff --git a/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarEdit.vue b/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarEdit.vue
index e0aa095..a75e1af 100644
--- a/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarEdit.vue
+++ b/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarEdit.vue
@@ -80,7 +80,7 @@
                     label="默认图标">
         <div class="item_width_1">
           <img :src="dataForm.defaultIconPath"
-               style="width:60px;height:60px"
+               style="width:50px;height:50px"
                class="function-icon">
         </div>
       </el-form-item>
@@ -93,7 +93,7 @@
                    :before-upload="beforeImgUpload">
           <img v-if="dataForm.iconPath"
                :src="dataForm.iconPath"
-               style="width:60px;height:60px"
+               style="width:50px;height:50px"
                class="function-icon">
           <i v-else
              class="el-icon-plus avatar-uploader-icon"></i>
@@ -108,7 +108,7 @@
                     label="默认选中图标">
         <div class="item_width_1">
           <img :src="dataForm.defaultSelectedIconPath"
-               style="width:60px;height:60px"
+               style="width:50px;height:50px"
                class="function-icon">
         </div>
 
@@ -120,12 +120,14 @@
                    :show-file-list="false"
                    :on-success="function (res, file) { return handleImgSuccess(res, file, 'sel')}"
                    :before-upload="beforeImgUpload">
+
           <img v-if="dataForm.selectedIconPath"
                :src="dataForm.selectedIconPath"
-               style="width:60px;height:60px"
-               class="function-icon">
+               style="width:50px;height:50px">
+
           <i v-else
              class="el-icon-plus avatar-uploader-icon"></i>
+
         </el-upload>
         <el-button v-if="showForm==='customize'"
                    class="btn_reset"
@@ -134,6 +136,30 @@
                    @click="resetSelectIcon">恢复默认</el-button>
       </el-form-item>
 
+      <el-form-item label="浮起图标">
+        <el-upload class="item_width_1 avatar-uploader"
+                   :action="uploadUlr"
+                   :data="{customerId:dataForm.customerId}"
+                   :show-file-list="false"
+                   :on-success="function (res, file) { return handleImgSuccess(res, file, 'float')}"
+                   :before-upload="beforeImgUpload">
+          <div v-if="dataForm.floatIconPath"
+               class="function_icon_float">
+            <img v-if="dataForm.floatIconPath"
+                 :src="dataForm.floatIconPath"
+                 style="width:32px;height:30px">
+          </div>
+          <i v-else
+             class="el-icon-plus avatar-uploader-icon"></i>
+
+        </el-upload>
+        <el-button v-if="showForm==='customize'"
+                   class="btn_reset"
+                   type="primary"
+                   size="mini"
+                   @click="resetFloatIcon">恢复默认</el-button>
+      </el-form-item>
+
     </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
@@ -167,7 +193,9 @@ export default {
         iconPath: '',
         defaultIconPath: '',
         selectedIconPath: '',
-        defaultSelectedIconPath: ''
+        defaultSelectedIconPath: '',
+        floatIconPath: '',
+        defaultFloatIconPath: ''
 
       },
       uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
@@ -202,13 +230,16 @@ export default {
         pageTitle: [
           { required: true, message: '页面标题不能为空', trigger: 'blur' },
           { min: 2, max: 10, message: '页面标题长度在 2 到 10 个字符', trigger: 'blur' }
+        ],
+        iconPath: [
+          { required: true, message: '图标不能为空', trigger: 'blur' }
+        ],
+        selectedIconPath: [
+          { required: true, message: '选中图标不能为空', trigger: 'blur' }
+        ],
+        floatIconPath: [
+          { required: true, message: '选中图标不能为空', trigger: 'blur' }
         ]
-        // iconPath: [
-        //   { required: true, message: '图标不能为空', trigger: 'blur' }
-        // ],
-        // selectedIconPath: [
-        //   { required: true, message: '选中图标不能为空', trigger: 'blur' }
-        // ]
       }
     },
     diaWidth () {
@@ -242,7 +273,9 @@ export default {
           iconPath: '',
           defaultIconPath: '',
           selectedIconPath: '',
-          defaultSelectedIconPath: ''
+          defaultSelectedIconPath: '',
+          floatIconPath: '',
+          defaultFloatIconPath: ''
         }
 
       } else {
@@ -263,6 +296,9 @@ export default {
           this.endLoading()
           this.dataForm = data
 
+          this.dataForm.floatIconPath = ""
+          console.log(this.dataForm)
+
         },
         (rspMsg, data) => {
           this.endLoading()
@@ -277,10 +313,17 @@ export default {
     resetSelectIcon () {
       this.dataForm.selectedIconPath = this.dataForm.defaultSelectedIconPath
     },
+    // 重置选中图标
+    resetFloatIcon () {
+      this.dataForm.floatIconPath = this.dataForm.defaultFloatIconPath
+    },
     // 上传大图标成功
     handleImgSuccess (res, file, type) {
+
       if (res.code === 0 && res.msg === 'success') {
-        if (type === 'sel') {
+        if (type === 'float') {
+          this.dataForm.floatIconPath = res.data.url
+        } else if (type === 'sel') {
           this.dataForm.selectedIconPath = res.data.url
         } else if (type === '') {
           this.dataForm.iconPath = res.data.url
@@ -365,6 +408,13 @@ export default {
 .function-icon {
   width: 28px;
 }
+.function_icon_float {
+  text-align: center;
+  background: #e3271c;
+  box-shadow: 0px 2px 12px 0px rgba(209, 34, 24, 0.57);
+  border-radius: 50%;
+  padding: 15px;
+}
 .item_width_1 {
   width: 200px;
 }
@@ -384,4 +434,6 @@ export default {
   vertical-align: bottom;
   margin-left: 10px;
 }
+.img_bc {
+}
 </style>
diff --git a/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarList.vue b/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarList.vue
index 52c3631..884d61a 100644
--- a/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarList.vue
+++ b/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarList.vue
@@ -40,6 +40,10 @@
                  @moveUp="moveUp"
                  @del="del">
         </c-table>
+
+        <Mode ref="mode_resi"
+              :showFootbarList="showFootbarList"
+              :showMode="showMode"></Mode>
       </el-tab-pane>
       <el-tab-pane label="工作端"
                    name="gov">
@@ -57,6 +61,9 @@
                  @moveUp="moveUp"
                  @del="del">
         </c-table>
+        <Mode ref="mode_work"
+              :showFootbarList="showFootbarList"
+              :showMode="showMode"></Mode>
       </el-tab-pane>
     </el-tabs>
 
@@ -72,15 +79,20 @@
 import CDialog from '@c/CDialog'
 import CTable from '@c/CTableNoPage'
 import Edit from './FootbarEdit'
+import Mode from './FootbarMode'
 
 import { mapGetters } from 'vuex'
 import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from "@/js/dai/request";
 
 let loading// 加载动画
 
 export default {
   data () {
     return {
+      text1: "当前操作会将有效Footbar数量变更为偶数，显示模式自动变更为模式1；",
+      text2: "如需模式2，可在Footbar数量达到奇数时，手动切换；",
+
       activeName: 'resi',
       customerId: '', // 客户id，父组件传
       customerName: '', // 客户名称，父组件传
@@ -97,7 +109,8 @@ export default {
       // 列表相关
       // tableUrl: 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/customerfootbars',
       tableUrl: '/oper/customize/customerfootbar/customerfootbars4oper',
-
+      footbarList: [],
+      showFootbarList: [],//排除掉隐藏的footbar后的有效footbar
       operations: [
         {
           lable: (display) => {
@@ -180,27 +193,31 @@ export default {
           ]
 
         }
-      }
+      },
+      showMode: "flat",//footBar显示模式参数值含义：flat：水平模式；float：浮起某个菜单
     }
   },
   components: {
-    CDialog, CTable, Edit
+    CDialog, CTable, Edit, Mode
   },
 
-  mounted () {
+  async mounted () {
     this.activeName = 'resi'
     if (this.showFrom === 'default') {//默认配置
+      this.customerId = 'default'
       this.tableParamsWork.customerId = 'default'
       this.tableParamsResi.customerId = 'default'
-      this.loadResiTableData()
+      await this.loadResiTableData()
+
     } else if (this.showFrom === 'customize') {//自定义配置
 
     }
 
+
   },
   computed: {
     tableHeight () {
-      return this.clientHeight - 60 - 80 - 80
+      return this.clientHeight - 60 - 80 - 80 - 280
     },
     ...mapGetters(['clientHeight', 'env'])
   },
@@ -217,12 +234,13 @@ export default {
       })
     },
 
-    initData (customerId, customerName) {
+    async initData (customerId, customerName) {
       this.customerId = customerId
       this.customerName = customerName
       this.tableParamsWork.customerId = customerId
       this.tableParamsResi.customerId = customerId
-      this.loadResiTableData()
+      await this.loadResiTableData()
+
     },
     // 刷新
     refresh () {
@@ -241,16 +259,63 @@ export default {
       }
     },
     // 加载列表数据
-    loadWorkTableData () {
-      this.$nextTick(() => {
-        this.$refs['table_work'].loadData() // 获取表格数据
-      })
+    async loadWorkTableData () {
+      await this.$refs['table_work'].loadData() // 获取表格数据
+      this.footbarList = this.$refs['table_work'].getTableData()
+      this.loadFootbarList(this.footbarList)
+      await this.loadMode()
+      console.log("footbarList", this.footbarList)
+
     },
     // 加载列表数据
-    loadResiTableData () {
-      this.$nextTick(() => {
-        this.$refs['table_resi'].loadData() // 获取表格数据
-      })
+    async loadResiTableData () {
+      await this.$refs['table_resi'].loadData() // 获取表格数据
+
+      this.footbarList = this.$refs['table_resi'].getTableData()
+      this.loadFootbarList(this.footbarList)
+      await this.loadMode()
+      console.log("footbarList", this.footbarList)
+
+    },
+
+    loadFootbarList (val) {
+      this.showFootbarList = []
+      for (let i = 0; i < val.length; i++) {
+        let oneObj = oneObj = val[i]
+        if (oneObj.display) {
+          this.showFootbarList.push(oneObj)
+        }
+      }
+      if (this.showFootbarList.length % 2 === 0) {//偶数
+        this.mode = "1"
+      } else {//奇数
+        let floatIndex = parseInt(this.showFootbarList.length / 2)
+        this.showFootbarList[floatIndex].isFloat = true
+      }
+      console.log("this.showFootbarList", this.showFootbarList)
+
+    },
+
+    //获取显示模式
+    async loadMode () {
+      this.startLoading()
+      // const url = "http://yapi.elinkservice.cn/mock/102/data/aggregator/app/footbarpattern"
+      const url = "/data/aggregator/app/footbarpattern"
+
+      const params = {
+        customerId: this.customerId,
+        appType: this.activeName
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+
+        if (data) {
+          this.showMode = data.pattern
+        }
+      } else {
+        this.$message.error(msg)
+      }
+      this.endLoading()
     },
     // 新增
     addShow () {
@@ -260,23 +325,45 @@ export default {
     editShow (row) {
       this.$refs['ref_edit'].init(row.id, 'U', this.activeName, this.showFrom)
     },
+
     // 改变状态
     changeState (row, index) {
-      let display = row.display ? 0 : 1
-      // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/updatedisplaystatus'
-      const url = '/oper/customize/customerfootbar/updatedisplaystatus'
-      const param = {
-        id: row.id,
-        display: display
+      const h = this.$createElement
+      let message = ''
+      if (this.showMode == "float" && this.showFootbarList.length % 2 !== 0) {//奇数变偶数，给与文字提示
+        message = h('div', [
+          h('p', this.text1), h('p', this.text2), h('p', '确认隐藏？')
+        ])
+
+      } else {
+        message = h('div', [
+          h('p', '确认隐藏？')
+        ])
       }
-      window.app.ajax.post(url, param,
-        (data, rspMsg) => {
-          this.$message.success('操作成功' + rspMsg)
-          this.refresh()
-        },
-        (rspMsg, data) => {
-          this.$message.error(rspMsg)
-        })
+      this.$confirm('提示', {
+        message: message,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let display = row.display ? 0 : 1
+        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/updatedisplaystatus'
+        const url = '/oper/customize/customerfootbar/updatedisplaystatus'
+        const param = {
+          id: row.id,
+          display: display
+        }
+        window.app.ajax.post(url, param,
+          (data, rspMsg) => {
+            this.$message.success('操作成功' + rspMsg)
+            this.refresh()
+          },
+          (rspMsg, data) => {
+            this.$message.error(rspMsg)
+          })
+      })
+
+
     },
     // 上移
     moveUp (row, index) {
@@ -365,7 +452,20 @@ export default {
     },
     // 删除
     del (row) {
-      this.$confirm('确认删除当前导航', '提示', {
+      const h = this.$createElement
+      let message = ''
+      if (this.showMode == "float" && this.showFootbarList.length % 2 !== 0) {//奇数变偶数，给与文字提示
+        message = h('div', [
+          h('p', this.text1), h('p', this.text2), h('p', '确认删除？')
+        ])
+
+      } else {
+        message = h('div', [
+          h('p', '确认删除？')
+        ])
+      }
+      this.$confirm('提示', {
+        message: message,
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -386,6 +486,7 @@ export default {
       }).catch(() => {
 
       })
+
     },
     // 取消
     diaCancel () {
diff --git a/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarMode.vue b/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarMode.vue
new file mode 100644
index 0000000..b808d10
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarMode.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="div_mode">
+
+    <div>
+      <span>显示模式：</span>
+      <div class="div_radio">
+        <el-radio v-model="mode"
+                  label="flat">模式1</el-radio>
+        <el-radio v-model="mode"
+                  @change="changeToMode2"
+                  label="float">模式2（非隐藏标签总数为奇数时可选择）</el-radio>
+        <el-button size="mini"
+                   type="primary"
+                   @click="saveMode">{{ '保存' }}</el-button>
+      </div>
+
+    </div>
+    <div v-if="mode=='flat'"
+         class="div_phone">
+      <div class="phone_concent">
+        <div class="phone_item"
+             v-for="(item,index) in showFootbarList"
+             :key="index">
+
+          <img v-if="index===0"
+               :src="item.selectedIconPath"
+               class="phone_img">
+          <img v-else
+               class="phone_img"
+               :src="item.iconPath">
+          <div :class="['bar_name',{'bar_name_sel':index===0}]">{{item.barName}}</div>
+        </div>
+      </div>
+
+    </div>
+    <div v-if="mode=='float'"
+         class="div_phone_float">
+      <div class="phone_concent phone_concent_float">
+        <div :class="['phone_item',{'phone_item_float':item.isFloat}]"
+             v-for="(item,index) in showFootbarList"
+             :key="index">
+          <div v-if="item.isFloat"
+               class="function_icon_float">
+            <img :src="item.floatIconPath"
+                 class="phone_img">
+          </div>
+          <img v-else
+               class="phone_img"
+               :src="item.iconPath">
+          <div :class="['bar_name',{'bar_name_sel':item.isFloat}]">{{item.barName}}</div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+let loading// 加载动画
+export default {
+  props: {
+    showFootbarList: {
+      type: Array,
+      default: []
+    },
+    showMode: {
+      type: String,
+      default: "flat"
+    },
+
+  },
+  data () {
+    return {
+      mode: this.showMode,
+      // showFootbarList: []
+
+    }
+  },
+  created () {
+    // this.queryFunctionList()
+  },
+  computed: {
+    diaTop () {
+
+      return this.resolution === 'small' ? '30px' : '100px'
+    },
+    ...mapGetters(['clientHeight', 'resolution']),
+  },
+  watch: {
+    // footbarList: {//深度监听，可监听到对象、数组的变化
+    //   handler (val, oldVal) {
+    //     this.loadFootbarList(val)
+    //     // console.log("b.c: ", val, oldVal);
+    //   },
+    //   deep: true //true 深度监听
+    // }
+  },
+  methods: {
+    //切换模式到2
+
+    changeToMode2 () {
+      if (this.showFootbarList.length % 2 === 0) {//偶数
+        this.$message.error("当前Footbar数量为偶数，无法切换到模式2")
+        this.mode = "flat"
+      }
+    },
+    loadFormData () {
+      // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfootbar/footbardetail'
+      const url = '/oper/customize/customerfootbar/footbardetail'
+      let _data = {
+        id: this.id
+      }
+      this.startLoading()
+      window.app.ajax.post(url, _data,
+        (data, rspMsg) => {
+          this.endLoading()
+          this.dataForm = data
+
+        },
+        (rspMsg, data) => {
+          this.endLoading()
+          this.$message.error(rspMsg)
+        })
+    },
+
+
+    async saveMode () {
+      this.startLoading()
+      // const url = "http://yapi.elinkservice.cn/mock/102/oper/crm/customer/savefootbarpattern"
+      const url = "/oper/crm/customer/savefootbarpattern"
+
+      const params = {
+        customerId: this.customerId,
+        appType: this.activeName
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code === 0) {
+
+        if (data) {
+          this.showMode = data.pattern
+        }
+      } else {
+        this.$message.error(msg)
+      }
+      this.endLoading()
+    },
+
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+.div_mode {
+  margin-top: 30px;
+  position: relative;
+}
+.mode_btn {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+.span_title {
+  font-size: 15px;
+}
+.div_radio {
+  margin-left: 30px;
+  display: inline;
+}
+.div_phone {
+  position: relative;
+  padding: 15px;
+  margin: 20px 20px;
+  width: 400px;
+  height: 80px;
+  overflow: auto;
+  background-color: #ffffff;
+  box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.2);
+}
+.div_phone_float {
+  position: relative;
+  padding: 15px;
+  margin: 20px 20px;
+  width: 400px;
+  height: 110px;
+  overflow: auto;
+  background-image: url(~@/assets/img/footbar_bc1.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.phone_concent {
+  display: flex;
+  justify-content: space-around;
+}
+.phone_concent_float {
+  margin-top: 25px;
+}
+.phone_item {
+  text-align: center;
+}
+.phone_item_float {
+  margin-top: -25px;
+}
+.function_icon_float {
+  text-align: center;
+  background: #e3271c;
+  box-shadow: 0px 2px 12px 0px rgba(209, 34, 24, 0.57);
+  border-radius: 50%;
+  padding: 12px;
+}
+.phone_img {
+  width: 20px;
+  height: 22px;
+}
+.bar_name {
+  margin-top: 7px;
+  font-size: 10px;
+  font-family: PingFang SC;
+  font-weight: 500;
+  color: #cccccc;
+}
+.bar_name_sel {
+  color: #e3271c;
+}
+</style>