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-sitcon: 244px;
@ -66,9 +66,20 @@ $width-svg-news: 259px;
.btn-news-wrapper {
margin: -48px;
}
&:hover {
bottom: 6px;
.cfp-news__btn {
position: relative;
&--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 {
.cfp-title {
margin-bottom: 56px;
left: calc(#{$width-svg-cfp} * 0.06)
left: calc(#{$width-svg-cfp} * 0.06);
}
.date-location {
.date-wrapper {
@ -184,7 +195,7 @@ $width-svg-news: 259px;
.info-box {
.cfp-title {
margin-bottom: 56px;
left: calc(#{$width-svg-cfp} * 0.05)
left: calc(#{$width-svg-cfp} * 0.05);
}
.date-location {
.date-wrapper {
@ -237,7 +248,7 @@ $width-svg-news: 259px;
.info-box {
.cfp-title {
margin-bottom: 32px;
left: calc(#{$width-svg-cfp} * 0.033)
left: calc(#{$width-svg-cfp} * 0.033);
}
.date-location {
.date-wrapper {

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

@ -55,18 +55,27 @@
</div>
</div>
<div class="cfp-news">
<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 class="cfp-news__btn cfp-news__btn--1">
<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 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>
</header>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class CfpHeader extends Vue {}