yangprivate-web/kdofficial
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

添加底部背景图片

Browse Source
This commit is contained in:
zhcnyuyang 2025-05-02 18:33:37 +08:00
parent 764738b642
commit bbce2f0bbc
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/bottom/bg_pc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 848 KiB

44
src/components/Tools/MobileToolbar.vue
View File

@ -1,5 +1,14 @@
<script setup>
import FooterContent from './Tools/FooterContent.vue'
</script>
<template> <template>
<div id="mobilebarroot"></div> <div id="mobilebarroot">
<div id="barcontent"></div>
<div id="barbottom">
<FooterContent></FooterContent>
</div>
</div>
</template> </template>
<script> <script>
@ -14,10 +23,41 @@ export default {
@import "node_modules/bootstrap/scss/_mixins.scss"; @import "node_modules/bootstrap/scss/_mixins.scss";
#mobilebarroot{ #mobilebarroot{
background-color: black;
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
background-color: black;
display: flex;
//position: -webkit-fixed;
position: fixed;
z-index: 10;
width: 100%;
flex-direction: column;
height: 100vh;
visibility: collapse;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
visibility: collapse;!important;
}
}
#barcontent{
@include media-breakpoint-between(xs, md) {
display: flex;
position: relative;
flex:1;
width: 100%;
min-height: 100%;
}
@include media-breakpoint-up(md) {
visibility: collapse;!important;
}
}
#barbottom{
@include media-breakpoint-between(xs, md) {
width: 100%;
}
@include media-breakpoint-up(md) {
visibility: collapse;!important;
} }
} }
</style> </style>