[optimize] sample rwd
make button be wrap body display well in smaller width
This commit is contained in:
mysper
parent
cb4038fd83
commit
c72aa26fff
@ -1,65 +1,65 @@
|
||||
#sponsor {
|
||||
line-height: 2em;
|
||||
line-height: 2em;
|
||||
|
||||
h2 {
|
||||
line-height: normal;
|
||||
font-size: 36pt;
|
||||
color: #4e4e4e;
|
||||
}
|
||||
h2 {
|
||||
line-height: normal;
|
||||
font-size: 36pt;
|
||||
color: #4e4e4e;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
padding-top: 240px;
|
||||
padding-bottom: 240px;
|
||||
}
|
||||
.main-container {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
padding-top: 240px;
|
||||
padding-bottom: 240px;
|
||||
}
|
||||
|
||||
.info-wrapper {
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.info-left-button-wrapper {
|
||||
padding-right: 160px;
|
||||
}
|
||||
.info-content {
|
||||
p:not(:first-child) {
|
||||
margin-top: 3em;
|
||||
}
|
||||
}
|
||||
.info-right-button-wrapper {
|
||||
padding-left: 160px;
|
||||
}
|
||||
}
|
||||
.info-wrapper {
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.info-left-button-wrapper {
|
||||
padding-right: 10%;
|
||||
}
|
||||
.info-content {
|
||||
p:not(:first-child) {
|
||||
margin-top: 3em;
|
||||
}
|
||||
}
|
||||
.info-right-button-wrapper {
|
||||
padding-left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
margin: 3em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
.button-wrapper {
|
||||
margin: 3em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.button {
|
||||
color: white;
|
||||
background: #1060ff;
|
||||
margin-right: 30px;
|
||||
margin-left: 30px;
|
||||
padding: 0.33em 1em;
|
||||
border-radius: 9487px;
|
||||
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.button {
|
||||
color: white;
|
||||
background: #1060ff;
|
||||
margin: 15px 30px;
|
||||
padding: 0.33em 1em;
|
||||
border-radius: 9487px;
|
||||
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deep-ploughing {
|
||||
.image-wrapper {
|
||||
margin-top: 8em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.deep-ploughing {
|
||||
.image-wrapper {
|
||||
margin-top: 8em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
width: 307px;
|
||||
height: 251px;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 307px;
|
||||
height: 251px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,27 +1,29 @@
|
||||
<template>
|
||||
<div id="sponsor">
|
||||
<div class="main-container">
|
||||
<div class="info-wrapper">
|
||||
<div class="content-wrapper">
|
||||
<div class="info-left-button-wrapper"></div>
|
||||
<div class="info-content">
|
||||
<p>
|
||||
SITCON
|
||||
學生計算機年會為學生自發組成籌辦的研討會，秉持著以學生為主軸的核心價值，提供一個經驗交流與資訊技術實務分享的平台，進而達到「學以致用、教學相長」的目標。
|
||||
</p>
|
||||
<p>
|
||||
維繫這樣的交流平台，需要多人的努力及貢獻，亦十分需要在資金上的支持。<br />
|
||||
希望能藉由您的一份力量，來促成活動的舉行，讓更多學生能在舞台上展現自我成長。<br />
|
||||
歡迎您參與贊助，支持 SITCON、讓我們將每年的活動辦得盡善盡美！
|
||||
</p>
|
||||
</div>
|
||||
<div class="info-left-button-wrapper"></div>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<a class="button" href="#">個人贊助</a>
|
||||
<a class="button" href="#">企業合作</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sponsor">
|
||||
<div class="main-container">
|
||||
<div class="info-wrapper">
|
||||
<div class="content-wrapper">
|
||||
<div class="info-left-button-wrapper"></div>
|
||||
<div class="info-content">
|
||||
<p>
|
||||
SITCON
|
||||
學生計算機年會為學生自發組成籌辦的研討會，秉持著以學生為主軸的核心價值，提供一個經驗交流與資訊技術實務分享的平台，進而達到「學以致用、教學相長」的目標。
|
||||
</p>
|
||||
<p>
|
||||
維繫這樣的交流平台，需要多人的努力及貢獻，亦十分需要在資金上的支持。<br />
|
||||
希望能藉由您的一份力量，來促成活動的舉行，讓更多學生能在舞台上展現自我成長。<br />
|
||||
歡迎您參與贊助，支持
|
||||
SITCON、讓我們將每年的活動辦得盡善盡美！
|
||||
</p>
|
||||
</div>
|
||||
<div class="info-left-button-wrapper"></div>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<a class="button" href="#">個人贊助</a>
|
||||
<a class="button" href="#">企業合作</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="deep-ploughing">
|
||||
<h2>深耕級</h2>
|
||||
<div class="image-wrapper">
|
||||
@ -30,17 +32,17 @@
|
||||
<img />
|
||||
</div>
|
||||
</div>
|
||||
施工中。
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/scss/sponsor";
|
||||
@import '@/assets/scss/sponsor';
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component({})
|
||||
export default class Sponsor extends Vue {}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user