<template>
	<view class="content">
		<view class="" style="padding: 30rpx;">
			<u-search v-model="keyword" :showAction="true" actionText="搜索" :animation="true"></u-search>
		</view>
		<view class="" v-if='!keyword' style="padding-left: 44rpx;">
			<view style="margin: 60rpx 0 30rpx 14rpx;">
				常用分类
			</view>
			<view class="types">
				<view class="types-li">
					地方大
				</view>
				<view class="types-li">
					地方撒
				</view>
				<view class="types-li">
					地方撒旦
				</view>
				<view class="types-li">
					地方撒大苏
				</view>
				<view class="types-li">
					地方
				</view>
				<view class="types-li">
					地方撒大苏
				</view>

			</view>

			<view style="margin: 60rpx 0 30rpx 14rpx;">
				热门分类
			</view>
			<view class="types">
				<view class="types-li">
					地方大
				</view>
				<view class="types-li">
					地方撒
				</view>
				<view class="types-li">
					地方撒旦
				</view>
				<view class="types-li">
					地方撒大苏
				</view>
				<view class="types-li">
					地方
				</view>
				<view class="types-li">
					地方撒大苏
				</view>

			</view>

		</view>
		<view class="" v-else style="margin: 10rpx 0 0 30rpx;">
			<view class="keyword-li" v-for='item in 10'>
				元神--启动！！
				<u-line direction="row" color="#ECECEC"></u-line>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: ""
			}
		}
	}
</script>

<style lang='scss'>
	.MediumFont {
		font-family: PingFangFamily;
	}

	.RegularFont {
		font-family: PingFangRegular;
	}

	.content {
		box-sizing: border-box;
		background-color: #FFFFFF;
		min-height: 100vh;
		position: relative;
		font-size: 28rpx;
		font-family: PingFangFamily;

		.types {
			display: flex;
			flex-wrap: wrap;

			.types-li {
				background-color: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 16rpx 24rpx;
				margin-bottom: 46rpx;
				margin-right: 20rpx;
			}

		}

		.keyword-li {
			padding-right: 30rpx;
			/* background-color: #F6F6F6; */
			height: 100rpx;
			line-height: 100rpx;
		}

		.keyword-li:active {
			background-color: #F6F6F6;
		}
	}
</style>