个人中心

2020-06-13 17:36:24 +08:00
parent ee119b3be5
commit c75af5b303
16 changed files with 575 additions and 11 deletions
--- a/components/content-item/index.vue
+++ b/components/content-item/index.vue
@@ -0,0 +1,124 @@
+<template>
+	<view class="content-item">
+		<view class="image">
+			<image class="cover"></image>
+			<image src="/static/image/user/5.png" class="play-icon" v-if="cur==1"></image>
+		</view>
+		<view class="right" @click="toDetailsPage">
+			<u-icon name="close" color="#999999" size="27" @click.stop="showPopup"></u-icon>
+			<view class="tags u-line-2">#配饰就该这么搭#</view>
+			<view class="data">
+				<view>
+					<image src="/static/image/user/2.png"></image>
+					<text>2.5w</text>
+				</view>
+				<view>
+					<image src="/static/image/user/3.png"></image>
+					<text>2.5w</text>
+				</view>
+				<view>
+					<image src="/static/image/user/4.png"></image>
+					<text>2.5w</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {}
+	},
+	props: {
+		cur: [Number, String],
+		delItem: {
+			type: Function,
+			default: null
+		}
+	},
+	methods: {
+		showPopup() {
+			this.delItem();
+		},
+		toDetailsPage() {
+			uni.navigateTo({
+				url: '/pages/user/contentDetails?current=' + this.cur
+			});
+		}
+	},
+};
+</script>
+<style lang="scss" scoped>
+.content-item {
+	display: flex;
+	padding: 30rpx;
+	background-color: #FFFFFF;
+	margin-bottom: 2rpx;
+	.image {
+		margin-right: 25rpx;
+		position: relative;
+		.cover {
+			width: 160rpx;
+			height: 160rpx;
+			border-radius: 10rpx;
+			background-color: aqua;
+			flex-shrink: 0;
+		}
+		.play-icon {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: 58rpx;
+			height: 58rpx;
+			z-index: 9;
+		}
+	}
+	.right {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		.u-icon {
+			justify-content: flex-end;
+		}
+		.tags {
+			margin: 10rpx 0 auto;
+			font-size: 28rpx;
+			color: rgba(51,51,51,1);
+		}
+		.data {
+			margin-bottom: 10rpx;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			@mixin image-class($width) {
+				> image {
+					width: $width;
+					height: 26rpx;
+					margin-right: 20rpx;
+				}
+			}
+			> view {
+				display: flex;
+				align-items: center;
+				&:not(:last-child) {
+					margin-right: 35rpx;
+				}
+				&:first-child {
+					@include image-class(31rpx);
+				}
+				&:nth-child(2) {
+					@include image-class(26rpx);
+				}
+				&:last-child {
+					@include image-class(20rpx);
+				}
+				> text {
+					font-size: 24rpx;
+					color: rgba(51,51,51,1);
+				}
+			}
+		}
+	}
+}
+</style>