赞
踩
首页布局如下
要求点击按钮,将侧边栏收缩,
通过 row 和 col 组件,并通过 col 组件的 span
属性我们就可以自由地组合布局。
折叠前
折叠后
- <template>
- <div class="app-layout" :class="{ collapse: app.isFold }">
- <div class="app-layout__mask" @click="app.fold(true)"></div>
-
- <div class="app-layout__left" style="margin-right: 20px;">
- <slider />
- </div>
-
- <div class="app-layout__right">
- <topbar />
- <process />
- <views />
- </div>
- </div>
- </template>
-
- <script lang="ts" name="app-layout" setup>
- import Topbar from "./components/topbar.vue";
- import Slider from "./components/slider.vue";
- import process from "./components/process.vue";
- import Views from "./components/views.vue";
- import { useBase } from "/$/base";
-
- const { app } = useBase();
- </script>
-
- <style lang="scss" scoped>
- .app-layout {
- display: flex;
- background-color: #f7f7f7;
- height: 100%;
- width: 100%;
- overflow: hidden;
-
- &__left {
- overflow: hidden;
- height: 100%;
- width: 255px;
- transition: left 0.2s;
- }
-
- &__right {
- display: flex;
- flex-direction: column;
- height: 100%;
- width: calc(100% - 255px);
- }
-
- &__mask {
- position: fixed;
- left: 0;
- top: 0;
- background-color: rgba(0, 0, 0, 0.5);
- height: 100%;
- width: 100%;
- z-index: 999;
- }
-
- @media only screen and (max-width: 768px) {
- .app-layout__left {
- position: absolute;
- left: 0;
- z-index: 9999;
- transition:
- transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1),
- box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
- }
-
- .app-layout__right {
- width: 100%;
- }
-
- &.collapse {
- .app-layout__left {
- transform: translateX(-100%);
- }
-
- .app-layout__mask {
- display: none;
- }
- }
- }
-
- @media only screen and (min-width: 768px) {
- .app-layout__left,
- .app-layout__right {
- transition: width 0.2s ease-in-out;
- }
-
- .app-layout__mask {
- display: none;
- }
-
- &.collapse {
- .app-layout__left {
- width: 64px;
- }
-
- .app-layout__right {
- width: calc(100% - 64px);
- }
- }
- }
- }
- </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。