Sprinkler-app/page_user/photoxq.vue

<template>
	<view class="page">
		<u-navbar :is-back="true" title='识图' title-color="#000" :border-bottom="false" :background="bgc"
			id="navbar">
		</u-navbar>
		
		<view class="top_page">
			<view class="title">凤尾竹</view>
			<view class="other_name">
				又名：花海
			</view>
			<view class="cont">
				<view class="cont_left">
					<view class="cont_left_tit">
						难易程度
					</view>
					<view class="cont_left_txt">
						非常容易
					</view>
					<view class="cont_left_tit" style="margin-top: 40rpx;">
						功能
					</view>
					<view class="cont_left_txt">
						吸甲醛、净化空气、美观
					</view>
					<view class="cont_left_tit" style="margin-top: 40rpx;">
						适合空间
					</view>
					<view class="cont_left_txt">
						办公桌、书房、客厅、户外
					</view>
				</view>
				<view class="cont_right">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u5qEV0STfGCLxtW06R0g" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bot_page">
			<view class="tit" style="margin-top: 0rpx;">
				养护重点
			</view>
			<view class="txt">
				1、喜欢散光环境，耐寒力差，幼苗忌霜冻喜肥沃酥
				松土壤。
				2、适宜生长环境温度在10C到25C之间
				3、不喜水 土壤干后加水一般十天左右
			</view>
		</view>
		<view class="about">
			<view class="tit">
				关于
			</view>
			<view class="cont">
				凤尾竹（Bambusa multiplex (Lour.) Raeusch. 
				ex Schult. 'Fernleaf' R. A. Young）是禾本科，簕
				竹属孝顺竹的变种。植株较高大，杆高可达6米，竿
				中空，小枝、稍下弯，下部挺直，绿色；竿壁稍薄；
				节处稍隆起，无毛；叶鞘无毛，纵肋稍隆起，背部
				具脊；叶耳肾形，边缘具波曲状细长繸毛；叶舌圆拱
				形，叶片线形，上表面无毛，下表面粉绿而密被短柔
				毛，小穗含小花，中间小花为两性；外稃两侧稍不对
				称，长圆状披针形，先端急尖；内稃线形，脊上被短
				纤毛，花药紫色，子房卵球形，羽毛状。成熟颖果未
				见。原产中国，华东、华南、西南以至台湾、香港均
				有栽培。该种观赏价值较高，宜作庭院丛栽，也可作
				盆景植物。（概述图参考来源：中国自然标本馆）
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
			}
		},
		onLoad(option) {

		},
		methods: {
 
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title{
		margin-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		margin-bottom: 22rpx;
	}
	.about{
		margin-top: 56rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		.tit{
			font-size: 40rpx;
			color: #3D3D3D;
			font-weight: 600;
		}
		.cont{
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #3D3D3D;
		}
	}
	 .activesc{
		 background-color: #999 !important;
	 }
	.shouc {
		width: 100%;
		padding: 0rpx 100rpx;
		box-sizing: border-box;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 80rpx;
		text-align: center;
		text {
			display: inline-block;
			width: 200rpx;
			background-color: #3dada9;
			color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius:50rpx;
		}
	}
	
	.container {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		padding-top: 50rpx;
		box-sizing: border-box;
	}


	page {
        padding-bottom: 200rpx; 
		box-sizing: border-box;
		background: #fff;
	}

	.top_page {
		background: #fff;
		padding: 0 32rpx;
		padding-bottom: 28rpx;

		.title {
			margin-top: 23rpx;
			font-size: 80rpx;
			// font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 88rpx;
			color: rgba(80, 86, 90, 1);
		}

		.other_name {
			margin-top: 8rpx;
			font-size: 40rpx;
			letter-spacing: 0rpx;
			line-height: 48rpx;
			color: rgba(119, 128, 141, 1);
		}

		.cont {
			margin-top: 82rpx;
			margin-bottom: 28rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: flex-start;

			.cont_left {
				display: flex;
				flex-wrap: wrap;
				// margin-right: 40rpx;
				// align-items: baseline;
				width: 50%;

				.cont_left_tit {
					font-size: 28rpx;
					// font-weight: 400;
					letter-spacing: 0.56rpx;
					line-height: 36rpx;
					color: #3D3D3D;
				}

				.cont_left_txt {
					margin-top: 10rpx;
					width: 294rpx;
					font-size: 32rpx;
					// font-weight: 600;
					letter-spacing: 0.64rpx;
					line-height: 40rpx;
					color: #50565A;

				}
			}

			.cont_right {
				width: 320rpx;
				height: 320rpx;
				margin-right: 20rpx;
				box-sizing: border-box;
				image {
					background-size: cover;
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}

		}

	}

	.bot_page {
		padding: 23rpx 32rpx 0rpx 32rpx;

		.tit {
			font-size: 40rpx;
			font-weight: 700;
			letter-spacing: 0rpx;
			line-height: 40rpx;
			color:#48893B;
			margin-bottom: 40rpx;
		}

		.txt {
			// margin-top: 24rpx;
			width: 100%;
			margin-top: 12rpx;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0.64rpx;
			line-height: 40rpx;
			color:#48893B;

		}
	}
</style>