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

[optimize] sample rwd

Browse Source 
make button be wrap
body display well in smaller width
This commit is contained in:
mysper 2021-03-31 10:40:30 +08:00
parent cb4038fd83
commit c72aa26fff
2 changed files with 86 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/assets/scss/sponsor.scss
View File

@ -1,65 +1,65 @@
#sponsor { #sponsor {
line-height: 2em; line-height: 2em;
h2 { h2 {
line-height: normal; line-height: normal;
font-size: 36pt; font-size: 36pt;
color: #4e4e4e; color: #4e4e4e;
} }
.main-container { .main-container {
width: 75%; width: 75%;
margin: 0 auto; margin: 0 auto;
padding-top: 240px; padding-top: 240px;
padding-bottom: 240px; padding-bottom: 240px;
} }
.info-wrapper { .info-wrapper {
.content-wrapper { .content-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.info-left-button-wrapper { .info-left-button-wrapper {
padding-right: 160px; padding-right: 10%;
} }
.info-content { .info-content {
p:not(:first-child) { p:not(:first-child) {
margin-top: 3em; margin-top: 3em;
} }
} }
.info-right-button-wrapper { .info-right-button-wrapper {
padding-left: 160px; padding-left: 10%;
} }
} }
.button-wrapper { .button-wrapper {
margin: 3em; margin: 3em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
flex-wrap: wrap;
.button { .button {
color: white; color: white;
background: #1060ff; background: #1060ff;
margin-right: 30px; margin: 15px 30px;
margin-left: 30px; padding: 0.33em 1em;
padding: 0.33em 1em; border-radius: 9487px;
border-radius: 9487px; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); }
} }
} }
}
.deep-ploughing { .deep-ploughing {
.image-wrapper { .image-wrapper {
margin-top: 8em; margin-top: 8em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
img { img {
width: 307px; width: 307px;
height: 251px; height: 251px;
} }
} }
} }
} }

58
src/pages/Sponsor.vue
View File

@ -1,27 +1,29 @@
<template> <template>
<div id="sponsor"> <div id="sponsor">
<div class="main-container"> <div class="main-container">
<div class="info-wrapper"> <div class="info-wrapper">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="info-left-button-wrapper"></div> <div class="info-left-button-wrapper"></div>
<div class="info-content"> <div class="info-content">
<p> <p>
SITCON SITCON
學生計算機年會為學生自發組成籌辦的研討會，秉持著以學生為主軸的核心價值，提供一個經驗交流與資訊技術實務分享的平台，進而達到「學以致用、教學相長」的目標。 學生計算機年會為學生自發組成籌辦的研討會，秉持著以學生為主軸的核心價值，提供一個經驗交流與資訊技術實務分享的平台，進而達到「學以致用、教學相長」的目標。
</p> </p>
<p> <p>
維繫這樣的交流平台，需要多人的努力及貢獻，亦十分需要在資金上的支持。<br /> 維繫這樣的交流平台，需要多人的努力及貢獻，亦十分需要在資金上的支持。<br />
希望能藉由您的一份力量，來促成活動的舉行，讓更多學生能在舞台上展現自我成長。<br /> 希望能藉由您的一份力量，來促成活動的舉行，讓更多學生能在舞台上展現自我成長。<br />
歡迎您參與贊助，支持 SITCON、讓我們將每年的活動辦得盡善盡美！ 歡迎您參與贊助，支持
</p> SITCON、讓我們將每年的活動辦得盡善盡美！
</div> </p>
<div class="info-left-button-wrapper"></div> </div>
</div> <div class="info-left-button-wrapper"></div>
<div class="button-wrapper"> </div>
<a class="button" href="#">個人贊助</a> <div class="button-wrapper">
<a class="button" href="#">企業合作</a> <a class="button" href="#">個人贊助</a>
</div> <a class="button" href="#">企業合作</a>
</div> </div>
</div>
<!--
<div class="deep-ploughing"> <div class="deep-ploughing">
<h2>深耕級</h2> <h2>深耕級</h2>
<div class="image-wrapper"> <div class="image-wrapper">
@ -30,17 +32,17 @@
<img /> <img />
</div> </div>
</div> </div>
施工中。 -->
</div> </div>
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
@import "@/assets/scss/sponsor"; @import '@/assets/scss/sponsor';
</style> </style>
<script> <script>
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({}) @Component({})
export default class Sponsor extends Vue {} export default class Sponsor extends Vue {}