feiniao-youwei-uniapp/pages/tabBar/tree/subPages/diary.vue

<template>
	<view class="sub-base-container">
		<view class="tree-info">
			<image class="image" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
			<view class="info-cont">
				<view class="tree-name">果树档案</view>
				<view class="text-wrap">
					<view class="row-text">
						<text class="label">树木名称</text>
						<text>茜茜荔</text>
					</view>
					<view class="row-text">
						<text class="label">树木编号</text>
						<text>LCJGHN-GZCH-LBY0011</text>
					</view>
					<view class="row-text">
						<text class="label">来自农场</text>
						<text>从化荔枝博览园</text>
					</view>
					<view class="row-text">
						<text class="label">品种树龄</text>
						<text>井岗红糯-18年</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tree-diary">
			<view class="diary-head">
				<view class="date" @click="handleDate">
					<image class="img" :src="`${config.BASIC_IMG}img/subTreePage/date-icon.png`"></image>
					<text>2025年7月28日</text>
				</view>
				<view class="arrow-group">
					<view class="arrow-icon">
						<up-icon name="arrow-left" size="17" bold color="#fff"></up-icon>
					</view>
					<view class="arrow-icon">
						<up-icon name="arrow-right" size="17" bold color="#fff"></up-icon>
					</view>
				</view>
			</view>
			<view class="diary-cont">
				<view class="text">今天是我开花的日子今天是我开花的日子今天是我开花的日子今天是我开花的日子</view>
				<view class="photo">
					<image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
				</view>
			</view>
		</view>
	</view>
	<up-datetime-picker
		:show="showDatetim"
		v-model="date"
		mode="date"
		@cancel="cancel"
		@confirm="cancel"
	></up-datetime-picker>
</template>

<script setup>
	import config from "@/api/config.js"
	import {ref} from "vue"
	
	const showDatetim = ref(false)
	const date = ref('')
	
	const handleDate = () =>{
		showDatetim.value = true
	}
	const cancel = () =>{
		showDatetim.value = false
	}
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";

	.sub-base-container {
		background-image: linear-gradient(0deg, #FFFFFF, rgba(33, 153, 248, 0.6));
		max-height: 484rpx;
		min-height: 484rpx;
		padding-top: 52rpx;

		.tree-info {
			display: flex;
			justify-content: space-between;

			.image {
				width: 220rpx;
				height: 220rpx;
				border: 2rpx solid #fff;
				border-radius: 16rpx;
			}

			.info-cont {
				width: calc(100% - 220rpx - 36rpx);
				border: 2rpx solid #fff;
				border-radius: 16rpx;
				background-image: linear-gradient(180deg, rgba(241, 249, 255, .6), rgba(255, 255, 255, .75));

				.tree-name {
					font-size: 28rpx;
					font-family: 'PangMenZhengDao';
					padding: 8rpx 0;
					border-radius: 16rpx 4rpx 16rpx 4rpx;
					background-image: linear-gradient(120deg, #9FD5FF, #2199F8);
					color: #fff;
					width: 164rpx;
					text-align: center;
				}

				.text-wrap {
					padding: 8rpx 0 0 20rpx;
					line-height: 36rpx;

					.row-text {
						font-size: 24rpx;

						.label {
							font-weight: 500;
							margin-right: 20rpx;
						}
					}
				}
			}
		}

		.tree-diary {
			width: 100%;
			min-height: 960rpx;
			box-sizing: border-box;
			padding: 70rpx 0 56rpx 34rpx;
			@include ossBg("subTreePage/diary-bg.png");
			.diary-head{
				display: flex;
				justify-content: space-between;
				.date{
					font-family: 'PangMenZhengDao';
					font-size: 29rpx;
					color: #2199F8;
					display: flex;
					align-items: center;
					.img{
						width: 26rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}
				}
				.arrow-group{
					display: flex;
					.arrow-icon{
						border-radius: 50%;
						background: rgba(33, 153, 248, 0.2);
						width: 56rpx;
						height: 56rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.arrow-icon + .arrow-icon{
						margin-left: 20rpx;
					}
				}
			}
			.diary-cont{
				padding: 120rpx 60rpx 0 26rpx;
				.text{
					width: 72%;
					margin: auto;
					font-weight: 500;
					position: relative;
					&::before{
						content: '“';
						position: absolute;
						top: -85rpx;
						left: -90rpx;
						font-size: 140rpx;
						color: rgba(33, 153, 248, 0.2);
					}
					&::after{
						content: '”';
						position: absolute;
						bottom: -130rpx;
						right: -110rpx;
						font-size: 140rpx;
						color: rgba(33, 153, 248, 0.2);
					}
				}
				.photo{
					width: 100%;
					height: 420rpx;
					margin-top: 90rpx;
					border: 10rpx solid #d0e6fb;
					box-shadow:  0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
					position: relative;
					&::before{
						content: '';
						position: absolute;
						z-index: 2;
						right: -34rpx;
						top: 0;
						background: rgba(33, 153, 248, 0.56);
						transform: rotate(38deg);
						width: 102rpx;
						height: 30rpx;
					}
					.img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}
	}
</style>