本帖最后由 王源的李可爱 于 2023-1-7 09:28 编辑
<div class="allit">
<ul class="detail-list">
<li class="detail-top">
<div class="detail-icon"></div>
<div class="detail-text">播放全部</div>
</li>
<li class="trackslist">
<ScrollView>
<ul>
<li v-for="val in tracks" :key="val.id">
<h3>{{ val.name }}</h3>
<p>{{ val.ar[0].name }}</p>
</li>
</ul>
</ScrollView>
</li>
</ul>
</div>
<script>
import ScrollView from "../ScrollView.vue";
export default {
name: "detailBottom",
components: {
ScrollView,
},
data() {
return {};
},
created() {},
mounted() {},
methods: {},
props: {
tracks: {
type: Array,
},
},
};
</script>
<style scoped lang="scss">
@import "../../assets/css/mixin.scss";
.allit {
@include bgsubColor();
position: fixed;
top: 700px;
left: 0;
right: 0;
bottom: 0;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
overflow: hidden;
}
.detail-top {
height: 100px;
display: flex;
align-items: center;
font-size: 50px;
font-weight: 700;
border-bottom: 1px solid #ccc;
width: 100%;
.detail-icon {
margin-right: 10px;
width: 80px;
height: 80px;
@include changeImg("@/assets/images/small_play");
margin-left: 10px;
}
}
.trackslist {
position: fixed;
top: 802px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
li {
border-bottom: 1px solid #ccc;
height: 100px;
font-size: 20px;
padding-left: 30px;
display: flex;
flex-direction: column;
justify-content: center;
h3 {
font-size: 35px;
@include clamp(1);
}
p {
margin-top: 5px;
}
}
}
</style>
|
|
|
|
