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

[Fix] apply RWD for two buttons on header on cfp

Browse Source
This commit is contained in:
barrystone 2021-03-06 19:56:19 +08:00
parent 3e6c105605
commit 3946e38c90
2 changed files with 82 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,8 @@ $width-svg-topic: 515px;
$width-svg-cfp: 368px; $width-svg-cfp: 368px;
$width-svg-date: 207px; $width-svg-date: 207px;
$width-svg-location: 227px; $width-svg-location: 227px;
$width-svg-news: 259px; $width-svg-news1: 259px;
$width-svg-news2: 285px;
#cfp-header { #cfp-header {
padding-left: 20px; padding-left: 20px;
@ -68,6 +69,8 @@ $width-svg-news: 259px;
} }
.cfp-news__btn { .cfp-news__btn {
position: relative; position: relative;
// @include
&--1 { &--1 {
transform: translate(50%, 0%); transform: translate(50%, 0%);
&:hover { &:hover {
@ -114,15 +117,6 @@ $width-svg-news: 259px;
margin-bottom: 36px; margin-bottom: 36px;
} }
} }
.cfp-news {
order: 3;
flex: 0 0 50%;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 12px;
}
} }
} }
} }
@ -151,6 +145,28 @@ $width-svg-news: 259px;
} }
} }
.cfp-news { .cfp-news {
order: 3;
flex: 0 0 50%;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 12px;
.cfp-news__btn {
position: relative;
&--1 {
top: -95px;
&:hover {
top: -100px;
}
}
&--2 {
top: -45px;
&:hover {
top: -50px;
}
}
}
} }
} }
} }
@ -171,8 +187,11 @@ $width-svg-news: 259px;
#svg-location { #svg-location {
width: $width-svg-location * $scale; width: $width-svg-location * $scale;
} }
#svg-news { #svg-news1 {
width: $width-svg-news * $scale; width: $width-svg-news1 * $scale;
}
#svg-news2 {
width: $width-svg-news2 * $scale;
} }
#svg-cfp { #svg-cfp {
width: $width-svg-cfp * $scale; width: $width-svg-cfp * $scale;
@ -204,6 +223,24 @@ $width-svg-news: 259px;
} }
.cfp-news { .cfp-news {
margin-bottom: 16px; margin-bottom: 16px;
.cfp-news__btn {
position: relative;
&--1 {
top: -75px;
right: -5px;
&:hover {
top: -80px;
}
}
&--2 {
top: 0px;
&:hover {
top: -5px;
}
}
}
} }
} }
} }
@ -224,8 +261,11 @@ $width-svg-news: 259px;
#svg-location { #svg-location {
width: $width-svg-location * $scale; width: $width-svg-location * $scale;
} }
#svg-news { #svg-news1 {
width: $width-svg-news * $scale; width: $width-svg-news1 * $scale;
}
#svg-news2 {
width: $width-svg-news2 * $scale;
} }
#svg-cfp { #svg-cfp {
width: $width-svg-cfp * $scale; width: $width-svg-cfp * $scale;
@ -257,6 +297,27 @@ $width-svg-news: 259px;
} }
.cfp-news { .cfp-news {
margin-bottom: 2px; margin-bottom: 2px;
position: relative;
.cfp-news__btn {
position: relative;
&--1 {
top: -45px;
right: -25px;
&:hover {
top: -48px;
}
}
&--2 {
top: 5px;
right: -21px;
&:hover {
top: 2px;
}
}
}
} }
} }
} }
@ -277,8 +338,11 @@ $width-svg-news: 259px;
#svg-location { #svg-location {
width: $width-svg-location * $scale; width: $width-svg-location * $scale;
} }
#svg-news { #svg-news1 {
width: $width-svg-news * $scale; width: $width-svg-news1 * $scale;
}
#svg-news2 {
width: $width-svg-news2 * $scale;
} }
#svg-cfp { #svg-cfp {
width: $width-svg-cfp * $scale; width: $width-svg-cfp * $scale;

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

@ -60,7 +60,7 @@
<div class="btn-news-wrapper"> <div class="btn-news-wrapper">
<img <img
src="~@/assets/images/burnfont/btn-news1-desktop.svg" src="~@/assets/images/burnfont/btn-news1-desktop.svg"
id="svg-news" id="svg-news1"
/> />
</div> </div>
</a> </a>
@ -70,7 +70,7 @@
<div class="btn-news-wrapper"> <div class="btn-news-wrapper">
<img <img
src="~@/assets/images/burnfont/btn-news2-desktop.svg" src="~@/assets/images/burnfont/btn-news2-desktop.svg"
id="svg-news" id="svg-news2"
/> />
</div> </div>
</a> </a>