PC端封装侧边导航

template

 <div v-if="showBox == false" class="leftShow" @click.stop="toggleBox"></div><div class="container" :class="{ show: showBox, fixed: fixedBox }"><div class="arrow" @click="toggleBox"></div><div class="content"><!-- 盒子内容 --><div class="img1" @click="$router.push('/home/home')"></div><div class="img2"></div><div class="img3" @click="$router.push('/scenarios/home')"></div></div></div>

js

<script>export default {components: {},data() {return {showBox: false, // 控制盒子显示和隐藏fixedBox: false, // 控制盒子固定和取消固定}},watch: {},mounted() {},methods: {toggleBox() {this.showBox = !this.showBoxif (this.showBox) {this.fixedBox = true} else {this.fixedBox = false}},},}
</script>

css

  .leftShow {width: 50px;height: 114px;position: absolute;top: 50%;left: 0;transform: translate(0, -50%);background: url(~@/assets/imgs/home/sy_wzk@2x.png) no-repeat;background-size: contain;cursor: pointer;z-index: 3;}.container {position: fixed;left: -336px; /* 初始位置在左侧隐藏 */top: 50%;transform: translateY(-50%);width: 336px;height: 1080px;transition: left 0.5s; /* 过渡效果 */z-index: 888;background: url(~@/assets/imgs/home/sy_yzk@2x.png) no-repeat;background-size: contain;}.container.show {left: 0; /* 划出后固定在左侧中间 */}.container.fixed {position: fixed; /* 固定位置 */}.arrow {width: 50px;height: 114px;cursor: pointer;position: absolute;right: 40px;top: 50%;transform: translate(0, -50%);display: flex;align-items: center;}.content {padding: 10px;position: relative;.img1 {position: absolute;top: 358px;left: 30px;width: 191.41px;height: 65.89px;background: url(~@/assets/imgs/home/sy_sy@2x.png) no-repeat;background-size: contain;cursor: pointer;}.img2 {position: absolute;top: 504px;left: 30px;width: 191.41px;height: 65.89px;background: url(~@/assets/imgs/home/sy_yzd@2x.png) no-repeat;background-size: contain;cursor: pointer;}.img3 {position: absolute;top: 651px;left: 30px;width: 191.41px;height: 65.89px;background: url(~@/assets/imgs/home/sy_yycj@2x.png) no-repeat;background-size: contain;cursor: pointer;}}```