qgb-process 0.2.3 → 0.2.7

package/src/components/public/components/NewHeadBar.vue

@@ -1,936 +1,936 @@
-<template>
-  <div>
-    <div class="top-bar">
-      <div class="head-logo flex-center">
-        <div class="logo-content flex-center" @click="toPush">
-          <img class="logo" src="@/assets/public/logo.png" />
-          <span class="name">企管帮</span>
-        </div>
-        <!-- <div
-        class="collapse"
-        :class=" !$store.state.isCollapse ? 'unfold-menu' : 'fold-menu'"
-        @click="changeCollapse"
-        ></div>-->
-      </div>
-      <!-- <div class="head-nav flex-center"></div> -->
-      <div class="postios">
-        <i class="el-icon-arrow-left left" v-show="showController" @click="scroll('left')"></i>
-      </div>
-      <div class="menu" ref="menu">
-        <div class="menu-content" :style="styles" ref="btns">
-          <span
-            v-for="(item,index) in topmenuList"
-            :key="index"
-            type="text"
-            class="nav-btn background"
-            v-if="!item.hidden"
-            :class="currentMenu == item.index?'btn-active':''"
-            @click="navTo(item)"
-          >
-            <!-- @mouseover="mouseovers" -->
-            <el-badge
-              v-if="item.name === 'communication'"
-              :value="noRead"
-              class="communication"
-            >{{item.title}}</el-badge>
-            <span v-else>{{item.title}}</span>
-          </span>
-          <span type="text" class="nav-btn background nav-btn-hover">
-            <el-dropdown :show-timeout="0">
-              <span class="nav-span-hover">市场</span>
-              <el-dropdown-menu class="nav-btn-dropdow" slot="dropdown">
-                <div class="dialog-pop-up" v-for="(item,i) in marketplace" :key="i">
-                  <div v-for="(list,index) in item" :key="index">
-                    <p>{{list.name}}</p>
-                    <span
-                      class="nav-span-hover"
-                      v-for="(key,indexes) in list.ListeachItem"
-                      :key="indexes"
-                      @click="skipLink(key)"
-                    >{{key.name}}</span>
-                  </div>
-                </div>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </span>
-          <span type="text" class="nav-btn background nav-btn-hover">
-            <span class="nav-span-hover">监督</span>
-          </span>
-          <span type="text" class="nav-btn background nav-btn-hover">
-            <span class="nav-span-hover">咨询</span>
-          </span>
-          <span
-            v-if="$store.state.user && $store.state.user.roleName == '管理员'"
-            type="text"
-            class="nav-btn background"
-            @click="navTo({index:11})"
-          >
-            <span>表单设计</span>
-          </span>
-        </div>
-      </div>
-      <div class="postios">
-        <i class="el-icon-arrow-right right" v-show="showController" @click="scroll('right')"></i>
-      </div>
-      <div class="head-user">
-        <div class="user">
-          <!-- <img src="@/assets/center/admin.png" /> -->
-          <!--
-        <el-avatar size="small">
-          <img
-            v-if="$store.state.user.userRole == 1 && $store.state.storeInformation && $store.state.storeInformation.logo"
-            alt
-            :src="$store.state.storeInformation.logo"
-          />
-          <img
-            v-if="$store.state.user.userRole == 0 || $store.state.user.userRole == 1 && !$store.state.storeInformation"
-            src="@/assets/center/admin.png"
-            alt
-          />
-          <img
-            v-if="$store.state.user.userRole == 0 || $store.state.user.userRole == 1 && $store.state.storeInformation && !$store.state.storeInformation.logo"
-            src="@/assets/center/admin.png"
-            alt
-          />
-          </el-avatar>-->
-          <!-- <el-dropdown trigger="click" @command="logout">
-          <span class="el-dropdown-link">
-            您好！
-            <span class="name">{{this.$store.state.user.accountName}}</span>
-            <i class="el-icon-arrow-down el-icon--right"></i>
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="out">退出</el-dropdown-item>
-          </el-dropdown-menu>
-          </el-dropdown>-->
-          <el-popover
-            ref="popover"
-            placement="bottom"
-            trigger="click"
-            popper-class="h-popover"
-            :width="jWidth"
-            v-if="$store.state.auth_user.comName"
-          >
-            <el-row class="infor">
-              <el-col :span="24">
-                <div class="company cursor" v-if="$store.state.auth_user.comName">
-                  <span style="padding-right: 10px;">{{$store.state.auth_user.comName}}</span>
-                  <el-popover placement="bottom" trigger="click">
-                    <div
-                      v-for="item in $store.state.auth_user.company"
-                      :key="item.no"
-                      @click="changeCompany(item.no)"
-                      class="jSet"
-                      style="padding: 5px 0;cursor: pointer;"
-                    >
-                      <i
-                        class="el-icon-office-building"
-                        v-if="item.default == 1"
-                        style="color: #409EFF;"
-                      ></i>
-                      <i class="el-icon-office-building" v-else></i>
-                      {{item.name}}
-                    </div>
-                    <el-button type="text" slot="reference">设置主企业</el-button>
-                  </el-popover>
-                </div>
-              </el-col>
-              <el-col :span="24" class="infor-item">
-                <span>所属部门：{{this.$store.state.auth_user.departmentName}}</span>
-              </el-col>
-              <el-col :span="24" class="infor-item">
-                <span>所属角色：{{this.$store.state.auth_user.roleName}}</span>
-              </el-col>
-
-              <!-- <el-col :span="24" class="infor-item">
-                <div style="display:flex">
-                  <div>会员类型：</div>
-                  <div class="marginRight20" v-if="$store.state.user.userRole == 0">普通会员</div>
-                  <div class="marginRight20" v-if="$store.state.user.userRole != 0">企业会员</div>
-                </div>
-              </el-col>-->
-              <!-- <el-col class="img-box">
-                <div class="admin-box-img1 admin-box-img" @mouseover="mouseOver('tel')" @mouseleave="mouseLeave('tel')">
-                  <img src="@/assets/center/tel.png" alt />
-                  <div class="admin-box-img-tel" v-if="show.tel">
-                    {{this.$store.state.user.telPhone | tel}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    <span class="color02 cursor" @click="$router.push({path:'/enterPassword'})">更换</span>
-                  </div>
-                </div>
-                <div class="admin-box-img2 admin-box-img" @mouseover="mouseOver(realName)" @mouseleave="mouseLeave(realName)">
-                  <img v-if="$store.state.user.personalAuth == 1" src="@/assets/center/real-name.png" alt />
-                  <img v-if="$store.state.user.personalAuth == 0" src="@/assets/center/real-name-no.png" alt />
-                  <div class="admin-box-img-no-real-name" v-if="show.noRealName">
-                    您尚未实名认证&nbsp;&nbsp;&nbsp;点击完成
-                    <span class="color02 cursor" @click="toAuthentication('sm')">认证</span>
-                  </div>
-                </div>
-                <div class="admin-box-img3 admin-box-img" v-if="!showEnterprise" @mouseover="mouseOver(Enterprise)" @mouseleave="mouseLeave(Enterprise)">
-                  <img src="@/assets/center/enterprise.png" v-if="$store.state.user.userRole != 0" alt />
-                  <img src="@/assets/center/enterprise-no.png" v-if="$store.state.user.userRole == 0" alt />
-                  <div class="admin-box-img-no-enterprise" v-if="show.noEnterprise">
-                    您尚未进行企业认证&nbsp;&nbsp;&nbsp;点击完成
-                    <span class="color02 cursor" @click="toAuthentication('qy')">认证</span>
-                  </div>
-                </div>
-              </el-col>-->
-              <el-col class="btn-box">
-                <el-button class="btn" type="text" @click="modifyPass()">账户设置</el-button>
-                <b class="line"></b>
-                <el-button class="btn" type="text" @click="quit">退出登录</el-button>
-              </el-col>
-            </el-row>
-            <!-- <span class="hello-box" slot="reference">
-            您好！
-            <el-button
-              type="text"
-              v-if="this.$store.state.user.realName"
-            >{{this.$store.state.user.realName}}</el-button>
-            <el-button
-              type="text"
-              v-if="!this.$store.state.user.realName"
-            >{{this.$store.state.user.accountName}}</el-button>
-            </span>-->
-          </el-popover>
-        </div>
-        <div class="company cursor" v-if="$store.state.auth_user.comName">
-          <el-dropdown trigger="click" @command="companyHandleCommand" @visible-change="visible">
-            <span class="el-dropdown-link">
-              {{$store.state.auth_user.comName}}
-              <i class="el-icon-arrow-down el-icon--right"></i>
-            </span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item
-                :command="item.no"
-                v-for="item in CompanyOrganization"
-                :key="item.no"
-                :class="{'actived':$store.state.auth_user.comNo == item.no}"
-              >
-                <i class="el-icon-office-building" v-if="item.default == 1" style="color: #409EFF;"></i>
-                <i class="el-icon-office-building" v-else></i>
-                {{item.name}}
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import localStorage from "@/storage/localStorage";
-import link from "@/public/link.js";
-import topmenu from "@/public/topmenu.js";
-import apiAuth from "@/api/apiAuth";
-import marketplace from "@/assets/marketplace.js";
-import datas from "@/assets/data.js";
-
-export default {
-  name: "HeadBar",
-  data() {
-    return {
-      data: datas.workList,
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
-      marketplace: marketplace,
-      dialogVisible: true,
-      messNum: 0,
-      showBg: "center",
-      menuList: [],
-      topmenuList: topmenu,
-      showController: false,
-      CompanyOrganization: [],
-      styles: {
-        left: 0
-      },
-      show: {
-        tel: false,
-        realName: false,
-        noRealName: false,
-        enterprise: false,
-        noEnterprise: false
-      },
-      shake: {
-        tel: true,
-        realName: true,
-        noRealName: true,
-        enterprise: true,
-        noEnterprise: true
-      }
-    };
-  },
-  watch: {
-    "$store.state.auth_user": {
-      deep: true,
-      handler: function(newVal) {
-        if (
-          this.$store.state.auth_user.comNo == "" ||
-          this.$store.state.auth_user.comNo == "0"
-        ) {
-          this.getCompanyOrganization();
-        }
-      }
-    }
-  },
-  computed: {
-    jWidth() {
-      const num = this.$store.state.auth_user.comName.length;
-      return num * 16 + 126;
-    },
-    isCollapse() {
-      return this.collapse;
-    },
-    currentMenu() {
-      return this.$store.state.currentTopMenu;
-      console.log(this.$store.state.currentTopMenu);
-    },
-    Enterprise() {
-      const bol1 = this.$store.state.user.userRole === 0
-      const str = bol1 ? "noEnterprise" : "enterprise"
-      return str
-    },
-    showEnterprise() {
-      const bol1 = this.$store.state.user.userRole === 0; // 普通用户
-      const bol2 = this.$store.state.user.personalAuth === 1; // 实名认证
-      const bol3 = this.$store.state.user.relevance; // 关联企业
-      return bol1 && bol2 && bol3;
-    },
-    realName() {
-      const bol1 = this.$store.state.user.personalAuth === 1;
-      const str = bol1 ? "realName" : "noRealName";
-      return str;
-    },
-    noRead() {
-      const no = this.$store.state.sysMsgUnread.applyFriend;
-      if (no < 1) {
-        return "";
-      } else {
-        return no > 99 ? "99+" : no;
-      }
-    }
-  },
-  mounted() {
-    window.onresize = () => {
-      return (() => {
-        this.initShow();
-      })();
-    };
-    this.$nextTick(function() {
-      this.initShow();
-      setTimeout(() => {
-        this.getCompanyOrganization();
-      }, 3000);
-    });
-  },
-  methods: {
-    handleNodeClick(data) {
-      console.log(data);
-    },
-    mouseLeaveS() {
-      this.dialogVisible = false;
-    },
-    mouseovers() {
-      this.dialogVisible = true;
-    },
-    skipLink(item) {
-      console.log(item);
-      window.open(item.path);
-      this.dialogVisible = false;
-    },
-    visible(val) {
-      if (val) {
-        this.getCompanyOrganization();
-      }
-    },
-    /**
-     * 切换企业
-     */
-    async getCompanyOrganization() {
-      const res = await apiAuth.getUserCompany();
-      if (res.data.code == 200) {
-        this.CompanyOrganization = res.data.data;
-        if (
-          (this.$store.state.auth_user.comNo == "" ||
-            this.$store.state.auth_user.comNo == "0") &&
-          res.data.data[0]
-        ) {
-          this.companyHandleCommand(res.data.data[0].no);
-        }
-      }
-    },
-    async companyHandleCommand(command) {
-      const { data } = await apiAuth.companyCut(command);
-      if (data.code === 0) {
-        window.location.reload();
-      } else {
-        this.$message.error(data.msg);
-      }
-    },
-    async getAuth() {
-      const { data } = await apiAuth.getAuthList();
-      if (data.code === 0) {
-        this.$store.commit("SET_AUTH_USER", data.result);
-        localStorage.set("menu", JSON.stringify(data.result.routes));
-      } else {
-        this.$message.error(data.msg);
-      }
-    },
-    // 切换主企业
-    changeCompany(e) {
-      this.$confirm("确定要设置为主企业吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(async() => {
-          const data = {
-            userNo: this.$store.state.user.no,
-            companyNo: e
-          };
-          const res = await apiAuth.updateDefaultCompany(data);
-          if (res.data.code === 200) {
-            this.$message({
-              message: "切换成功",
-              type: "success"
-            });
-            this.getAuth();
-            this.companyHandleCommand(e);
-          } else {
-            this.$message.error(res.data.msg);
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除"
-          });
-        });
-    },
-    navTo(item) {
-      if (item.index === 11) {
-        // this.$router.push({ path: '/formBuilder' })
-        const routeData = this.$router.resolve({
-          name: "formBuilder"
-        });
-        window.open(routeData.href, "_blank");
-      } else if (item.index === 13) {
-        this.$router.push({ path: "/setting" });
-        this.$store.commit("SET_CURRENTTOPMENU", item.index);
-      } else {
-        this.$router.push({ path: "/" });
-        localStorage.set("isTop", true);
-        this.$store.commit("SET_CURRENTTOPMENU", item.index);
-      }
-    },
-    toAuthentication(type) {
-      if (type === "qy" && this.$store.getters.getUser.personalAuth === 0) {
-        this.$message({
-          message: "请先完成实名认证",
-          type: "warning"
-        });
-        return;
-      }
-      if (type === "sm") {
-        this.$router.push({ path: "/authenticationRealName" });
-      }
-      if (type === "qy") {
-        this.$router.push({ path: "/enterpriseAuthentication" });
-      }
-    },
-    modifyPass() {
-      this.$router.push({ path: "/security" });
-      this.$refs.popover.showPopper = false;
-    },
-    mouseOver(type) {
-      for (const item in this.show) {
-        if (item !== type) {
-          this.$set(this.show, item, false);
-        }
-      }
-      this.$set(this.show, type, true);
-      this.$set(this.shake, type, false); // 防抖
-    },
-    mouseLeave(type) {
-      const that = this;
-      this.$set(this.shake, type, true); // 防抖
-      setTimeout(function() {
-        if (that.shake[type]) {
-          that.$set(that.show, type, false);
-        }
-      }, 300);
-    },
-    toPush() {
-      link.blank_index();
-    },
-    logout(e) {
-      if (e === "out") {
-        this.quit();
-      }
-    },
-    quit() {
-      // LOGIN_OUT
-      this.$confirm("确认退出？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(async(res) => {
-          const result = await apiAuth.sendLogout();
-          if (result.status === 200) {
-            this.$store.commit("LOGIN_OUT");
-            localStorage.clear("menu");
-            // this.$message.success(data.msg)
-            this.$router.push("/");
-          } else {
-            this.$message.error("退出失败");
-          }
-        })
-        .catch(() => {});
-    },
-    errorHandler() {
-      return true;
-    },
-    changeCollapse() {
-      this.$store.commit("SET_ISCOLLAPSE");
-    },
-    toOther(path) {
-      const personallist = ["/Hzlgl", "/Hlabor"]; // 租赁 // 工队
-
-      const qiyelist = ["/Hgcgl", "/Hshop", "/ZCJY", "/ZSFX"]; //  企业管理
-
-      const bol1 = personallist.indexOf(path); // 个人认证
-      const bol2 = qiyelist.indexOf(path); // 企业认证
-
-      const bol3 = this.$store.getters.getUser.personalAuth === 0; // 未实名认证
-      const bol4 = this.$store.state.user.userRole === 0; // 未企业认证
-
-      if (!bol3 && !bol4) {
-        return false;
-      }
-      if (bol1 != -1 && bol3) {
-        const data = {
-          type: "error",
-          buttonSubmit: "去认证",
-          buttonClose: "暂不认证",
-          msg: {
-            title: "提示",
-            content: "当前功能需要完成个人认证后才可使用，请先进行个人认证！"
-          },
-          callBack: async function() {
-            this.$router.push({ path: "/authenticationRealName" });
-          }.bind(this)
-        };
-        this.$_popout1(data);
-        return true;
-      }
-
-      if (bol2 != -1 && bol4) {
-        const data = {
-          type: "error",
-          buttonSubmit: "去认证",
-          buttonClose: "暂不认证",
-          msg: {
-            title: "提示",
-            content: "当前功能需要完成企业认证后才可使用，请先进行企业认证！"
-          },
-          callBack: async function() {
-            this.$router.push({ path: "/enterpriseAuthentication" });
-          }.bind(this)
-        };
-        this.$_popout1(data);
-        return true;
-      }
-      return false;
-    },
-    initShow: function() {
-      const TagWidth = this.$refs.btns.offsetWidth;
-      const TagContentWidth = this.$refs.menu.offsetWidth;
-      if (TagWidth > TagContentWidth) {
-        this.showController = true;
-      } else {
-        this.showController = false;
-        this.styles.left = 0;
-      }
-    },
-    transform() {
-      const TagWidth = this.$refs.btns.offsetWidth;
-      const TagContentWidth = this.$refs.menu.offsetWidth;
-      if (TagWidth > TagContentWidth) {
-        this.styles.left = TagWidth - TagContentWidth + "px";
-      } else {
-        this.styles.left = 0;
-      }
-    },
-    scroll: function(position) {
-      const TagWidth = this.$refs.btns.offsetWidth;
-      const TagLeft = this.$refs.btns.offsetLeft;
-      const TagContentWidth = this.$refs.menu.offsetWidth;
-      if (position === "left") {
-        if (TagLeft >= 0) {
-          return false;
-        } else {
-          this.styles.left = TagLeft + 86 >= 0 ? 0 : TagLeft + 86 + "px";
-        }
-      } else {
-        if (TagLeft >= TagWidth - TagContentWidth) {
-          return false;
-        } else {
-          this.styles.left =
-            TagLeft - 86 <= -1 * (TagWidth - TagContentWidth)
-              ? -1 * (TagWidth - TagContentWidth) + "px"
-              : TagLeft - 86 + "px";
-        }
-      }
-    }
-  }
-};
-</script>
-<style lang="scss">
-.h-popover.el-popover {
-  padding: 0;
-}
-.communication {
-  line-height: 59px;
-  .el-badge__content.is-fixed {
-    top: 20px;
-    right: 5px;
-  }
-}
-.jSet:hover,
-.el-dropdown-menu__item:focus,
-.el-dropdown-menu__item:not(.is-disabled):hover,
-.el-dropdown-menu__item.actived:not(.is-disabled) {
-  background-color: #ecf5ff;
-  color: #66b1ff;
-}
-</style>
-<style lang="scss" scoped>
-.el-badge{
-  vertical-align:inherit;
-}
-.el-dropdown + .el-dropdown {
-  margin-left: 15px;
-}
-.el-icon-arrow-down {
-  font-size: 12px;
-}
-
-.hello-box {
-  font-size: 14px;
-  margin-left: 10px;
-  cursor: pointer;
-}
-.infor {
-  padding: 10px 20px 0 20px;
-  .company {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-    line-height: 32px;
-  }
-  .infor-item {
-    font-size: 14px;
-    color: #666666;
-    line-height: 26px;
-  }
-  .img-box {
-    margin: 6px 0 14px 0;
-  }
-  .btn-box {
-    border-top: 1px solid #e4e7ed;
-    .btn {
-      display: inline-block;
-      width: 48%;
-      color: #969696;
-    }
-    .line {
-      display: inline-block;
-      width: 1px;
-      height: 23px;
-      background: #e4e7ed;
-      position: relative;
-      top: 8px;
-    }
-  }
-  .admin-box-img {
-    // margin-right: 15px;
-    display: inline-block;
-    margin: 0 7px;
-    position: relative;
-    > img {
-      vertical-align: middle;
-    }
-    .admin-box-img-tel {
-      width: 140px;
-    }
-    .admin-box-img-no-real-name {
-      width: 190px;
-    }
-    .admin-box-img-real-name {
-      width: 130px;
-    }
-    .admin-box-img-no-enterprise {
-      width: 210px;
-    }
-    .admin-box-img-enterprise {
-      width: 105px;
-    }
-    > div {
-      font-size: 12px;
-      color: #666666;
-      // text-align: center;
-      text-indent: 11px;
-      position: absolute;
-      height: 22px;
-      line-height: 22px;
-      border: 1px solid rgba(150, 150, 150, 1);
-      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.08);
-      background: #fff;
-      left: 0px;
-      top: 32px;
-    }
-  }
-}
-//
-.top-bar {
-  display: flex;
-  background-color: white;
-  height: 50px;
-  line-height: 50px;
-  border-bottom: 1px solid #e4e7ed;
-  .head-logo {
-    width: 162px;
-    padding: 10px 0 10px 10px;
-    position: relative;
-    .logo-content {
-      cursor: pointer;
-      .logo {
-        display: block;
-        width: 40px;
-        height: 40px;
-        margin-right: 6px;
-      }
-      .name {
-        font-size: 32px;
-      }
-    }
-    .collapse {
-      width: 136px;
-      height: 42px;
-      position: absolute;
-      right: 0;
-      top: 22px;
-      margin-top: -14px;
-      cursor: pointer;
-      border-radius: 6px;
-    }
-    .unfold-menu {
-      background: url("../../../assets/center/fold.png") no-repeat center;
-      border-color: #80c2ef;
-      background-size: cover;
-    }
-    .fold-menu {
-      background: url("../../../assets/center/packup.png") no-repeat center;
-      border-color: #e4e7ed;
-      background-size: cover;
-      // -moz-transform: rotate(180deg);
-      // -webkit-transform: rotate(180deg);
-      // transform: rotate(180deg);
-      // filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-    }
-  }
-
-  .postios {
-    line-height: 60px;
-    height: 60px;
-    padding: 0 10px;
-    > i {
-      display: inline-block;
-      cursor: pointer;
-    }
-    .left {
-      left: 14px;
-    }
-    .right {
-      right: 14px;
-    }
-  }
-  .menu {
-    flex: 1;
-    // height: 34px;
-    position: relative;
-    overflow: hidden;
-    white-space: nowrap;
-    .menu-content {
-      position: absolute;
-      left: 0;
-      top: 0;
-      transition: left 0.3s ease-out;
-      .nav-btn {
-        font-size: 20px;
-        height: 34px;
-        color: #333;
-        margin: 0 10px 0 20px;
-        cursor: pointer;
-        &:first-child {
-          margin-left: 10px;
-        }
-        &:last-child {
-          margin-right: 0;
-        }
-        &:hover {
-          // background-color: white;
-          color: #409eff;
-        }
-      }
-      .nav-btn.btn-active {
-        // background-color: white;
-        color: #409eff;
-      }
-    }
-  }
-  // .head-nav {
-  //   flex: 1;
-  //   > div {
-  //     width: 25%;
-  //     text-align: center;
-  //     cursor: pointer;
-  //     // overflow: hidden;
-  //   }
-  //   .nav-item {
-  //     // padding: 0 40px;
-  //     position: relative;
-  //     &:not(:last-child):after {
-  //       content: "";
-  //       width: 1px;
-  //       height: 24px;
-  //       position: absolute;
-  //       background-color: #e4e7ed;
-  //       top: 50%;
-  //       right: 0;
-  //       margin-top: -12px;
-  //     }
-
-  //     .el-dropdown {
-  //       height: 40px;
-  //       color: #000;
-  //       font-size: 16px;
-  //     }
-  //   }
-  //   .color02 {
-  //     color: #0286df;
-  //   }
-  // }
-  .head-user {
-    padding-right: 12px;
-    display: flex;
-    flex-direction: column;
-    .company {
-      height: 30px;
-      line-height: 30px;
-    }
-    .user {
-      height: 17px;
-      line-height: 30px;
-      .el-dropdown {
-        height: 40px;
-      }
-      .el-avatar {
-        vertical-align: middle;
-        margin-right: 10px;
-      }
-      .el-dropdown-link {
-        .name {
-          cursor: pointer;
-          color: #0286df;
-          padding-right: 4px;
-        }
-      }
-    }
-    .header-tel {
-      display: flex;
-      align-items: center;
-      margin-right: 80px;
-      img {
-        display: block;
-        width: 34px;
-        height: 34px;
-        margin: 16px;
-      }
-      .tel {
-        flex: 1;
-        line-height: 20px;
-        .telnumber {
-          font-size: 18px;
-          font-weight: 600;
-        }
-        .time {
-          font-size: 14px;
-          color: #666;
-        }
-      }
-    }
-  }
-  .flex-center {
-    display: flex;
-    align-items: center;
-  }
-}
-/deep/.popper__arrow {
-  left: 52.5% !important;
-}
-.nav-btn-dropdow {
-  position: absolute;
-  top: 55px !important;
-  left: 550px !important;
-  padding: 10px 0;
-  margin: 5px 0;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-.nav-span-hover {
-  font-size: 20px;
-  height: 34px;
-  color: #333;
-  cursor: pointer;
-}
-.nav-span-hover:hover {
-  color: #0286df;
-}
-// 弹框
-.dialog-pop-up {
-  width: 780px;
-  padding: 20px;
-  div {
-    p {
-      margin: 6px 0 11px 0;
-      font-size: 18px;
-      font-family: Microsoft YaHei;
-      font-weight: bold;
-      color: #343434;
-    }
-    span {
-      margin: 0;
-      font-size: 16px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #343434;
-      padding-top: 20px;
-      padding-right: 21px;
-      cursor: pointer;
-      &:last-child {
-        padding: 0;
-      }
-    }
-    &:first-child {
-      p {
-        margin: 0px 0 11px 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <div class="top-bar">
+      <div class="head-logo flex-center">
+        <div class="logo-content flex-center" @click="toPush">
+          <img class="logo" src="@/assets/public/logo.png" />
+          <span class="name">企管帮</span>
+        </div>
+        <!-- <div
+        class="collapse"
+        :class=" !$store.state.isCollapse ? 'unfold-menu' : 'fold-menu'"
+        @click="changeCollapse"
+        ></div>-->
+      </div>
+      <!-- <div class="head-nav flex-center"></div> -->
+      <div class="postios">
+        <i class="el-icon-arrow-left left" v-show="showController" @click="scroll('left')"></i>
+      </div>
+      <div class="menu" ref="menu">
+        <div class="menu-content" :style="styles" ref="btns">
+          <span
+            v-for="(item,index) in topmenuList"
+            :key="index"
+            type="text"
+            class="nav-btn background"
+            v-if="!item.hidden"
+            :class="currentMenu == item.index?'btn-active':''"
+            @click="navTo(item)"
+          >
+            <!-- @mouseover="mouseovers" -->
+            <el-badge
+              v-if="item.name === 'communication'"
+              :value="noRead"
+              class="communication"
+            >{{item.title}}</el-badge>
+            <span v-else>{{item.title}}</span>
+          </span>
+          <span type="text" class="nav-btn background nav-btn-hover">
+            <el-dropdown :show-timeout="0">
+              <span class="nav-span-hover">市场</span>
+              <el-dropdown-menu class="nav-btn-dropdow" slot="dropdown">
+                <div class="dialog-pop-up" v-for="(item,i) in marketplace" :key="i">
+                  <div v-for="(list,index) in item" :key="index">
+                    <p>{{list.name}}</p>
+                    <span
+                      class="nav-span-hover"
+                      v-for="(key,indexes) in list.ListeachItem"
+                      :key="indexes"
+                      @click="skipLink(key)"
+                    >{{key.name}}</span>
+                  </div>
+                </div>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </span>
+          <span type="text" class="nav-btn background nav-btn-hover">
+            <span class="nav-span-hover">监督</span>
+          </span>
+          <span type="text" class="nav-btn background nav-btn-hover">
+            <span class="nav-span-hover">咨询</span>
+          </span>
+          <span
+            v-if="$store.state.user && $store.state.user.roleName == '管理员'"
+            type="text"
+            class="nav-btn background"
+            @click="navTo({index:11})"
+          >
+            <span>表单设计</span>
+          </span>
+        </div>
+      </div>
+      <div class="postios">
+        <i class="el-icon-arrow-right right" v-show="showController" @click="scroll('right')"></i>
+      </div>
+      <div class="head-user">
+        <div class="user">
+          <!-- <img src="@/assets/center/admin.png" /> -->
+          <!--
+        <el-avatar size="small">
+          <img
+            v-if="$store.state.user.userRole == 1 && $store.state.storeInformation && $store.state.storeInformation.logo"
+            alt
+            :src="$store.state.storeInformation.logo"
+          />
+          <img
+            v-if="$store.state.user.userRole == 0 || $store.state.user.userRole == 1 && !$store.state.storeInformation"
+            src="@/assets/center/admin.png"
+            alt
+          />
+          <img
+            v-if="$store.state.user.userRole == 0 || $store.state.user.userRole == 1 && $store.state.storeInformation && !$store.state.storeInformation.logo"
+            src="@/assets/center/admin.png"
+            alt
+          />
+          </el-avatar>-->
+          <!-- <el-dropdown trigger="click" @command="logout">
+          <span class="el-dropdown-link">
+            您好！
+            <span class="name">{{this.$store.state.user.accountName}}</span>
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="out">退出</el-dropdown-item>
+          </el-dropdown-menu>
+          </el-dropdown>-->
+          <el-popover
+            ref="popover"
+            placement="bottom"
+            trigger="click"
+            popper-class="h-popover"
+            :width="jWidth"
+            v-if="$store.state.auth_user.comName"
+          >
+            <el-row class="infor">
+              <el-col :span="24">
+                <div class="company cursor" v-if="$store.state.auth_user.comName">
+                  <span style="padding-right: 10px;">{{$store.state.auth_user.comName}}</span>
+                  <el-popover placement="bottom" trigger="click">
+                    <div
+                      v-for="item in $store.state.auth_user.company"
+                      :key="item.no"
+                      @click="changeCompany(item.no)"
+                      class="jSet"
+                      style="padding: 5px 0;cursor: pointer;"
+                    >
+                      <i
+                        class="el-icon-office-building"
+                        v-if="item.default == 1"
+                        style="color: #409EFF;"
+                      ></i>
+                      <i class="el-icon-office-building" v-else></i>
+                      {{item.name}}
+                    </div>
+                    <el-button type="text" slot="reference">设置主企业</el-button>
+                  </el-popover>
+                </div>
+              </el-col>
+              <el-col :span="24" class="infor-item">
+                <span>所属部门：{{this.$store.state.auth_user.departmentName}}</span>
+              </el-col>
+              <el-col :span="24" class="infor-item">
+                <span>所属角色：{{this.$store.state.auth_user.roleName}}</span>
+              </el-col>
+
+              <!-- <el-col :span="24" class="infor-item">
+                <div style="display:flex">
+                  <div>会员类型：</div>
+                  <div class="marginRight20" v-if="$store.state.user.userRole == 0">普通会员</div>
+                  <div class="marginRight20" v-if="$store.state.user.userRole != 0">企业会员</div>
+                </div>
+              </el-col>-->
+              <!-- <el-col class="img-box">
+                <div class="admin-box-img1 admin-box-img" @mouseover="mouseOver('tel')" @mouseleave="mouseLeave('tel')">
+                  <img src="@/assets/center/tel.png" alt />
+                  <div class="admin-box-img-tel" v-if="show.tel">
+                    {{this.$store.state.user.telPhone | tel}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <span class="color02 cursor" @click="$router.push({path:'/enterPassword'})">更换</span>
+                  </div>
+                </div>
+                <div class="admin-box-img2 admin-box-img" @mouseover="mouseOver(realName)" @mouseleave="mouseLeave(realName)">
+                  <img v-if="$store.state.user.personalAuth == 1" src="@/assets/center/real-name.png" alt />
+                  <img v-if="$store.state.user.personalAuth == 0" src="@/assets/center/real-name-no.png" alt />
+                  <div class="admin-box-img-no-real-name" v-if="show.noRealName">
+                    您尚未实名认证&nbsp;&nbsp;&nbsp;点击完成
+                    <span class="color02 cursor" @click="toAuthentication('sm')">认证</span>
+                  </div>
+                </div>
+                <div class="admin-box-img3 admin-box-img" v-if="!showEnterprise" @mouseover="mouseOver(Enterprise)" @mouseleave="mouseLeave(Enterprise)">
+                  <img src="@/assets/center/enterprise.png" v-if="$store.state.user.userRole != 0" alt />
+                  <img src="@/assets/center/enterprise-no.png" v-if="$store.state.user.userRole == 0" alt />
+                  <div class="admin-box-img-no-enterprise" v-if="show.noEnterprise">
+                    您尚未进行企业认证&nbsp;&nbsp;&nbsp;点击完成
+                    <span class="color02 cursor" @click="toAuthentication('qy')">认证</span>
+                  </div>
+                </div>
+              </el-col>-->
+              <el-col class="btn-box">
+                <el-button class="btn" type="text" @click="modifyPass()">账户设置</el-button>
+                <b class="line"></b>
+                <el-button class="btn" type="text" @click="quit">退出登录</el-button>
+              </el-col>
+            </el-row>
+            <!-- <span class="hello-box" slot="reference">
+            您好！
+            <el-button
+              type="text"
+              v-if="this.$store.state.user.realName"
+            >{{this.$store.state.user.realName}}</el-button>
+            <el-button
+              type="text"
+              v-if="!this.$store.state.user.realName"
+            >{{this.$store.state.user.accountName}}</el-button>
+            </span>-->
+          </el-popover>
+        </div>
+        <div class="company cursor" v-if="$store.state.auth_user.comName">
+          <el-dropdown trigger="click" @command="companyHandleCommand" @visible-change="visible">
+            <span class="el-dropdown-link">
+              {{$store.state.auth_user.comName}}
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                :command="item.no"
+                v-for="item in CompanyOrganization"
+                :key="item.no"
+                :class="{'actived':$store.state.auth_user.comNo == item.no}"
+              >
+                <i class="el-icon-office-building" v-if="item.default == 1" style="color: #409EFF;"></i>
+                <i class="el-icon-office-building" v-else></i>
+                {{item.name}}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import localStorage from "@/storage/localStorage";
+import link from "@/public/link.js";
+import topmenu from "@/public/topmenu.js";
+import apiAuth from "@/api/apiAuth";
+import marketplace from "@/assets/marketplace.js";
+import datas from "@/assets/data.js";
+
+export default {
+  name: "HeadBar",
+  data() {
+    return {
+      data: datas.workList,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      marketplace: marketplace,
+      dialogVisible: true,
+      messNum: 0,
+      showBg: "center",
+      menuList: [],
+      topmenuList: topmenu,
+      showController: false,
+      CompanyOrganization: [],
+      styles: {
+        left: 0
+      },
+      show: {
+        tel: false,
+        realName: false,
+        noRealName: false,
+        enterprise: false,
+        noEnterprise: false
+      },
+      shake: {
+        tel: true,
+        realName: true,
+        noRealName: true,
+        enterprise: true,
+        noEnterprise: true
+      }
+    };
+  },
+  watch: {
+    "$store.state.auth_user": {
+      deep: true,
+      handler: function(newVal) {
+        if (
+          this.$store.state.auth_user.comNo == "" ||
+          this.$store.state.auth_user.comNo == "0"
+        ) {
+          this.getCompanyOrganization();
+        }
+      }
+    }
+  },
+  computed: {
+    jWidth() {
+      const num = this.$store.state.auth_user.comName.length;
+      return num * 16 + 126;
+    },
+    isCollapse() {
+      return this.collapse;
+    },
+    currentMenu() {
+      return this.$store.state.currentTopMenu;
+      console.log(this.$store.state.currentTopMenu);
+    },
+    Enterprise() {
+      const bol1 = this.$store.state.user.userRole === 0
+      const str = bol1 ? "noEnterprise" : "enterprise"
+      return str
+    },
+    showEnterprise() {
+      const bol1 = this.$store.state.user.userRole === 0; // 普通用户
+      const bol2 = this.$store.state.user.personalAuth === 1; // 实名认证
+      const bol3 = this.$store.state.user.relevance; // 关联企业
+      return bol1 && bol2 && bol3;
+    },
+    realName() {
+      const bol1 = this.$store.state.user.personalAuth === 1;
+      const str = bol1 ? "realName" : "noRealName";
+      return str;
+    },
+    noRead() {
+      const no = this.$store.state.sysMsgUnread.applyFriend;
+      if (no < 1) {
+        return "";
+      } else {
+        return no > 99 ? "99+" : no;
+      }
+    }
+  },
+  mounted() {
+    window.onresize = () => {
+      return (() => {
+        this.initShow();
+      })();
+    };
+    this.$nextTick(function() {
+      this.initShow();
+      setTimeout(() => {
+        this.getCompanyOrganization();
+      }, 3000);
+    });
+  },
+  methods: {
+    handleNodeClick(data) {
+      console.log(data);
+    },
+    mouseLeaveS() {
+      this.dialogVisible = false;
+    },
+    mouseovers() {
+      this.dialogVisible = true;
+    },
+    skipLink(item) {
+      console.log(item);
+      window.open(item.path);
+      this.dialogVisible = false;
+    },
+    visible(val) {
+      if (val) {
+        this.getCompanyOrganization();
+      }
+    },
+    /**
+     * 切换企业
+     */
+    async getCompanyOrganization() {
+      const res = await apiAuth.getUserCompany();
+      if (res.data.code == 200) {
+        this.CompanyOrganization = res.data.data;
+        if (
+          (this.$store.state.auth_user.comNo == "" ||
+            this.$store.state.auth_user.comNo == "0") &&
+          res.data.data[0]
+        ) {
+          this.companyHandleCommand(res.data.data[0].no);
+        }
+      }
+    },
+    async companyHandleCommand(command) {
+      const { data } = await apiAuth.companyCut(command);
+      if (data.code === 0) {
+        window.location.reload();
+      } else {
+        this.$message.error(data.msg);
+      }
+    },
+    async getAuth() {
+      const { data } = await apiAuth.getAuthList();
+      if (data.code === 0) {
+        this.$store.commit("SET_AUTH_USER", data.result);
+        localStorage.set("menu", JSON.stringify(data.result.routes));
+      } else {
+        this.$message.error(data.msg);
+      }
+    },
+    // 切换主企业
+    changeCompany(e) {
+      this.$confirm("确定要设置为主企业吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(async() => {
+          const data = {
+            userNo: this.$store.state.user.no,
+            companyNo: e
+          };
+          const res = await apiAuth.updateDefaultCompany(data);
+          if (res.data.code === 200) {
+            this.$message({
+              message: "切换成功",
+              type: "success"
+            });
+            this.getAuth();
+            this.companyHandleCommand(e);
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除"
+          });
+        });
+    },
+    navTo(item) {
+      if (item.index === 11) {
+        // this.$router.push({ path: '/formBuilder' })
+        const routeData = this.$router.resolve({
+          name: "formBuilder"
+        });
+        window.open(routeData.href, "_blank");
+      } else if (item.index === 13) {
+        this.$router.push({ path: "/setting" });
+        this.$store.commit("SET_CURRENTTOPMENU", item.index);
+      } else {
+        this.$router.push({ path: "/" });
+        localStorage.set("isTop", true);
+        this.$store.commit("SET_CURRENTTOPMENU", item.index);
+      }
+    },
+    toAuthentication(type) {
+      if (type === "qy" && this.$store.getters.getUser.personalAuth === 0) {
+        this.$message({
+          message: "请先完成实名认证",
+          type: "warning"
+        });
+        return;
+      }
+      if (type === "sm") {
+        this.$router.push({ path: "/authenticationRealName" });
+      }
+      if (type === "qy") {
+        this.$router.push({ path: "/enterpriseAuthentication" });
+      }
+    },
+    modifyPass() {
+      this.$router.push({ path: "/security" });
+      this.$refs.popover.showPopper = false;
+    },
+    mouseOver(type) {
+      for (const item in this.show) {
+        if (item !== type) {
+          this.$set(this.show, item, false);
+        }
+      }
+      this.$set(this.show, type, true);
+      this.$set(this.shake, type, false); // 防抖
+    },
+    mouseLeave(type) {
+      const that = this;
+      this.$set(this.shake, type, true); // 防抖
+      setTimeout(function() {
+        if (that.shake[type]) {
+          that.$set(that.show, type, false);
+        }
+      }, 300);
+    },
+    toPush() {
+      link.blank_index();
+    },
+    logout(e) {
+      if (e === "out") {
+        this.quit();
+      }
+    },
+    quit() {
+      // LOGIN_OUT
+      this.$confirm("确认退出？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(async(res) => {
+          const result = await apiAuth.sendLogout();
+          if (result.status === 200) {
+            this.$store.commit("LOGIN_OUT");
+            localStorage.clear("menu");
+            // this.$message.success(data.msg)
+            this.$router.push("/");
+          } else {
+            this.$message.error("退出失败");
+          }
+        })
+        .catch(() => {});
+    },
+    errorHandler() {
+      return true;
+    },
+    changeCollapse() {
+      this.$store.commit("SET_ISCOLLAPSE");
+    },
+    toOther(path) {
+      const personallist = ["/Hzlgl", "/Hlabor"]; // 租赁 // 工队
+
+      const qiyelist = ["/Hgcgl", "/Hshop", "/ZCJY", "/ZSFX"]; //  企业管理
+
+      const bol1 = personallist.indexOf(path); // 个人认证
+      const bol2 = qiyelist.indexOf(path); // 企业认证
+
+      const bol3 = this.$store.getters.getUser.personalAuth === 0; // 未实名认证
+      const bol4 = this.$store.state.user.userRole === 0; // 未企业认证
+
+      if (!bol3 && !bol4) {
+        return false;
+      }
+      if (bol1 != -1 && bol3) {
+        const data = {
+          type: "error",
+          buttonSubmit: "去认证",
+          buttonClose: "暂不认证",
+          msg: {
+            title: "提示",
+            content: "当前功能需要完成个人认证后才可使用，请先进行个人认证！"
+          },
+          callBack: async function() {
+            this.$router.push({ path: "/authenticationRealName" });
+          }.bind(this)
+        };
+        this.$_popout1(data);
+        return true;
+      }
+
+      if (bol2 != -1 && bol4) {
+        const data = {
+          type: "error",
+          buttonSubmit: "去认证",
+          buttonClose: "暂不认证",
+          msg: {
+            title: "提示",
+            content: "当前功能需要完成企业认证后才可使用，请先进行企业认证！"
+          },
+          callBack: async function() {
+            this.$router.push({ path: "/enterpriseAuthentication" });
+          }.bind(this)
+        };
+        this.$_popout1(data);
+        return true;
+      }
+      return false;
+    },
+    initShow: function() {
+      const TagWidth = this.$refs.btns.offsetWidth;
+      const TagContentWidth = this.$refs.menu.offsetWidth;
+      if (TagWidth > TagContentWidth) {
+        this.showController = true;
+      } else {
+        this.showController = false;
+        this.styles.left = 0;
+      }
+    },
+    transform() {
+      const TagWidth = this.$refs.btns.offsetWidth;
+      const TagContentWidth = this.$refs.menu.offsetWidth;
+      if (TagWidth > TagContentWidth) {
+        this.styles.left = TagWidth - TagContentWidth + "px";
+      } else {
+        this.styles.left = 0;
+      }
+    },
+    scroll: function(position) {
+      const TagWidth = this.$refs.btns.offsetWidth;
+      const TagLeft = this.$refs.btns.offsetLeft;
+      const TagContentWidth = this.$refs.menu.offsetWidth;
+      if (position === "left") {
+        if (TagLeft >= 0) {
+          return false;
+        } else {
+          this.styles.left = TagLeft + 86 >= 0 ? 0 : TagLeft + 86 + "px";
+        }
+      } else {
+        if (TagLeft >= TagWidth - TagContentWidth) {
+          return false;
+        } else {
+          this.styles.left =
+            TagLeft - 86 <= -1 * (TagWidth - TagContentWidth)
+              ? -1 * (TagWidth - TagContentWidth) + "px"
+              : TagLeft - 86 + "px";
+        }
+      }
+    }
+  }
+};
+</script>
+<style lang="scss">
+.h-popover.el-popover {
+  padding: 0;
+}
+.communication {
+  line-height: 59px;
+  .el-badge__content.is-fixed {
+    top: 20px;
+    right: 5px;
+  }
+}
+.jSet:hover,
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover,
+.el-dropdown-menu__item.actived:not(.is-disabled) {
+  background-color: #ecf5ff;
+  color: #66b1ff;
+}
+</style>
+<style lang="scss" scoped>
+.el-badge{
+  vertical-align:inherit;
+}
+.el-dropdown + .el-dropdown {
+  margin-left: 15px;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+
+.hello-box {
+  font-size: 14px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.infor {
+  padding: 10px 20px 0 20px;
+  .company {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    line-height: 32px;
+  }
+  .infor-item {
+    font-size: 14px;
+    color: #666666;
+    line-height: 26px;
+  }
+  .img-box {
+    margin: 6px 0 14px 0;
+  }
+  .btn-box {
+    border-top: 1px solid #e4e7ed;
+    .btn {
+      display: inline-block;
+      width: 48%;
+      color: #969696;
+    }
+    .line {
+      display: inline-block;
+      width: 1px;
+      height: 23px;
+      background: #e4e7ed;
+      position: relative;
+      top: 8px;
+    }
+  }
+  .admin-box-img {
+    // margin-right: 15px;
+    display: inline-block;
+    margin: 0 7px;
+    position: relative;
+    > img {
+      vertical-align: middle;
+    }
+    .admin-box-img-tel {
+      width: 140px;
+    }
+    .admin-box-img-no-real-name {
+      width: 190px;
+    }
+    .admin-box-img-real-name {
+      width: 130px;
+    }
+    .admin-box-img-no-enterprise {
+      width: 210px;
+    }
+    .admin-box-img-enterprise {
+      width: 105px;
+    }
+    > div {
+      font-size: 12px;
+      color: #666666;
+      // text-align: center;
+      text-indent: 11px;
+      position: absolute;
+      height: 22px;
+      line-height: 22px;
+      border: 1px solid rgba(150, 150, 150, 1);
+      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.08);
+      background: #fff;
+      left: 0px;
+      top: 32px;
+    }
+  }
+}
+//
+.top-bar {
+  display: flex;
+  background-color: white;
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px solid #e4e7ed;
+  .head-logo {
+    width: 162px;
+    padding: 10px 0 10px 10px;
+    position: relative;
+    .logo-content {
+      cursor: pointer;
+      .logo {
+        display: block;
+        width: 40px;
+        height: 40px;
+        margin-right: 6px;
+      }
+      .name {
+        font-size: 32px;
+      }
+    }
+    .collapse {
+      width: 136px;
+      height: 42px;
+      position: absolute;
+      right: 0;
+      top: 22px;
+      margin-top: -14px;
+      cursor: pointer;
+      border-radius: 6px;
+    }
+    .unfold-menu {
+      background: url("../../../assets/center/fold.png") no-repeat center;
+      border-color: #80c2ef;
+      background-size: cover;
+    }
+    .fold-menu {
+      background: url("../../../assets/center/packup.png") no-repeat center;
+      border-color: #e4e7ed;
+      background-size: cover;
+      // -moz-transform: rotate(180deg);
+      // -webkit-transform: rotate(180deg);
+      // transform: rotate(180deg);
+      // filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    }
+  }
+
+  .postios {
+    line-height: 60px;
+    height: 60px;
+    padding: 0 10px;
+    > i {
+      display: inline-block;
+      cursor: pointer;
+    }
+    .left {
+      left: 14px;
+    }
+    .right {
+      right: 14px;
+    }
+  }
+  .menu {
+    flex: 1;
+    // height: 34px;
+    position: relative;
+    overflow: hidden;
+    white-space: nowrap;
+    .menu-content {
+      position: absolute;
+      left: 0;
+      top: 0;
+      transition: left 0.3s ease-out;
+      .nav-btn {
+        font-size: 20px;
+        height: 34px;
+        color: #333;
+        margin: 0 10px 0 20px;
+        cursor: pointer;
+        &:first-child {
+          margin-left: 10px;
+        }
+        &:last-child {
+          margin-right: 0;
+        }
+        &:hover {
+          // background-color: white;
+          color: #409eff;
+        }
+      }
+      .nav-btn.btn-active {
+        // background-color: white;
+        color: #409eff;
+      }
+    }
+  }
+  // .head-nav {
+  //   flex: 1;
+  //   > div {
+  //     width: 25%;
+  //     text-align: center;
+  //     cursor: pointer;
+  //     // overflow: hidden;
+  //   }
+  //   .nav-item {
+  //     // padding: 0 40px;
+  //     position: relative;
+  //     &:not(:last-child):after {
+  //       content: "";
+  //       width: 1px;
+  //       height: 24px;
+  //       position: absolute;
+  //       background-color: #e4e7ed;
+  //       top: 50%;
+  //       right: 0;
+  //       margin-top: -12px;
+  //     }
+
+  //     .el-dropdown {
+  //       height: 40px;
+  //       color: #000;
+  //       font-size: 16px;
+  //     }
+  //   }
+  //   .color02 {
+  //     color: #0286df;
+  //   }
+  // }
+  .head-user {
+    padding-right: 12px;
+    display: flex;
+    flex-direction: column;
+    .company {
+      height: 30px;
+      line-height: 30px;
+    }
+    .user {
+      height: 17px;
+      line-height: 30px;
+      .el-dropdown {
+        height: 40px;
+      }
+      .el-avatar {
+        vertical-align: middle;
+        margin-right: 10px;
+      }
+      .el-dropdown-link {
+        .name {
+          cursor: pointer;
+          color: #0286df;
+          padding-right: 4px;
+        }
+      }
+    }
+    .header-tel {
+      display: flex;
+      align-items: center;
+      margin-right: 80px;
+      img {
+        display: block;
+        width: 34px;
+        height: 34px;
+        margin: 16px;
+      }
+      .tel {
+        flex: 1;
+        line-height: 20px;
+        .telnumber {
+          font-size: 18px;
+          font-weight: 600;
+        }
+        .time {
+          font-size: 14px;
+          color: #666;
+        }
+      }
+    }
+  }
+  .flex-center {
+    display: flex;
+    align-items: center;
+  }
+}
+/deep/.popper__arrow {
+  left: 52.5% !important;
+}
+.nav-btn-dropdow {
+  position: absolute;
+  top: 55px !important;
+  left: 550px !important;
+  padding: 10px 0;
+  margin: 5px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.nav-span-hover {
+  font-size: 20px;
+  height: 34px;
+  color: #333;
+  cursor: pointer;
+}
+.nav-span-hover:hover {
+  color: #0286df;
+}
+// 弹框
+.dialog-pop-up {
+  width: 780px;
+  padding: 20px;
+  div {
+    p {
+      margin: 6px 0 11px 0;
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #343434;
+    }
+    span {
+      margin: 0;
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #343434;
+      padding-top: 20px;
+      padding-right: 21px;
+      cursor: pointer;
+      &:last-child {
+        padding: 0;
+      }
+    }
+    &:first-child {
+      p {
+        margin: 0px 0 11px 0;
+      }
+    }
+  }
+}
+</style>