t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Update] change second button image-text on header in cfp

Browse Source
This commit is contained in:
barrystone 2021-03-06 18:45:14 +08:00
parent f91eedd495
commit 3e6c105605
4 changed files with 46 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/images/burnfont/btn-news1-desktop.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="260" height="133" viewBox="0 0 260 133" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M228.072 58.8798L197.913 28.953C197.303 28.3455 196.577 27.8637 195.778 27.5355C194.979 27.2072 194.123 27.0387 193.258 27.0399V27H66.7407V27.0399C65.8762 27.0389 65.02 27.2074 64.2213 27.5357C63.4226 27.8639 62.6971 28.3456 62.0866 28.953L31.9285 58.8798C31.3171 59.4864 30.8321 60.2066 30.5012 60.9992C30.1703 61.7918 30 62.6414 30 63.4994C30 64.3574 30.1703 65.2069 30.5012 65.9995C30.8321 66.7921 31.3171 67.5124 31.9285 68.1189L62.0866 98.0458C62.6972 98.6535 63.4228 99.1355 64.2217 99.4639C65.0206 99.7928 65.8771 99.9612 66.7419 99.9602V100H193.258V99.9602C194.123 99.9612 194.979 99.7928 195.778 99.4639C196.577 99.1355 197.303 98.6535 197.913 98.0458L228.072 68.1189C228.683 67.5124 229.168 66.7921 229.499 65.9995C229.83 65.2069 230 64.3574 230 63.4994C230 62.6414 229.83 61.7918 229.499 60.9992C229.168 60.2066 228.683 59.4864 228.072 58.8798Z" fill="white"/>
</g>
<path d="M96.4459 56.2339V50.4495H81.3531V56.7409H80.6896V52.656H79.5969V50.4495H72.3801V52.656H71.2012V59.8119H72.3801V64.2546L71 64.4931V72.0367H72.3801V73.9496L71.2012 75.3762V77.9404H79.5969V70.7546L80.6321 70.5459V62.9771H79.5969V59.8166H80.287V62.2019H86.9001L88.3664 60.8899V56.8624H89.2003V60.8877L90.7485 62.1996H97.7641V56.2362L96.4459 56.2339ZM97.0497 71.4106V62.8532H81.4083V67.8326H90.0054V68.9037L89.1428 69.6491L87.5614 68.4863H81.4371V72.0345L82.501 72.9289L80.3158 74.4817V78H87.1589L89.0565 76.4198L91.1842 78H97.366V74.2432L95.5258 72.812L97.0497 71.4106ZM127.7 51.0138H122.38V50H115.365V51.0138H110.851V56.9175H127.7V51.0138ZM110.247 64.672V66.1033L109.356 65V63.9266H110.391V57.3968H109.356V55.9656L110.19 55.3692V50.5688H101.391V56.3532H102.972V57.3968H101.305V63.9266H102.772L101.075 66.7248V75.3464H102.168L102.972 73.8257V77.9106H109.356V72.2753H110.247V77.9106H116.199V69.6812H121.839V74.1239L121.206 74.6903V70.3945H116.836V76.6583H119.616V77.9106H127.954V64.672H110.247ZM127.124 63.984V57.6331H111.167V63.984H127.124ZM117.205 60.5322H120.833V61.4266H117.205V60.5322ZM119.534 74.0986H118.614V73.0551H119.534V74.0986ZM154.324 58.1468H155.849L157.746 56.6858V50.8991H148.603V50.0642H142.564L139.579 52.2431V58.1468H141.304L143.547 56.5963V57.461L139.603 60.0803V62.4059H146.709L148.258 60.8257H148.804L150.386 62.4059H157.919V59.8119L154.324 58.1468ZM138.913 50.539H131.553V56.1445H138.913V50.539ZM144.578 55.8761L145.469 55.25H151.708V55.8761H144.578ZM138.913 56.8303H133.992L131.548 58.6192V62.4037H138.913V56.8303ZM157.373 74.7523V63.0918H132.07V74.7523H133.618L131.553 76.3899V77.9702H141.702L143.281 76.0918H146.102L147.683 77.9702H157.832V76.3899L155.762 74.7523H157.373ZM149.466 66.7592V67.4472H139.661V66.7592H149.466ZM149.466 70.0688H139.661V69.4128H149.466V70.0688ZM139.661 71.9472H149.466V72.6354H139.661V71.9472ZM169.85 50.2408H163.496V51.4335H161.657V58.1422H171.691V51.4335H169.85V50.2408ZM187.533 68.789V50.5688H172.353V58.3807H173.272V61.6904H172.18V68.6376H173.272V77.9702H179.483V68.6376H180.81V75.0481L182.967 77.9404H188.717V68.789H187.533ZM179.483 61.6926V58.383H180.81V61.6926H179.483ZM171.547 58.8257H161.772V63.1491H171.547V58.8257ZM161.772 67.9862H171.547V63.8417H161.772V67.9862ZM161.686 77.8853H171.605V68.7271H161.686V77.8853ZM165.854 72.8165H167.321V73.9197H165.854V72.8165Z" fill="#226BB4"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="260" height="133" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="3"/>
<feGaussianBlur stdDeviation="15"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.470588 0 0 0 0 0.807843 0 0 0 0.561 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

17
src/assets/images/burnfont/btn-news2-desktop.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="281" height="133" viewBox="0 0 281 133" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M248.726 58.8798L215.423 28.953C214.749 28.3455 213.948 27.8638 213.065 27.5355C212.183 27.2072 211.238 27.0388 210.283 27.04V27H70.572V27.04C69.6173 27.0389 68.6719 27.2074 67.7899 27.5357C66.9079 27.864 66.1068 28.3456 65.4326 28.953L32.1296 58.8798C31.4544 59.4864 30.9189 60.2066 30.5535 60.9993C30.1881 61.7919 30 62.6415 30 63.4994C30 64.3574 30.1881 65.2069 30.5535 65.9996C30.9189 66.7922 31.4544 67.5124 32.1296 68.119L65.4326 98.0459C66.1068 98.6535 66.9081 99.1355 67.7903 99.464C68.6726 99.7925 69.6183 99.9611 70.5733 99.96V100H210.283V99.96C211.238 99.9611 212.183 99.7925 213.066 99.464C213.948 99.1355 214.749 98.6535 215.423 98.0459L248.726 68.119C249.401 67.5124 249.937 66.7922 250.302 65.9996C250.668 65.2069 250.856 64.3574 250.856 63.4994C250.856 62.6415 250.668 61.7919 250.302 60.9993C249.937 60.2066 249.401 59.4864 248.726 58.8798" fill="white"/>
</g>
<path d="M77.2278 62.0184V49.5338H64V76.8216H71.4908V62.0184H77.2278ZM78.0032 49.5338V62.0184H83.8591V72.7493L82.6998 73.5247V72.1548H83.2646V67.9635H82.6998V67.0123H83.2646V62.7021H72.0582V67.0123H72.8607V67.9635H72.0582V72.1548H72.7418L72.146 74.4733V76.1082H76.6048L77.1696 72.1548H78.2397V76.1082H80.4691V76.8191H91.2892V49.5338H78.0032ZM72.769 54.3195V55.095H70.4504V54.3195H72.769ZM85.0753 54.3195V55.095H82.6378V54.3195H85.0753ZM70.4504 58.4514V57.6759H72.769V58.4514H70.4504ZM82.6378 57.6759H85.0753V58.4514H82.6378V57.6759ZM77.1696 67.9635V67.0123H78.2397V67.9635H77.1696ZM106.033 49.1473H98.4233V50.5742H95.2724V58.0352H96.6397L95.4507 71.263V76.7919H101.544L101.901 66.0313H103.239V71.0847L102.406 72.0953V76.7919H109.689V59.3729H103.506V58.0352H109.719V50.5742H106.036L106.033 49.1473ZM121.163 67.6365L122.471 65.5855V50.3958H118.101V49.2365H112.424L110.492 51.6443V58.273H116.229V61.0375L114.772 59.0162H110.492V66.0313L111.859 67.7851L110.492 69.747V76.8514H114.98L116.407 74.5897L118.161 76.8514H122.591V69.747L121.163 67.6365ZM150.562 64.3667V59.2229H153.653V51.1971H152.791L152.434 49.4433H149.967V51.1971H149.135V49H140.306V51.1971H126.454V59.2229H141.258V66.5057L146.103 77H154.01V71.0252L150.562 64.3667ZM138.315 66.5961H140.277V60.1457H127.316V66.5961H129.219V69.9564H127.022V76.5244H141.02V69.9551H138.315V66.5961ZM164.918 49.2365H159.27V50.4255H157.606V57.1137H166.643V50.4255H164.918V49.2365ZM184.062 73.0465L184.865 72.3357V69.4795H182.457L181.833 69.9848L181.416 69.42V68.885H184.954V65.2585H181.416V61.8401H184.716V58.5121H179.276V57.8271H184.538V55.1519H179.276V54.4979H184.716V50.7822H182.605L183.051 49.5932V49.2662H176.631L176.125 50.7822H175.471L174.877 49.2662H168.724V49.5932L169.199 50.7822H167.297V54.4979H172.143V55.1519H167.386V57.8271H172.142V58.5121H167.237V61.8414H175.947V65.6462H174.639V64.8126L175.415 64.5153V62.4048H167.356V65.0504H169.553V65.6449H167.208V69.3283H169.556V69.9525H167.208V73.6682H169.556V73.906L167.386 74.8003V76.9703H174.639V73.1654L175.382 72.9574V69.9551H174.639V69.3309H175.947V71.7683L176.571 72.5994L175.263 73.8788V76.7919H178.236L179.128 75.9002L179.871 76.8514H185.04V74.3842L184.062 73.0465ZM157.725 62.1076H166.613V57.7974H157.725V62.1076ZM184.716 64.7532V62.4048H181.892V64.7532H184.716ZM157.725 66.9231H166.613V62.7913H157.725V66.9231ZM157.666 76.7919H166.613V67.6662H157.666V76.7919ZM161.622 71.7386H162.811V72.8372H161.622V71.7386ZM188.969 55.3302H190.721V56.3706H188.878V62.8805H190.512L188.61 65.6746V74.2653H189.861L190.721 72.8087V76.8216H198.033V71.2036H199.281V65.199L198.033 63.8614V62.8805H199.281V56.3706H198.033V55.1816L199.371 54.3493V49.5635H188.967L188.969 55.3302ZM216.019 49.5932H200.084V60.1754H216.017L216.019 49.5932ZM209.183 56.1328H206.715V54.9438H209.183V56.1328ZM214.771 65.7612L216.257 64.4533V60.9483H199.965V65.7638H203.919V66.5393H200.084V70.8197H203.919V71.6494H199.727V76.8837H216.165V71.6494H211.707V70.8171H215.868V66.5367H211.707V65.7612H214.771Z" fill="#226BB4"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="280.856" height="133" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="3"/>
<feGaussianBlur stdDeviation="15"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.470588 0 0 0 0 0.807843 0 0 0 0.561 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

8
src/assets/scss/CFP/header.scss
View File

@ -69,15 +69,15 @@ $width-svg-news: 259px;
.cfp-news__btn { .cfp-news__btn {
position: relative; position: relative;
&--1 { &--1 {
transform: translate(50%, -75%); transform: translate(50%, 0%);
&:hover { &:hover {
transform: translate(50%, -90%); transform: translate(50%, -20%);
} }
} }
&--2 { &--2 {
transform: translate(-50%, 75%); transform: translate(-50%, 280%);
&:hover { &:hover {
transform: translate(-50%, 50%); transform: translate(-50%, 260%);
} }
} }
} }

10
src/components/CFP/Header.vue
View File

@ -58,14 +58,20 @@
<div class="cfp-news__btn cfp-news__btn--1"> <div class="cfp-news__btn cfp-news__btn--1">
<a href="/2021/cfp/ocfp-news" rel="noopener"> <a href="/2021/cfp/ocfp-news" rel="noopener">
<div class="btn-news-wrapper"> <div class="btn-news-wrapper">
<img src="~@/assets/images/burnfont/btn-news.svg" id="svg-news" /> <img
src="~@/assets/images/burnfont/btn-news1-desktop.svg"
id="svg-news"
/>
</div> </div>
</a> </a>
</div> </div>
<div class="cfp-news__btn cfp-news__btn--2"> <div class="cfp-news__btn cfp-news__btn--2">
<a href="/2021/cfp/ocfp-news" rel="noopener"> <a href="/2021/cfp/ocfp-news" rel="noopener">
<div class="btn-news-wrapper"> <div class="btn-news-wrapper">
<img src="~@/assets/images/burnfont/btn-news.svg" id="svg-news" /> <img
src="~@/assets/images/burnfont/btn-news2-desktop.svg"
id="svg-news"
/>
</div> </div>
</a> </a>
</div> </div>