zlpt_app/pages/deviceDetail/deviceDetail.vue

<template>
	<view>
		<view class="device-pic">
			<image src="../../static/bg4.jpg" mode=""></image>
		</view>
		<view class="device-info">
			<view class="info-name">
				<view style="font-size: 20px;">522单杠震动压路机</view>
				<view style="color: #F74A01; font-size: 20px;">￥20000<span style="font-size: 12px;">/月</span></view>
			</view>
			<view class="info-tag">
				<view>
					<h4>待租</h4>
					<h4>已审核</h4>
				</view>
				<view style="color: #FF8952; font-size: 20px;">￥800<span style="font-size: 12px;">/天</span></view>
			</view>
			<view class="info-times">
				<span>发布时间：2023.11.12</span>
				<span>更新时间：2023.11.23</span>
				<span>浏览次数：123次</span>
			</view>
		</view>
		<view class="store">
			<view class="store-lef"></view>
			<view class="store-rig">
				<view class="rig-top">
					<text>安徽博诺思信息科技有限公司</text>
					<text style="color: #4D82FA;">进入店铺</text>
				</view>
				<view class="rig-cen">
					<text>发布设备：330台</text>
					<text>成立时间：2005.12.12</text>
				</view>
				<view class="rig-btm">
					<uni-icons type="eye" size="12" style="color: #CACACA;"></uni-icons>
					访问330次
				</view>
			</view>
		</view>
		<view class="device-detail">
			<h3 style="margin-bottom: 30rpx;">装备详情</h3>
			<view class="device-codes">
				<view class="codes-lef">
					<text>品牌：志高</text>
					<text>装备编号：志高</text>
					<text>装备组别：志高</text>
					<text>装备名称：志高</text>
					<text>规格：志高</text>
					<text>检验信息：xxx.pdf</text>
				</view>
				<view class="codes-rig">
					<text>装备型号：志高</text>
					<text>序列号码：志高</text>
					<text>出场时间：志高</text>
					<text>工作时长：志高</text>
					<text>功能特点：志高</text>
					<text>保险信息：xxx.pdf</text>
				</view>
			</view>
		</view>
		<uni-goods-nav :fill="true" :options="bottomOps" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottomOps: [{
					icon: 'heart',
					text: '收藏'
				}],
				buttonGroup: [{
					  text: '我要租用',
					  backgroundColor: '#5098FF',
					  color: '#fff'
					},
					{
					  text: '咨询电话',
					  backgroundColor: '#ADD6FF',
					  color: '#fff'
					}
				]
			}
		},
		methods: {
			onClick (e) {
			  console.log(e);
			  if (!e.content.color) {
				  this.bottomOps[0].color = '#FF0000'
				  this.bottomOps[0].icon = 'heart-filled'
				  uni.showToast({
				  	icon: 'none',
					title: '收藏成功！'
				  })
			  } else {
				  delete this.bottomOps[0].color
				  this.bottomOps[0].icon = 'heart'
			  }
			},
			buttonClick (e) {
			  console.log(e)
			  if (e.index == 0) {
				  uni.navigateTo({
				  	url: '/pages/subLoanInfo/subLoanInfo'
				  })
			  }
			}
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #F6F6F6;
	}
	.device-pic{
		width: 100%;
		height: 30vh;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.device-info, .store, .device-detail{
		width: 95%;
		margin: 20rpx auto;
		box-sizing: border-box;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}
	.device-info{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		view{
			margin-bottom: 15rpx;
		}
		view:last-child{
			margin-bottom: 0;
		}
		.info-name, .info-tag{
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-weight: bold;
		}
		.info-tag{
			view:first-child{
				width: 30%;
				display: flex;
				justify-content: space-between;
				h4{
					border: 1px solid #ABC7FF;
					box-sizing: border-box;
					padding: 8rpx 15rpx;
					color: #0F5AE3;
					font-size: 12px;
					font-weight: normal;
				}
			}
		}
		.info-times{
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 20rpx;
		}
	}
	.store{
		display: flex;
		.store-lef{
			width: 18%;
			height: 120rpx;
			background-color: red;
		}
		.store-rig{
			flex: 1;
			box-sizing: border-box;
			padding-left: 15rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			view{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.rig-top{
				font-size: 14px;
				font-weight: bold;
			}
			.rig-cen{
				font-size: 12px;
				color: #9A9A9A;
			}
			.rig-btm{
				justify-content: flex-start;
				font-size: 20rpx;
				color: #CACACA;
			}
		}
	}
	.device-detail{
		.device-codes{
			width: 100%;
			display: flex;
			view{
				width: 50%;
				display: flex;
				flex-direction: column;
				font-size: 14px;
				text{
					margin-bottom: 15rpx;
				}
			}
		}
	}
</style>