feat: 完成农资详情页面的制作

src/pages/kexinnongzi/detail.vue

@@ -4,10 +4,20 @@
 	import { reactive, ref } from 'vue'
 	import * as NongzhiAPI from '@/api/model/nongzhi'
 	const bgColorData = ["#EEFAEB","#EFF1FF","#FFF3F1","#E8F7F7","#FFF3E7","#FAF8EA"];
-	let testDataList = ['营业执照','食品经营许可证类选择器允许你根据元素在','有机产品认证书','无公害农产品证书','有机产品认证书','营业执照']
+	let testDataList = ['营业执照','食品经营许可证','有机产品认证书','无公害农产品证书','有机产品认证书','营业执照','营业执照2','营业执照3']
 	const pageData = reactive({
 		
 	})
+	function getBgColor(index:any){
+		if(index < 6){
+			return bgColorData[index];
+		}else{
+			return bgColorData[Math.floor(Math.random() * 5)];
+		}
+	}
+	function handlePublish() {
+		Navigate.to('/pages/linghuoyonggong/publishEmployment')
+	}
 </script>
 <template>
 	<view class="w-full h-95vh bg-#E6F5E8 detail_page">
@@ -20,14 +30,30 @@
 			<view class="module_title">资质证书</view>
 			<view class="module_separate"></view>
 			<view class="module_qualification">
-				<view class="qualification_item qualification_bg" v-for="(item,index) in testDataList" :key="index">
+				<view class="qualification_item" :style="`background:${getBgColor(index)}`" v-for="(item,index) in testDataList" :key="index">
 					<image class="enterprise_logo" mode="heightFix" src="/static/images/test/test_business.png" />
 					<view class="qualification_name ellipsis">{{item}}</view>
 				</view>
 			</view>
 		</view>
-		<view class="module_width footer_content">主营产品</view>
+		<view class="module_width footer_content">
+			<view class="module_title">主营产品</view>
+			<view class="module_separate"></view>
+			<view class="module_business">
+				<view class="business_item" v-for="(item,index) in 5" :key="index">
+					<image class="business_img" mode="heightFix" src="/static/images/test/product.png" />
+					<view class="qualification_name ellipsis">有机砂糖橘</view>
+					<view class="qualification_price ellipsis">¥3.2<text class="qualification_text">/斤</text></view>
+				</view>
+			</view>
+		</view>
 	</view>
+	<fui-fab position="right" distance="10" bottom="240" width="120" @click="handlePublish">
+	    <view class="text-white text-center">
+	        <view class="fab-icon" />
+	        <view style="font-size: 24rpx">发布产品</view>
+	    </view>
+	</fui-fab>
 </template>
 
 <style lang="less" scoped>
@@ -37,6 +63,7 @@
 	justify-content: center;
 	align-items: flex-start;
 	align-content: flex-start;
+	padding-bottom: 40rpx;
 	.module_width{
 		width: 690rpx;
 		margin-top: 24rpx;
@@ -101,7 +128,7 @@
 		background: linear-gradient(233.81deg, #5CB56E 0%, #64D63E 100%);
 	}
 	.module_qualification{
-		margin-top: 32rpx;
+		margin-top: 6rpx;
 		display: flex;
 		flex-wrap: wrap;
 		align-items: flex-start;
@@ -112,7 +139,6 @@
 			margin-left: 20rpx;
 			margin-top: 26rpx;
 			border-radius: 8rpx;
-			background: #EEFAEB;
 			padding-top: 8rpx;
 			box-sizing: border-box;
 			display: flex;
@@ -135,5 +161,59 @@
 		}
 	}
 	
+	
+	.module_business{
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		align-content: flex-start;
+		justify-content: space-between;
+		.business_item{
+			width: 310rpx;
+			height: 292rpx;
+			margin-top: 24rpx;
+			border-radius: 16rpx;
+			box-sizing: border-box;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			background: #F9FAFB;
+			.business_img{
+				width: 310rpx;
+				height: 180rpx;
+				opacity: 1;
+				border-radius: 16rpx 16rpx 0rpx 0rpx;
+			}
+			.qualification_name{
+				height: 48rpx;
+				line-height: 48rpx;
+				font-size: 32rpx;
+				color: #000000;
+				max-width: 280rpx;
+				margin-top: 6rpx;
+			}
+			.qualification_price{
+				height: 48rpx;
+				width: 280rpx;
+				opacity: 1;
+				font-size: 32rpx;
+				font-weight: 400;
+				letter-spacing: 0px;
+				line-height: 48rpx;
+				text-align: center;
+				color: #5DB66F;
+				.qualification_text{
+					font-size: 12px;
+				}
+			}
+		}
+		.business_item:nth-child(odd){
+			margin-left: 0rpx;
+		}
+	}
+}
+::v-deep .fui-fab__btn-main {
+	background: linear-gradient(124.25deg, #a5d63f 0%, #5db66f 100%) !important;
+	box-shadow: 0px 1px 8px #5db66f;
 }
 </style>