Merge branch 'master' of http://150.158.33.144:3000/lalalashen/MoeNovaClient

App.vue

@@ -165,7 +165,7 @@
 <style lang="scss">
 	/*每个页面公共css */
 	@import 'colorui/main.css';
-	@import 'colorui/icon.css';
+	@import 'colorui/icon.css'; 
 	@import 'style/FontStyle.css';
 
 
@@ -174,7 +174,7 @@
 		-webkit-text-size-adjust: none;
 		overscroll-behavior-y: contain;
 		-webkit-overflow-scrolling: touch;
-		background-color: #161616;
+		background-color: #fff;
 		// background: url('./http://c.yujianmate.com/images/v1/bg.png');
 		// background-size: 750rpx 1624rpx;
 		background-repeat: repeat-y;

common/permission.js

@@ -0,0 +1,349 @@
+/**
+ * 本模块封装了Android、iOS的应用权限判断、打开应用权限设置界面、以及位置系统服务是否开启
+ */
+var isIos
+// #ifdef APP-PLUS
+isIos = (plus.os.name == "iOS")
+// #endif
+ 
+
+// 判断推送权限是否开启
+function judgeIosPermissionPush() {
+	var result = 0;
+	var UIApplication = plus.ios.import("UIApplication");
+	var app = UIApplication.sharedApplication();
+	var enabledTypes = 0;
+	if (app.currentUserNotificationSettings) {
+		var settings = app.currentUserNotificationSettings();
+		enabledTypes = settings.plusGetAttribute("types");
+		if (enabledTypes == 0) {
+			console.log("推送权限没有开启");
+		} else {
+			result = 1;
+			console.log("已经开启推送功能!")
+		}
+		plus.ios.deleteObject(settings);
+	} else {
+		enabledTypes = app.enabledRemoteNotificationTypes();
+		if (enabledTypes == 0) {
+			console.log("推送权限没有开启!");
+		} else {
+			result = 1;
+			console.log("已经开启推送功能!")
+		}
+		console.log("enabledTypes2:" + enabledTypes);
+	}
+	plus.ios.deleteObject(app);
+	plus.ios.deleteObject(UIApplication);
+	return result;
+}
+
+// 判断定位权限是否开启
+function judgeIosPermissionLocation() {
+	var result = 0;
+	var cllocationManger = plus.ios.import("CLLocationManager");
+	var status = cllocationManger.authorizationStatus();
+	result = (status != 2) ? 1 : 0;
+	console.log("定位权限开启：" + result); 
+	plus.ios.deleteObject(cllocationManger);
+	return {
+		result: result,
+		permissionName: "定位"
+	};
+}
+
+// 判断麦克风权限是否开启
+function judgeIosPermissionRecord() {
+	var result = 0;
+	var avaudiosession = plus.ios.import("AVAudioSession");
+	var avaudio = avaudiosession.sharedInstance();
+	var permissionStatus = avaudio.recordPermission();
+	console.log("permissionStatus:" + permissionStatus);
+	if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
+		console.log("麦克风权限没有开启");
+	} else {
+		result = 1;
+		console.log("麦克风权限已经开启");
+	}
+	plus.ios.deleteObject(avaudiosession);
+	return {
+		result: result,
+		permissionName: "麦克风"
+	};
+}
+
+// 判断相机权限是否开启
+function judgeIosPermissionCamera() {
+	var result = 0;
+	var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
+	var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
+	console.log("authStatus:" + authStatus);
+	if (authStatus == 3) {
+		result = 1;
+		console.log("相机权限已经开启");
+	} else {
+		console.log("相机权限没有开启");
+	}
+	plus.ios.deleteObject(AVCaptureDevice);
+	return {
+		result: result,
+		permissionName: "相机"
+	};
+}
+
+// 判断相册权限是否开启
+function judgeIosPermissionPhotoLibrary() {
+	var result = 0;
+	var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
+	var authStatus = PHPhotoLibrary.authorizationStatus();
+	console.log("authStatus:" + authStatus);
+	if (authStatus == 3) {
+		result = 1;
+		console.log("相册权限已经开启");
+	} else {
+		console.log("相册权限没有开启");
+	}
+	plus.ios.deleteObject(PHPhotoLibrary);
+	return {
+		result: result,
+		permissionName: "相册"
+	};
+}
+
+// 判断通讯录权限是否开启
+function judgeIosPermissionContact() {
+	var result = 0;
+	var CNContactStore = plus.ios.import("CNContactStore");
+	var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
+	if (cnAuthStatus == 3) {
+		result = 1;
+		console.log("通讯录权限已经开启");
+	} else {
+		console.log("通讯录权限没有开启");
+	}
+	plus.ios.deleteObject(CNContactStore);
+	return {
+		result: result,
+		permissionName: "通讯录"
+	};
+}
+
+// 判断日历权限是否开启
+function judgeIosPermissionCalendar() {
+	var result = 0;
+	var EKEventStore = plus.ios.import("EKEventStore");
+	var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
+	if (ekAuthStatus == 3) {
+		result = 1;
+		console.log("日历权限已经开启");
+	} else {
+		console.log("日历权限没有开启");
+	}
+	plus.ios.deleteObject(EKEventStore);
+	return {
+		result: result,
+		permissionName: "日历"
+	};
+}
+
+// 判断备忘录权限是否开启
+function judgeIosPermissionMemo() {
+	var result = 0;
+	var EKEventStore = plus.ios.import("EKEventStore");
+	var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
+	if (ekAuthStatus == 3) {
+		result = 1;
+		console.log("备忘录权限已经开启");
+	} else {
+		console.log("备忘录权限没有开启");
+	}
+	plus.ios.deleteObject(EKEventStore);
+	return {
+		result: result,
+		permissionName: "备忘录"
+	};
+}
+
+// Android权限查询
+function requestAndroidPermission(permissionID, permissionName) { 
+	return new Promise((resolve, reject) => {
+		plus.android.requestPermissions(
+			[permissionID], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
+			function(resultObj) {
+				console.log('resultObj:99999', resultObj);
+				var result = 0;
+				for (var i = 0; i < resultObj.granted.length; i++) {
+					var grantedPermission = resultObj.granted[i];
+					console.log('已获取的权限：' + grantedPermission);
+					result = 1
+				}
+				for (var i = 0; i < resultObj.deniedPresent.length; i++) {
+					var deniedPresentPermission = resultObj.deniedPresent[i];
+					console.log('拒绝本次申请的权限：' + deniedPresentPermission);
+					result = 0
+				}
+				for (var i = 0; i < resultObj.deniedAlways.length; i++) {
+					var deniedAlwaysPermission = resultObj.deniedAlways[i];
+					console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
+					result = -1
+				}
+				resolve({
+					result: result,
+					permissionName: permissionName
+				});
+				// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
+				if (result != 1) {
+				gotoAppPermissionSetting()
+				}
+			},
+			function(error) {
+				console.log('申请权限错误：' + error.code + " = " + error.message);
+				resolve({
+					code: error.code,
+					message: error.message
+				});
+			}
+		);
+	});
+}
+
+/**
+ * 授权前告知用户使用意图
+ * @param content
+ * @returns
+ */
+const showAuthTipModal = async (string) => {
+	// #ifdef H5
+	if (1 === 1) {
+		return true;
+	}
+	// #endif
+	// ios端在manifest.json配置权限使用说明，以下权限判断仅在安卓端可用  
+	var Manifest = plus.android.importClass("android.Manifest");
+	var MainActivity = plus.android.runtimeMainActivity();
+	var arr = string.split(".")
+	let result = MainActivity.checkSelfPermission(Manifest.permission[arr[2]]);
+	console.log('result: ', result);
+	if (result === 0) return true;
+	// // 如果已经授权直接返回
+	const contentData = {
+		['android.permission.ACCESS_FINE_LOCATION']: {
+			title: '定位权限说明',
+			describe: '便于您使用该功能在位置展示时显示距搜索位置的距离，请您确认授权，否则无法使用该功能'
+		},
+		['android.permission.READ_EXTERNAL_STORAGE']: {
+			title: '相册权限说明',
+			describe: '便于您使用该功能上传您的照片/图片/及用户修改头像，请您确认授权，否则无法使用该功能'
+		},
+		['android.permission.CAMERA']: {
+			title: '拍摄权限说明',
+			describe: '便于您使用该功能拍摄照片修改头像、意见反馈上传图片等信息，请您确认授权，否则无法使用该功能'
+		},
+		['android.permission.CALL_PHONE']: {
+			title: '拨打电话权限说明',
+			describe: '便于您使用该功能拨发货人、司机、客服电话，请您确认授权，否则无法使用该功能'
+		}
+	}; 
+ 
+	return new Promise((resolve) => { 
+		alert(55)
+		resolve(false)
+ 
+		// uni.showModal({
+		// 	title: contentData[string].title,
+		// 	content: contentData[string].describe,
+		// 	success: (res) => {
+		// 		console.log(res,111);
+		// 		resolve(!!res.confirm);
+		// 	},
+		// 	fail: () => {}
+		// });
+	});
+};
+async function getUserLocation(permissionID, callback) { 
+	return new Promise(async (resolve, reject) => {
+ 
+		let authFlag = await showAuthTipModal(permissionID);
+		return resolve(authFlag)
+	});
+
+}
+// 判断是否有权限
+function judgePermission(permissionID, callback) { 
+	function handle(res) {
+		callback && callback(res);
+
+		// 引导用户去开通权限的弹窗
+		if (res === -1) {
+			uni.showModal({
+				title: "提示",
+				content: "您还未开通" + res.permissionName + "权限,是否去应用设置里开通~",
+				confirmText: "去开通",
+				cancelText: "再逛会",
+				success: (data) => {
+					if (data.confirm) {
+						gotoAppPermissionSetting();
+					}
+				}
+			});
+		}
+	}
+	if (permissionID == "location") { // 位置
+		if (isIos) {
+			handle(judgeIosPermissionLocation());
+		} else {
+			requestAndroidPermission("android.permission.ACCESS_FINE_LOCATION", "位置").then(handle);
+		}
+	} else if (permissionID == "camera") { // 摄像头
+		if (isIos) {
+			handle(judgeIosPermissionCamera());
+		} else {
+			requestAndroidPermission("android.permission.CAMERA", "摄像头").then(handle);
+		}
+	} else if (permissionID == "photoLibrary") { // 相册 
+		if (isIos) {
+			handle(judgeIosPermissionPhotoLibrary());
+		} else {
+			getUserLocation("android.permission.READ_EXTERNAL_STORAGE", "相册读取").then(handle);
+			// requestAndroidPermission("android.permission.READ_EXTERNAL_STORAGE", "相册读取").then(handle);
+		}
+	} else if (permissionID == "record") { // 麦克风
+		if (isIos) {
+			handle(judgeIosPermissionRecord());
+		} else {
+			requestAndroidPermission("android.permission.RECORD_AUDIO", "麦克风").then(handle);
+		}
+	} else if (permissionID == "push") { // 推送
+		if (isIos) {
+			handle(judgeIosPermissionPush());
+		} else {
+			handle(1);
+		}
+	} else if (permissionID == "contact") { // 通讯录
+		if (isIos) {
+			handle(judgeIosPermissionContact());
+		} else {
+			requestAndroidPermission("android.permission.READ_CONTACTS", "通讯录读取").then(handle);
+		}
+	} else if (permissionID == "calendar") { // 日历
+		if (isIos) {
+			handle(judgeIosPermissionCalendar());
+		} else {
+			requestAndroidPermission("android.permission.READ_CALENDAR", "日历读取").then(handle);
+		}
+	} else if (permissionID == "memo") { // 备忘录
+		if (isIos) {
+			handle(judgeIosPermissionMemo());
+		} else {
+			handle(1);
+		}
+	} else if (permissionID == "call_phone") { // 拨打电话
+		if (isIos) {
+			handle(1);
+		} else {
+			requestAndroidPermission("android.permission.CALL_PHONE", "拨打电话").then(handle);
+		}
+	}
+}
+ 
+export default	judgePermission 

components/card/card.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="waterfall-item" :style="{width,...customStyle}" @click="goWork(item)">
-		<view class="waterfall-item__image" :style="{width}">
+		<view class="waterfall-item__image" :style="{width,backgroundColor:item.backgroundColor}">
 			<image :src="item.image" mode="widthFix" style="border-radius: 20rpx;"></image>
 		</view>
 		<view class="waterfall-item__ft">
@@ -14,7 +14,7 @@
 					<text class="name" :style="{color:textColor}">{{item.author}}</text>
 				</view>
 				<view class="like" @click="changeLike">
-					<image class="like-icon" :src="isLike ?'/static/icon/icon-7.png':'/static/icon/icon-2.png'" mode="">
+					<image class="like-icon" :src="isLike ?'/static/icon/icon-18.png':'/static/icon/icon-19.png'" mode="">
 					</image>
 					<text class="value" :style="{color:textColor}">{{item.num_like}}</text>
 				</view>
@@ -26,11 +26,11 @@
 		</view>
 		<view class="waterfall-item__tips">
 			<view class="item">
-				<image class="look-icon" src="@/static/icon/icon-4.png" mode=""></image>
+				<image class="look-icon" src="@/static/icon/icon-17.png" mode=""></image>
 				<text class="value" style="color: #fff;">{{item.num_view}}</text>
 			</view>
-			<view class="item" style="background-color: #3F4141;">
-				<text class="value" style="color: #fff;">精选</text>
+			<view class="item" style="background-color: #1F1F1F;">
+				<text class="value" style="color: #ACF934;">精选</text>
 			</view>
 		</view>
 	</view>
@@ -89,7 +89,8 @@
 		.waterfall-item__image {
 			width: 100%;
 			height: auto;
-
+			box-sizing: border-box;
+			padding: 28rpx 20rpx;
 			image {
 				width: 100%;
 				height: 100%;
@@ -99,8 +100,8 @@
 		// #endif
 		.waterfall-item__tips {
 			position: absolute;
-			top: 20rpx;
-			padding: 5rpx 10rpx;
+			top: 10rpx;
+			padding: 0rpx 10rpx;
 			// #ifndef APP-NVUE
 			box-sizing: border-box;
 			// #endif
@@ -117,8 +118,8 @@
 				flex-direction: row;
 				align-items: center;
 				background: rgba(0, 0, 0, 0.2);
-				padding: 5rpx 10rpx;
-				border-radius: 6rpx;
+				padding: 4rpx 14rpx;
+				border-radius: 12rpx;
 
 				.look-icon {
 					width: 26rpx;

components/page-navbar/page-navbar.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="page-top">
-		<image class="bg" src="@/static/icon/icon-1.png"></image>
+		<image class="bg" src="@/static/home/sy_img_top.png"></image>
 		<uv-navbar bgColor="transparent" placeholder>
 			<template #left>
 				<slot name="navLeft"></slot>
@@ -28,13 +28,71 @@
 
 <style lang="scss">
 	.page-top {
-		position: relative;
+		// position: relative;
 		width: 750rpx;
-		height: calc(100rpx + var(--status-bar-height));
+		height: calc(400rpx + var(--status-bar-height));
+		margin-bottom: -72rpx;
 
 		.bg {
 			width: 750rpx;
-			height: calc(100rpx + var(--status-bar-height));
+			height: calc(400rpx + var(--status-bar-height));
+		}
+
+		/deep/.uv-navbar__content {
+			height: 310rpx !important;
+			box-sizing: border-box;
+			padding-left: 24rpx;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			align-items: flex-start;
+			box-sizing: border-box;
+			padding-top: 60rpx;
+			padding-bottom: 14rpx;
+
+			.input-box {
+				width: 88rpx;
+				height: 56rpx;
+				background-color: #1f1f1f;
+				border-radius: 32rpx;
+				margin-right: 5rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.uvicon-arrow-left {
+				display: none !important;
+			}
+
+			.left-top {
+				display: flex;
+				justify-content: flex-start;
+
+			}
+
+			.weather {
+				font-size: 22rpx;
+			}
+
+			.search {
+				margin-top: 20rpx;
+				width: 490rpx;
+
+				.uv-input {
+					height: 70rpx;
+					border: 4rpx solid #000;
+					box-sizing: border-box;
+					padding-left: 4rpx;
+					box-sizing: border-box;
+
+					.uni-input-placeholder {
+						color: #999 !important;
+						font-size: 24rpx;
+						padding-left: 4rpx;
+					}
+				}
+			}
 		}
 	}
 </style>

components/tabbar/tabbar.vue

@@ -163,8 +163,8 @@
 	}
 
 	.tabbar-bottom-item-icon {
-		height: 80rpx;
-		width: 54rpx;
+		height: 68rpx;
+		width: 68rpx;
 		position: relative;
 	}
 

pages/index/index.scss

@@ -1,125 +1,118 @@
-
-	.classModel {
-		width: 750rpx;
-		height: 110rpx;
-		// #ifndef APP-NVUE
-		display: flex;
-		// #endif
-		// #ifdef APP-NVUE
-		flex-direction: row;
-		// #endif 
-		justify-content: space-around;
-		margin-bottom: 20rpx;
-
-		.classModel-bg {
-			width: 210rpx;
-			height: 90rpx;
-			background-color: #3F4141;
-			border-radius: 60rpx;
-			box-shadow: 3px 3px 2px rgba(174, 230, 93, 1);
-
-
-
-			.classModel-img {
-				width: 175rpx;
-				height: 75rpx;
-			}
-		}
-	}
+ 
 
 	.tab-nav {
 		display: flex;
-		justify-content: center;
-		padding: 20rpx 0;
-		background: #161616;
+		justify-content: flex-start;
+		padding: 20rpx 20rpx;
+		box-sizing: border-box;
+		background: #ffffff;
+
 
 		.tab-item {
-			padding: 0 30rpx;
-			color: #808080;
+			padding: 10rpx 38rpx;
+			color: #1F1F1F;
 			font-size: 28rpx;
-
-			&.active {
-				color: #ffffff;
+			background: #F2F6F2;
+			margin-right: 20rpx;
+			border-radius: 30rpx;
+			position: relative;
+			left: 0;
+			top: 0;
+			.indicator-triangle {
+			    position: absolute;
+			    bottom: -10rpx;
+			    left: 50%;
+			    transform: translateX(-50%);
+			    width: 0;
+			    height: 0;
+			    border-left: 10rpx solid transparent;
+			    border-right: 10rpx solid transparent;
+			    border-top: 10rpx solid #ACF934;
+				display: none;
+			}
+			&.active { 
 				font-weight: bold;
+				background: #ACF934;
+				.indicator-triangle {
+					display: block;
+				}
 			}
 		}
 	}
 
 	.hot-topics {
 		padding: 20rpx;
-		background: #28292D;
+		// background: #fff;
 		margin: 20rpx;
 		border-radius: 16rpx;
-
+		border: #000000 solid 2rpx; 
+		 background:url("../../static/home/hot-topice-bg.png") center/100% 99%  no-repeat;
+		 
 		.hot-topics-header {
 			margin-bottom: 20rpx;
-
-			.hot-topics-title {
-				font-size: 32rpx;
-				font-weight: bold;
-				color: #ffffff;
+		
+			.hot-topics-title { 
+				width: 140rpx;
+				height: 34rpx;
 			}
 		}
 
 		.hot-topics-swiper {
-			height: 400rpx; // Adjust this value based on your content
+			height: 220rpx;  
+			box-sizing: border-box;
 		}
 
 		.hot-topics-list {
-			padding: 10rpx 0;
+			padding: 22rpx 26rpx; 
+			padding-bottom: 0;
+				 
 		}
 
 		.topic-item {
+			 
 			display: flex;
 			align-items: center;
-			padding: 15rpx 0;
-
-			.topic-index {
-				width: 40rpx;
-				color: #808080;
-				text-align: center;
-				flex-shrink: 0;
-			}
-
-			.topic-content {
-				flex: 1;
-				width: 0;
-				/* 重要：确保flex子项不会超过容器宽度 */
-				overflow: hidden;
-
-				.topic-title-row {
-					display: flex;
+			padding: 5rpx 0;
+			justify-content: space-between;
+			.hot-topics-left{
+				display: flex;
+				.topic-index{
+					width: 30rpx;
+					height: 30rpx;
+					font-weight: 700;
+					font-size: 24rpx;
+					display: inline-flex;
 					align-items: center;
-					width: 100%;
-
-					.topic-title {
-						color: #ffffff;
-						font-size: 28rpx;
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						flex: 1;
-						width: 0;
-						/* 重要：确保flex子项不会超过容器宽度 */
+					justify-content: center;
+					color: #fff;
+					border-radius: 5rpx;
+					margin-right: 18rpx; 
+					background: #CECECE;
+					&.topic-index-img{
+						background: transparent;
+						color: transparent;
+						width: 36rpx;
+						height: 36rpx;
 					}
-
-					.hot-tag {
-						margin-left: 10rpx;
-						padding: 4rpx 10rpx;
-						background: #FF4B4B;
-						color: #ffffff;
-						font-size: 20rpx;
-						border-radius: 8rpx;
-						flex-shrink: 0;
-					}
-				}
-
-				.topic-participants {
-					font-size: 24rpx;
-					color: #808080;
-					margin-top: 6rpx;
+				} 
+				.topic-content{
+					font-size: 24rpx; 
+					max-width: 330rpx;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
 				}
 			}
+				.topic-participants{
+					font-size: 20rpx;
+					color: #999;
+				}
+		.hot-tag {
+			 width: 46rpx;
+			 height: 22rpx;
+			margin: auto;
+			margin-left: 10rpx;
+		}
 		}
 
 		.indicator-dots {
@@ -143,7 +136,7 @@
 
 	.follow-list {
 		padding: 20rpx;
-		background: #161616;
+		background: #fff;
 		margin: 0rpx;
 		border-radius: 0rpx;
 
@@ -181,7 +174,7 @@
 			align-items: center;
 			justify-content: center;
 			padding: 60rpx 0;
-
+			background-color: #fff;
 			text {
 				color: #808080;
 				font-size: 28rpx;
@@ -198,7 +191,7 @@
 
 	.news-list {
 		padding: 20rpx;
-		background: #161616;
+		background: #fff;
 
 		.news-grid {
 			display: flex;
@@ -285,4 +278,113 @@
 	.blankHeight {
 		width: 500rpx;
 		height: 500rpx;
-	}
+	}
+	.benner-box{
+		box-sizing: border-box;
+		padding:  20rpx; 
+		background: #fff;	
+		border-top-left-radius: 20rpx;
+		border-top-right-radius: 20rpx;
+		/deep/.uv-swiper{
+			border-radius: 10rpx !important;
+			overflow: hidden;
+		}
+		.classModel{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			position: relative;
+			left: 0;
+			right: 0;
+			.benner-iconBom{
+				height: 18rpx;
+				width: 50rpx;
+				position: absolute;
+				top: calc(55% + 18rpx);
+				left: 50%;
+				transform: translateX(-50%);
+				z-index: 99;
+			}
+			.benner-icontop{
+				width: 45rpx;
+				height: 20rpx;
+				position: absolute;
+				top: 55%;
+				left: 50%;
+				transform: translateX(-50%);
+			
+			}
+			.benner-box{
+				height: 256rpx;
+				width: 344rpx;
+				position: relative;
+			}
+	
+			.benner-left-box{
+				background:url("../../static/home/benner-left.-bg.png") center/100% 99%  no-repeat;
+			.text1{
+				color: rgba(255,255,255, 0.8);
+				color: 28rpx;
+				position: absolute;
+				left: 26rpx;
+				top: 88rpx;
+				
+			}
+			.btn{
+				font-size: 24rpx;
+				background: #1F1F1F;
+				color: #ACF934 ;
+				display: inline-block;
+				border-radius: 390rpx;
+				padding: 8rpx 24rpx;
+				padding-bottom: 10rpx;
+				position: absolute;
+				bottom: 38rpx;
+				left: 26rpx;
+			}
+			}
+			.benner-right-box{
+				background:url("../../static/home/benner-right-bg.png") center/100% 99%  no-repeat;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-evenly;
+				align-items: center; 
+				height: 256rpx;
+				.text{
+					color: #999;
+					font-size: 20rpx;
+					position: absolute;
+					top: 56rpx;
+					left: 26rpx; 	
+				}
+				.guard{
+					position: relative;
+					left: 0;
+					top: 0;
+					width: 312rpx;
+					height: 104rpx;
+					background: url("../../static/home/benner-right-btnTop.png") center/100%   no-repeat;
+					margin-bottom: 10rpx;
+				}
+				.match{
+					position: relative;
+					left: 0;
+					top: 0;
+					width: 312rpx;
+					height: 104rpx;
+					background: url("../../static/home/benner-right-btnBom.png") center/100%   no-repeat;
+				}
+			}
+			}
+		}
+		.waterfall-list-container{
+			background: #fff;
+		}
+		.navCenter{
+			.topBox{
+				display: flex;
+				flex-direction: row;
+				justify-content: center;
+				align-items: center;
+			}
+		}

pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
-	<view :style="{ height: windowHeight + 'px'}">
-		<view style="display: flex;justify-content: flex-end;">
+	<view :style="{ height: windowHeight + 'px' }">
+		<view style="display: flex; justify-content: flex-end">
 			<view class="view0 step1"></view>
 		</view>
 		<view class="view1 step2"></view>
@@ -8,35 +8,35 @@
 		<view class="view3 step4"></view>
 		<view class="view4 step5"></view>
 		<view class="view5 step6"></view>
-		<view style="display: flex;justify-content: flex-end;">
+		<view style="display: flex; justify-content: flex-end">
 			<view class="view6 step7"></view>
 		</view>
-		<image src="@/static/image/white-bg.png" :style="{ height: windowHeight + 'px',width:'750rpx'}"></image>
-		<z-paging ref="paging" v-model="dataList" @query="queryList" :style="{ height: windowHeight - 80 + 'px'}"
+		<z-paging ref="paging" v-model="dataList" @query="queryList" :style="{ height: windowHeight - 80 + 'px' }"
 			:show-scrollbar="false">
-			<template #top>
+			<template #top >
 				<page-navbar>
-					<template #navLeft>
-						<view style="display:flex;flex-direction: row;justify-content: center; align-items: center;">
-							<image src="@/static/icon/loacltion.png" style="width: 30rpx; height: 38rpx;"></image>
-							<text style="margin-left:10rpx;font-size: 28rpx;">
-								杭州
-							</text>
-							<image src="@/static/icon/down.png" style="width: 30rpx; height: 16rpx;"></image>
-						</view>
-					</template>
 					<template #navCenter>
-						<view style="width: 520rpx;height: 50rpx;margin-left:126rpx;">
+						<view class="top" style="  display: flex;">
+							<view  class="topBox">
+
+								<text style="margin-left: 10rpx; font-size: 44rpx;font-weight: 600;"> 杭州 </text>
+								<image src="@/static/home/home-bom.png"
+									style="width: 36rpx; height: 36rpx;margin-left: 15rpx;margin-right: 30rpx;"></image>
+							</view>
+							<view class="weather">
+								<p>多云🌤️20℃</p>
+								<p>星期五</p>
+							</view>
+						</view>
+						<view class="search">
 							<uv-input placeholder="“潮玩大作战” 派对季重磅开启!" border="none"
-								:custom-style="{background:'#8BDB67',paddingLeft:'20rpx'}" shape="circle">
-								<template #prefix>
-									<image src="@/static/icon/fiery.png" style="width: 14px;height: 18px;"></image>
-								</template>
+								:custom-style="{ background: '#fff', paddingLeft: '25rpx' }" shape="circle">
+
+								<image src="@/static/icon/fiery.png" style="width: 22rpx; height: 30rpx"></image>
+
 								<template #suffix>
-									<view style="width: 77rpx;height: 42rpx;
-										background-color: #57A335;border-radius: 20rpx;
-										margin-right: 5rpx;display: flex;align-items: center;justify-content: center;">
-										<image src="@/static/icon/search.png" style="width: 32rpx;height: 32rpx;">
+									<view class="input-box">
+										<image src="@/static/icon/search.png" style="width: 32rpx; height: 32rpx">
 										</image>
 									</view>
 								</template>
@@ -45,15 +45,39 @@
 					</template>
 				</page-navbar>
 			</template>
-			<z-paging-cell>
-				<sortble :default-sorts="['uvSwiper','classModel','uvSwiperCard']">
+			<z-paging-cell class="benner-box">
+				<sortble :default-sorts="['uvSwiper', 'classModel', 'uvSwiperCard']">
 					<template #uvSwiper>
 						<uv-swiper :list="bannerList" :autoplay="true" circular :interval="5000" indicator
-							indicator-mode="dot" height='380' radius='0'></uv-swiper>
+							indicator-mode="dot" height="200" radius="0"></uv-swiper>
 					</template>
+
 					<template #classModel>
 						<view class="classModel">
-							<view class="classModel-bg classModel-bg1" ref="classModel1"
+							<image src="@/static/home/benner-iconBom.png" class="benner-iconBom" mode=""></image>
+							<image src="@/static/home/benner-icontop.png" class="benner-icontop" mode=""></image>
+							<view class="benner-box benner-left-box">
+								<view class="text1">
+									获取奖励
+								</view>
+								<view class="btn">
+									立即前往
+								</view>
+							</view>
+							<view class="benner-box benner-right-box" ref="classModel1"
+								@click="goPage('/pages/my/job')">
+								<view class="guard">
+									<view class="text">
+										潮玩IP
+									</view>
+								</view>
+								<view class="match">
+									<view class="text">
+										社交
+									</view>
+								</view>
+							</view>
+							<!-- 	<view class="classModel-bg classModel-bg1" ref="classModel1"
 								@click="goPage('/pages/my/job')">
 								<image class="classModel-img" src="@/static/zhHans-text-icon/text-2.png" mode="">
 								</image>
@@ -65,27 +89,10 @@
 							<view class="classModel-bg" ref="classModel3">
 								<image class="classModel-img" src="@/static/zhHans-text-icon/text-4.png" mode="">
 								</image>
-							</view>
+							</view> -->
 						</view>
 					</template>
-					<!-- <template #uvSwiperCard>
-						<view style="background: #fff;padding: 30rpx 0;">
-							<image src="/static/zhHans-text-icon/text-1.png" ref="classModel4"
-								style="width: 432rpx;height: 34rpx;margin-left: 28rpx;margin-bottom: 43rpx"></image>
-							<swiper-card :width="257" :height="290">
-								<template v-for="(item,index) in cardList" :slot="`card-${index}`">
-									<view style="position: relative;align-items: center;"
-										:style="{width:`${257}rpx`,height:`${290}rpx`}">
-										<image style="position: absolute;top:15px;" :src="item.img"
-											:style="{width:`${257}rpx`,height:`${290}rpx`}">
-										</image>
-										<image style="position: absolute;" :src="item.bgimg"
-											:style="{width:`${257}rpx`,height:`${290}rpx`}"></image>
-									</view>
-								</template>
-							</swiper-card>
-						</view>
-					</template> -->
+
 				</sortble>
 			</z-paging-cell>
 			<z-paging-cell>
@@ -93,32 +100,49 @@
 					<view v-for="(tab, index) in tabs" :key="index"
 						:class="['tab-item', currentTab === index ? 'active' : '']" @click="switchTab(index)">
 						{{ tab }}
+						<view class="indicator-triangle">
+						</view>
 					</view>
 				</view>
 
 				<view v-if="currentTab === 2" class="hot-topics">
 					<view class="hot-topics-header">
-						<text class="hot-topics-title">热搜资讯！</text>
+						<!-- <text class="hot-topics-title">热搜资讯！</text> -->
+						<image class="hot-topics-title" src="@/static/home/hot-topics-title.png" mode=""></image>
+
 					</view>
 					<swiper class="hot-topics-swiper" :current="currentTopicPage" @change="handleTopicPageChange">
 						<swiper-item v-for="(page, pageIndex) in topicPages" :key="pageIndex">
 							<view class="hot-topics-list">
 								<view v-for="(topic, index) in page" :key="index" class="topic-item"
 									@click="goToArticleDetail(topic.id)">
-									<text class="topic-index">{{ pageIndex * 5 + index + 1 }}</text>
+									<view class="hot-topics-left">
+										<image v-if="(pageIndex * 4 + index) ==0" src="@/static/icon/icon-first.png" class="topic-index topic-index-img" mode=""></image>
+										<image v-else-if="(pageIndex * 4 + index) ==1" src="@/static/icon/icon-second.png" class="topic-index topic-index-img" mode=""></image>
+										<image v-else-if="(pageIndex * 4 + index) ==2" src="@/static/icon/icon-third.png" class="topic-index topic-index-img" mode=""></image>
+										<text v-else class="topic-index">{{ pageIndex * 4 + index + 1 }}</text>
+										
+										<view class="topic-content toe">
+											{{ topic.title }}
+										</view> 
+										<image v-if="topic.isHot" src="@/static/icon/icon-hot.png" class="hot-tag" mode=""></image>
+									</view>
+									<text class="topic-participants">{{ topic.num_like }}人正在热议</text>
+									<!-- <text class="topic-index">{{ pageIndex * 5 + index + 1 }}</text>
 									<view class="topic-content">
 										<view class="topic-title-row">
 											<text class="topic-title">{{ topic.title }}</text>
 											<text v-if="topic.isHot" class="hot-tag">HOT</text>
 										</view>
 										<text class="topic-participants">{{ topic.num_like }}人正在热议</text>
-									</view>
+									</view> -->
 								</view>
 							</view>
 						</swiper-item>
 					</swiper>
 					<view class="indicator-dots">
-						<view v-for="i in 2" :key="i" :class="['dot', currentTopicPage === i-1 ? 'active' : '']"></view>
+						<view v-for="i in 2" :key="i" :class="['dot', currentTopicPage === i - 1 ? 'active' : '']">
+						</view>
 					</view>
 				</view>
 
@@ -126,13 +150,21 @@
 				<!-- 关注列表 - 类似my.vue -->
 				<view v-show="currentTab === 0" class="follow-list">
 					<block v-if="followList.length > 0">
-						<view class="works-list">
+						<!-- 		<view class="works-list">
 							<view class="work-item" v-for="(item, index) in followList" :key="index"
 								@click="goWork(item)">
 								<image class="work-image" :src="item.images || item.img_url" mode="aspectFill"></image>
-								<view class="work-title">{{item.title || '作品'+index}}</view>
+								<view class="work-title">{{
+                  item.title || "作品" + index
+                }}</view>
 							</view>
-						</view>
+						</view> -->
+						<w-waterfall :data="followList">
+							<template v-slot:content="{ item, width }">
+								<card :item="formatItem(item)" :width="width" :custom-style="{ background: '#fff' }"
+									textColor="#000"></card>
+							</template>
+						</w-waterfall>
 					</block>
 					<view class="no-data" v-else-if="!isLoadingFollow">
 						<text>暂无关注数据</text>
@@ -141,31 +173,37 @@
 
 				<!-- 推荐列表 - 瀑布流样式 -->
 				<w-waterfall v-show="currentTab === 1 && recommendList.length > 0" :data="recommendList">
-					<template v-slot:content="{item,width}">
-						<card :item="formatItem(item)" :width="width" :custom-style="{background:'#fff'}"
+					<template v-slot:content="{ item, width }">
+						<card :item="formatItem(item)" :width="width" :custom-style="{ background: '#fff' }"
 							textColor="#000"></card>
 					</template>
 				</w-waterfall>
 
 				<!-- 探索列表 - 热点新闻已经有现成的热搜资讯组件，只需添加新闻列表 -->
 				<view v-show="currentTab === 2 && newsList.length > 0" class="news-list">
-					<view class="news-grid">
+					<!-- <view class="news-grid">
 						<view class="news-item" v-for="(item, index) in newsList" :key="index"
 							@click="goToArticleDetail(item.id)">
 							<image class="news-image" :src="item.img_url || item.images" mode="aspectFill"></image>
-							<view class="news-title">{{item.title || '新闻标题'}}</view>
+							<view class="news-title">{{ item.title || "新闻标题" }}</view>
 							<view class="news-footer">
-								<view class="news-author">{{item.author || '作者'}}</view>
+								<view class="news-author">{{ item.author || "作者" }}</view>
 								<view class="news-views">
 									<image src="/static/icon/icon-4.png" class="view-icon"></image>
-									<text>{{item.num_view || '0'}}</text>
+									<text>{{ item.num_view || "0" }}</text>
 								</view>
 							</view>
 						</view>
-					</view>
+					</view> -->
+					<w-waterfall v-show="currentTab === 2 && newsList.length > 0" :data="newsList">
+						<template v-slot:content="{ item, width }">
+							<card :item="formatItem(item)" :width="width" :custom-style="{ background: '#fff' }"
+								textColor="#000"></card>
+						</template>
+					</w-waterfall>
 				</view>
 
-				<view class="no-data" v-if="currentTab === 1 && recommendList.length === 0 && !isLoadingRecommend">
+				<view class="no-data" v-if="  currentTab === 1 && recommendList.length === 0 &&   !isLoadingRecommend ">
 					<text>暂无推荐数据</text>
 				</view>
 
@@ -206,56 +244,66 @@
 		data() {
 			return {
 				step: {
-					name: 'workbenchSet5',
+					name: "workbenchSet5",
 					guideList: [{
-						el: '.step1',
-						tips: '这里是第一步的介绍~',
-						next: '下一步',
-					}, {
-						el: '.step2',
-						tips: '这里是第二步的介绍~',
-						next: '下一步',
-					}, {
-						el: '.step3',
-						tips: '这里是第三步的介绍~',
-						next: '下一步',
-					}, {
-						el: '.step4',
-						tips: '这里是第四步的介绍~',
-						next: '下一步',
-					}, {
-						el: '.step5',
-						tips: '这里是第五步的介绍~',
-						next: '下一步',
-					}, {
-						el: '.step6',
-						tips: '这里是第六步的介绍~',
-						next: '下一步',
-					}, {
-						el: '.step7',
-						tips: '最后一步啦~',
-						next: '完成',
-					}]
+							el: ".step1",
+							tips: "这里是第一步的介绍~",
+							next: "下一步",
+						},
+						{
+							el: ".step2",
+							tips: "这里是第二步的介绍~",
+							next: "下一步",
+						},
+						{
+							el: ".step3",
+							tips: "这里是第三步的介绍~",
+							next: "下一步",
+						},
+						{
+							el: ".step4",
+							tips: "这里是第四步的介绍~",
+							next: "下一步",
+						},
+						{
+							el: ".step5",
+							tips: "这里是第五步的介绍~",
+							next: "下一步",
+						},
+						{
+							el: ".step6",
+							tips: "这里是第六步的介绍~",
+							next: "下一步",
+						},
+						{
+							el: ".step7",
+							tips: "最后一步啦~",
+							next: "完成",
+						},
+					],
 				},
 				windowHeight: uni.getWindowInfo().windowHeight,
 				bannerList: [
-					'https://e.zhichao.art/AI_images/a_1112_10.png',
-					'https://e.zhichao.art/AI_images/a_1112_108.png',
-					'https://e.zhichao.art/AI_images/a_1112_113.png',
+					"../../static/dome/home-swper.png",
+					"../../static/dome/home-swper.png",
+					"../../static/dome/home-swper.png",
 				],
 				cardList: [{
-					img: '/static/img/img-1.png',
-					bgimg: '/static/image/bg-2.png'
-				}, {
-					img: '/static/img/img-3.png',
-					bgimg: '/static/image/bg-3.png'
-				}, {
-					img: '/static/img/img-2.png',
-					bgimg: '/static/image/bg-1.png'
-				}, ],
+						img: "/static/img/img-1.png",
+						bgimg: "/static/image/bg-2.png",
+					},
+					{
+						img: "/static/img/img-3.png",
+						bgimg: "/static/image/bg-3.png",
+					},
+					{
+						img: "/static/img/img-2.png",
+						bgimg: "/static/image/bg-1.png",
+					},
+				],
 				list: [], // 瀑布流全部数据
 				dataList: [],
-				tabs: ['关注', '推荐', '探索'],
+				tabs: ["关注", "推荐", "探索"],
 				currentTab: 1,
 				currentTopicPage: 0,
 				followList: [], // 关注列表数据
@@ -276,7 +324,7 @@
 				isLoadingExplore: false, // 是否正在加载探索列表
 				isLoadingNews: false, // 是否正在加载新闻列表
 				hotTopics: [],
-			}
+			};
 		},
 		computed: {
 			currentList() {
@@ -293,11 +341,11 @@
 			},
 			topicPages() {
 				const pages = [];
-				for (let i = 0; i < this.hotTopics.length; i += 5) {
-					pages.push(this.hotTopics.slice(i, i + 5));
+				for (let i = 0; i < this.hotTopics.length; i += 4) {
+					pages.push(this.hotTopics.slice(i, i + 4));
 				}
 				return pages;
-			}
+			},
 		},
 		onLoad() {
 			let that = this;
@@ -349,43 +397,41 @@
 			getData() {
 				return new Promise((resolve) => {
 					const imgs = [{
-							url: 'https://e.zhichao.art/AI_images/a_1112_10.png',
+							url: "https://e.zhichao.art/AI_images/a_1112_10.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1112_108.png',
+							url: "https://e.zhichao.art/AI_images/a_1112_108.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1112_113.png',
+							url: "https://e.zhichao.art/AI_images/a_1112_113.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1112_13.png',
+							url: "https://e.zhichao.art/AI_images/a_1112_13.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1112_137.png',
+							url: "https://e.zhichao.art/AI_images/a_1112_137.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1112_141.png',
+							url: "https://e.zhichao.art/AI_images/a_1112_141.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1114__562.png',
+							url: "https://e.zhichao.art/AI_images/a_1114__562.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1114__568.png',
+							url: "https://e.zhichao.art/AI_images/a_1114__568.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1114__569.png',
+							url: "https://e.zhichao.art/AI_images/a_1114__569.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1114__570.png',
+							url: "https://e.zhichao.art/AI_images/a_1114__570.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1114__571.png',
+							url: "https://e.zhichao.art/AI_images/a_1114__571.png",
 						},
 						{
-							url: 'https://e.zhichao.art/AI_images/a_1114__575.png',
+							url: "https://e.zhichao.art/AI_images/a_1114__575.png",
 						},
-
-
 					];
 					let list = [];
 					const doFn = (i) => {
@@ -397,8 +443,8 @@
 							h: imgs[randomIndex].height,
 							title: i % 2 == 0 ? `玛丽` : `凌音`,
 							desc: i % 2 == 0 ?
-								`欢迎使用uv-ui，uni-app生态专用的UI框架` : `开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`
-						}
+								`欢迎使用uv-ui，uni-app生态专用的UI框架` : `开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序`,
+						};
 					};
 					// 模拟异步
 					setTimeout(() => {
@@ -406,10 +452,10 @@
 							list.push(doFn(i));
 						}
 						resolve({
-							data: list
+							data: list,
 						});
-					}, 200)
-				})
+					}, 200);
+				});
 			},
 			switchTab(index) {
 				this.currentTab = index;
@@ -450,21 +496,25 @@
 				this.isLoadingFollow = true;
 
 				uni.request({
-					url: this.$apiHost + '/Work/getlist',
+					url: this.$apiHost + "/Work/getlist",
 					data: {
 						uuid: getApp().globalData.uuid,
 						skey: getApp().globalData.skey,
-						type: 'attention', // 关注列表
-						offset: this.followOffset
+						type: "attention", // 关注列表
+						offset: this.followOffset,
 					},
 					header: {
 						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
+						sign: getApp().globalData.headerSign,
 					},
 					success: (res) => {
 						console.log("关注列表数据:", res.data);
 						// 确保在任何情况下都完成加载
-						if (res.data.success == 'yes' && res.data.list && res.data.list.length > 0) {
+						if (
+							res.data.success == "yes" &&
+							res.data.list &&
+							res.data.list.length > 0
+						) {
 							// 只有当列表有数据时才追加
 							this.followList = [...this.followList, ...res.data.list];
 							this.followOffset += res.data.list.length;
@@ -492,7 +542,7 @@
 						if (this.$refs.paging) {
 							this.$refs.paging.complete(false);
 						}
-					}
+					},
 				});
 			},
 			loadRecommendList() {
@@ -500,20 +550,24 @@
 				this.isLoadingRecommend = true;
 
 				uni.request({
-					url: this.$apiHost + '/Work/getlist',
+					url: this.$apiHost + "/Work/getlist",
 					data: {
 						uuid: getApp().globalData.uuid,
 						skey: getApp().globalData.skey,
-						type: 'recommend', // 推荐列表
-						offset: this.recommendOffset
+						type: "recommend", // 推荐列表
+						offset: this.recommendOffset,
 					},
 					header: {
 						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
+						sign: getApp().globalData.headerSign,
 					},
 					success: (res) => {
 						console.log("推荐列表数据:", res.data);
-						if (res.data.success == 'yes' && res.data.list && res.data.list.length > 0) {
+						if (
+							res.data.success == "yes" &&
+							res.data.list &&
+							res.data.list.length > 0
+						) {
 							this.recommendList = [...this.recommendList, ...res.data.list];
 							this.recommendOffset += res.data.list.length;
 
@@ -539,7 +593,7 @@
 						if (this.$refs.paging) {
 							this.$refs.paging.complete(false);
 						}
-					}
+					},
 				});
 			},
 			loadHotNews() {
@@ -547,30 +601,34 @@
 				this.isLoadingExplore = true;
 
 				uni.request({
-					url: this.$apiHost + '/Article/getlist',
+					url: this.$apiHost + "/Article/getlist",
 					data: {
 						uuid: getApp().globalData.uuid,
 						skey: getApp().globalData.skey,
-						type: 'hot' // 热点新闻
+						type: "hot", // 热点新闻
 					},
 					header: {
 						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
+						sign: getApp().globalData.headerSign,
 					},
 					success: (res) => {
 						console.log("热点新闻数据:", res.data);
-						if (res.data.success == 'yes' && res.data.list && res.data.list.length > 0) {
+						if (
+							res.data.success == "yes" &&
+							res.data.list &&
+							res.data.list.length > 0
+						) {
 							this.hotNewsList = res.data.list;
-
+							
 							// 如果有热点新闻数据，更新热搜资讯
 							if (this.hotNewsList.length > 0) {
 								// 将API返回的热点新闻转换为热搜资讯格式
 								this.hotTopics = this.hotNewsList.map((item, index) => {
 									return {
 										id: item.id,
-										title: item.title || '热门话题',
+										title: item.title || "热门话题",
 										num_like: item.num_like || 0,
-										isHot: index % 2 === 0 // 偶数索引的设为热点
+										isHot: index % 2 === 0, // 偶数索引的设为热点
 									};
 								});
 							}
@@ -579,10 +637,10 @@
 					complete: () => {
 						this.isLoadingExplore = false;
 					},
-					fail: (e) => {
+					fail: (e) => { 
 						console.log("请求热点新闻失败:", e);
 						this.isLoadingExplore = false;
-					}
+					},
 				});
 			},
 			loadNewsList() {
@@ -590,20 +648,24 @@
 				this.isLoadingNews = true;
 
 				uni.request({
-					url: this.$apiHost + '/Article/getlist',
+					url: this.$apiHost + "/Article/getlist",
 					data: {
 						uuid: getApp().globalData.uuid,
 						skey: getApp().globalData.skey,
-						type: 'list', // 新闻列表
-						offset: this.newsOffset
+						type: "list", // 新闻列表
+						offset: this.newsOffset,
 					},
 					header: {
 						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
+						sign: getApp().globalData.headerSign,
 					},
 					success: (res) => {
 						console.log("新闻列表数据:", res.data);
-						if (res.data.success == 'yes' && res.data.list && res.data.list.length > 0) {
+						if (
+							res.data.success == "yes" &&
+							res.data.list &&
+							res.data.list.length > 0
+						) {
 							this.newsList = [...this.newsList, ...res.data.list];
 							this.newsOffset += res.data.list.length;
 
@@ -629,7 +691,7 @@
 						if (this.$refs.paging) {
 							this.$refs.paging.complete(false);
 						}
-					}
+					},
 				});
 			},
 			loadMoreData() {
@@ -655,7 +717,16 @@
 			handleTopicPageChange(e) {
 				this.currentTopicPage = e.detail.current;
 			},
+ 
 			formatItem(item) {
+
+				this.downloadAndProcessImage(item.images)
+					.then((color) => {
+						console.log(`平均颜色: R=${color.r}, G=${color.g}, B=${color.b}`);
+					})
+					.catch((error) => {
+						console.error("获取图像失败:", error);
+					});
 				// 处理接口返回的数据，使其适配card组件
 				return {
 					id: item.id,
@@ -666,51 +737,104 @@
 					image: item.images || item.img_url || item.image, // 优先使用images字段
 					w: item.width,
 					h: item.height,
-					title: item.title || '',
-					desc: item.desc || ''
-				}
+					title: item.title || "",
+					desc: item.desc || "",
+					backgroundColor: "#f6f6f6",
+				};
+			},
+			downloadAndProcessImage(imageUrl, width = 10, height = 10) {
+				return new Promise((resolve, reject) => {
+					uni.downloadFile({
+						url: imageUrl,
+						success: (downloadResult) => {
+							if (downloadResult.statusCode === 200) {
+								const tempFilePath = downloadResult.tempFilePath;
+								const ctx = uni.createCanvasContext('myCanvas', this);
+								ctx.drawImage(tempFilePath, 0, 0, width, height);
+								ctx.draw(false, () => {
+									uni.canvasGetImageData({
+										canvasId: 'myCanvas',
+										x: 0,
+										y: 0,
+										width: width,
+										height: height,
+										success: (res) => {
+											const data = res.data;
+											let r = 0,
+												g = 0,
+												b = 0;
+											for (let i = 0; i < data.length; i +=
+												4) {
+												r += data[i];
+												g += data[i + 1];
+												b += data[i + 2];
+											}
+											const count = width * height;
+											r = Math.floor(r / count);
+											g = Math.floor(g / count);
+											b = Math.floor(b / count);
+											resolve({
+												r,
+												g,
+												b
+											});
+										},
+										fail: (err) => {
+											reject(err);
+										}
+									});
+								});
+							} else {
+								reject(new Error('下载图像失败'));
+							}
+						},
+						fail: (err) => {
+							reject(err);
+						}
+					});
+				});
 			},
 			goToArticleDetail(id) {
 				if (!id) {
 					uni.showToast({
-						title: '文章ID不存在',
-						icon: 'none'
+						title: "文章ID不存在",
+						icon: "none",
 					});
 					return;
 				}
-				uni.$emit('check_login', () => {
+				uni.$emit("check_login", () => {
 					uni.navigateTo({
-						url: '/pages/index/articleDetail?id=' + id
+						url: "/pages/index/articleDetail?id=" + id,
 					});
-				})
+				});
 			},
 			goWork(item) {
 				console.log("skeylogin", "xxx");
-				uni.$emit('check_login', () => {
+				uni.$emit("check_login", () => {
 					uni.navigateTo({
-						url: '/pages/index/workDetail?id=' + item.id
-					})
-				})
+						url: "/pages/index/workDetail?id=" + item.id,
+					});
+				});
 			},
 			goToMake() {
 				console.log("skeylogin", "xxx2");
-				uni.$emit('check_login', () => {
+				uni.$emit("check_login", () => {
 					uni.navigateTo({
-						url: '/pages/make/make'
+						url: "/pages/make/make",
 					});
-				})
+				});
 			},
 			goPage(page) {
-				uni.$emit('check_login', () => {
+				uni.$emit("check_login", () => {
 					uni.navigateTo({
-						url: page
-					})
-				})
-			}
-		}
-	}
+						url: page,
+					});
+				});
+			},
+		},
+	};
 </script>
 
 <style lang="scss">
-	@import 'index.scss';
+	@import "index.scss";
 </style>

pages/makedetail/makeDetail.scss

@@ -383,6 +383,65 @@ page {
 	  }
 	}
 	
+	/* 像素颜色显示区域样式 */
+	.pixel-color {
+		display: flex;
+		align-items: center;
+		margin: 15rpx 0;
+		padding: 12rpx 16rpx;
+		background: #f9f9f9;
+		border-radius: 12rpx;
+		
+		.color-box {
+			width: 40rpx;
+			height: 40rpx;
+			border-radius: 8rpx;
+			margin-right: 16rpx;
+			border: 1px solid #eee;
+			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+			
+			&.loading {
+				background: linear-gradient(45deg, #f0f0f0 25%, #e0e0e0 25%, #e0e0e0 50%, #f0f0f0 50%, #f0f0f0 75%, #e0e0e0 75%);
+				background-size: 10rpx 10rpx;
+				animation: loading 1s linear infinite;
+			}
+		}
+		
+		.color-info {
+			display: flex;
+			flex-direction: column;
+		}
+		
+		.color-text {
+			font-size: 24rpx;
+			color: #666;
+			margin-bottom: 4rpx;
+		}
+		
+		.color-value {
+			font-size: 24rpx;
+			color: #333;
+			font-family: monospace;
+			margin-bottom: 4rpx;
+		}
+		
+		.color-hex {
+			font-size: 24rpx;
+			color: #444;
+			font-family: monospace;
+			font-weight: bold;
+		}
+		
+		&.loading {
+			background: #f5f5f5;
+		}
+	}
+	
+	@keyframes loading {
+		from { background-position: 0 0; }
+		to { background-position: 20rpx 0; }
+	}
+	
 	.popup-footer {
 	  display: flex;
 	  border-top: 1rpx solid #f0f0f0;

pages/makedetail/makeDetail.vue

@@ -48,6 +48,25 @@
 		<view class="body">
 			<view class="article-header">
 				<text class="title">{{ queueDetail.title }}</text>
+
+				<!-- 显示第一个像素的颜色 -->
+				<view class="pixel-color" v-if="pixelColor">
+					<view class="color-box"
+						:style="{backgroundColor: `rgb(${pixelColor.r}, ${pixelColor.g}, ${pixelColor.b})`}"></view>
+					<view class="color-info">
+						<text class="color-text">左上角像素RGB值:</text>
+						<text class="color-value">R:{{pixelColor.r}} G:{{pixelColor.g}} B:{{pixelColor.b}}</text>
+						<text class="color-hex">HEX: {{rgbToHex(pixelColor.r, pixelColor.g, pixelColor.b)}}</text>
+					</view>
+				</view>
+
+				<!-- 颜色加载中状态 -->
+				<view class="pixel-color loading"
+					v-else-if="home_image && home_image !== '../../static/home/avator.png'">
+					<view class="color-box loading"></view>
+					<!-- <text class="color-text">正在获取像素颜色...</text> -->
+				</view>
+
 				<view class="meta-info">
 					<view class="meta-item">
 						<text class="fa fa-clock-o"></text>
@@ -128,6 +147,10 @@
 		<!-- 音频元素 -->
 		<audio id="audioPlayer" :src="queueDetail.result_audio" style="display:none;"></audio>
 
+		<!-- 用于处理图片像素的隐藏canvas -->
+		<canvas canvas-id="pixelCanvas"
+			style="width: 10px; height: 10px; position: absolute; left: -100px; top: -100px;"></canvas>
+
 		<!-- 底部漂浮栏 -->
 		<view class="floating-bar" v-if="queueDetail.status == 9">
 			<view class="floating-bar-content">
@@ -185,6 +208,7 @@
 				audioPlayer: null,
 				showNotePopup: false,
 				noteContent: '',
+				pixelColor: null, // 存储像素颜色值
 
 				// 队列详情数据
 				queueDetail: {
@@ -220,7 +244,7 @@
 		},
 		onLoad(parms) {
 			let self = this;
-			this.arcID = parms.id || 3;
+			this.arcID = parms.id || 9;
 			this.getMyInfo();
 		},
 		onShow() {
@@ -244,6 +268,77 @@
 
 		},
 		methods: {
+			// 获取图片第一个像素的RGB值
+			getImagePixelColor() {
+				console.log("图片加载完成，准备获取像素颜色");
+
+				// 清空之前的颜色值，进入加载状态
+				this.pixelColor = null;
+
+				// 如果是默认图片或空图片，则直接返回
+				if (!this.home_image || this.home_image === '../../static/home/avator.png') {
+					console.log("无有效图片，不获取像素颜色");
+					return;
+				}
+
+				// 使用uni.getImageInfo获取图片信息
+				uni.getImageInfo({
+					src: this.home_image,
+					success: (res) => {
+						console.log("图片信息:", res);
+
+						// 创建临时canvas绘制上下文
+						const ctx = uni.createCanvasContext('pixelCanvas', this);
+
+						// 修改绘制参数，确保只绘制图片左上角的一小块区域
+						// drawImage(图片路径, 源图片裁剪x, 源图片裁剪y, 源图片裁剪宽度, 源图片裁剪高度, canvas目标x, canvas目标y, canvas目标宽度, canvas目标高度)
+						// 这里我们只从源图片左上角裁剪10x10的区域，绘制到canvas的左上角
+						ctx.drawImage(res.path, 0, 0, 10, 10, 0, 0, 10, 10);
+
+						ctx.draw(false, () => {
+							// 绘制完成后，获取像素数据
+							setTimeout(() => { // 添加短暂延迟确保绘制完成
+								uni.canvasGetImageData({
+									canvasId: 'pixelCanvas',
+									x: 0, // 获取(0,0)位置的像素
+									y: 0,
+									width: 1,
+									height: 1,
+									success: (res) => {
+										// 获取像素RGB值
+										this.pixelColor = {
+											r: res.data[0],
+											g: res.data[1],
+											b: res.data[2],
+											a: res.data[3]
+										};
+										console.log("第一个像素的RGB值:", this
+											.pixelColor);
+									},
+									fail: (err) => {
+										console.error("获取像素数据失败:", err);
+										// 显示错误提示
+										uni.showToast({
+											title: '获取颜色失败',
+											icon: 'none',
+											duration: 2000
+										});
+									}
+								});
+							}, 100);
+						});
+					},
+					fail: (err) => {
+						console.error("获取图片信息失败:", err);
+						// 显示错误提示
+						uni.showToast({
+							title: '图片加载失败',
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				});
+			},
 			// 返回上一页
 			goBack() {
 				uni.navigateBack({
@@ -328,7 +423,7 @@
 				uni.showLoading({
 					title: '加载中...'
 				});
-
+				let that = this;
 				uni.request({
 					url: this.$apiHost + '/WorkAI/getQueueDetail',
 					data: {
@@ -350,6 +445,11 @@
 							if (this.queueDetail.result_images && this.queueDetail.result_images !== "") {
 								this.image_list = this.queueDetail.result_images.split(",");
 								this.home_image = this.image_list[0];
+
+								// 当图片更新后，手动触发获取像素颜色（因为图片可能从缓存加载，不会触发@load事件）
+								// setTimeout(() => {
+								// 	that.getImagePixelColor();
+								// }, 500);
 							} else {
 								this.home_image = "../../static/home/avator.png";
 							}
@@ -674,6 +774,9 @@
 					console.log('Current Offset Y:', this.offsetY);
 					console.log(this);
 				}
+			},
+			rgbToHex(r, g, b) {
+				return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 			}
 		}
 	}

pages/my/my.vue

@@ -74,7 +74,7 @@
 					</view>
 				</view>
 				<view class="numlist2" style="margin-top: 60rpx;">
-					<view class="item" v-for="(item,index) in worksList" :key="index">
+					<view class="item" v-for="(item,index) in worksList" :key="index" v-if="index < 2">
 						<view class="num" @click="goWork(item)">
 							<!-- 当activeTab为0时显示图片 -->
 							<image v-if="activeTab === 0" class="icon"
@@ -109,11 +109,12 @@
 				</view>
 
 				<!-- 加载更多提示 -->
-				<view class="loading-more" v-if="isLoading">加载中...</view>
+				<!-- <view class="loading-more" v-if="isLoading">加载中...</view>
 				<view class="no-more" v-if="!hasMore && worksList.length > 0">没有更多作品了</view>
-				<view class="no-more" v-if="!hasMore && worksList.length === 0">暂无作品</view>
+				<view class="no-more" v-if="!hasMore && worksList.length === 0">暂无作品</view> -->
 
 			</view>
+			<view style="width:100%;text-align: center;">杭州智潮创意科技有限公司</view>
 
 			<view class="blankHeight"></view>
 			<view class="blankHeight"></view>