<template>
	<view>
		<Head isfanhui="true" />
		<view class="top_box">
			<view class="top_box_one">
				<view></view>
				<view>
					<image src="../../static/xinkong.png"></image>
					<text>收藏</text>
				</view>
			</view>
			<view class="top_box_two">
				<image src="../../static/tx.jpg" mode=""></image>
			</view>
			<view class="top_box_three">
				<text style="color: #ffffff;font-size: 38rpx;">这个杀手不太冷</text>
				<view style="font-size: 27rpx;line-height: 50rpx;">
					<text>作品：1</text>
					<text style="margin-left: 20rpx;">粉丝：14</text>
				</view>
				<view :class="zhankai?'yingchang':''">
					中国当代新潮艺术家，毕业于清华大学美术，欧洲美术中国当代新潮艺术家，毕业于清华大学美术，欧洲美术中国当代新潮艺术家，毕业于清华大学美术，欧洲美术中国当代新潮艺术家，毕业于清华大学美术，欧洲美术中国当代新潮艺术家，
				</view>
				<view class="image_box">
					<image @click="kzzhankai(true)" v-if="zhankai==false" src="../../static/shang.png"></image>
					<image @click="kzzhankai(false)" v-if="zhankai" src="../../static/xia.png"></image>
				</view>
			</view>
		</view>
		<view class="title_zp">
			<image src="../../static/xinkong.png"></image>
			<text>作品(2)</text>
			<image src="../../static/xinkong.png" mode=""></image>
		</view>
		<view class="listcontent">
			<view class="listitem" v-for="(item,index) in 5" @click="qiehuan(item)">
				<view class="item-img">
					<image src="../../static/bcimg/bc.jpeg" mode=""></image>
				</view>

				<view class="item-name">
					<view class="">
						《两只老虎》
					</view>
				</view>
				<view class="foot">
					<view class="footimg">
						<image src="../../static/bcimg/bc.jpeg" mode=""></image>
					</view>
					<view class="footname">
						琳琅天上
					</view>
					<view class="price">
						￥12800
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import Head from '@/components/head/head.vue'
	export default {
		components: {
			Head
		},
		data() {
			return {
				zhankai: true
			}
		},
		methods: {
			kzzhankai(val) {
				this.zhankai = val
			},
			qiehuan(val){
				uni.navigateTo({
					url:'../datail/datail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.Title {
		color: #65f9ff;
		text-align: center;
		font-size: 34rpx;
	}

	.listcontent {
		width: 700rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-top: 20rpx;
		padding-bottom: 50rpx;

		.listitem {
			width: 330rpx;
			height: 440rpx;
			border: solid 2rpx #484848;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.item-img {
				image {
					width: 330rpx;
					height: 290rpx;
					border-radius: 20rpx;
				}
			}

			.item-name {
				display: flex;
				color: #FFFFFF;
				margin-top: 10rpx;

			}

			.foot {
				display: flex;
				margin: 0rpx auto;
				align-items: center;
				margin-top: 20rpx;

				.footimg {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					box-sizing: border-box;
					border: 2rpx solid #586b6d50;
					margin-right: 10rpx;
					margin-left: 10rpx;

					image {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						margin-top: 5rpx;
						margin-left: 5rpx;
					}
				}

				.footname {
					color: #99999a;
					font-size: 26rpx;
					width: 102rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.price {
					color: #53d3fd;
					font-size: 26rpx;
					float: right;
					margin-left: 40rpx;
				}
			}
		}
	}

	.title_zp {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		margin-top: 45rpx;
		color: #66f9fe;

		>image {
			width: 100rpx;
			height: 30rpx;
		}
	}

	.image_box {
		>image {
			margin-top: 20rpx;
			width: 40rpx;
			height: 30rpx;
		}
	}

	.yingchang {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.top_box_three {
		color: #7b7e7e;
		background-color: #ffffff20;
		border: 1rpx solid #777b77;
		border-radius: 20rpx;
		padding: 120rpx 30rpx 20rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -80rpx;
	}

	.top_box_two {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		// padding: 15rpx;
		border: 1rpx solid #777b77;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
		margin-top: 50rpx;

		>image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}
	}

	.top_box_one {
		display: flex;
		justify-content: space-between;

		>view:nth-of-type(2) {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ffffff50;
			color: #ffffff;
			padding: 7rpx 20rpx;
			border-radius: 25rpx;

			>image {
				width: 35rpx;
				height: 35rpx;
			}

			>text {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}
	}

	.top_box {
		padding: 150rpx 30rpx 0 30rpx;
		box-sizing: border-box;
	}

	page {
		background-color: #1a1a1a;
	}
</style>
