<style>
  .pluginCenter {
    padding: 20px 0;
  }

  .plugin_ListTitle {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 24px;
  }

  .plugin-list {
    flex-wrap:wrap;
    margin-left:-20px;
  }

  .plugin-item {
    border: 1px solid #ebebeb;
    background: #fff;
    padding: 20px;
    width:252px;
    margin: 0 0 20px 20px;
    transition: 250ms;
    position: relative;
    height: 97px;
  }

  .plugin-item .display-name {
    margin-bottom: 10px;
    transition: 250ms;
  }

  .plugin-item:hover {
    border-color: #bfddff;
    cursor: pointer;
  }

  .plugin-item:hover .display-name {
    color: #409EFF;
  }

  .plugin-icon-bg {
    background: rgb(250, 163, 34);
    border-radius: 10px;
    font-size: 0;
    display: inline-block;
  }

  .plugin-icon {
    width: 50px;
    height: 50px;
  }

  .plugin-name {
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .plugin-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #999999;
    font-size: 12px;
  }

</style>
<template>
  <div class="pluginCenter">
    <div flex="cross:center">
      <h3 class="plugin_ListTitle">已安装</h3>
    </div>
    <div class="plugin-list" flex="dir:left">
        <div flex="dir:left box:first" class="plugin-item" @click="goDiyCenter('Fsetting')">
          <div style="padding-right: 12px;"><img src="../../assets/img/sallCenter/icon.png"
              style="width: 50px; height: 50px; display: block;"></div>
          <div>
            <div class="display-name">微信小程序</div>
            <div flex="box:last">
              <div class="name">wxapp</div>
            </div>
          </div>
        </div>
        <div flex="dir:left box:first" class="plugin-item" @click="goDiyCenter('Ftemplate')">
          <div style="padding-right: 12px;"><img src="../../assets/img/sallCenter/Diy.png"
              style="width: 50px; height: 50px; display: block;"></div>
          <div>
            <div class="display-name">DIY装修</div>
            <div flex="box:last">
              <div class="name">diy</div>
            </div>
          </div>
        </div>
        <div flex="dir:left box:first" class="plugin-item" @click="goDiyCenter('authorize')">
          <div style="padding-right: 12px;"><img src="../../assets/img/sallCenter/em.png"
              style="width: 50px; height: 50px; display: block;"></div>
          <div>
            <div class="display-name">资产管理</div>
            <div flex="box:last">
              <div class="name">authorize</div>
            </div>
          </div>
        </div>
        <div flex="dir:left box:first" class="plugin-item" @click="goDiyCenter('FShareMain')">
          <div style="margin-right: 12px;background:rgb(51, 153, 255);height:50px;"><img src="../../assets/img/sallCenter/circle.png"
              style="width: 50px; height: 50px; display: block;"></div>
          <div>
            <div class="display-name">一键发圈</div>
            <div flex="box:last">
              <div class="name">一键保存，高效发圈</div>
            </div>
          </div>
        </div>
        <div flex="dir:left box:first" class="plugin-item" @click="goDiyCenter('directorIndex')">
          <div style="margin-right: 12px;background:rgb(51, 153, 255);height:50px;"><img src="../../assets/img/sallCenter/circle.png" style="width: 50px; height: 50px; display: block;"></div>
          <div>
            <div class="display-name">司导专区</div>
            <div flex="box:last">
              <div class="name">出行靠司导、安心</div>
            </div>
          </div>
        </div>
        <div flex="dir:left box:first" class="plugin-item" @click="goDiyCenter('educationIndex')">
          <div style="margin-right: 12px;background:rgb(51, 153, 255);height:50px;"><img src="../../assets/img/sallCenter/circle.png" style="width: 50px; height: 50px; display: block;"></div>
          <div>
            <div class="display-name">教育模块</div>
            <div flex="box:last">
              <div class="name">改变命运,学习成就未来</div>
            </div>
          </div>
        </div>
        <div flex="dir:left box:first" class="plugin-item" @click="goDiyCenter('offlineIndex')">
          <div style="margin-right: 12px;background:rgb(51, 153, 255);height:50px;"><img src="../../assets/img/sallCenter/circle.png" style="width: 50px; height: 50px; display: block;"></div>
          <div>
            <div class="display-name">线下服务</div>
            <div flex="box:last">
              <div class="name">Below-the-Line</div>
            </div>
          </div>
        </div>

    </div>
    <div style="display:none">
      <div flex="cross:center" style="margin-top:20px;">
        <h3 class="plugin_ListTitle">营销工具</h3>
      </div>
      <div flex="dir:left" class="plugin-list el-row">
        <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-8 el-col-lg-6 el-col-xl-4"
          @click="goDiyCenter('pintuanMain')">
          <div flex="dir:left box:first" class="plugin-item">
            <div style="padding-right: 12px;">
              <div class="plugin-icon-bg">
                <img src="../../assets/img/sallCenter/pintuan.png" style="width: 50px; height: 50px; display: block;">
              </div>
            </div>
            <div>
              <div class="plugin-name">拼团</div>
              <div flex="box:last">
                <div class="plugin-desc">邀请朋友一起拼团购买</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        currentUser: {},
        isChecked: 1,
        Height: 0,
        isShow:1,
      };
    },
    created() {
      this.currentUser = this.getLocalStorage();
    },
    methods: {
      //跳转微信小程序
      goDiyCenter(path) {
        let routeData = this.$router.resolve({
          name: path,
          query: {
            FIndex: 1
          }
        });
        window.open(routeData.href, "_blank");
      }
    },
    mounted() {
      this.Height = document.documentElement.clientHeight - 60;
      //监听浏览器窗口变化　
      window.onresize = () => {
        this.Height = document.documentElement.clientHeight - 60
      }
    }
  };

</script>
