Sports/pages/album/album.vue

<template>
	<view class="oppo-box">
		<view class="top">
			相册
		</view>
		<image style="width: 100%;height: 282rpx" src="@/static/bg (2).png"></image>
		<view class="home-search" >
			<view class="box"style="margin-top: 20rpx;">
				<image class="search" @click="get_api_cage_list(1)" src="@/static/sousuo@2x.png"></image>
				<input type="search" placeholder="搜索赛站名称" v-model="keyword" />
				<image class="arrow" @click="get_api_cage_list(1)" src="@/static/jiantou@2x.png"></image>
			</view>
		</view>
		<view class="content3" style="margin-top: 20upx;" v-for="(item,idex) in 4">
			<view class="content31">
				<image class="img31" src="../../static/bg (1).png" mode="scaleToFill"></image>
				<view class="border"  style="width: 90%;height: 10rpx;margin: 0 auto;margin-top: -20rpx;border-radius: 30rpx;"></view>
				<view class="textbuttom">
					炽能体育公开赛 邯郸站炽能体育公开赛 邯郸站
				</view>
				<view class="textbuttom1">
					比赛日期：2024-04-13~05-02
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: ''
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.top {
		position: absolute;
		top: 117upx;
		left: 25upx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.content3 {
		
		width: 702rpx;
		height: 376rpx;
		// background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		display: flex;

		.content31 {
			position: relative;
			.border{
				border-bottom: 10rpx solid #CA151F;
			}
			.img31 {
				width: 702rpx;
				height: 375rpx;
				margin: 5upx;
				border-radius: 10rpx;
			}

			.textbuttom {
				// margin-top: -200px;
				position: absolute;
				top: 289rpx;
				left: 20px;
				width: 603rpx;
				height: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 36rpx;
			}
			.textbuttom1{
				position: absolute;
				top: 319rpx;
				left: 20px;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				opacity: 0.7;
			}
		}
	}

	.icon32 {
		display: flex;
		justify-content: space-between;
	}

	.text31 {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #AAAAAA;
		line-height: 40rpx;
	}

	.text32 {
		// width: 100rpx;
		// height: 38rpx;
		// background: #FF8D2B;
		border-radius: 5rpx;
	}

	.img32 {
		width: 40rpx;
		height: 40rpx;
		// background: #CA151F;
		border-radius: 50%;
	}

	.home {

		&-add {
			pointer-events: none;
			width: 100%;
			height: calc(100vh - env(safe-area-inset-bottom) - 50px);
			position: fixed;
			left: 0;
			top: 0;
			z-index: 99;

			.movableView {
				pointer-events: auto;
				width: 112rpx;
				height: 112rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		&-navbar {
			image {
				width: 45rpx;
				height: 45rpx;
				margin-left: 38rpx;
			}
		}

		&-filter {
			width: 100%;
			background-color: #efefef;
			display: flex;
			align-items: center;

			.item {
				line-height: 85rpx;
				width: 20%;
				text-align: center;
				color: #241b17;
				font-size: 30rpx;

				&-on {
					background-color: #009944;
					color: #ffffff;
				}
			}
		}

		&-search {
			width: 100%;
			// background-color: #efefef;
			// padding: 15rpx 40rpx;
			// border: 1px solid #cacaca;
			box-sizing: border-box;

			.box {
				position: absolute;
				top: 162rpx;
				left: 35rpx;
				display: flex;
				align-items: center;
				height: 85rpx;
				width: 90%;
				box-sizing: border-box;
				padding: 0 25rpx;
				text-align: center;
				background-color: #fff;
				border-radius: 35rpx;

				.search {
					width: 40rpx;
					height: 40rpx;
				}

				input {
					flex: 1;
					color: #241b17;
					font-size: 30rpx;
					text-align: left;
					margin-left: 25rpx;
				}

				.arrow {
					width: 19rpx;
					height: 33rpx;
				}
			}
		}

		&-list {
			overflow: hidden;
			padding: 0 0 40rpx;
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 134rpx;
				margin-top: 40rpx;
				overflow: hidden;
				margin-left: 40rpx;

				.box {
					width: 134rpx;
					height: 134rpx;
					background: url(@/static/icon-home-01.png) center top no-repeat;
					background-size: 100% auto;
					position: relative;
					box-shadow: 0 8rpx 15rpx #999;
					border-radius: 0 0 18rpx 18rpx;
					overflow: hidden;

					.title {
						text-align: center;
						font-size: 22rpx;
						line-height: 50rpx;
						color: #040909;
					}

					.desc {
						margin-top: 12rpx;
						text-align: center;
						font-size: 22rpx;
						line-height: 50rpx;
						color: #040909;
					}

					image {
						width: 124rpx;
						height: 10rpx;
						background: url(@/static/icon-home-01.png) center top no-repeat;
						background-size: 100% auto;
						position: absolute;
						left: 50%;
						margin-left: -62rpx;
						bottom: 0;
						z-index: 2;
					}
				}

				.sort {
					text-align: center;
					padding: 10rpx 0 0;
					font-size: 27rpx;
					color: #040909;
				}

			}
		}
	}
</style>