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

[Add] add second button on header in cfp

Browse Source
This commit is contained in:
barrystone 2021-03-05 00:58:45 +08:00
parent 00b045612f
commit f91eedd495
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
@import '../hyperpoint.scss'; @import "../hyperpoint.scss";
$width-svg-sitcon2021: 341px; $width-svg-sitcon2021: 341px;
$width-svg-sitcon: 244px; $width-svg-sitcon: 244px;
@ -66,9 +66,20 @@ $width-svg-news: 259px;
.btn-news-wrapper { .btn-news-wrapper {
margin: -48px; margin: -48px;
} }
.cfp-news__btn {
&:hover { position: relative;
bottom: 6px; &--1 {
transform: translate(50%, -75%);
&:hover {
transform: translate(50%, -90%);
}
}
&--2 {
transform: translate(-50%, 75%);
&:hover {
transform: translate(-50%, 50%);
}
}
} }
} }
} }
@ -132,7 +143,7 @@ $width-svg-news: 259px;
.info-box { .info-box {
.cfp-title { .cfp-title {
margin-bottom: 56px; margin-bottom: 56px;
left: calc(#{$width-svg-cfp} * 0.06) left: calc(#{$width-svg-cfp} * 0.06);
} }
.date-location { .date-location {
.date-wrapper { .date-wrapper {
@ -184,7 +195,7 @@ $width-svg-news: 259px;
.info-box { .info-box {
.cfp-title { .cfp-title {
margin-bottom: 56px; margin-bottom: 56px;
left: calc(#{$width-svg-cfp} * 0.05) left: calc(#{$width-svg-cfp} * 0.05);
} }
.date-location { .date-location {
.date-wrapper { .date-wrapper {
@ -237,7 +248,7 @@ $width-svg-news: 259px;
.info-box { .info-box {
.cfp-title { .cfp-title {
margin-bottom: 32px; margin-bottom: 32px;
left: calc(#{$width-svg-cfp} * 0.033) left: calc(#{$width-svg-cfp} * 0.033);
} }
.date-location { .date-location {
.date-wrapper { .date-wrapper {

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

@ -55,18 +55,27 @@
</div> </div>
</div> </div>
<div class="cfp-news"> <div class="cfp-news">
<a href="/2021/cfp/ocfp-news" rel="noopener"> <div class="cfp-news__btn cfp-news__btn--1">
<div class="btn-news-wrapper"> <a href="/2021/cfp/ocfp-news" rel="noopener">
<img src="~@/assets/images/burnfont/btn-news.svg" id="svg-news" /> <div class="btn-news-wrapper">
</div> <img src="~@/assets/images/burnfont/btn-news.svg" id="svg-news" />
</a> </div>
</a>
</div>
<div class="cfp-news__btn cfp-news__btn--2">
<a href="/2021/cfp/ocfp-news" rel="noopener">
<div class="btn-news-wrapper">
<img src="~@/assets/images/burnfont/btn-news.svg" id="svg-news" />
</div>
</a>
</div>
</div> </div>
</div> </div>
</header> </header>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
@Component @Component
export default class CfpHeader extends Vue {} export default class CfpHeader extends Vue {}