55 lines
		
	
	
		
			1022 B
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			55 lines
		
	
	
		
			1022 B
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						|
  <div class="hotkeys-wrapper">
 | 
						|
    <el-tabs v-model="activeTab" type="border-card">
 | 
						|
      <el-tab-pane
 | 
						|
        v-for="item of $d.ReadingTool"
 | 
						|
        :key="item.id"
 | 
						|
        :label="item.label"
 | 
						|
        :name="item.id"
 | 
						|
      >
 | 
						|
        <HotKeysList
 | 
						|
          v-if="activeTab == item.id"
 | 
						|
          :reading-tool="item.value"
 | 
						|
        />
 | 
						|
      </el-tab-pane>
 | 
						|
    </el-tabs>
 | 
						|
  </div>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
import HotKeysList from './components/HotKeysList'
 | 
						|
export default {
 | 
						|
  name: 'HotKeys',
 | 
						|
  components: {
 | 
						|
    HotKeysList
 | 
						|
  },
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      activeTab: this.$d.ReadingTool[0].id
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 | 
						|
<style lang="scss">
 | 
						|
.hotkeys-wrapper{
 | 
						|
  height: 100%;
 | 
						|
  background-color: #fff;
 | 
						|
  .el-tabs{
 | 
						|
    height: 100%;
 | 
						|
    display: flex;
 | 
						|
    flex-direction: column;
 | 
						|
  }
 | 
						|
  .el-tabs__header {
 | 
						|
    height: 40px;
 | 
						|
    margin-bottom:5px;
 | 
						|
  }
 | 
						|
  .el-tabs__content{
 | 
						|
    flex: 1;
 | 
						|
    .el-tab-pane{
 | 
						|
      height: 100%;
 | 
						|
      overflow-y: auto;
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</style>
 | 
						|
 |