From c72aa26fffd9970a5b39ef40c6347fdc6b6cf088 Mon Sep 17 00:00:00 2001
From: mysper <anthony.a3202@gmail.com>
Date: Wed, 31 Mar 2021 10:40:30 +0800
Subject: [PATCH] [optimize] sample rwd make button be wrap body display well
 in smaller width

---
 src/assets/scss/sponsor.scss | 112 +++++++++++++++++------------------
 src/pages/Sponsor.vue        |  58 +++++++++---------
 2 files changed, 86 insertions(+), 84 deletions(-)

diff --git a/src/assets/scss/sponsor.scss b/src/assets/scss/sponsor.scss
index 698f0b0..8a29abc 100644
--- a/src/assets/scss/sponsor.scss
+++ b/src/assets/scss/sponsor.scss
@@ -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;
+			}
+		}
+	}
 }
diff --git a/src/pages/Sponsor.vue b/src/pages/Sponsor.vue
index b7d82c4..a25886d 100644
--- a/src/pages/Sponsor.vue
+++ b/src/pages/Sponsor.vue
@@ -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 {}