doc: add surelyvue

Author: tangjinzhou

site/src/components/rice/top_rice.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="show">
     <template v-if="ads.length">
       <a-carousel autoplay>
         <template v-for="ad in ads" :key="ad.href">
@@ -35,6 +35,7 @@ export default {
   props: ['isCN', 'isMobile'],
   data() {
     return {
+      show: false,
       showGoogleAd: location.host.indexOf('antdv.com') > -1,
       cnAds: [
         {

site/src/components/surelyVue.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :class="cls">
+    <div class="logo">
+      <img height="80" src="https://www.surely.cool/surely-vue-logo.png" alt="" />
+    </div>
+    <div class="desc">
+      <div class="title">高性能 Surely Vue</div>
+      <div class="sub-title">
+        构建更快的网站
+        <br />
+        更快的构建网站
+      </div>
+    </div>
+  </div>
+  <div class="placeholder"></div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { PropType } from 'vue';
+export default defineComponent({
+  props: {
+    type: { type: String as PropType<'x' | 'y'> },
+  },
+  setup(props) {
+    return {
+      cls: {
+        wrap: true,
+        [`wrap-${props.type}`]: true,
+      },
+    };
+  },
+});
+</script>
+<style scoped>
+.wrap {
+  display: flex;
+  background-color: #f4f8fa;
+  padding: 10px 30px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 100%;
+  height: 100px;
+  overflow: hidden;
+}
+.placeholder {
+  height: 100px;
+}
+.desc {
+  margin-left: 20px;
+  overflow: hidden;
+}
+.title {
+  font-size: 18px;
+}
+.sub-title {
+  opacity: 0.7;
+  margin-top: 5px;
+}
+</style>

site/src/layouts/index.vue

@@ -24,7 +24,10 @@
         <a-col :xxl="4" :xl="5" :lg="6" :md="6" :sm="24" :xs="24" class="main-menu">
           <a-affix>
             <section class="main-menu-inner">
-              <Sponsors :is-c-n="isZhCN" />
+              <!-- <Sponsors :is-c-n="isZhCN" /> -->
+              <div>
+                <surelyVueVue />
+              </div>
               <Menu :menus="dataSource" :active-menu-item="activeMenuItem" :is-zh-c-n="isZhCN" />
             </section>
           </a-affix>
@@ -87,6 +90,7 @@ import Sponsors from '../components/rice/sponsors.vue';
 import RightBottomAd from '../components/rice/right_bottom_rice.vue';
 import { CloseOutlined, MenuOutlined } from '@ant-design/icons-vue';
 import ThemeIcon from './ThemeIcon.vue';
+import surelyVueVue from '../components/surelyVue.vue';
 
 const rControl = /[\u0000-\u001f]/g;
 const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g;
@@ -105,6 +109,7 @@ export default defineComponent({
     CloseOutlined,
     MenuOutlined,
     ThemeIcon,
+    surelyVueVue,
   },
   setup() {
     const visible = ref(false);