Commit 7642aa7c authored by shabai517's avatar shabai517
Browse files

add icon for the buttons in the landing page

parent 928b623d
......@@ -82,6 +82,7 @@
<!-- Google Analytics details... -->
<!-- Change UA-XXXXX-X to be your site's ID -->
<script type="text/javascript">!function(e,a,n,t,i,o,c){e.GoogleAnalyticsObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,o=a.createElement(n),c=a.getElementsByTagName(n)[0],o.async=1,o.src="//www.google-analytics.com/analytics.js",c.parentNode.insertBefore(o,c)}(window,document,"script",0,"ga"),ga("create","UA-629242-1",{cookieDomain:"auto"}),ga("require","linkid","linkid.js"),ga("set","anonymizeIp",!0),ga("send","pageview");</script>
<script src="/static/js/iconfont.js"></script>
</div>
</body>
</html>
......
......@@ -38,8 +38,22 @@
</div>
</div>
<div class="button-container">
<a class="button resource-button" @click="goToArchive">{{archivebutton}}</a>
<a class="button resource-button peptidome" @click="goToPeptidome">{{peptidomebutton}}</a>
<a class="button resource-button" @click="goToArchive">
<span>
<svg class="icon-archive" aria-hidden="true">
<use xlink:href="#icon-data"></use>
</svg>
</span>
<span>{{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>
</svg>
</span>
<span>{{peptidomebutton}}</span>
</a>
</div>
</div>
</template>
......@@ -227,6 +241,8 @@
text-align: center;
padding: 50px 0;
margin:0 auto;
display: flex;
flex-direction: column;
/*background-image: url("~/src/assets/image/bioinformatics-slide-slide-1-Slideviewer.jpg");
background-position: center center;
background-size: cover;*/
......@@ -271,7 +287,11 @@
}
.button-container{
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.search-container{
margin: 0 auto 10px auto;
......@@ -279,18 +299,21 @@
text-align: center;
border-radius:6px;
padding:50px;
background:#fff;
background:#fbfdff;
}
.resource-button{
padding: 50px 105px 50px 105px;
font-size: 18px;
width: 100%;
width: 80%;
/*padding: 20px 85px;
font-size: 24px;*/
font-weight: 700;
margin: 0 0 40px 0;
background-color: #5bc0be;
border-radius: 6px;
display:flex;
align-items: center;
justify-content: center;
}
.resource-button.peptidome{
background-color: #ef7831;
......@@ -331,7 +354,20 @@
width: 50px !important;
padding: 2px 0 !important;
}
.icon-archive {
width: 2em; height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin-right: 10px;
}
.icon-peptidome {
width: 2em; height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
margin-right: 10px;
}
@media (min-width: 768px) {
.resource-container{
width: 750px;
......@@ -345,6 +381,9 @@
.resource-container{
width: 970px;
}
.button-container{
flex-direction: row
}
}
@media (min-width: 1200px) {
.resource-container{
......@@ -401,5 +440,5 @@
.ivu-poptip-body{
padding: 15px 16px;
}
</style>
(function(window){var svgSprite='<svg><symbol id="icon-checklist" viewBox="0 0 1024 1024"><path d="M888.672 516.224l-49.824-49.664c-6.432-6.528-16.928-6.592-23.36 0l-104.992 104.928-120.128 120.384-93.024-93.12c-6.528-6.56-17.024-6.56-23.488 0l-49.728 49.696c-6.528 6.56-6.528 17.056 0 23.552l154.432 154.56c6.56 6.56 17.184 6.56 23.552 0l286.496-286.784c6.624-6.464 6.624-16.96 0.064-23.552zM356.48 580.8l49.696-49.824c42.464-42.368 116.352-42.432 158.784 0.064l25.312 25.312 113.76-108.384 0-320-576 0 0 704 320 0-91.52-92.128c-43.776-43.936-43.776-115.264 0-159.072zM320 192l320 0 0 64-320 0 0-64zM320 320l320 0 0 64-320 0 0-64zM256 512l-64 0 0-64 64 0 0 64zM256 384l-64 0 0-64 64 0 0 64zM256 256l-64 0 0-64 64 0 0 64zM320 448l64 0 0 64-64 0 0-64z" ></path></symbol><symbol id="icon-checklist1" viewBox="0 0 1024 1024"><path d="M656 240V16H144v992h736V240z" fill="#EDF2F8" ></path><path d="M656 16v224h224z" fill="#FFFFFF" ></path><path d="M895.904 239.824a15.536 15.536 0 0 0-4.464-10.48L666.656 4.56a15.376 15.376 0 0 0-10.336-4.432L656 0H160a32 32 0 0 0-32 32v960a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V240l-0.096-0.176zM672 54.096L841.904 224H672V54.096zM864 992H160V32h480v224h224v736zM311.888 400.208l-31.952-31.952-23.68 23.68 55.408 56.32 104.592-104.592-23.904-23.904-80.464 80.448zM480 416h288v-32H480v32zM311.888 592.208l-31.952-31.952-23.68 23.68 55.408 56.32 104.592-104.592-23.904-23.904-80.464 80.448zM480 608h288v-32H480v32zM311.888 784.208l-31.952-31.952-23.68 23.68 55.408 56.32 104.592-104.592-23.904-23.904-80.464 80.448zM480 800h288v-32H480v32z" fill="#8592A5" ></path></symbol><symbol id="icon-data" viewBox="0 0 1024 1024"><path d="M170.666667 853.333333h768v85.333334H85.333333V85.333333h85.333334v768z m128-384h85.333333v298.666667h-85.333333V469.333333z m234.666666-256h85.333334v554.666667h-85.333334V213.333333z m234.666667 128h85.333333v426.666667h-85.333333V341.333333z" ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)
\ No newline at end of file
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