ChunkOra-Index

<div class="container">
  <div class="sidebar">
    <div style="margin-left:40px;margin-top:35px;">
      <h1 style="color:cornflowerblue;display:inline">ChunkOra</h1>
      <br/>
      <span style="color:lightgray;margin-top:5px;">新一代 Minecraft 智能管理系统</span>
    </div>
    <div style="display:flex;justify-content: center;flex-direction: column;align-items: center;margin-top:50px;gap:10px;position:relative">
      <div :style="focustyle" style="position: absolute;top:0;border-left-style:solid;border-left-width: 3px;border-left-color: cornflowerblue;height:50px;width:80%;background-color:rgb(100 149 237 / 0.1);margin-right:10px;border-top-right-radius: 7px;border-bottom-right-radius: 7px;"></div>
      <Section @click="SectionClick(1)" style="width:80%;height:50px;" title="首页"><House style="color:darkgray;width:24px;height:24px;" /></Section>
      <Section @click="SectionClick(2)" style="width:80%;height:50px;" title="节点"><Connection style="color:darkgray;width:24px;height:24px;" /></Section>
      <Section @click="SectionClick(3)" style="width:80%;height:50px;" title="实例"><Document style="color:darkgray;width:24px;height:24px;" /></Section>
    </div>
    <div style="position:absolute;bottom:20px;width:90%">
      <div style="display:flex;align-items: center">
        <div class="setting"><Setting class="st" style="color:darkgray;width:28px;height:28px;" /></div>
        <div style="display:flex;flex-direction: column;margin-left:5px;margin-bottom:5px;">
          <div>
            <span style="font-size:16px;color:gray">{{ user.username }}</span>
            <span style="font-size:12px;color:darkgray">管理员</span>
          </div>
          <div>
            <span style="font-size:16px;color:gray">C</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="main">

  </div>
</div>

<style scoped>
.container{
  display:flex;
  width:100vw;
  height:100vh;
}
.sidebar{
  max-width:350px;
  width:90%;
  box-shadow: 8px 8px 16px 0px rgba(163, 177, 198, 0.60), -8px -8px 16px 0px rgba(255, 255, 255, 0.70);
  position: relative;
}
.main{
  width:100%;
}
.setting{
  border-radius:50%;
  margin-left:20px;
  width:28px;
  height:28px;
  padding:8px;
  cursor:pointer;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  transition: ease-in-out 0.2s;
}
.setting:hover{
  opacity:0.8;
  border-color: cornflowerblue;
  background-color:rgb(100 149 237 / 0.2);
  .st{
    color:white;
  }
}
</style>