sponsor: add juejin.im - many thanks.

leizp · Jun 12, 2018 · 9f5c8d9 · 9f5c8d9
1 parent 91aa85e
commit 9f5c8d9
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 14 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -35,17 +35,38 @@
         line-height: 1.3;
         color: #6a8bad
       }
-      .home .hero .action-button {
+
+      .home .hero .action {
+        display: flex;
+        width: 350px;
+      }
+
+      .home .hero .action > div {
+        flex: 1;
+      }
+
+      .home .hero .action-button, .home .hero .juejin-button {
         display: inline-block;
         font-size: 1.2rem;
         color: #fff;
         background-color: #3eaf7c;
-        padding: .8rem 1.6rem;
+        padding: .5rem 1.6rem;
         border-radius: 4px;
         transition: background-color .1s ease;
         box-sizing: border-box;
         border-bottom: 1px solid #389d70
       }
+      .home .hero .juejin-button {
+        background-color: #fff;
+        color: #007fff;
+        border: 2px solid #007fff;
+        margin-left: 25px;
+        padding: 0.42rem 1.2rem;
+      }
+      .home .hero .juejin-button:hover {
+        color: #0371df;
+        border-color: #0371df;
+      }
       .home .hero .action-button:hover {
         background-color: #4abf8a
       }
@@ -114,6 +135,32 @@
         .home .feature h2 {
           font-size: 1.25rem
         }
+        .home .hero .action {
+          width: 100%;
+        }
+        .arrow {
+          display: none;
+        }
+      }
+      @media (max-width: 320px) {
+        .home .hero .action {
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+
+        .home .hero .action > div {
+          flex: 1 0 50%;
+          margin-top: 15px;
+        }
+
+        .home .hero .action a {
+          font-size: 1rem;
+          margin-left: 0;
+        }
+
+        .home .hero .action > div:first-child {
+          flex: 0 1 100%;
+        }
       }
       .action-link {
         color: #666;
@@ -161,16 +208,28 @@ <h1 class="vux-title">VUX</h1>
             <p class="description">
               一个凑合的 Vue.js 移动端 UI 组件库
             </p>
-            <p class="action">
-              <a href="https://doc.vux.li" class="action-button">
-              查看文档 →
+            <div class="action">
+              <div>
+                <a href="https://doc.vux.li" class="action-button">
+                查看文档
+                </a>
+                <br>
+                <br>
+                <a href="https://vux.li/demos/v2/" class="action-link">
+                查看 Demo
+                </a>
+              </div>
+              <div>
+                <a href="https://juejin.im/welcome/frontend?utm_source=vux&utm_medium=word&utm_content=qianduan&utm_campaign=q2_website" class="juejin-button" target="_blank">
+              前端社区 <span class="arrow">→</span>
               </a>
               <br>
-              <br>
-              <a href="https://vux.li/demos/v2/" class="action-link">
-              查看 Demo
-              </a>
-            </p>
+                <br>
+                <a href="https://juejin.im/welcome/frontend?utm_source=vux&utm_medium=word&utm_content=qianduan&utm_campaign=q2_website" class="action-link" target="_blank">
+                访问掘金
+                </a>
+              </div>
+            </div>
             <p class="best-companies">
               <a href="https://www.bmqb.com/a/jobs?tracking_code=opencollective" target="_blank">
                 <img src="https://ww1.sinaimg.cn/large/663d3650gy1fs3l6w13z2j206y02bdfp.jpg">
@@ -190,7 +249,7 @@ <h2>维护靠个人</h2>
               <p>是的，没有团队维护。国内大多数开发者都选择了有知名前端团队维护的组件库。<br/><br/>当然你也可以试试选择 VUX，毕竟维护两年时间，star 12k，一定程度上也说明并不比大公司团队开源的差，不是么？</p>
             </div>
             <div class="feature">
-              <h2>我们开始有了赞助支持</h2>
+              <h2>开始有了赞助支持</h2>
               <p>是的，我们开始有了赞助来支持开发迭代。<br/><br/>如果 VUX 帮你节省了大量时间的话，欢迎<a href="https://doc.vux.li/zh-CN/contribution/donate.html">捐赠</a>以鼓励支持作者。</p>
             </div>
           </div>

diff --git a/docs/src/App.vue b/docs/src/App.vue
@@ -20,9 +20,11 @@
 "></span></a>
           </p>
         </div>
+        <!--
         <router-link tag="div" id="x-sponsor" to="/zh-CN/contribution/donate.html">
         赞助商
         </router-link>
+        -->
         <div class="analytics">
           <p class="vux-center vux-sub-title vux-time-ago"><span>{{ analytics.total_quantity_within_30m.quantity }}</span><br>▴<br></p>
           <p style="font-size:12px;">{{ t('Online developers') }}
@@ -43,6 +45,13 @@
     </div>
     <div class="summary">
       <div class="summary-inner" style="left:190px;">
+        <a class="juejin" title="赞助商" href="https://juejin.im/welcome/frontend?utm_source=vux&utm_medium=word&utm_content=qianduan&utm_campaign=q2_website" target="_blank">
+          <span class="juejin-name">前端社区</span><span class="juejin-url">juejin.im</span>
+          <br>
+          <span class="juejin-desc">
+         Vue 最佳实践&nbsp;一线大厂技术分享
+          </span>
+        </a>
         <div v-show="!isComponentPage" v-for="chapter in summary" :data-category="currentCategory" class="chapter">
           <p class="chapter-title">{{chapter.title}}</p>
           <ul class="chapter-page">

diff --git a/docs/src/app.css b/docs/src/app.css
@@ -128,6 +128,8 @@ tr.slot-disabled {
 
 .chapter {
   margin-bottom: 15px;
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
 .chapter-title {
@@ -272,7 +274,6 @@ tr.slot-disabled {
 }
 .summary-inner {
   height: 100vh;
-  padding: 15px;
   width: 190px;
   box-sizing: border-box;
   overflow: scroll;
@@ -471,7 +472,7 @@ div.tip {
   padding-left: 0;
   margin: 0;
   line-height: 35px;
-  height: 40px
+  height: 47px
 }
 
 .nav-list .sep {
@@ -494,7 +495,8 @@ div.tip {
 
 .nav-list .nav-item>a,.nav-list .nav-item>div {
   color: #666;
-  height: 40px;
+  height: 47px;
+  line-height: 47px;
   font-size: 14px;
   border-bottom: 3px solid transparent;
   display: block;
@@ -876,3 +878,32 @@ a.anchor {
   font-size: 12px;
   cursor: pointer;
 }
+
+.juejin {
+  text-decoration: none;
+  padding-bottom: 4px;
+  padding: 5px;
+  padding-left: 10px;
+  background: rgba(8, 126, 254, .12);
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.juejin:hover .juejin-desc {
+  color: #007fff;
+}
+
+.juejin-name {
+  color: #007fff;
+}
+
+.juejin-url {
+  color: #888;
+  padding-left: 15px;
+  font-size: 12px;
+}
+
+.juejin-desc {
+  font-size: 12px;
+}