<template>
  <div>
    <!-- <el-tooltip effect="dark" content="主题" placement="bottom">
      <el-button class="d2-ml-0 d2-mr btn-text can-hover" type="text" @click="dialogVisible = true">
        <d2-icon name="diamond" style="font-size: 16px"/>
      </el-button>
    </el-tooltip> -->
    <div title='主题' class="msg-img" style="cursor:pointer;" @click="dialogVisible = true">
      <img src="../../imgs/star.png" />
    </div>  
    <el-dialog title="主题" width="600px" :visible.sync="dialogVisible" :append-to-body="true">
      <div slot='title'>
        <span class="title-bold">主题</span>
      </div>
      <d2-theme-list style="margin-top: -25px;"/>
    </el-dialog>
  </div>
</template>

<script>
import themeList from './components/d2-theme-list'
export default {
  components: {
    'd2-theme-list': themeList
  },
  data () {
    return {
      dialogVisible: false
    }
  }
}
</script>