diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
index cd36fc2b37f..9c154e2528c 100644
--- a/packages/varlet-cli/site/mobile/App.vue
+++ b/packages/varlet-cli/site/mobile/App.vue
@@ -2,7 +2,7 @@
   <div style="position: relative">
     <header>
       <var-app-bar :title="componentName" title-position="center">
-        <template #left>
+        <template #left v-if="isReturnIcon">
           <var-button round @click="toHome" color="transparent" text-color="#ffffff" text>
             <var-icon name="chevron-left" :size="28" />
           </var-button>
@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, Ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import Icon from '@varlet/ui/es/icon'
 import AppBar from '@varlet/ui/es/app-bar'
 import Button from '@varlet/ui/es/button'
@@ -34,13 +34,14 @@ export default defineComponent({
   setup() {
     const componentName: Ref<string> = ref('')
     const route = useRoute()
+    const isReturnIcon: Ref<boolean> = ref(false)
+    const router = useRouter()
 
     const isPhone: Ref<boolean> = ref(false)
     isPhone.value = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
 
     const toHome = () => {
-      // todo 返回首页
-      alert('返回首页')
+      router.go(-1)
     }
 
     watch(
@@ -49,12 +50,14 @@ export default defineComponent({
         const index = to.lastIndexOf('/')
         const componentNameInner = to.slice(index + 1).replace(/-([a-z])/g, (all: string, i: string) => i.toUpperCase())
         componentName.value = componentNameInner[0]?.toUpperCase() + componentNameInner.slice(1)
+        isReturnIcon.value = !(componentName.value.toLowerCase() === 'home')
       }
     )
 
     return {
       componentName,
       isPhone,
+      isReturnIcon,
       toHome,
     }
   },
diff --git a/packages/varlet-cli/site/mobile/main.ts b/packages/varlet-cli/site/mobile/main.ts
index 3b03c85ea2c..1c793f462ef 100644
--- a/packages/varlet-cli/site/mobile/main.ts
+++ b/packages/varlet-cli/site/mobile/main.ts
@@ -20,6 +20,7 @@ const router = createRouter({
   history: createWebHashHistory(),
   routes,
 })
+
 router.beforeEach((to) => {
   let isPhone = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
   if (!isPhone && window.self === window.top) {
@@ -28,11 +29,13 @@ router.beforeEach((to) => {
 })
 
 router.afterEach((to) => {
-  if (to.path === '/home' && to.query.path) {
-    console.log(to.path, to.query.path)
-    window.top['router'].replace(`/${to.query.language}/${to.query.path}`)
-  } else {
-    window.top['router'].replace(`/${to.query.language}${to.path}`)
+  let isPhone = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
+  if (!isPhone) {
+    if (to.path === '/home' && to.query.path) {
+      window.top['router'].replace(`/${to.query.language}/${to.query.path}`)
+    } else {
+      window.top['router'].replace(`/${to.query.language}${to.path}`)
+    }
   }
 })
 
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
index 2ed4e194a9c..3e4a31fbb2e 100644
--- a/packages/varlet-cli/site/pc/App.vue
+++ b/packages/varlet-cli/site/pc/App.vue
@@ -5,14 +5,14 @@
         <img :src="header.logo" alt="" />
         <span>{{ title }}</span>
       </span>
-      <span class="varlet-site-header__nav">
-        <var-menu :offset-y="40" v-model:show="offsetY">
-          <div class="varlet-site-header__nav-style" @click="offsetY = true">
-            <var-icon name="translate" size="26px" color="#ffffff" />
-            <var-icon name="chevron-down" color="#ffffff"></var-icon>
-          </div>
-          <template #menu>
-            <div class="language-list">
+      <div class="varlet-site-header__nav">
+        <div class="varlet-site-header__nav-style" @mouseenter="isOpenMenu = true" @mouseleave="isOpenMenu = false">
+          <var-icon name="translate" size="26px" color="#ffffff" />
+
+          <var-icon name="chevron-down" color="#ffffff" />
+
+          <transition name="fade">
+            <div class="language-list" v-if="isOpenMenu">
               <var-cell
                 v-for="(value, key) in languageList"
                 :key="key"
@@ -22,14 +22,14 @@
                 {{ value }}
               </var-cell>
             </div>
-          </template>
-        </var-menu>
+          </transition>
+        </div>
         <div class="varlet-site-header__nav-link">
           <a target="_blank" href="https://github.com/haoziqaq/varlet" class="varlet-site-header__link">
             <var-icon name="github" color="#ffffff" :size="28"></var-icon>
           </a>
         </div>
-      </span>
+      </div>
     </div>
     <div class="varlet-site-content">
       <div class="varlet-site-nav" :ref="nav">
@@ -51,12 +51,14 @@
       </div>
       <router-view />
       <div class="varlet-site-mobile">
-        <div class="varlet-site-empty"></div>
-        <div class="varlet-site-mobile-content">
-          <iframe :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&path=${path}`"></iframe>
-        </div>
-        <div class="varlet-site-mobile-image">
-          <img src="./assets/images/mobile.png" />
+        <div class="varlet-site-mobile-frame">
+          <div class="varlet-site-empty"></div>
+          <div class="varlet-site-mobile-content">
+            <iframe :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&path=${path}`"></iframe>
+          </div>
+          <div class="varlet-site-mobile-image">
+            <img src="./assets/images/mobile.png" />
+          </div>
         </div>
       </div>
     </div>
@@ -111,7 +113,7 @@ export default defineComponent({
     const { pc = {}, title: configTitle } = config
     const { header: configHeader = { i18nButton: {}, logo: '', search: {} }, menu: configMenu = [] } = pc
     const languageList: Ref<Language> = ref({})
-    const offsetY: Ref<boolean> = ref(false)
+    const isOpenMenu: Ref<boolean> = ref(false)
     const path: Ref<string | null> = ref(null)
 
     const isPhone: Ref<boolean> = ref(false)
@@ -157,7 +159,7 @@ export default defineComponent({
       language.value = key
       const pathArr = route.fullPath.split('/')
       componentName.value = pathArr[pathArr.length - 1]
-      offsetY.value = false
+      isOpenMenu.value = false
     }
 
     onMounted(() => {
@@ -182,7 +184,7 @@ export default defineComponent({
       versionList,
       isHideVersion,
       languageList,
-      offsetY,
+      isOpenMenu,
       path,
       nav,
       changeRoute,
@@ -201,6 +203,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: 'Roboto', 'Noto Sans SC', sans-serif;
+  overflow-y: hidden;
 }
 
 iframe {
@@ -213,19 +216,23 @@ iframe {
 .varlet {
   &-site {
     &-mobile {
-      flex: 0 0 432px;
-      transform: scale(0.66);
-      position: relative;
-      height: 863px;
-      align-self: center;
+      padding: 20px 30px;
+      overflow-y: auto;
+
+      &-frame {
+        width: 369px;
+        transform: scale(1);
+        position: relative;
+        height: 731px;
+      }
 
       &-content {
-        height: 780px;
+        height: 665px;
         position: absolute;
         z-index: -2;
-        top: 57px;
-        width: calc(100% - 57px);
-        margin-left: 28px;
+        top: 44px;
+        width: calc(100% - 49px);
+        margin-left: 24px;
       }
 
       &-image {
@@ -242,12 +249,12 @@ iframe {
     }
 
     &-empty {
-      height: 32px;
-      width: calc(100% - 40px);
-      margin-left: 20px;
-      background-color: @color-primary;
+      height: 25px;
+      width: calc(100% - 49px);
+      margin-left: 24px;
+      background-color: #2979ff;
       position: absolute;
-      top: 26px;
+      top: 19px;
       z-index: -1;
     }
 
@@ -293,6 +300,8 @@ iframe {
           display: flex;
           align-items: center;
           padding: 0 10px;
+          position: relative;
+          cursor: pointer;
 
           &:hover {
             background: rgba(255, 255, 255, 0.2);
@@ -598,6 +607,9 @@ iframe {
   cursor: pointer;
   color: #666;
   border-radius: 2px;
+  position: absolute;
+  top: 40px;
+  left: 0;
 
   &__active {
     background: #2b79fc21;
@@ -611,4 +623,36 @@ iframe {
     }
   }
 }
+
+.fade-enter-active {
+  animation-name: fade-in;
+  animation-duration: 0.5s;
+}
+
+.fade-leave-active {
+  animation-name: fade-leave;
+  animation-duration: 0.5s;
+}
+
+@keyframes fade-in {
+  0% {
+    top: 30px;
+    opacity: 0;
+  }
+  100% {
+    top: 40px;
+    opacity: 1;
+  }
+}
+
+@keyframes fade-leave {
+  0% {
+    top: 40px;
+    opacity: 1;
+  }
+  100% {
+    top: 30px;
+    opacity: 0;
+  }
+}
 </style>
diff --git a/packages/varlet-ui/src/app-bar/example/index.vue b/packages/varlet-ui/src/app-bar/example/index.vue
index cdbbc024b86..042b4473507 100644
--- a/packages/varlet-ui/src/app-bar/example/index.vue
+++ b/packages/varlet-ui/src/app-bar/example/index.vue
@@ -35,8 +35,8 @@
     </template>
 
     <template #right>
-      <var-menu :offset-y="38" :offset-x="-20" v-model:show="offsetY">
-        <var-button round text color="transparent" text-color="#ffffff" @click="offsetY = true">
+      <var-menu :offset-y="38" :offset-x="-45" v-model:show="offsetY">
+        <var-button round text color="transparent" text-color="#ffffff" @click="changeOffset">
           <var-icon name="menu" :size="24" />
         </var-button>
 
@@ -76,10 +76,7 @@ export default {
   },
   setup() {
     const offsetY = ref(false)
-    const menuList = ref([
-      { label: pack.value.options1, value: 'menu1' },
-      { label: pack.value.options2, value: 'menu2' },
-    ])
+    const menuList = ref([])
 
     const searchData = () => {
       Snackbar({
@@ -95,6 +92,14 @@ export default {
       })
     }
 
+    const changeOffset = () => {
+      menuList.value = [
+        { label: pack.value.options1, value: 'menu1' },
+        { label: pack.value.options2, value: 'menu2' },
+      ]
+      offsetY.value = true
+    }
+
     watchLang(use)
 
     return {
@@ -103,6 +108,7 @@ export default {
       pack,
       searchData,
       goBack,
+      changeOffset,
     }
   },
 }
diff --git a/packages/varlet-ui/src/home/example/index.vue b/packages/varlet-ui/src/home/example/index.vue
index 3321e1aa500..5c7965a0a95 100644
--- a/packages/varlet-ui/src/home/example/index.vue
+++ b/packages/varlet-ui/src/home/example/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="space"></div>
 
-  <var-cell v-for="component in components" :key="component.text">
+  <var-cell v-for="component in components" :key="component.text" @click="toComponent(component)">
     <template #extra>
       <var-icon name="chevron-right" size="14" />
     </template>
     <template #default>
-      {{ component.text['zh-CN'] }}
+      {{ component.text[lang] }}
     </template>
   </var-cell>
 
@@ -17,6 +17,7 @@
 import Cell from '../../cell'
 import Icon from '../../icon'
 import Ripple from '../../ripple'
+import { useRouter } from 'vue-router'
 import { reactive, ref } from 'vue'
 import { watchLang, watchPlatform } from '../../utils/components'
 
@@ -34,25 +35,34 @@ export default {
     const components = reactive(configComponents)
     const lang = ref('zh-CN')
     const platform = ref('mobile')
+    const router = useRouter()
 
     watchLang((newValue) => {
       lang.value = newValue
-
-      console.log(lang.value)
     })
 
     watchPlatform((newValue) => {
       platform.value = newValue
-
-      console.log(platform.value)
     })
 
+    const toComponent = (component) => {
+      router.push({
+        path: `/${component.doc}`,
+        query: {
+          language: lang.value,
+          platform: platform.value,
+          path: component.doc,
+        },
+      })
+    }
+
     return {
       components,
       platform,
       lang,
+      toComponent,
     }
-  }
+  },
 }
 </script>
 
@@ -63,5 +73,9 @@ export default {
 
 .var-cell {
   cursor: pointer;
+
+  &:hover {
+    background: #eee;
+  }
 }
 </style>
diff --git a/packages/varlet-ui/src/rate/props.ts b/packages/varlet-ui/src/rate/props.ts
index ee07c82849a..6950d78beb0 100644
--- a/packages/varlet-ui/src/rate/props.ts
+++ b/packages/varlet-ui/src/rate/props.ts
@@ -40,7 +40,7 @@ export const props = {
   // 图标间隔
   marginRight: {
     type: [String, Number],
-    default: '4',
+    default: '2',
   },
 
   //  是否使用半评分
diff --git a/packages/varlet-ui/src/rate/rate.less b/packages/varlet-ui/src/rate/rate.less
index e17880c7170..39e564c1658 100644
--- a/packages/varlet-ui/src/rate/rate.less
+++ b/packages/varlet-ui/src/rate/rate.less
@@ -1,5 +1,10 @@
-@import "../styles/var";
+@import '../styles/var';
 
 .var-rate {
   display: flex;
+
+  &--content {
+    padding: 2px;
+    box-sizing: unset;
+  }
 }