Commit 360426d6 authored by shabai517's avatar shabai517
Browse files

legend bug fixed

parent f1c1aa74
......@@ -44,15 +44,16 @@
<use xlink:href="#icon-data"></use>
</svg>
</span>
<span>{{archivebutton}}</span>
<span class="resource-button-content">{{archivebutton}}</span>
</a>
<a class="button resource-button peptidome" @click="goToPeptidome">
<span>
<svg class="icon-peptidome" aria-hidden="true">
<use xlink:href="#icon-checklist"></use>
<!--<use xlink:href="#icon-checklist1"></use>-->
</svg>
</span>
<span>{{peptidomebutton}}</span>
<span class="resource-button-content">{{peptidomebutton}}</span>
</a>
</div>
</div>
......@@ -302,7 +303,7 @@
background:#fbfdff;
}
.resource-button{
padding: 50px 105px 50px 105px;
padding: 30px 105px 30px 105px;
font-size: 18px;
width: 80%;
/*padding: 20px 85px;
......@@ -314,6 +315,7 @@
display:flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.resource-button.peptidome{
background-color: #ef7831;
......@@ -355,18 +357,21 @@
padding: 2px 0 !important;
}
.icon-archive {
width: 2em; height: 2em;
width: 4em; height: 4em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin-right: 10px;
margin-bottom: 20px;
}
.icon-peptidome {
width: 2em; height: 2em;
width: 4em; height: 4em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin-right: 10px;
margin-bottom: 20px;
}
.resource-button-content{
font-size: 20px;
}
@media (min-width: 768px) {
.resource-container{
......
<template>
<div class="tree-container">
<div class="legend">
<div class="item-wrapper"><i class="fas fa-circle fa-xs" style="color:#6083d2"></i><span>Organism</span></div>
<div class="item-wrapper"><i class="fas fa-circle fa-xs" style="color:#5cc8db"></i></i><span>Organism_Part</span></div>
<div class="item-wrapper"><i class="fas fa-circle fa-xs" style="color:#d4a03a"></i><span>Diseases</span></div>
<div class="item-wrapper"><i class="fas fa-circle fa-xs" style="color:#2ba47cd6"></i><span>Modifications</span></div>
</div>
<chart class="tree-chart" :options="options" :auto-resize="true" @click="itemClick"></chart>
</div>
</template>
......@@ -398,27 +392,6 @@ export default {
.tree-container{
position: relative;
}
.tree-container .legend{
position: absolute;
/*display: flex;*/
display: none;
flex-direction: column;
left: 10px;
top: 10px;
color: #6f6f6f;
font-family: sans-serif;
font-size: 14px;
}
.tree-container .legend .item-wrapper{
display: flex;
text-align: left;
align-items: center;
flex-direction: row;
}
.tree-container .legend .item-wrapper span{
margin-left: 5px;
padding-top: 1px;
}
.echarts.tree-chart {
height: 400px !important;
width: auto !important;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment