[Style] Header news button
This commit is contained in:
hyperbola
parent
89ae347c83
commit
5c903ed7f5
33
src/assets/images/burnfont/btn-news.svg
Normal file
33
src/assets/images/burnfont/btn-news.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="259.797" height="153.086" viewBox="0 0 259.797 153.086">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #fff;
|
||||
stroke: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: #226bb4;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
filter: url(#Path_3);
|
||||
}
|
||||
</style>
|
||||
<filter id="Path_3" x="0" y="0" width="259.797" height="153.086" filterUnits="userSpaceOnUse">
|
||||
<feOffset dy="3" input="SourceAlpha"/>
|
||||
<feGaussianBlur stdDeviation="15" result="blur"/>
|
||||
<feFlood flood-color="#5978ce" flood-opacity="0.561"/>
|
||||
<feComposite operator="in" in2="blur"/>
|
||||
<feComposite in="SourceGraphic"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="投稿資訊大按鈕_-_Mobile" data-name="投稿資訊大按鈕 - Mobile" transform="translate(45.5 42.5)">
|
||||
<g id="Group_1" data-name="Group 1" transform="translate(0 0)">
|
||||
<g class="cls-3" transform="matrix(1, 0, 0, 1, -45.5, -42.5)">
|
||||
<path id="Path_3-2" data-name="Path 3" class="cls-1" d="M167.169,27.114,141.716,1.661A5.539,5.539,0,0,0,137.787.034V0H31.008V.034A5.539,5.539,0,0,0,27.08,1.661L1.627,27.114a5.556,5.556,0,0,0,0,7.858L27.08,60.425a5.539,5.539,0,0,0,3.929,1.628v.034H137.787v-.034a5.539,5.539,0,0,0,3.929-1.628l25.453-25.453a5.556,5.556,0,0,0,0-7.858" transform="translate(45.5 42.5)"/>
|
||||
</g>
|
||||
</g>
|
||||
<path id="Path_757" data-name="Path 757" class="cls-2" d="M-29.952-16.848v-5.044H-43.6v5.486h-.6v-3.562h-.988v-1.924h-6.526v1.924H-52.78v6.24h1.066v3.874l-1.248.208v6.578h1.248V-1.4L-52.78-.156V2.08h7.592V-4.186l.936-.182v-6.6h-.936v-2.756h.624v2.08h5.98l1.326-1.144V-16.3h.754v3.51l1.4,1.144h6.344v-5.2Zm.546,13.234v-7.462H-43.55v4.342h7.774V-5.8l-.78.65-1.43-1.014h-5.538v3.094l.962.78L-44.538-.936V2.132h6.188L-36.634.754l1.924,1.378h5.59V-1.144l-1.664-1.248ZM-1.69-21.4H-6.5v-.884h-6.344v.884h-4.082v5.148H-1.69ZM-17.472-9.49v1.248l-.806-.962v-.936h.936v-5.694h-.936v-1.248l.754-.52v-4.186H-25.48v5.044h1.43v.91h-1.508v5.694h1.326L-25.766-7.7V-.182h.988l.728-1.326V2.054h5.772V-2.86h.806V2.054h5.382V-5.122h5.1v3.874l-.572.494V-4.5h-3.952V.962H-9V2.054h7.54V-9.49Zm15.262-.6v-5.538H-16.64v5.538ZM-11.18-13.1H-7.9v.78H-11.18Zm2.106,11.83h-.832v-.91h.832Zm31.46-13.91h1.378l1.716-1.274V-21.5H17.212v-.728h-5.46l-2.7,1.9v5.148h1.56l2.028-1.352v.754L9.074-13.494v2.028H15.5l1.4-1.378h.494l1.43,1.378h6.812v-2.262ZM8.45-21.814H1.794v4.888H8.45Zm5.122,4.654.806-.546H20.02v.546Zm-5.122.832H4l-2.21,1.56v3.3H8.45ZM25.142-.7V-10.868H2.262V-.7h1.4L1.794.728V2.106h9.178L12.4.468H14.95l1.43,1.638h9.178V.728L23.686-.7ZM17.992-7.67v.6H9.126v-.6Zm0,2.886H9.126v-.572h8.866ZM9.126-3.146h8.866v.6H9.126Zm27.3-18.928H30.68v1.04H29.016v5.85H38.09v-5.85H36.426ZM52.416-5.9V-21.788H38.688v6.812h.832v2.886h-.988v6.058h.988V2.106h5.616V-6.032h1.2v5.59l1.95,2.522h5.2V-5.9Zm-7.28-6.188v-2.886h1.2v2.886Zm-7.176-2.5H29.12v3.77h8.84ZM29.12-6.6h8.84v-3.614H29.12Zm-.078,8.632h8.97V-5.954h-8.97Zm3.77-4.42h1.326v.962H32.812Z" transform="translate(84.398 41.043)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@ -59,6 +59,15 @@ $width-svg-news: 188px;
|
||||
order: 3;
|
||||
margin-bottom: 72px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.btn-news-wrapper {
|
||||
margin: -48px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -230,6 +239,7 @@ $width-svg-news: 188px;
|
||||
}
|
||||
}
|
||||
.cfp-news {
|
||||
//empty
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,17 +55,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="cfp-news">
|
||||
<div class="cfp-news-wrapper">
|
||||
<div class="hexagon">
|
||||
<a href="/news" rel="noopener" class="btn">
|
||||
<img
|
||||
src="~@/assets/images/burnfont/news.svg"
|
||||
class="svg"
|
||||
id="svg-news"
|
||||
/>
|
||||
</a>
|
||||
<a href="/cfp/news" rel="noopener">
|
||||
<div class="btn-news-wrapper">
|
||||
<img src="~@/assets/images/burnfont/btn-news.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@ -79,5 +73,5 @@ export default class CfpHeader extends Vue {}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/scss/CFP/header';
|
||||
@import "@/assets/scss/CFP/header";
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user