百色农校

components/AppHeader/TopBar/TopBar.vue

@@ -1,28 +1,62 @@
 <script setup lang="ts">
-import {useConfigInfo} from "~/composables/configState";
-import { Search } from '@element-plus/icons-vue'
+import {useConfigInfo, useMenu} from "~/composables/configState";
+import { Search,Message, Fold } from '@element-plus/icons-vue'
 const config = useConfigInfo();
 const keyword = ref<string>('');
 const i18n = useI18n();
+const navigations = useMenu();
+const drawer = ref<boolean>(false);
+
 const onSearch = () => {
   window.location.href = `/${i18n.locale.value}/search/${keyword.value}`;
 }
 </script>
 
 <template>
-  <div class=" bg-blue-50 text-gray-400 px-2 py-1" v-if="config.showTopBar == 'true'">
-    <div class="w1200 flex justify-between items-center">
-      <span>{{ config?.topWelcomeInfo }}</span>
+  <div class="head-bg bg-blue-50 text-gray-400 px-2">
+    <div class=" flex justify-between items-center xl:w-screen-xl m-auto sm:px-0 w-full">
+      <span class="text-white">{{ config?.topWelcomeInfo }}</span>
       <div class="lang flex justify-center text-center items-center">
-        <el-space>
-          <div class="search">
-            <div class="fl mr-5">
+        <el-space size="large">
+          <a :href="`/zh?spm=zh_CN`" class="text-xs flex items-center hidden-sm-and-down"><el-icon color="#fff" size="16"><Message /></el-icon><span class="text-white px-1">校长信箱</span></a>
+          <a :href="`https://old.gxbsnx.com`" class="text-xs flex items-center hidden-sm-and-down"><el-icon color="#fff" size="16"><Message /></el-icon><span class="text-white px-1">旧版</span></a>
+          <div class="search mx-5 hidden-sm-and-down">
+            <div class="fl">
               <el-input v-model="keyword" :placeholder="`${$t('searchKeywords')}...`" :suffix-icon="Search" @change="onSearch" />
             </div>
           </div>
-          <a :href="`/zh?spm=zh_CN`" class="text-sm"><span class="text-gray-500">中文版</span></a>
-          <el-divider direction="vertical" />
-          <a :href="`/en?spm=en_US`" class="text-sm"><span class="text-gray-500">English</span></a>
+          <!-- 移动端 -->
+          <div class="hidden-sm-and-up">
+            <div class="hidden-sm-and-up mx-5 sm:mx-0">
+              <div class="el-dropdown-link flex items-center" @click="drawer = true">
+                <el-icon color="white" :size="24"><Fold /></el-icon>
+              </div>
+              <el-drawer
+                v-model="drawer"
+                :size="290"
+              >
+                <div id="menu">
+                  <el-menu
+                    currentIndex="/product"
+                    :unique-opened="true"
+                  >
+                    <template v-for="(item,index) in navigations" :key="index">
+                      <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${index}`">
+                        <template #title><span>{{ item.title }}</span></template>
+                        <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${subIndex}`">
+                          <el-space>
+                            <el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
+                            <a :href="navTo(sub)">{{ sub.title }}</a>
+                          </el-space>
+                        </el-menu-item>
+                      </el-sub-menu>
+                      <el-menu-item v-else :index="`${index}`"><a :href="navTo(item)">{{ item.title }}</a></el-menu-item>
+                    </template>
+                  </el-menu>
+                </div>
+              </el-drawer>
+            </div>
+          </div>
         </el-space>
       </div>
     </div>