|
|
@@ -2,7 +2,7 @@
|
|
|
<view :class="['page-wrapper', { dark: isDark }]">
|
|
|
<cwg-match-media :max-width="991" v-if="!isLoginPage">
|
|
|
<cwg-pc-header @open-right-drawer="openRightDrawer" @open-left-drawer="openLeftDrawer" class="header-box"
|
|
|
- :sidebarVisible="sidebarVisible" />
|
|
|
+ :sidebarVisible="sidebarVisible" />
|
|
|
<!-- 占位-->
|
|
|
<view class="fixed"></view>
|
|
|
</cwg-match-media>
|
|
|
@@ -38,154 +38,154 @@
|
|
|
<view :style="{ height: isTabBarPage ? '60px' : '0px' }" />
|
|
|
</view>
|
|
|
<cwg-right-drawer v-if="!isLoginPage" ref="rightDrawerRef" @navigate="handleDrawerNavigate"
|
|
|
- @logout="handleDrawerLogout" />
|
|
|
+ @logout="handleDrawerLogout" />
|
|
|
<cwg-notice-drawer v-if="!isLoginPage" ref="noticeDrawerRef" @navigate="handleDrawerNavigate"
|
|
|
- @logout="handleDrawerLogout" />
|
|
|
+ @logout="handleDrawerLogout" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, computed } from 'vue'
|
|
|
- import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
|
- import useRoute, { updateRoute } from '@/hooks/useRoute'
|
|
|
- import useRouter from '@/hooks/useRouter'
|
|
|
- import useUserStore from '@/stores/use-user-store'
|
|
|
- import { userApi } from '@/api/user'
|
|
|
- import useGlobalStore from '@/stores/use-global-store'
|
|
|
- import LanguageDropdown from './LanguageDropdown.vue'
|
|
|
- import PrefectInfo from '@/components/PrefectInfo.vue'
|
|
|
- import IbInfo from '@/components/IbInfo.vue'
|
|
|
-
|
|
|
- const globalStore = useGlobalStore()
|
|
|
- const router = useRouter()
|
|
|
- const userStore = useUserStore()
|
|
|
-
|
|
|
- const props = defineProps({
|
|
|
- // 是否固定顶部导航栏
|
|
|
- isHeaderFixed: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- // 是否登录页,登录页不显示侧边栏和顶部导航,注册忘记密码等页面
|
|
|
- isLoginPage: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- // 是否含有padding 默认有
|
|
|
- isContentPadding: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
- // 主内容背景颜色
|
|
|
- bgColor: {
|
|
|
- type: String,
|
|
|
- default: '',
|
|
|
- },
|
|
|
- })
|
|
|
- const isDark = computed(() => globalStore.theme === 'dark')
|
|
|
- const isTabBarPage = ref(false)
|
|
|
-
|
|
|
-
|
|
|
- const rightDrawerRef = ref<any>(null)
|
|
|
- const noticeDrawerRef = ref<any>(null)
|
|
|
- uni.$on('open-notice-drawer', (data) => {
|
|
|
- console.log(121212)
|
|
|
- noticeDrawerRef.value?.open()
|
|
|
- })
|
|
|
- uni.$on('open-right-drawer', (data) => {
|
|
|
- openRightDrawer()
|
|
|
- })
|
|
|
-
|
|
|
- function openRightDrawer() {
|
|
|
- rightDrawerRef.value?.open()
|
|
|
- }
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
|
+import useRoute, { updateRoute } from '@/hooks/useRoute'
|
|
|
+import useRouter from '@/hooks/useRouter'
|
|
|
+import useUserStore from '@/stores/use-user-store'
|
|
|
+import { userApi } from '@/api/user'
|
|
|
+import useGlobalStore from '@/stores/use-global-store'
|
|
|
+import LanguageDropdown from './LanguageDropdown.vue'
|
|
|
+import PrefectInfo from '@/components/PrefectInfo.vue'
|
|
|
+import IbInfo from '@/components/IbInfo.vue'
|
|
|
+
|
|
|
+const globalStore = useGlobalStore()
|
|
|
+const router = useRouter()
|
|
|
+const userStore = useUserStore()
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ // 是否固定顶部导航栏
|
|
|
+ isHeaderFixed: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ // 是否登录页,登录页不显示侧边栏和顶部导航,注册忘记密码等页面
|
|
|
+ isLoginPage: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ // 是否含有padding 默认有
|
|
|
+ isContentPadding: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 主内容背景颜色
|
|
|
+ bgColor: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+})
|
|
|
+const isDark = computed(() => globalStore.theme === 'dark')
|
|
|
+const isTabBarPage = ref(false)
|
|
|
+
|
|
|
+
|
|
|
+const rightDrawerRef = ref<any>(null)
|
|
|
+const noticeDrawerRef = ref<any>(null)
|
|
|
+uni.$on('open-notice-drawer', (data) => {
|
|
|
+ console.log(121212)
|
|
|
+ noticeDrawerRef.value?.open()
|
|
|
+})
|
|
|
+uni.$on('open-right-drawer', (data) => {
|
|
|
+ openRightDrawer()
|
|
|
+})
|
|
|
+
|
|
|
+function openRightDrawer() {
|
|
|
+ rightDrawerRef.value?.open()
|
|
|
+}
|
|
|
|
|
|
- const sidebarVisible = ref(false)
|
|
|
+const sidebarVisible = ref(false)
|
|
|
|
|
|
- function openLeftDrawer() {
|
|
|
- sidebarVisible.value = !sidebarVisible.value
|
|
|
- }
|
|
|
+function openLeftDrawer() {
|
|
|
+ sidebarVisible.value = !sidebarVisible.value
|
|
|
+}
|
|
|
|
|
|
- function handleDrawerNavigate(path: string) {
|
|
|
- router.push(path)
|
|
|
- }
|
|
|
+function handleDrawerNavigate(path: string) {
|
|
|
+ router.push(path)
|
|
|
+}
|
|
|
|
|
|
- async function handleDrawerLogout() {
|
|
|
- try {
|
|
|
- const res = await userApi.logout()
|
|
|
- if (res.code === 200) {
|
|
|
- userStore.clearUserInfo()
|
|
|
- router.push('/pages/login/index')
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
+async function handleDrawerLogout() {
|
|
|
+ try {
|
|
|
+ const res = await userApi.logout()
|
|
|
+ if (res.code === 200) {
|
|
|
userStore.clearUserInfo()
|
|
|
router.push('/pages/login/index')
|
|
|
}
|
|
|
+ } catch (error) {
|
|
|
+ userStore.clearUserInfo()
|
|
|
+ router.push('/pages/login/index')
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- onLoad(() => {
|
|
|
- updateRoute()
|
|
|
- })
|
|
|
+onLoad(() => {
|
|
|
+ updateRoute()
|
|
|
+})
|
|
|
|
|
|
- onShow(() => {
|
|
|
- updateRoute()
|
|
|
- })
|
|
|
+onShow(() => {
|
|
|
+ updateRoute()
|
|
|
+})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- @import "@/uni.scss";
|
|
|
+@import "@/uni.scss";
|
|
|
|
|
|
- .page-wrapper {
|
|
|
- height: calc(100vh - 56px);
|
|
|
- }
|
|
|
+.page-wrapper {
|
|
|
+ height: calc(100vh - 56px);
|
|
|
+}
|
|
|
|
|
|
- .header-box {
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- }
|
|
|
+.header-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+}
|
|
|
|
|
|
- .page-content {
|
|
|
- width: 100%;
|
|
|
- height: calc(100vh - 56px);
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .content-info {
|
|
|
- height: calc(100vh - 56px);
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
+.page-content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 56px);
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
+ .content-info {
|
|
|
+ height: calc(100vh - 56px);
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
|
|
|
- .left-sidebar {
|
|
|
- width: 0;
|
|
|
- overflow: hidden;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 1000;
|
|
|
- background-color: #fff;
|
|
|
- transition: width 281ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
+}
|
|
|
|
|
|
- }
|
|
|
+.left-sidebar {
|
|
|
+ width: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ background-color: #fff;
|
|
|
+ transition: width 281ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
|
|
- .sidebar-mask {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100vw;
|
|
|
- height: calc(100vh - 56px);
|
|
|
- background-color: rgba(0, 0, 0, 0.2);
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
+}
|
|
|
|
|
|
- .sidebar-visible {
|
|
|
- width: px2rpx(280);
|
|
|
- }
|
|
|
+.sidebar-mask {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: calc(100vh - 56px);
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-visible {
|
|
|
+ width: px2rpx(280);
|
|
|
+}
|
|
|
|
|
|
.content-wrapper {
|
|
|
max-width: px2rpx(1224);
|
|
|
@@ -196,43 +196,33 @@
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
min-height: calc(100vh - 56px);
|
|
|
- // border: 1px solid rgba(108, 133, 149, 0.12);
|
|
|
}
|
|
|
|
|
|
- .fixed {
|
|
|
- // position: fixed;
|
|
|
- // top: 0;
|
|
|
- // left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- background-color: var(--color-white);
|
|
|
- z-index: 9;
|
|
|
- }
|
|
|
-
|
|
|
- @media screen and (max-width: 1504px) {
|
|
|
- .content-wrapper-padding {
|
|
|
- padding: px2rpx(20);
|
|
|
- }
|
|
|
- }
|
|
|
+.fixed {
|
|
|
+ // position: fixed;
|
|
|
+ // top: 0;
|
|
|
+ // left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ background-color: var(--color-white);
|
|
|
+ z-index: 9;
|
|
|
+}
|
|
|
|
|
|
- @media screen and (max-width: 991px) {
|
|
|
- .page-wrapper {
|
|
|
- height: 100vh;
|
|
|
- }
|
|
|
+@media screen and (max-width: 991px) {
|
|
|
+ .content-wrapper-padding {
|
|
|
+ padding: 0 px2rpx(16);
|
|
|
}
|
|
|
|
|
|
- .mobile-menu-btn {
|
|
|
- width: px2rpx(64);
|
|
|
- height: px2rpx(64);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ .page-wrapper {
|
|
|
+ height: 100vh;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- // 针对不同屏幕尺寸的响应式调整
|
|
|
- @media screen and (max-width: 767px) {
|
|
|
- .content-wrapper-padding {
|
|
|
- padding: px2rpx(0) !important;
|
|
|
- }
|
|
|
- }
|
|
|
+.mobile-menu-btn {
|
|
|
+ width: px2rpx(64);
|
|
|
+ height: px2rpx(64);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
</style>
|