first commit

pages/find/detail.vue

@@ -0,0 +1,120 @@
+<template>
+	<view class="detail-container">
+		<view class="top-area">
+			<view class="picture">
+				<up-avatar size="60rpx" :src="detailData.authorUrl" />
+			</view>
+			<view class="info">
+				<view>
+					{{ detailData.authorName }}
+				</view>
+				<view class="time">
+					{{ detailData.publishTime }}
+				</view>
+			</view>
+			<view class="look">
+				<image src="/static/icon/icon-eye.png"></image>{{ detailData.pageView }}
+			</view>
+		</view>
+		<view class="title">
+			{{ detailData.title }}
+		</view>
+		<view class="content">
+			{{ detailData.content }}
+		</view>
+		<view class="img-area" v-for="(item, index) in detailData?.detailsImageUrl?.split(',')" :key="index">
+			<image mode="widthFix" :src="item"></image>
+		</view>
+		<view class="tags-area">
+			<view 
+				class="tag-item"
+				v-for="(item, index) in detailData?.topic"
+				:key="index"
+				:style="{
+					backgroundColor: item.color
+				}"
+			>
+				{{ item.name }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { articleDetails } from '@/api/api.js';
+import { onLoad } from '@dcloudio/uni-app';
+
+const detailData = ref()
+
+onLoad((options) => {
+	getDetail(options.id);
+});
+
+const getDetail = async (id) => {
+	let _res = await articleDetails({ id });
+	detailData.value = _res;
+};
+
+</script>
+
+<style scoped lang="scss">
+.detail-container {
+	padding: 28rpx 30rpx;
+	.top-area {
+		display: flex;
+		font-weight: bold;
+		font-size: 24rpx;
+		color: #232323;
+		.info {
+			margin-left: 12rpx;
+		}
+		.look {
+			margin-left: 36rpx;
+			padding-top: 32rpx;
+			display: flex;
+			align-items: center;
+			image {
+				width: 28rpx;
+				height: 28rpx;
+				margin-right: 4rpx;
+			}
+		}
+	}
+	.title {
+		font-weight: bold;
+		font-size: 36rpx;
+		color: #232323;
+		margin-top: 40rpx;
+	}
+	.content {
+		margin-top: 24rpx;
+		font-weight: bold;
+		font-size: 20rpx;
+		color: #232323;
+	}
+	.img-area {
+		margin-top: 24rpx;
+		image {
+			width: 100%;
+		}
+	}
+	.tags-area {
+		display: flex;
+		flex-wrap: wrap;
+		margin-top: 36rpx;
+		.tag-item {
+			height: 48rpx;
+			line-height: 48rpx;
+			background: #6FA256;
+			border-radius: 24rpx;
+			font-weight: bold;
+			font-size: 20rpx;
+			color: #000;
+			padding: 0 28rpx;
+			margin-right: 24rpx;
+			margin-bottom: 24rpx;
+		}
+	}
+}
+</style>