180 lines
4.1 KiB
Vue
180 lines
4.1 KiB
Vue
<template>
|
||
<div class="main">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>请从左侧选择要使用的功能</span>
|
||
</div>
|
||
<div>
|
||
<span>死亡并不可怕,忘记才可怕</span>
|
||
</div>
|
||
</el-card> </div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
</script>
|
||
|
||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
<style scoped lang="less">
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.filelist {
|
||
width: 100%;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
|
||
.file-item {
|
||
border-bottom: 1px solid #e6e6e6;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 56px;
|
||
width: calc(100% - 180px);
|
||
margin-left: 100px;
|
||
box-sizing: border-box;
|
||
|
||
.info {
|
||
color: #185ed1;
|
||
display: block;
|
||
margin-left: 62px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.uuid {
|
||
display: clock;
|
||
}
|
||
|
||
.name {
|
||
display: block;
|
||
width: 80px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main {
|
||
width: calc(100% - 15px);
|
||
min-height: 100%;
|
||
height: auto;
|
||
background: #fff;
|
||
padding: 15px;
|
||
box-sizing: border-box;
|
||
|
||
.head {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 25px;
|
||
|
||
.head-block {
|
||
width: 23%;
|
||
height: 120px;
|
||
background: #fff;
|
||
border-radius: 5px;
|
||
box-shadow: 0 0 5px #ccc;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: #ebe9e9;
|
||
}
|
||
|
||
span {
|
||
font-size: 24px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
|
||
.tools-title {
|
||
display: block;
|
||
width: 100%;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #464646;
|
||
margin: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.tools {
|
||
width: calc(60% - 10px);
|
||
height: 350px;
|
||
// border: 1px solid #e9e7e7;
|
||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
|
||
overflow: hidden;
|
||
padding: 10px;
|
||
|
||
.toolsmain {
|
||
width: 100%;
|
||
height: calc(100% - 65px);
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||
grid-gap: 10px;
|
||
border-radius: 5px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
|
||
.tools-item {
|
||
width: 100%;
|
||
height: 30%;
|
||
// border: 1px solid #dbd7d7;
|
||
min-height: 90px;
|
||
padding-top: 10px;
|
||
min-width: 90px;
|
||
cursor: pointer;
|
||
|
||
img {
|
||
width: 45px;
|
||
height: 45px;
|
||
display: block;
|
||
margin: 5px auto;
|
||
padding: 10px;
|
||
border: 1px solid #dbd7d7;
|
||
box-sizing: border-box;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
span {
|
||
display: block;
|
||
text-align: center;
|
||
width: 100%;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-number {
|
||
width: calc(40% - 10px);
|
||
height: 360px;
|
||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
|
||
margin-left: 20px;
|
||
border-radius: 5px;
|
||
padding-left: 10px;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.box-item {
|
||
width: calc(50% - 10px);
|
||
height: 310px;
|
||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
|
||
border-radius: 5px;
|
||
padding-left: 10px;
|
||
padding-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|