支持页面样式调整

lfy1331 · Sep 30, 2018 · de473d7 · de473d7
1 parent 77c3008
commit de473d7
Showing 1 changed file with 17 additions and 10 deletions.
diff --git a/front/src/views/Support.vue b/front/src/views/Support.vue
@@ -2,25 +2,26 @@
   <div>
     <Card>
       <p slot="title">如果觉得本软件不错的话，可以通过下面的二维码打赏作者，让作者有动力持续更新版本和修复BUG。</p>
-      <div class="card-container">
+      <div class="card-container qr-container">
         <img class="qr-img" src="pay/alipay.png" />
         <b>支付宝</b>
       </div>
-      <div class="card-container">
+      <div class="card-container qr-container">
         <img class="qr-img" src="pay/weipay.png" />
         <b>微信</b>
       </div>
     </Card>
     <Card v-if="softList.length>0"
       style="margin-top:20px;">
-      <p slot="title">另外作者在这里推荐几款正版软件，有需要的话可以看一看，你们的每一次点击都是对作者的鼓励。</p>
-      <div v-for="(soft,index) in softList"
+      <p slot="title">另外作者在这里推荐些正版软件，有购买意向的话可以点进去看一看，你们每一次点击也是对作者的支持与鼓励。</p>
+      <Card v-for="(soft,index) in softList"
         :key="index"
-        class="card-container">
-        <img class="ad-img" :src="soft.preview" />
-        <a href="#"
-          @click="openUrl(soft.url)"><b>{{soft.title}}</b></a>
-      </div>
+        class="card-container recommend-container">
+        <a href="javascript:;"
+          @click="openUrl(soft.url)">
+          <img class="ad-img" :src="soft.preview" />
+          <b>{{soft.title}}</b></a>
+      </Card>
     </Card>
   </div>
 </template>
@@ -48,11 +49,17 @@ export default {
 
 <style scoped>
 .card-container {
-  display: inline-block;
   width: 220px;
   text-align: center;
   margin: 5px;
 }
+.qr-container {
+  display: inline-block;
+}
+.recommend-container {
+  display: inline-flex;
+  height: 300px;
+}
 .card-container b {
   display: inline-block;
   padding-top: 5px;