From 6064b97367a88e2a851f32657dcc0efe0c3ead80 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sun, 4 Aug 2019 21:14:08 +0800
Subject: [PATCH] doc: add geektime ad

---
 site/components/CarbonAds.vue    | 13 ++++----
 site/components/geektime.vue     | 19 +++++++----
 site/components/geektime_ads.vue | 57 ++++++++++++++++++++++++++++++++
 site/components/layout.vue       |  4 ++-
 site/theme/static/common.less    |  2 +-
 5 files changed, 80 insertions(+), 15 deletions(-)
 create mode 100644 site/components/geektime_ads.vue

diff --git a/site/components/CarbonAds.vue b/site/components/CarbonAds.vue
index add5a2fe8..785c067de 100644
--- a/site/components/CarbonAds.vue
+++ b/site/components/CarbonAds.vue
@@ -59,16 +59,14 @@ export default {
 </script>
 <style lang="less">
  #carbon-ads {
-  width: 280px;
-  float: right;
-  position: relative;
-  right: 0;
-  bottom: 0;
+  width: 266px;
+  position: fixed;
+  left: 0;
+  bottom: 0px;
   padding: 0;
   overflow: hidden;
   z-index: 9;
   background-color: #fff;
-  border-radius: 3px;
   font-size: 13px;
   background: #f5f5f5;
   font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
@@ -86,7 +84,7 @@ export default {
 }
 #carbon-ads img {
   float: left;
-  margin-right: 10px;
+  padding-right: 10px;
 }
 #carbon-ads .carbon-img,
 #carbon-ads .carbon-text {
@@ -113,6 +111,7 @@ export default {
   right: 0;
   bottom: 0;
   padding: 0;
+  margin-bottom: 15px;
   .carbon-img {
     float: left;
     margin-right: 10px;
diff --git a/site/components/geektime.vue b/site/components/geektime.vue
index 8cc2855a1..f73b284e7 100644
--- a/site/components/geektime.vue
+++ b/site/components/geektime.vue
@@ -1,5 +1,8 @@
 <template>
-  <div id="geektime" v-show="visible">
+  <div
+    v-show="visible"
+    id="geektime"
+  >
     <a
       href="https://time.geekbang.org/course/intro/163?code=KHKYcoBU6vZa8nMglg7AWfDxxi3BWrz9INAzAY3umPk%3D"
       target="_blank"
@@ -10,8 +13,12 @@
         src="https://cdn.nlark.com/yuque/0/2019/jpeg/87084/1562230861353-assets/web-upload/2fab2df7-5cc9-4791-b344-a97da29eb400.jpeg"
       >
     </a>
-    <div v-if="isMobile" class="close" @click="visible=false">
-      <a-icon type="close"></a-icon>
+    <div
+      v-if="isMobile"
+      class="close"
+      @click="visible=false"
+    >
+      <a-icon type="close" />
     </div>
   </div>
 </template>
@@ -21,9 +28,9 @@ export default {
   props: ['isMobile'],
   data() {
     return {
-      visible: true
-    }
-  }
+      visible: true,
+    };
+  },
 };
 </script>
 
diff --git a/site/components/geektime_ads.vue b/site/components/geektime_ads.vue
new file mode 100644
index 000000000..6f9e181b2
--- /dev/null
+++ b/site/components/geektime_ads.vue
@@ -0,0 +1,57 @@
+<template>
+  <div
+    v-show="visible"
+    id="geektime-ads"
+    :class="isMobile ? 'geektime-ads-mobile':''"
+  >
+    <a
+      href="https://time.geekbang.org/course/intro/163?code=KHKYcoBU6vZa8nMglg7AWfDxxi3BWrz9INAzAY3umPk%3D"
+      target="_blank"
+    >
+      <img
+        height="100"
+        alt="Vue 实战教程"
+        src="https://cdn.nlark.com/yuque/0/2019/jpeg/87084/1562230861353-assets/web-upload/2fab2df7-5cc9-4791-b344-a97da29eb400.jpeg"
+      >
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['isMobile'],
+  data() {
+    return {
+      visible: true,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+  #geektime-ads {
+    max-width: 280px;
+    height: 100px;
+    float: right;
+    position: relative;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    overflow: hidden;
+    z-index: 9;
+    background-color: #fff;
+    border-radius: 3px;
+    font-size: 13px;
+    background: #f5f5f5;
+    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  }
+  #geektime-ads.geektime-ads-mobile {
+    width: 100%;
+    position: relative;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    margin-bottom: 15px;
+  }
+</style>
+
diff --git a/site/components/layout.vue b/site/components/layout.vue
index e124b0606..c15aa500b 100644
--- a/site/components/layout.vue
+++ b/site/components/layout.vue
@@ -5,6 +5,7 @@ import Header from './header';
 import Footer from './footer';
 import CarbonAds from './CarbonAds';
 import Geektime from './geektime';
+import GeektimeAds from './geektime_ads';
 import Sponsors from './sponsors';
 import zhCN from 'antd/locale-provider/zh_CN';
 import enUS from 'antd/locale-provider/default';
@@ -268,7 +269,8 @@ export default {
               }
               <a-col xxl={20} xl={19} lg={19} md={18} sm={24} xs={24}>
                 <section class='main-container main-container-component'>
-                  <CarbonAds isMobile={isMobile}/>
+                  <CarbonAds isMobile={isMobile} />
+                  <GeektimeAds isMobile={isMobile} />
                   {!isMobile ? <div class='toc-affix' style='width: 150px;'>
                     {this.getSubMenu(isCN)}
                   </div> : null}
diff --git a/site/theme/static/common.less b/site/theme/static/common.less
index bb1b5c324..c51106bee 100644
--- a/site/theme/static/common.less
+++ b/site/theme/static/common.less
@@ -51,7 +51,7 @@ a {
 }
 
 .aside-container {
-  padding-bottom: 48px;
+  padding-bottom: 120px;
   font-family: Avenir, @font-family;
 
   &.ant-menu-inline .ant-menu-submenu-title h4,