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

[Layout Fixed] $md fix arrange of mistake

Browse Source 
$md fix thumbnail area.
This commit is contained in:
Snowmint 2021-01-20 11:25:13 +08:00
parent 1a4b545a25
commit 82d5907f42
2 changed files with 97 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/assets/scss/CFP/intro.scss
View File

@ -72,7 +72,7 @@ $fontColor: $mid-blue;
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
border-radius: 30px;
position: relative;
bottom: 550px;
bottom: 620px;
right: 50px;
z-index: 0;
}
@ -88,7 +88,13 @@ $fontColor: $mid-blue;
.past-sitcon {
margin-bottom: 2em;
width: 700px;
width: 60vw;
height: 13em;
.cfp-img{
width: 180px; //225
height: 121px; //152
}
.thumbnails {
display: flex;
@ -114,7 +120,7 @@ $fontColor: $mid-blue;
}
}
}
.join-discuss {
// empty
}
@ -205,22 +211,31 @@ $fontColor: $mid-blue;
margin-bottom: 2em;
}
}
#cfp-intro{
.box-back {
margin-bottom: -40em;
margin-left:-6em;
.first-box {
transform: rotate(12deg);
bottom: 650px;
left: 20px;
transform: rotate(12deg) scale(1.2);
bottom: 630px;
left: 90px;
}
.introd-text {
top: 100px;
top: 150px;
}
.past-sitcon {
margin-top:1em;
.thumbnails {
.thumb-wrapper {
width:200.5px;//25vw;
.thumb-title,
.thumb-subtitle {
width:185.5px; //25vw;
}
}
}
}
}
}
@ -282,6 +297,24 @@ $fontColor: $mid-blue;
.past-sitcon {
margin-top:1em;
}
.past-sitcon {
.thumbnails {
.thumb-wrapper {
width:122.5px;//25vw;
.thumb-title,
.thumb-subtitle {
width:132.5px; //25vw;
}
}
}
.cfp-img{
width: 128.5px; //225
height: 80px; //152
margin-left: 0em;
}
}
}
}
@ -358,6 +391,23 @@ $fontColor: $mid-blue;
.past-sitcon {
margin-top:1em;
}
.past-sitcon {
.thumbnails {
.thumb-wrapper {
width:122.5px;//25vw;
.thumb-title,
.thumb-subtitle {
width:132.5px; //25vw;
}
}
}
.cfp-img{
width: 128.5px; //225
height: 80px; //152
margin-left: 0em;
}
}
}
}
@ -390,6 +440,41 @@ $fontColor: $mid-blue;
}
}
}
#cfp-intro{
.past-sitcon {
margin-bottom: 2em;
width: 40vw;
height: 10em;
.thumbnails {
display: flex;
flex-direction: row;
padding: 0.25em 0;
.thumb-wrapper {
width:225px;//25vw;
.thumb-title,
.thumb-subtitle {
width:190px; //25vw;
text-align: center;
margin: 0;
font-size: 0.8em;
line-height: 1.75em;
font-weight: 900;
}
.small {
font-size: 0.6em;
}
&:not(:last-child) {
margin-right: 1em;
}
}
}
}
}
}
@include xs {

6
src/components/CFP/Intro.vue
View File

@ -16,19 +16,19 @@
<div class="thumbnails">
<div class="thumb-wrapper">
<!-- TODO add thumb -->
<img class="cfp-img" src="" />
<img class="cfp-img" src="@/assets/images/CFP/2020.png" />
<p class="thumb-title text-center">SITCON 2020<br /></p>
<p class="thumb-subtitle text-center">#define</p>
</div>
<div class="thumb-wrapper">
<!-- TODO add thumb -->
<img class="cfp-img" src="" />
<img class="cfp-img" src="@/assets/images/CFP/2019.png" />
<p class="thumb-title text-center">SITCON 2019<br /></p>
<p class="thumb-subtitle text-center">開箱演算法</p>
</div>
<div class="thumb-wrapper">
<!-- TODO add thumb -->
<img class="cfp-img" src="" />
<img class="cfp-img" src="@/assets/images/CFP/2018.png" />
<p class="thumb-title text-center">SITCON 2018<br /></p>
<!-- TODO alignment is not good -->
<p class="thumb-subtitle text-center small">