<template>
  <div id="systemNav">
    <Header :searchBarState="true" />
    <div class="main">
      <div class="row1">
        <ul class="totalbox">
          <li v-for="(v,i) in totalData" :key="i">
            <div>{{ v.title }}</div>
            <h2>{{ v.value }}</h2>
          </li>
        </ul>
        <!-- 常用系统 -->
        <div class="box commonlyUsed" style="height: 18rem;">
          <Title :dataSource="systemTitleData" :tagState="'0'" :btnType="'edit'" @systemOk="systemOk" />
          <ul class="list">
            <li v-for="item in systemList" :key="item.joinsysCode">
              <a :title="item.name" @click="redrictSystem(item.returnUrl,item.name,item.joinsysCode,item.remark)">
                {{ item.name }}
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="row2">
        <!-- 个人中心 -->
        <div class="box personal-box">
          <Title :dataSource="personalTitleData" :btnType="'more'" :tagState="'1'" :tagData="personalTagData" @getPerListData="getPerListData" />
          <div class="list-content">
            <List :listData="personalListData_" />
          </div>
        </div>
        <!-- 公司公文 部门公告 -->
        <div class="box companyDoc-box">
          <TitleTab @getCompanyDocData="getCompanyDocData" :dataSource="companyDocTitleData" :btnType="'more'" />
          <div class="list-content">
            <ListTab :listData="companyDocListData_" />
          </div>
        </div>
      </div>
      <div class="row3">
        <!-- 公司新闻 综合信息 -->
        <div class="box news-box">
          <TitleTab @getNewsData="getNewsData" :dataSource="newsTitleData" :btnType="'more'" />
          <div class="list-content">
            <div class="left">
              <a-carousel effect="fade" autoplay>
                <div v-for="(item, index) in newsImgData" :key="index">
                  <img :src="item.imgUrl" alt="">
                </div>
              </a-carousel>
            </div>
            <div class="right">
              <ListTab :listData="newsData_" />
            </div>
          </div>
        </div>
        <!-- 信息推荐 -->
        <div class="box infor-box">
          <Title @changeItData="changeItData" :dataSource="inforTitleData" :btnType="'changeIt'" :tagState="'0'" />
          <div class="list-content">
            <ListTab :listData="inforListData_" />
          </div>
        </div>

      </div>
      <div class="row4">
        <!-- 个人工作台 -->
        <div class="box workbench-box" :class="unfoldState?'work-down':'work-up'">
          <Title :dataSource="workbenchTitleData" :btnType="'edit'" :tagState="'0'" @workOk="workOk" />
          <div class="list-content">
            <ul class="workbench-list">
              <li v-for="(item,index) in workbenchData" :key="index">
                <div>
                  <img :src="item.imgUrl" alt="">
                  <b v-if="item.nums !== null && item.nums !== 0" class="nums">
                    <span>{{ item.nums <= 99 ?item.nums:'···' }}</span>
                  </b>
                </div>
                <h2>{{ item.title }}</h2>
              </li>
            </ul>
          </div>
          <div class="tips">
            <span v-if="workbenchData.length <= 7">
              您可以继续定义自己的工作卡片……
            </span>
            <button v-if="workbenchData.length >= 11" class="unfold-btn" @click="changeUnfoldState" :class="unfoldState?'unfold-focus':''">
            </button>
          </div>
        </div>
      </div>
      <a-modal v-model="workVisible" width="72rem" title="应用管理" @ok="workOk" @cancel="workCancel">
        <!-- <WorkbenchModel @workhandleOk="workhandleOk" @workHandleCancel="workHandleCancel" /> -->
        <WorkbenchModel ref="workModel" @redrictSystem="redrictSystem" />
      </a-modal>
      <a-modal v-model="systemVisible" width="72rem" title="系统管理" @ok="systemOk" @cancel="systemCancel">
        <!-- <SystemModel @systemhandleOk="systemhandleOk" @systemhandleCancel="systemhandleCancel" /> -->
        <SystemModel ref="systemModel" @redrictSystem="redrictSystem" />
      </a-modal>

    </div>
    <div class="right-btnlist">
      <button class="feedback">
        <img src="../assets/images/systemNav/feedback.png" alt="">
        <div>请留下您的宝贵意见……</div>
      </button>
      <button class="top" @click="toTop">
        <img src="../assets/images/systemNav/top.png" alt="">
      </button>
    </div>
    <Footer />

  </div>
</template>

<script>
import Header from './systemNavComponents/Header'
import Footer from './systemNavComponents/Footer'
import Title from './systemNavComponents/Title'
import List from './systemNavComponents/List'
import TitleTab from './systemNavComponents/TitleTab'
import ListTab from './systemNavComponents/ListTab'
import WorkbenchModel from './systemNavComponents/WorkbenchModel'
import SystemModel from './systemNavComponents/SystemModel'
import { getPolicyByType } from '@/api/security/policy'
import { needChangePwd } from '@/api/system/user'

import { cassss, getUserSystemByRole } from '@/api/login'
import './systemNavComponents/js'
// import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getToken } from '@/utils/auth'
export default {
  components: {
    Header,
    Footer,
    Title,
    List,
    TitleTab,
    ListTab,
    WorkbenchModel,
    SystemModel
  },
  data () {
    return {
      totalData: [
        { title: '待办', value: '32' },
        { title: '邮件', value: '21' }
      ],
      // 常用系统
      systemTitleData: {
        title: '常用系统',
        iconUrl: require('../assets/images/systemNav/icon1.png')
      },
      systemList: [],
      // 个人中心
      personalTitleData: {
        iconUrl: require('../assets/images/systemNav/icon2.png'),
        title: '个人中心'
      },
      personalTagData: ['全部', '待办', '已办', '办结', '邮件'],
      // 0'全部', 1'待办', 2'已办', 3'办结', 4'邮件'
      personalListData: [
        {
          type: '1',
          typeTitle: '待办',
          source: '人力资源管理系统',
          typeContent: '员工转正申请',
          readState: 1,
          infor: '请提交转正申请相关材料',
          name: '系统自动发送',
          time: '2022-02-18'
        },
        {
          type: '2',
          typeTitle: '己办',
          source: 'OA系统',
          typeContent: '督办流程',
          readState: 0,
          infor: '成立新天公司数智化建设委员会的报告',
          name: '程晓静',
          time: '2022-01-25'
        },
        {
          type: '1',
          typeTitle: '待办',
          source: 'OA系统',
          typeContent: '内部邮件',
          readState: 1,
          infor: '关于开展2021年度智黄仓评先洗优工作的通知',
          name: '尚一婓',
          time: '2022-01-20'
        },
        {
          type: '3',
          typeTitle: '办结',
          source: 'OA系统',
          typeContent: '新闻发布',
          readState: 0,
          infor: '服务数字新天新发展 启肮数智转型新征程——新天…',
          name: '李少辉',
          time: '2022-01-10'
        },
        {
          type: '4',
          typeTitle: '邮件',
          source: '企业邮箱',
          typeContent: '外部邮件',
          readState: 0,
          infor: '主数据项目周报（第7周）',
          name: 'liyuerui',
          time: '2022-12-25'
        }
      ],
      personalListData_: [],
      // 公司公文 部门公告
      companyDocTitleData: {
        iconUrl: require('../assets/images/systemNav/icon3.png'),
        titleList: ['公司公文', '部门公告']
      },
      companyDocListData_: [],
      companyDocListData: [
        {
          readState: 1,
          infor: '关于进一步加强公司系统企业安全生产标准化建设的通知',
          time: '2022-03-02'
        },
        {
          readState: 1,
          infor: '关于转发《华北能源监管局关于立即组织开展除尘器等…',
          time: '2022-02-21'
        },
        {
          readState: 0,
          infor: '关于印发 《新天绿色能源股份有限公司党组织命名规则…',
          time: '2022-02-17'
        },
        {
          readState: 0,
          infor: '关于印发 《新天绿色能源股份有限公司党组织命名规则…',
          time: '2022-02-01'
        },
        {
          readState: 1,
          infor: '关于转发《省应对新冠肺炎疫情领导小组办公室关于规…',
          time: '2022-01-22'
        }
      ],
      companyDocListData2: [
        {
          readState: 1,
          infor: '关于进一步加强公司系统企业安全生产标准化建设的通知',
          time: '2022-03-12'
        },
        {
          readState: 1,
          infor: '关于转发《华北能源监管局关于立即组织开展除尘器等…',
          time: '2022-02-16'
        }
      ],
      // 公司新闻 综合信息
      newsTitleData: {
        iconUrl: require('../assets/images/systemNav/icon4.png'),
        titleList: ['公司新闻', '综合信息']
      },
      newsData_: [],
      newsData1: [
        {
          readState: 1,
          infor: '新天公司成功发行2022年第一期缘色超短期就咨券',
          time: '2022-03-02'
        },
        {
          readState: 1,
          infor: '新天公司党委组织开展理论学习中心组第四次集中学习',
          time: '2022-02-17'
        },
        {
          readState: 0,
          infor: '政银企密切合作 共创美好发展未来',
          time: '2022-02-28'
        },
        {
          readState: 1,
          infor: '新奥集团董事局副主席张瑾一行到天然气公司座谈交流',
          time: '2022-02-25'
        },
        {
          readState: 0,
          infor: '国务院安委会第十五督导组到天然气公司检查指导安全生产',
          time: '2022-02-23'
        }
      ],
      newsData2: [
        {
          readState: 0,
          infor: '请提交转正申请相关材料',
          time: '2022-02-18'
        },
        {
          readState: 1,
          infor: '请提交转正申请相关材料',
          time: '2022-02-18'
        },
        {
          readState: 0,
          infor: '请提交转正申请相关材料',
          time: '2022-02-18'
        }
      ],
      newsImgData: [
        { imgUrl: require('../assets/images/systemNav/t1.jpg') },
        { imgUrl: require('../assets/images/systemNav/t2.jpg') },
        { imgUrl: require('../assets/images/systemNav/t3.jpg') }
      ],

      // 信息推荐
      inforTitleData: {
        iconUrl: require('../assets/images/systemNav/icon5.png'),
        title: '信息推荐'
      },
      inforListData_: [],
      inforListData: [
        {
          readState: 1,
          infor: '新天绿色能源股份有限公司组织召开党…',
          time: '2022-02-23'
        },
        {
          readState: 0,
          infor: '国务院安委会第十五督导组到天然气公…',
          time: '2022-02-18'
        },
        {
          readState: 0,
          infor: '曹妃甸区委统战部携手党外代表人士赴…',
          time: '2022-02-18'
        },
        {
          readState: 0,
          infor: '乘势而上 抢抓机遇以奋进姿态加快推进…',
          time: '2022-01-25'
        },
        {
          readState: 0,
          infor: '新能源公司纪委召开2022年度党风廉政…',
          time: '2022-01-10'
        }
      ],
      inforListData2: [
        {
          readState: 0,
          infor: '国务院安委会第十五督导组到天然气公…',
          time: '2022-02-18'
        },
        {
          readState: 0,
          infor: '曹妃甸区委统战部携手党外代表人士赴…',
          time: '2022-02-18'
        }
      ],
      // 个人工作台
      unfoldState: false,
      workbenchTitleData: {
        iconUrl: require('../assets/images/systemNav/icon6.png'),
        title: '个人工作台'
      },
      workbenchData: [
        {
          title: '生产经营与科技创新',
          imgUrl: require('../assets/images/systemNav/i1.png'),
          nums: 100
        },
        {
          title: '学习材料',
          imgUrl: require('../assets/images/systemNav/i2.png'),
          nums: 99
        },
        {
          title: '津贴申请',
          imgUrl: require('../assets/images/systemNav/i3.png'),
          nums: null
        },
        {
          title: '项目查询',
          imgUrl: require('../assets/images/systemNav/i4.png'),
          nums: null
        },
        {
          title: '出差申请',
          imgUrl: require('../assets/images/systemNav/i5.png'),
          nums: null
        },
        {
          title: '物料申请',
          imgUrl: require('../assets/images/systemNav/i6.png'),
          nums: null
        },
        {
          title: '培训申请',
          imgUrl: require('../assets/images/systemNav/i7.png'),
          nums: null
        }
      ],
      workVisible: false,
      systemVisible: false
    }
  },
  mounted () {
    this.getPerListData('0')
    this.getCompanyDocData(0)
    this.getNewsData(0)
    this.systemInit()
    this.changeItData(0)
    this.getPolicyLoginByType()
  },

  methods: {
    systemInit (key) {
      getUserSystemByRole().then((res) => {
        console.log('hahha: ', res)
        if (res != null && res !== '') {
          console.info(res)
          this.systemList = res
        } else {
          this.systemList = this.ArrImg
        }
      })
    },
    redrictSystem (url, name, code, remark) {
      // const token = storage.get(ACCESS_TOKEN)
      console.log(url, name, code, remark)
      // const token = getToken()
      // console.log('url：', url)
      // 如果不是跳转注册系统  就需要带着个人信息跳转
      if (url === '/') {
        window.location.href = '/SSO/'
      } else if (url === '/CAS') {
        // 如果点击的是知识管理系统的话调用接口访问CAS中央服务器
        const username = sessionStorage.getItem('username')
        const password = sessionStorage.getItem('password')
        cassss(username, password, code).then((res) => {
          if (res.code === 200) {
            window.open(res.msg)
          }
        })
      } else if (remark === 'URL') {
        window.open(url)
      } else {
            window.open(url)
        // const form = document.createElement('form')
        // form.action = `${url}?token=${token}`
        // form.target = '_blank'
        // form.method = 'get'
        // form.style.display = 'none'
        // const opt = document.createElement('input')
        // opt.name = 'token'
        // opt.value = token
        // form.appendChild(opt)
        // document.body.appendChild(form)
        // // 提交数据
        // form.submit()
      }
    },
    exportReport () {
      // this.$refs.healthChart.echartImg
        const token = getToken()
        const url = process.env.VUE_APP_BASE_API + '/system/taskInstance/qualityReportExports'
        const parmes = {
           token: token
        }
        // window.open(url, '_target')
      // qualityReportExports({ image1: this.$refs.healthChart.echartImg, id: this.reportId, image2: this.$refs.healthChart.echartImg, image3: this.$refs.healthChart.echartImg }).then(res => {
      // })
      this.httpPost(url, parmes)
    },

    httpPost (URL, PARAMS) {
      var temp = document.createElement('form')
      temp.action = URL
      temp.method = 'post'
      temp.target = '_blank' // 1.跳转新窗口需要设置该参数 2.当前页跳转可以去掉该参数
      temp.style.display = 'none'

      for (var x in PARAMS) {
          var opt = document.createElement('textarea')
          opt.name = x
          opt.value = PARAMS[x]
          temp.appendChild(opt)
      }

      document.body.appendChild(temp)
      temp.submit()

      return temp
    },

    toTop () {
      let top = document.documentElement.scrollTop || document.body.scrollTop
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    },
    onChange (a, b, c) {
      // console.log(a, b, c)
    },
    // 个人中心
    getPerListData (i) {
      this.personalListData_ = []
      this.personalListData.forEach((item, index) => {
        if (item.type === i.toString()) {
          this.personalListData_.push(item)
        }
        if (i.toString() === '0') {
          this.personalListData_ = this.personalListData
        }
      })
    },
    // 公司公文
    getCompanyDocData (i) {
      this.companyDocListData_ = []
      if (i === 0) {
        this.companyDocListData_ = this.companyDocListData
      } else if (i === 1) {
        this.companyDocListData_ = this.companyDocListData2
      }
      // console.log('i', this.companyDocListData_)
    },
    getNewsData (i) {
      this.newsData_ = []
      if (i === 0) {
        this.newsData_ = this.newsData1
      } else if (i === 1) {
        this.newsData_ = this.newsData2
      }
      // console.log('i', this.newsData_)
    },
    // 换一换
    changeItData (i) {
      this.inforListData_ = []
      if (i === 0) {
        this.inforListData_ = this.inforListData
      } else if (i === 1) {
        this.inforListData_ = this.inforListData2
      }
    },

    // 个人工作台
    workOk () {
      this.workVisible = !this.workVisible
    },
    // workhandleOk (data) {
    //   this.workVisible = !this.workVisible
    //   this.workbenchData = data
    // },
    workCancel () {
      this.workVisible = false
      this.workbenchData = this.$refs.workModel.systemList
      this.$refs.workModel.editState = false
      this.$refs.workModel.editBtnState = true
      this.$refs.workModel.arrDataSoure.forEach((item) => {
        item.disabled = 0
      })
    },
    // 展开
    changeUnfoldState () {
      this.unfoldState = !this.unfoldState
    },
    // 常用应用
    systemOk () {
      this.systemVisible = !this.systemVisible
    },

    systemCancel () {
      this.systemVisible = false
      this.systemList = this.$refs.systemModel.systemList
      this.$refs.systemModel.editState = false
      this.$refs.systemModel.editBtnState = true
      this.$refs.systemModel.arrDataSoure.forEach((item) => {
        item.disabled = 0
      })
      console.log('datadata:', this.systemList)
    },
    // 判断安全策略-登录策略是否开启
    getPolicyLoginByType () {
      // 策略类别(1.密码2.登录3.IP)
      getPolicyByType('2').then((response) => {
        if (response.data.status === 'true') {
          const config = JSON.parse(response.data.config)
          if (config.changePwd) {
            // 判断用户的密码是否是 123456
            needChangePwd().then((response) => {
              if (response.data) {
                this.$notification['warning']({
                  message: '注意',
                  description: '由于您的密码太过简单，请修改密码!'
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 16rem;
  line-height: 16rem;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
<style lang='less' scoped>
/deep/.ant-modal {
  border-radius: 6px;
  .ant-modal-content {
    border-radius: 6px;
  }
  .ant-modal-body {
    width: 99%;
    margin: 0 auto;
    max-height: none;
    padding: 0;
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-corner {
      background-color: rgba(0, 0, 0, 0.1);
    }

    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
      background-color: transparent;
      border-radius: 5px;
    }
  }
  .ant-modal-footer {
    display: none;
  }
}
</style>
<style lang='less' scoped>
ol,
ul,
li {
  list-style: none;
}
#systemNav {
  .main {
    display: grid;
    grid-template-rows: 20rem 32rem 32rem auto;
    grid-column-gap: 2rem;
    padding: 0 4rem 4rem;

    .row1 {
      display: grid;
      grid-template-columns: 43% calc(57% - 2rem);
      grid-column-gap: 2rem;
      margin-bottom: 2rem;
      .totalbox {
        display: flex;
        padding: 0;
        & > li {
          // width: 340px;
          width: 50%;
          height: 18rem;
          padding: 4rem 5rem;
          color: #0f0b0b;
          font-size: 1.8rem;
          border-radius: 5px;
          background: url('../assets/images/systemNav/p1.png') no-repeat center center;
          background-size: 100% 100%;
          box-shadow: 0 0 1.6rem rgba(0, 0, 0, 15%);
          text-align: left;

          & > h2 {
            color: #009fe2;
            font-size: 5.2rem;
            text-align: left;
            margin-left: -0.3rem;
          }
        }
        & > li:nth-child(2) {
          margin-left: 2rem;
          background: url('../assets/images/systemNav/p2.png') no-repeat center center;
          background-size: 100% 100%;
          & > h2 {
            color: #3fae4f;
          }
        }
      }
      // 常用系统
      .commonlyUsed {
        .list {
          padding: 1.5rem 4rem;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          margin: 0;
          line-height: 4.2rem;
          text-align: left;
          li {
            overflow: hidden;
          }
          a {
            width: 98%;
            display: block;
            font-size: 1.7rem;
            color: #333333;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            position: relative;
            text-align: left;

            &:hover {
              color: #009fe2;
              text-decoration: underline;
            }
          }
        }
      }
    }

    .box {
      height: 100%;
      border-radius: 6px;
      background: rgba(255, 255, 255, 1);
      // border: 1px solid #f4f5fa;
      border: 1px solid #eee;
      overflow: hidden;
      .list-content {
        padding: 1.5rem 2.5rem;
        height: calc(100% - 6.1rem);
      }
    }
    .row2 {
      display: grid;
      grid-template-columns: calc(65% - 2rem) 35%;
      grid-column-gap: 2rem;
      margin-bottom: 2rem;
      // 个人中心
      .personal-box {
        .list-content {
          padding: 1.5rem 2.5rem;
          height: calc(100% - 6.1rem);
        }
      }
    }
    .row3 {
      display: grid;
      grid-template-columns: calc(65% - 2rem) 35%;
      grid-column-gap: 2rem;
      margin-bottom: 2rem;
      .news-box {
        .list-content {
          display: grid;
          grid-template-columns: 38% calc(62% - 2rem);
          .left {
            width: 100%;
            overflow: hidden;
            height: 20rem;
            /deep/.slick-slider {
              height: 100%;
            }
            /deep/.ant-carousel {
              height: 100%;
              .slick-slide {
                height: 100%;
              }
              .slick-slide img {
                display: block;
                width: 100%;
                height: 20rem;
              }
              .slick-dots-bottom {
                bottom: 2rem;
                width: auto;
                right: 1.6rem;
                position: absolute;
              }
              .slick-dots {
                & > li {
                  margin: 0 3px;
                  & > button {
                    width: 7px;
                    height: 7px;
                    border-radius: 15px;
                    background: #fff;
                    opacity: 0.1;
                    -webkit-transition: all 0.5s;
                    transition: all 0.5s;
                  }
                }
                li.slick-active button {
                  width: 2rem;
                  background: #fff;
                  opacity: 1;
                }
              }
              .slick-slide h3 {
                color: #fff;
                width: 100%;
                height: 4.8rem;
                line-height: 4.8rem;
                font-size: 2rem;
                padding: 0 1.6rem;
                text-align: left;
                margin: 0;
                background: rgba(255, 255, 255, 0.3);
                position: absolute;
                bottom: 0;
                left: 0;
                font-weight: normal;
                & > span {
                  display: block;
                  width: 70%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
          }
          .right {
            margin-left: 2rem;
          }
        }
      }
    }
    .row4 {
      .workbench-box {
        position: relative;
        // height: 236px;
        // min-height: 236px;
        .workbench-list {
          display: grid;
          margin: 0.5rem 0 0 0;
          width: calc(100% - 4rem);
          grid-template-columns: repeat(10, 10%);
          & > li {
            margin: 1rem 0;
            text-align: center;
            & > div {
              width: 6rem;
              height: 6rem;
              position: relative;
              margin: 0 auto;
              .nums {
                position: absolute;
                width: 1.8rem;
                height: 1.8rem;
                text-align: center;
                line-height: 1.8rem;
                border-radius: 2rem;
                color: #ffffff;
                background: rgba(230, 0, 18, 1);
                top: -0.5rem;
                right: -0.5rem;
                font-weight: normal;
                & > span {
                  display: block;
                  width: 100%;
                  height: 100%;
                  font-size: 1rem;
                  transform: scale(0.75);
                  line-height: 2rem;

                }
              }
              & > img {
                width: 6rem;
                height: auto;
                display: block;
              }
            }

            & > h2 {
              color: #171d33;
              font-size: 1.6rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin: 1.5rem 0 0;
              font-weight: normal;
            }
            &:hover {
              cursor: pointer;
              & > h2 {
                color: #009fe2;
                // text-decoration: underline;
              }
            }
          }
          & > li:nth-child(n + 11) {
            display: none;
          }
        }
        .tips {
          display: flex;
          height: 14rem;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          top: 6.1rem;
          right: 4rem;
          & > span {
            font-size: 1.8rem;
            color: #999999;
            display: inline-block;
            padding-right: 15rem;
          }
          .unfold-btn {
            width: 3rem;
            height: 3rem;
            background: url('../assets/images/systemNav/unfold.png') no-repeat center center;
            background-size: 100% 100%;
            border: none;
            &:hover {
              background: url('../assets/images/systemNav/unfoldhov.png') no-repeat center center;
              background-size: 100% 100%;
              transition-duration: 1s;
            }
            &.unfold-focus {
              transform: rotate(180deg);
              background: url('../assets/images/systemNav/unfold.png') no-repeat center center;
              background-size: 100% 100%;
              transition-duration: 0.5s;
              &.unfold-focus:hover {
                transform: rotate(180deg);
                background: url('../assets/images/systemNav/unfoldhov.png') no-repeat center center;
                background-size: 100% 100%;
                transition-duration: 0.5s;
              }
            }
          }
        }
      }
      .workbench-box.work-down {
        height: auto;
        .workbench-list {
          & > li:nth-child(n + 11) {
            display: block;
          }
        }
      }
      .workbench-box.work-up {
        height: auto;
        .workbench-list {
          & > li:nth-child(n + 11) {
            display: none;
          }
        }
      }
    }
  }
  .right-btnlist {
    position: fixed;
    right: 0;
    bottom: 20%;
    z-index: 99;

    & > button {
      width: 5rem;
      height: 5rem;
      background: none;
      border: none;
      padding: 0;
      display: block;
      margin-top: 1.5rem;
      position: relative;
      & > img {
        display: block;
        width: 5rem;
        height: 5rem;
      }
      & > div {
        display: none;
        position: absolute;
        right: 5.6rem;
        top: -1.4rem;
        background: #fff;
        border: 2px solid #efefef;
        font-size: 1.2rem;
        color: #999999;
        padding: 1.2rem 1.6rem;
        border-radius: 0.5rem;
        width: 13.6rem;
        height: 7.6rem;
        text-align: left;
      }
      &.feedback:hover {
        & > div {
          display: block;
        }
      }
    }
  }
}
</style>
