<template>
<div class="account-botton">
<div class="b-top">
<div class="bottom-top">
<div class="bottom-play"></div>
<div>全部播放</div>
</div>
</div>
<scrollView class="bottom-bottom">
<ul>
<li v-for="val in flist" :key="val.id" class="bb-list">
<div class="bb-img">
<img :src="val.picUrl" alt="" />
</div>
<div>
<h1>{{ val.name }}</h1>
<p>{{ val.singer }}</p>
</div>
</li>
</ul>
</scrollView>
</div>
</template>
<script>
import scrollView from "../ScrollView.vue";
export default {
name: "acountBottom",
components: {
scrollView,
},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
props: {
flist: {
type: Array,
},
},
};
</script>
<style scoped lang="scss">
@import "../../assets/css/mixin.scss";
.account-botton {
widows: 100%;
// @include bgsubColor();
// background-color: #ccc;
.b-top {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 100%;
overflow: hidden;
background-color: #ccc;
.bottom-top {
width: 50%;
height: 90px;
border: 1px solid red;
border-radius: 40px;
font-size: 50px;
display: flex;
justify-content: flex-start;
align-items: center;
font-weight: 700;
margin-bottom: 20px;
.bottom-play {
margin-left: 20px;
margin-right: 10px;
width: 80px;
height: 80px;
@include changeImg("../../assets/images/play");
&.active {
@include changeImg("../../assets/images/pause");
}
}
}
}
.bottom-bottom {
padding-top: 10px;
background-color: #fff;
position: fixed;
top: 400px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
}
.bb-list {
padding-left: 20px;
width: 100%;
height: 200px;
border-bottom: 1px solid #ccc;
font-size: 40px;
display: flex;
justify-content: flex-start;
align-items: center;
p {
height: 80px;
line-height: 80px;
}
.bb-img {
margin-right: 30px;
img {
height: 160px;
width: 160px;
border-radius: 40px;
}
}
}
h1 {
@include clamp(1);
}
p {
@include clamp(1);
}
</style>
|
