MinNan/index_fenbao/minNanyu/yinPinLieBiao.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="音频列表" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="box_search">
			<u-search v-model="val" bgColor="#ffffff" :showAction="false"></u-search>
		</view>
		<view class="box_tab">
			<u-tabs
				:duration="200"
				:list="listTab"
				:lineWidth="25"
				:lineHeight="12"
				lineColor="#4E7198"
				:lineColor="`url(${tabImg}) 100% 100%`"
				:activeStyle="{
					color: '#4E7198',
					fontSize: '34rpx'
				}"
			></u-tabs>
		</view>
		<!-- 音乐 -->
		<view class="list-items_1-0" v-for="item in 3">
			<view class="group_2-0">
				<view class="image-wrapper_1-0">
					<image src="/static/image/sz.png"></image>
					<view class="box_str">
						<image style="width: 100%; height: 100%" src="/static/image/star.png"></image>
					</view>
				</view>
			</view>
			<view class="box_4-0">
				<view class="text_1-0">南音-御前清音</view>
				<view class="group_12-0">
					<view class="image-text_14-0">
						<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
						<text>1.5w</text>
					</view>
					<view class="image-text_15-0">
						<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
						<text>1.5w</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			val: '',
			tabImg: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tab.png',
			listTab: [
				{
					name: '经典歌曲',
					tabid: 1
				},
				{
					name: '热门歌曲',
					tabid: 2
				},
				{
					name: '流行歌曲',
					tabid: 3
				},
				{
					name: '80后音乐',
					tabid: 4
				}
			]
		};
	},
	methods: {}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	background-color: #f8f8f8;
	background-attachment: fixed;
	position: relative;
	display: flex;
	flex-direction: column;
}
/deep/.u-tabs__wrapper__nav__item.data-v-48634e29 {
	padding: 0 40rpx !important;
}
/deep/.u-tabs__wrapper__nav__line.data-v-48634e29 {
	bottom: 16rpx !important;
}
/deep/.u-tabs__wrapper__nav__item.data-v-48634e29 {
	align-items: end !important;
}
/deep/.column-value.data-v-ddfcbb1c {
	border-radius: 25rpx 60rpx 0rpx 30rpx !important;
}
.box_search {
	z-index: 1;
	margin: 20rpx 32rpx 0 32rpx;
}
.box_tab {
	margin: 45rpx 32rpx 0 32rpx;
}
.list-items_1-0 {
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10rpx;
	width: 686rpx;
	height: 174rpx;
	margin: 20rpx 32rpx 10rpx 32rpx;
	padding: 0 20rpx;
	flex-direction: row;
	display: flex;
}
.image-wrapper_1-0 {
	position: relative;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: NaNrpx;
	height: 174rpx;
	display: flex;
	flex-direction: column;
	width: 131rpx;
}

.box_4-0 {
	width: 210rpx;
	height: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 34rpx 0 0 27rpx;
}
.text_1-0 {
	height: 26rpx;
	color: rgba(49, 37, 32, 1);
	font-size: 28rpx;
	line-height: 28rpx;
}
.group_12-0 {
	width: 210rpx;
	height: 32rpx;
	margin-top: 42rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
}
.image-text_14-0 {
	width: 90rpx;
	height: 32rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
}

.text-group_2-0 {
	width: 50rpx;
	height: 19rpx;
	color: rgba(49, 37, 32, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 6rpx;
}
.image-text_15-0 {
	width: 90rpx;
	height: 32rpx;
	flex-direction: row;
	display: flex;
	justify-content: space-between;
}

.text-group_3-0 {
	width: 50rpx;
	height: 19rpx;
	color: rgba(49, 37, 32, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin-top: 6rpx;
}
.text_2-0 {
	width: 44rpx;
	height: 18rpx;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 24rpx;
	line-height: 24rpx;
	margin: 38rpx 21rpx 0 253rpx;
}
.box_str {
	position: absolute;
	top: 40rpx;
	left: 25rpx;
	width: 80rpx;
	height: 80rpx;
}
</style>