Doc: add sponsors (#9578)

examples/assets/images/duohui.svg

@@ -0,0 +1,24 @@
+<svg width="98" height="150" viewBox="0 0 98 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>duohui-element</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-2216 140)">
+<clipPath id="clip-0" clip-rule="evenodd">
+<path d="M 2216 -140L 2314 -140L 2314 10L 2216 10L 2216 -140Z" fill="#FFFFFF"/>
+</clipPath>
+<g id="duohui-element" clip-path="url(#clip-0)">
+<path d="M 2216 -140L 2314 -140L 2314 10L 2216 10L 2216 -140Z" fill="#FFFFFF"/>
+<g id="Duohui Icon 2">
+<g id="Vector">
+<use xlink:href="#path0_fill" transform="matrix(1.26636 0 0 1.21929 2230 -75.7038)" fill="#3A88FD"/>
+</g>
+<g id="Vector">
+<use xlink:href="#path1_fill" transform="matrix(1.41534 0 0 1.21834 2226 -112)" fill="#35AFFB"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" fill-rule="evenodd" d="M 25.7722 1.00635C 26.2 0.374983 26.8949 -2.6613e-07 27.6349 -2.6613e-07C 28.3755 -2.6613e-07 29.0699 0.374983 29.4983 1.00635C 34.409 8.24964 47.798 27.9964 54.5986 38.0262C 55.3878 39.1901 55.4896 40.7162 54.8623 41.983C 54.235 43.2498 52.9833 44.0452 51.6178 44.0452C 39.6694 44.0452 15.601 44.0452 3.6521 44.0452C 2.28712 44.0452 1.03545 43.2498 0.408173 41.983C -0.219106 40.7162 -0.117353 39.1901 0.671804 38.0262C 7.47242 27.9964 20.8609 8.24964 25.7722 1.00635Z"/>
+<path id="path1_fill" fill-rule="evenodd" d="M 24.9939 1.44703C 25.6137 0.533117 26.5572 -3.01614e-07 27.5551 -3.01614e-07C 28.5535 -3.01614e-07 29.497 0.533117 30.1168 1.44703C 35.4674 9.33854 47.8725 27.6342 54.4043 37.2681C 55.1825 38.4157 55.3299 39.982 54.7847 41.2999C 54.2389 42.6185 53.096 43.4556 51.8426 43.4556C 39.9023 43.4556 15.2084 43.4556 3.26811 43.4556C 2.01471 43.4556 0.871739 42.6185 0.325978 41.2999C -0.219783 39.982 -0.0717813 38.4157 0.70639 37.2681C 7.23818 27.6342 19.6433 9.33854 24.9939 1.44703Z"/>
+</defs>
+</svg>

examples/components/side-nav.vue

@@ -63,6 +63,37 @@
           }
         }
       }
+  
+      &.sponsors {
+        & > .sub-nav {
+          margin-top: -10px;
+        }
+        
+        & > a {
+          color: #777;
+          font-weight: 300;
+          font-size: 14px;
+        }
+        
+        .nav-item {
+          display: inline-block;
+        
+          a {
+            height: auto;
+            display: inline-block;
+            vertical-align: middle;
+            margin: 8px 12px 12px 0;
+
+            img {
+              width: 36px;
+            }
+          }
+
+          &:nth-child(2) a img {
+            width: 42px;
+          }
+        }
+      }
     }
 
     .nav-group__title {
@@ -91,6 +122,21 @@
     :class="{ 'is-fade': isFade }"
     :style="navStyle">
     <ul>
+      <li class="nav-item sponsors">
+        <a>Sponsors</a>
+        <ul class="pure-menu-list sub-nav">
+          <li class="nav-item">
+            <a href="https://tipe.io/?ref=element" target="_blank">
+              <img src="~examples/assets/images/tipe.svg" alt="tipe.io">
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="sponsor" href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
+              <img src="~examples/assets/images/duohui.svg" alt="tipe.io">
+            </a>
+          </li>
+        </ul>
+      </li>
       <li class="nav-item" v-for="item in data">
         <a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
         <a v-if="item.href" :href="item.href" target="_blank">{{item.name}}</a>

examples/pages/template/index.tpl

@@ -19,10 +19,14 @@
       margin: 10px 0 5px;
     }
   }
-  .sponsor {
-    margin: 0 auto 50px;
+  .sponsors {
     display: flex;
-    width: 400px;
+    justify-content: center;
+  }
+  .sponsor {
+    margin: 0 20px 50px;
+    display: inline-flex;
+    width: 300px;
     height: 100px;
     justify-content: center;
 
@@ -284,13 +288,22 @@
         <img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
       </div>
     </div>
-    <a class="sponsor" href="https://tipe.io/?ref=element" target="_blank">
-      <img width="35px" src="~examples/assets/images/tipe.svg" alt="tipe.io">
-      <div>
-        <p>Sponsored by Tipe.io</p>
-        <p>Next Generation API-first CMS</p>
-      </div>
-    </a>
+    <div class="sponsors">
+      <a class="sponsor" href="https://tipe.io/?ref=element" target="_blank">
+        <img width="35px" src="~examples/assets/images/tipe.svg" alt="tipe.io">
+        <div>
+          <p>Sponsored by Tipe.io</p>
+          <p>Next Generation API-first CMS</p>
+        </div>
+      </a>
+      <a class="sponsor" href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
+        <img width="45px" src="~examples/assets/images/duohui.svg" alt="tipe.io">
+        <div>
+          <p>Sponsored by 多会</p>
+          <p>炫酷的新一代活动票务系统</p>
+        </div>
+      </a>
+    </div>
     <div class="cards">
       <ul class="container">
         <li>