gxwebsoft/template-10490
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成适配移动端

Browse Source
This commit is contained in:
赵忠林
2025-02-22 22:11:19 +08:00
parent 98758e89e2
commit 1f79c93859
62 changed files with 549 additions and 2973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/AppFooter/Copyright/Copyright.vue
View File

@@ -5,12 +5,13 @@ const config = useConfigInfo();
</script>
<template>
<div class="w-full bg-black">
<!-- PC端 -->
<div class="w-full sm:bg-black hidden-sm-and-down">
<div class="xl:w-screen-xl flex flex-col justify-between m-auto">
<!-- 友情链接 -->
<Link />
<!-- 版权信息 -->
<div class="w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex sm:flex-row flex-col-reverse sm:justify-between justify-center items-center sm:py-3 text-center text-sm">
<div class="w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex flex-row sm:justify-between justify-center items-center sm:py-3 text-center text-sm">
<div class="text-gray-400 sm:gap-xs leading-7 flex flex-col sm:flex-row">
<span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
<nuxt-link to="https://beian.miit.gov.cn/" class="visited:text-gray-400 hover:text-gray-200" target="_blank"> <span>备案号：{{ config?.icpNo }}</span></nuxt-link>
@@ -21,6 +22,23 @@ const config = useConfigInfo();
</div>
</div>
</div>
<!-- 移动端 -->
<div class="w-full sm:bg-black hidden-sm-and-up">
<div class="xl:w-screen-xl flex flex-col justify-between m-auto">
<!-- 友情链接 -->
<Link />
<!-- 版权信息 -->
<div class="w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex flex-col sm:justify-between justify-center items-center py-3 text-center text-sm">
<div class="text-gray-400 sm:gap-xs leading-7 flex flex-col sm:flex-row">
<span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
<nuxt-link to="https://beian.miit.gov.cn/" class="visited:text-gray-400 hover:text-gray-200" target="_blank"> <span>备案号：{{ config?.icpNo }}</span></nuxt-link>
</div>
<div class="tools flex items-center opacity-80 hover:opacity-90 text-gray-300 text-xs mt-5">
Powered by <a rel="nofollow" href="https://site.websoft.top" target="_blank" class="visited:text-gray-300 hover:text-gray-200 ml-1">云·企业官网</a>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">

22
components/AppFooter/Link/Link.vue
View File

@@ -1,3 +1,13 @@
<template>
<el-space class="text-gray-400 text-sm hidden-sm-and-down">
<span>友情链接：</span>
<template v-for="(item,index) in list" :key="index">
<nuxt-link :to="item.url" target="_blank" class="link:text-gray-400 visited:text-gray-400 hover:text-gray-200">{{ item.name }}</nuxt-link>
<el-divider v-if="list.length-1 != index" direction="vertical" style="border-color: #9ca3af;" />
</template>
</el-space>
<div class="border-b-solid bg-gray-700 border-1 mt-4 opacity-40 hidden-sm-and-down"></div>
</template>
<script setup lang="ts">
import {listCmsLink} from "~/api/cms/cmsLink";
import type {CmsLink} from "~/api/cms/cmsLink/model";
@@ -7,18 +17,6 @@ listCmsLink({}).then(res => {
list.value = res;
})
</script>
<template>
<el-space class="text-gray-400 text-sm">
<span>友情链接：</span>
<template v-for="(item,index) in list" :key="index">
<nuxt-link :to="item.url" target="_blank" class="link:text-gray-400 visited:text-gray-400 hover:text-gray-200">{{ item.name }}</nuxt-link>
<el-divider v-if="list.length-1 != index" direction="vertical" style="border-color: #9ca3af;" />
</template>
</el-space>
<div class="border-b-solid bg-gray-700 border-1 mt-4 opacity-40"></div>
</template>
<style scoped lang="scss">
</style>

43
components/AppFooter/SubMenu/SubMenu.vue
View File

@@ -1,11 +1,6 @@
<script setup lang="ts">
import {useConfigInfo, useSubMenu} from "~/composables/configState";
const subMenu = useSubMenu();
const config = useConfigInfo();
</script>
<template>
<div class="w-full bg-black h-[300px] py-5">
<!-- PC端 -->
<div class="w-full bg-black h-[300px] py-5 hidden-sm-and-down">
<div class="xl:w-screen-xl flex justify-between m-auto">
<template v-for="(item,index) in subMenu">
<div class="item">
@@ -23,8 +18,38 @@ const config = useConfigInfo();
</div>
</div>
</div>
<!-- 移动端 -->
<el-collapse v-model="activeNames" accordion class="hidden-sm-and-up my-collapse">
<template v-for="(item,index) in subMenu">
<el-collapse-item :title="item.title" :name="index">
<template v-if="item.children">
<template v-for="sub in item.children">
<nuxt-link :to="sub.path" class="block cursor-pointer text-gray-600 hover:text-gray-900 py-0.5">
<span class="px-4">{{ sub.title }}</span>
</nuxt-link>
</template>
</template>
</el-collapse-item>
</template>
</el-collapse>
</template>
<script setup lang="ts">
import {useConfigInfo, useSubMenu} from "~/composables/configState";
const subMenu = useSubMenu();
const config = useConfigInfo();
const activeNames = ref(['1'])
</script>
<style scoped lang="scss">
<style lang="scss">
.my-collapse{
.el-collapse-item__header{
background-color: transparent !important;
}
.el-collapse-item__wrap{
background-color: transparent !important;
}
.el-collapse-item{
padding: 0 16px;
}
}
</style>

2
components/AppFooter/ToolBar/ToolBar.vue
View File

@@ -5,7 +5,7 @@ const setting = useSetting()
</script>
<template>
<div id="toolbar" v-if="setting.floatTool">
<div id="toolbar" v-if="setting.floatTool" class="hidden-sm-and-down">
<ul>
<li><a :href="`http://wpa.qq.com/msgrd?v=3&amp;uin=${config.qqCode}&amp;site=qq&amp;menu=yes`" target="_blank">
<span class="icon-font icon-qq"></span>