cyzh-SoundOfMusic-H5/pages/index/index.vue

<template>
	<view>
		<view class="bg-white" style="padding: 30upx; 30upx 0upx 30upx">
			<u-swiper height="268" :list="imgList" bg-color="#fff" interval="5000"></u-swiper>
		</view>
		<view>
			<search-bar :disabled="false" @onSearch="onSearch" placeholder="请输入活动名称"></search-bar>
		</view>
		<view class="padding-lr-sm bg-white flex flex-wrap" style="padding-bottom: 10upx;">
			<block v-for="(item, index) in activityTags" :key="index">
				<view class="activity-tag">{{item}}</view>
			</block>
		</view>
		<view class="container" @click="navWithParm">
			<view class="flex align-center">
				<view style="margin: 30upx 0 10upx 20upx;">
					<image src="/static/index/huodong1.png" style="width: 234upx;height: 188upx;"></image>
				</view>
				<view class="padding-lr-sm">
					<view class="flex">
						<view style="width: 80%">
							<view class="text-lg text-bold">音乐先锋榜</view>
							<view class="text-sm margin-tb-xs">2021.07.01 - 2021.12.31</view>
							<view class="text-sm text-cut-2">
								简介: 面向中国及海外22岁以下的非专业音乐学习者,包括在中国生活学习的外国友人
							</view>
						</view>
						<view style="margin-top: 10upx;">
							<image src="/static/index/ing.png" style="width: 83upx;height: 73upx;"></image>
						</view>
					</view>
					<!-- <view class="text-sm flex flex-wrap">
						<block v-for="(item, index) in awardTags" :key="index">
							<view class="award-tag">{{item}}</view>
						</block>
					</view> -->
				</view>
			</view>
			<view class="flex justify-end padding-right-sm">
				<block v-for="(item, index) in tags" :key="index">
					<view class="tag">{{item}}</view>
				</block>
			</view>
			<view class="flex align-center justify-end text-sm" style="padding: 20upx 30upx 30upx ;">
				<text class="cuIcon-hotfill text-orange"></text>
				<view class="padding-left-xs">已有1.2万人报名</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchBar from "@/components/basic/search-bar.vue";
	export default {
		components: {searchBar},
		data() {
			return {
				imgList: [
					{image: '/static/index/swiper.png'},
					{image: '/static/index/swiper.png'},
					{image: '/static/index/swiper.png'}
				],
				activityTags: ['K歌之王','城市争霸','CF城市争霸赛', '主持人比赛'],
				awardTags: ['1万RMB','点歌机','100000积分'],
				tags: ['音乐','交友','竞技','全国','积分']
			}
		},
		onLoad() {
			console.log("路过");
		},
		methods: {
			navWithParm() {
				uni.navigateTo({
					url: "/pages/home/home"
				})
			},
			onSearch(item) {
				console.log(item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity-tag {
		margin: 10upx;
		padding: 0 10upx;
		font-size: 24upx;
		line-height: 40upx;
		background-color: #efefef;
		border-radius: 16upx;
	}
	.award-tag {
		margin: 10upx;
		padding: 0 10upx;
		font-size: 20upx;
		line-height: 40upx;
		background-color: #fff0d9;
		border-radius: 10upx;
		color: #feac65;
	}
	.tag {
		border-radius: 30upx;
		border: #fd8678 1upx solid;
		color: #fd8678;
		background-color: #FFFFFF;
		line-height: 40upx;
		font-size: 20upx;
		padding: 0 20upx;
		margin: 0 8upx;
	}
	.container {
		margin: 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
	}
</style>