发现页面

src/pages/circle/circle.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view style="height: 100%;">
 		<view class="circle-title">
 			<view class="circle-title-nav">
 				<view class="circle-title-nav-list">
@@ -14,9 +14,9 @@
 			<image src="../../static/common/edit.png" mode="" class="image"></image>
 		</view>
 		<view class="circle-discover">
-			<scroll-view style="height: 100%;" :scroll-top="500" scroll-y="true" class="scroll-Y" refresher-enabled
+			<scroll-view style="height: 100%;" scroll-y="true" class="scroll-Y" refresher-enabled scroll-with-animation
-				refresher-background="#F8F8FA">
+				refresher-background="#F8F8FA" @refresherrestore="refresherrestore">
-				<Discover></Discover>
+				<Discover :resource="topicList"></Discover>
 			</scroll-view>
 		</view>
 	</view>
@@ -30,7 +30,9 @@
 	const {
 		navItem,
 		selectNav,
-		handSelectNav
+		handSelectNav,
+		refresherrestore,
+		topicList
 	} = userData()
 </script>
 
@@ -39,19 +41,21 @@
 		width: 100%;
 		height: 100%;
 		background: #F8F8FA;
+		overflow: hidden;
 	}
 
 	.circle-title {
 		width: 100%;
 		height: 137rpx;
 		background-image: url(../../static/common/top-bg.png);
+		background-color: #fff;
 		background-size: 100% 100%;
 		// background-position: 100rpx;
 		padding-top: 118rpx;
 		position: sticky;
 		top: 0;
 		left: 0;
-		z-index: 999;
+		z-index: 9999;
 
 		.circle-title-nav {
 			width: 100%;
@@ -100,16 +104,19 @@
 		position: fixed;
 		right: 32rpx;
 		bottom: 188rpx;
+		z-index: 9999;
 
 		.image {
 			width: 144rpx;
 			height: 144rpx;
+
 		}
 	}
 
 	.circle-discover {
-		height: 500px;
+		height: calc(100% - 255rpx);
-		// padding-top: 255rpx;
+		overflow-y: scroll;
+		// padding-bottom: -255rpx;
 
 	}
 </style>

src/pages/circle/components/discover.vue

@@ -4,33 +4,39 @@
 			<text class="hotTopic-title">热门话题</text>
 			<view class="topicList">
 				<view class="topicList-item">
-					<image src="../../../static/common/topic.png" mode="aspectFit" class="topicList-item-iamge"></image>
+					<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
+					</image>
 					<text class="topicList-item-text">如何有效防止摔车</text>
 				</view>
 				<view class="topicList-item">
-					<image src="../../../static/common/topic.png" mode="aspectFit" class="topicList-item-iamge"></image>
+					<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
+					</image>
 					<text class="topicList-item-text">10月摩旅最美路线</text>
 				</view>
 				<view class="topicList-item">
-					<image src="../../../static/common/topic.png" mode="aspectFit" class="topicList-item-iamge"></image>
+					<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
+					</image>
 					<text class="topicList-item-text">如何有效</text>
 				</view>
 				<view class="topicList-item">
-					<image src="../../../static/common/topic.png" mode="aspectFit" class="topicList-item-iamge"></image>
+					<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
+					</image>
 					<text class="topicList-item-text">10月摩旅最美路线</text>
 				</view>
 				<view class="topicList-item">
-					<image src="../../../static/common/topic.png" mode="aspectFit" class="topicList-item-iamge"></image>
+					<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
+					</image>
 					<text class="topicList-item-text">如何有效防止摔车</text>
 				</view>
 				<view class="topicList-item">
-					<image src="../../../static/common/topic.png" mode="aspectFit" class="topicList-item-iamge"></image>
+					<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
+					</image>
 					<text class="topicList-item-text">10月摩旅最美路线</text>
 				</view>
 			</view>
 		</view>
 		<view class="article">
-			<view class="article-item">
+			<view class="article-item" v-for="(item,index) in dataResource" :key="index">
 				<view class="article-item-head">
 					<image src="../../../static/mine/lv1.png" mode="" class="avatar"></image>
 					<view class="article-item-head-center">
@@ -47,15 +53,70 @@
 						<text>关注</text>
 					</view>
 				</view>
-				<view class="article-item-head">
+				<view class="article-item-content">
-
+					<view class="article-item-content-title">
+						<text>朋友上周推荐的这个骑行软件，数据记录好精准，感觉很不错！</text>
+					</view>
+					<view class="article-item-content-text">
+						1.低速时不要猛捏前刹，避震回弹会使车身重心不稳，女孩子体力小，这种清空很容易摔倒
+						2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速！
+						2.过弯时眼睛不要到处乱看，一定要盯着你要去的方向，用户余光快速观察环境，已备随机应对，并且一定要减速!
+					</view>
+					<view class="topicList-item">
+						<image src="../../../static/common/topic.png" mode="aspectFill" class="topicList-item-iamge">
+						</image>
+						<text class="topicList-item-text">如何有效防止摔车</text>
+					</view>
+				</view>
+				<view :class="`grid-container${item.url.length<=9?item.url.length:9}`">
+					<view class="grid-item" v-for="(itemchild,indexchild) in item.url" :key="indexchild">
+						<image :src="itemchild" mode="aspectFill" class="grid-item-iamge">
+						</image>
+					</view>
+				</view>
+				<view class="article-item-address">
+					<image src="../../../static/common/icon-address.png" mode="aspectFill" class="image"></image>
+					<text>四川省成都市青龙湖湿地公园</text>
+				</view>
+				<view class="article-item-review">
+					<image src="../../../static/common/icon-review-logo.png" mode="aspectFill" class="image"></image>
+					<text>说点什么吧，评论留言送积分哦！</text>
+				</view>
+				<view class="article-item-controls">
+					<view class="article-item-controls-left">
+						<view class="article-item-controls-left-nav">
+							<image src="../../../static/common/icon-share.png" mode="aspectFill" class="image"></image>
+							<text>235</text>
+						</view>
+						<view class="article-item-controls-left-nav">
+							<image src="../../../static/common/icon-review.png" mode="aspectFill" class="image"></image>
+							<text>评论</text>
+						</view>
+						<view class="article-item-controls-left-nav">
+							<image src="../../../static/common/icon-upvote.png" mode="aspectFill" class="image"></image>
+							<text>点赞</text>
+						</view>
+					</view>
+					<view class="article-item-controls-right">
+						<image src="../../../static/common/icon-more.png" mode="aspectFill" class="image"></image>
+					</view>
 				</view>
 			</view>
 		</view>
 	</view>
 </template>
 
-<script>
+<script lang="ts" setup>
+	import { ref, defineComponent, getCurrentInstance, toRefs } from "vue"
+	const { proxy } = getCurrentInstance();
+	const dataResource = ref<string[]>()
+	interface Props {
+		resource : string[]
+	}
+	const props = withDefaults(defineProps<Props>(), {
+		resource: Array
+	})
+	dataResource.value = props.resource
 </script>
 
 <style lang="scss" scoped>
@@ -119,10 +180,15 @@
 
 	.article {
 		background-color: #fff;
-		padding: 34rpx;
+		padding: 0 34rpx;
 		box-sizing: border-box;
+		width: 100%;
 
 		.article-item {
+			padding: 54rpx 0 50rpx;
+			border-bottom: 1px solid #f2f2f2;
+			width: 100%;
+
 			.article-item-head {
 				display: flex;
 				align-items: center;
@@ -174,6 +240,308 @@
 				}
 
 			}
+
+			.article-item-content {
+				width: 100%;
+
+				.article-item-content-title {
+					padding: 32rpx 0 16rpx;
+					font-weight: 600;
+					color: #08080D;
+					font-size: 32rpx;
+				}
+
+				.article-item-content-text {
+					width: 100%;
+					max-height: 234rpx;
+					font-size: 28rpx;
+					color: #08080D;
+					user-select: text;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+					-webkit-line-clamp: 5;
+					text-overflow: ellipsis;
+				}
+
+				.topicList-item {
+					// height: 48rpx;
+					background: rgba(54, 103, 189, 0.12);
+					border-radius: 8rpx;
+					padding: 8rpx 16rpx;
+					display: inline-block;
+					box-sizing: border-box;
+					margin: 28rpx 0 0;
+
+
+					.topicList-item-iamge {
+						width: 48rpx;
+						height: 48rpx;
+						vertical-align: middle;
+						padding-right: 16rpx;
+					}
+
+					.topicList-item-text {
+						height: 36rpx;
+						font-size: 24rpx;
+						font-family: AlibabaPuHuiTi_2_55_Regular;
+						color: #08080D;
+						line-height: 36rpx;
+					}
+				}
+
+				// img {
+				// 	max-width: 100%;
+				// 	height: auto;
+				// }
+			}
+
+			.grid-container1 {
+				display: grid;
+				grid-template-columns: 1fr;
+				grid-template-rows: 532rpx;
+				margin: 28rpx 0;
+
+				.grid-item {
+					.grid-item-iamge {
+						width: 100%;
+						height: 100%;
+						border-radius: 8rpx;
+					}
+				}
+			}
+
+			.grid-container2 {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				grid-template-rows: 336rpx;
+				grid-gap: 14rpx;
+				margin: 28rpx 0;
+
+				.grid-item {
+					.grid-item-iamge {
+						width: 100%;
+						height: 100%;
+						border-radius: 8rpx;
+					}
+				}
+			}
+
+			.grid-container3 {
+				display: grid;
+				grid-template-columns: 258rpx repeat(3, 1fr) 258rpx;
+				grid-template-rows: 258rpx 258rpx;
+				grid-gap: 14rpx;
+				margin: 28rpx 0;
+
+				.grid-item {
+					.grid-item-iamge {
+						width: 100%;
+						height: 100%;
+						border-radius: 8rpx;
+					}
+
+					&:first-child {
+						grid-row-start: 1;
+						grid-row-end: 3;
+						grid-column-start: 1;
+						grid-column-end: 5;
+					}
+				}
+			}
+
+			.grid-container4 {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				grid-template-rows: 336rpx 336rpx;
+				grid-gap: 14rpx;
+				margin: 28rpx 0;
+
+				.grid-item {
+					.grid-item-iamge {
+						width: 100%;
+						height: 100%;
+						border-radius: 8rpx;
+					}
+				}
+			}
+
+
+
+			.grid-container5 {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				grid-template-rows: 258rpx 258rpx 258rpx;
+				grid-gap: 14rpx;
+				margin: 28rpx 0;
+
+				.grid-item {
+					.grid-item-iamge {
+						width: 100%;
+						height: 100%;
+						border-radius: 8rpx;
+					}
+
+					&:first-child {
+						grid-row-start: 1;
+						grid-row-end: 3;
+					}
+				}
+			}
+
+			.grid-container6 {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				grid-template-rows: 336rpx 336rpx 336rpx;
+				grid-gap: 14rpx;
+				margin: 28rpx 0;
+
+				.grid-item {
+					.grid-item-iamge {
+						width: 100%;
+						height: 100%;
+						border-radius: 8rpx;
+					}
+				}
+			}
+
+			.grid-container7 {
+				display: flex;
+				width: 100%;
+				height: 100%;
+				margin: 28rpx 0;
+				flex-wrap: wrap;
+				justify-content: space-between;
+
+				.grid-item {
+					width: 50%;
+					height: 258rpx;
+					padding: 7rpx;
+					box-sizing: border-box;
+
+					.grid-item-iamge {
+						width: 100%;
+						height: 100%;
+						border-radius: 8rpx;
+					}
+
+					&:nth-child(3),
+					&:nth-child(4),
+					&:nth-child(5) {
+						width: 33.3%;
+					}
+				}
+			}
+
+			.grid-container8 {
+				display: flex;
+				width: 100%;
+				height: 100%;
+				margin: 28rpx 0;
+				flex-wrap: wrap;
+				justify-content: space-between;
+
+				.grid-item {
+					width: 33.3%;
+					height: 258rpx;
+					padding: 7rpx;
+					box-sizing: border-box;
+
+					.grid-item-iamge {
+						width: 100%;
+						height: 100%;
+						border-radius: 8rpx;
+					}
+
+					&:nth-child(1),
+					&:nth-child(2) {
+						width: 50%;
+					}
+				}
+			}
+
+			.grid-container9 {
+				display: flex;
+				width: 100%;
+				height: 100%;
+				margin: 28rpx 0;
+				flex-wrap: wrap;
+				justify-content: space-between;
+
+				.grid-item {
+					width: 33.3%;
+					height: 258rpx;
+					padding: 7rpx;
+					box-sizing: border-box;
+
+					.grid-item-iamge {
+						width: 100%;
+						height: 100%;
+						border-radius: 8rpx;
+					}
+				}
+			}
+
+			.article-item-address {
+				color: rgba(43, 43, 53, 0.6);
+				font-size: 24rpx;
+
+				.image {
+					width: 32rpx;
+					height: 32rpx;
+					vertical-align: bottom;
+					padding: 0 2rpx;
+				}
+			}
+
+			.article-item-review {
+				margin: 32rpx 0;
+				height: 64rpx;
+				background: #F7F8FC;
+				border-radius: 9rpx;
+				padding: 10rpx 16rpx;
+				display: flex;
+				align-items: center;
+				color: rgba(43, 43, 53, 0.4);
+				font-size: 28rpx;
+
+				.image {
+					width: 36rpx;
+					height: 36rpx;
+					padding-right: 16rpx;
+				}
+			}
+
+			.article-item-controls {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.article-item-controls-left {
+					display: flex;
+					width: 70%;
+
+					.article-item-controls-left-nav {
+						flex: 1;
+						font-size: 28rpx;
+						color: #08080D;
+
+						.image {
+							width: 48rpx;
+							height: 48rpx;
+							vertical-align: middle;
+							padding-right: 3rpx;
+						}
+					}
+				}
+
+				.article-item-controls-right {
+					.image {
+						width: 48rpx;
+						height: 48rpx;
+					}
+				}
+			}
 		}
 	}
 </style>

src/pages/circle/hook/userData.ts

@@ -1,9 +1,10 @@
 import { ref, onMounted, shallowRef, watchEffect, watch } from 'vue';
 
 // 动态获取图片
-// const getAssetsImages = (name) => {
+const getAssetsImages = (url) => {
-// 	return new URL(`../../../static/mine/${name}.png`, import.meta.url).href
+	// return new URL(url, import.meta.url).href
-// }
+	return 'https://ts1.cn.mm.bing.net/th?id=OIP-C.7pldmOaHsIlsAGsWmA4SawHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
+}
 export function userData() {
 	const selectNav = ref<number>(1)
 	const navItem = ref<any>([{ text: '关注', id: 0 }, { text: '发现', id: 1 }, { text: '活动', id: 2 }, { text: '闲置', id: 3 }, { text: '二手车', id: 4 }])
@@ -11,9 +12,15 @@ export function userData() {
 	const handSelectNav = function (index : number) {
 		selectNav.value = index
 	}
+	const refresherrestore = function () {
+		console.log(333)
+	}
+	const topicList = ref<any>([{ url: [getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }, { url: [getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp'), getAssetsImages('../../../static/common/112.webp')] }])
 	return {
 		selectNav,
 		navItem,
-		handSelectNav
+		handSelectNav,
+		refresherrestore,
+		topicList
 	}
 }