网易云音乐---样式布局：我真的太难了

各位大哥我真快崩溃了，这个网易云首页关于数据渲染都折腾了我好几天，这没听课的日子里真是一把鼻涕一把泪，苦不堪言啊！现在我的数据到手上了，关键是图片偏要和你唱反调。嘿，我就是不给你竖着排布，你把我蒸馍着吧，我靠，下面的要过来文子像妹妹一样听话，说怎么排布就怎么排。真的得是吐了

<template>
	<view class="index">
		<musichead title="网易云音乐" :icon="false"></musichead>
		<view class="container">
			<scroll-view scroll-y="true">
				<view class="index-search">
					<image src="../../common/搜索.png" mode=""></image>
					<input type="text" placeholder="搜索歌曲">
				</view>
				
				<view class="index-list">
					<view class="index-list-item">
						<view class="index-list-img" v-for="bb in topList" :key="bb.index">
							<image :src="bb.coverImgUrl" mode=""></image>
							<text>{{bb.updateFrequency}}</text>
						</view>
						<view class="index-list-text">
							<view v-for="aa in topList" :key="aa.index">
								{{aa.index + 1}}.{{aa.tracks[0].first}} - {{aa.tracks[0].second}}
							</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
		</view>
	</view>
			
				
	
</template>

<script>
	import '@/common/iconfont.css';
	import musichead from '../../components/musichead/musichead.vue'
	import {topList} from '../../common/api.js'
	export default {
		data() {
			return {
				topList:[]
			}
		},
		components:{
			musichead
		},
		onLoad() {
           	 topList().then((res)=>{
				 if(res.length){
					 this.topList = res
				 }
			 })   
		},
		methods: {

		}
	}
</script>
   
<style scoped>
	.index{}
	.index-search{display: flex;align-items:center;height:100rpx;
	margin: 70rpx 30rpx 30rpx 30rpx;background-color: #f7f7f7;
	border-radius: 50rpx;}
	.index-search image{height: 25px;width: 25px;margin-right: 26rpx;
	margin: 27rpx;}
	.index-search input{}
	
	.index-list{margin: 0 30rpx;}	
	.index-list-item{display: flex; margin-bottom:34rpx;}
	.index-list-img{ width: 212rpx;height: 212rpx;position: relative;}
	.index-list-img image{ width: 100%;height:100%;border-radius: 30rpx;
	position: relative;}
	.index-list-img text{position:absolute;left:20rpx;bottom: 16rpx;
	color:green;font-size: 24rpx;}
	.index-list-text{font-size:24rpx;line-height: 66rpx;color: blue;}
</style>

这个是代码，我也不知道该怎么排布样式了，我去动接收数据外面的组件也就说index-list-item里面的歌手信息和图片都垂直排布，我去动图片的区域让它弹性布局和竖直方向，关键是人家鸟都不鸟你，真的是气啊！！！我想让图片纵向和左边的文字水平一一对应,有这么难吗