doc: add geektime ad

site/components/CarbonAds.vue

@@ -59,16 +59,14 @@ export default {
 </script>
 <style lang="less">
  #carbon-ads {
-  width: 280px;
+  width: 266px;
-  float: right;
+  position: fixed;
-  position: relative;
+  left: 0;
-  right: 0;
+  bottom: 0px;
-  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;
@@ -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;

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">
+    <div
-      <a-icon type="close"></a-icon>
+      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>
 

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>
+

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';
@@ -269,6 +270,7 @@ 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} />
+                  <GeektimeAds isMobile={isMobile} />
                   {!isMobile ? <div class='toc-affix' style='width: 150px;'>
                     {this.getSubMenu(isCN)}
                   </div> : null}

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,