<style>
.pluginCenter{
    padding:20px 0;
}
.plugin_ListTitle{
    font-weight: 400;
    font-size: 18px;
    margin-bottom:24px;
}
.plugin-list{
    margin:0 0 0 -20px;
}
.plugin-item {
    border: 1px solid #ebebeb;
    background: #fff;
    padding: 20px;
    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;
}
</style>
<template>
    <div class="pluginCenter">
        <div flex="cross:center">
            <h3 class="plugin_ListTitle">已安装</h3>
        </div>
        <div 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('Fsetting')">
                <div flex="dir:left box:first" class="plugin-item">
                    <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>
            <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('Ftemplate')">
                <div flex="dir:left box:first" class="plugin-item">
                    <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>
            <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('authorize')">
                <div flex="dir:left box:first" class="plugin-item">
                    <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>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        currentUser: {},
        isChecked:1,
        Height:0
      };
    },
    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>
