<template>
<div class="top">
<div class="container" v-show="isShow">
<p>寒雨连江夜入吴</p>
<p>平明送客楚山孤</p>
<p>洛阳亲友如相问</p>
<p>一片冰心在玉壶</p>
<p>一片冰心在玉壶</p>
<p>一片冰心在玉壶</p>
</div>
<div class="title">
<div @click="btn" style="cursor: pointer">
已选择0个ELR
<span class="btn">
<a-icon type="down" v-if="isShow" />
<a-icon type="up" v-else />
</span>
</div>
<a-button type="primary"> 立即下单 </a-button>
</div>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data() {
return {
isShow: false,
};
},
methods: {
btn() {
this.isShow = !this.isShow;
},
},
};
</script>
<style lang="scss" scoped>
.top{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: #fafafa;
border: 2px solid #d9d9d9;
border-radius: 5px;
line-height: 50px;
.title {
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
position: absolute;
bottom: 50px;
border-radius: 5px;
border: 2px solid #015a9c;
background-color: #ccc;
}
.btn {
margin-left: 5px;
margin-right: 10px;
cursor: pointer;
}
}
</style>
效果图收起
效果图展开