Food/food
3
0
Fork 0
Code Issues 60 Pull Requests Actions Packages Projects Releases Wiki Activity

【类 型】：test 删除测试文件

Browse Source 
【原  因】：
【过  程】：
【影  响】：
This commit is contained in:
szdot 2024-07-24 21:43:27 +08:00
parent 3e3cc6281d
commit 2f7d128d73
1 changed files with 0 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/As.vue
View File

@ -1,95 +0,0 @@
<template>
<div class="flex column mr mac w-100 h-100" id="mainBox">
<div class="content" :class="isContainerVisible ? 'slide-in' : ''">
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
<p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
</div>
<div class="fb flex gap10 m-b-10" id="bar">
<div class="flex1 item" style="height: 100%; background-color: aqua;" @click="showContainer">1</div>
<div class="flex1 item" style="height: 100%; background-color: brown;" @click="showContainer">2</div>
<div class="flex1 item" style="height: 100%; background-color: blueviolet;" @click="showContainer">3</div>
<div class="flex1 item" style="height: 100%; background-color: antiquewhite;" @click="showContainer">4</div>
</div>
</div>
</template>
<script>
export default {
name: 'As',
data () {
return {
isContainerVisible: false
}
},
methods: {
showContainer () {
this.isContainerVisible = !this.isContainerVisible
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/theme.scss";
#bar {
z-index: 90;
position: relative;
width: 100%;
max-width: 480px;
height: 100px;
padding: 0 10px;
}
@media (max-width: 480px) {
#bar {
height: calc(25vw - 20px);
/* 调整后的高度 */
}
#mainBox {
width: 100vw;
}
}
.gap10 {
gap: 10px;
}
.content {
z-index: 90;
position: relative;
width: 100%;
max-width: 480px;
background-color: aliceblue;
padding: 0 10px;
top: 1500px;
opacity: 0;
transition: top 0.5s ease, opacity 1s ease;
}
.slide-in {
top: -10px;
opacity: 1;
}
</style>