<template>
	<view>
		<view class="body">
			<uni-nav-bar fixed statusBar left-icon="left" background-color="transparent" :border="false"
				@clickLeft="back" title="日记"></uni-nav-bar>
			<image class="back" src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/2ea998409fac8d1ac2894596469f7e1c.png" mode="widthFix"></image>
		</view>
		<view class="list">
			<scroll-view scroll-y="true" class="scroll-view" show-scrollbar>
				<view class="list_content">
					<view class="list_title">Ta 留下来的日记，记录着Ta非常多的小心思～ 了解Ta，从现在开始Ta 留下来的日记，记录着Ta非常多的小心思～ 了解Ta，从现在开始Ta 留下来的日记，记录着Ta非常多的小心思～ 了解Ta，从现在开始Ta 留下来的日记，记录着Ta非常多的小心思～ 了解Ta，从现在开始Ta 留下来的日记，记录着Ta非常多的小心思～ 了解Ta，从现在开始Ta 留下来的日记，记录着Ta非常多的小心思～ 了解Ta，从现在开始Ta 留下来的日记，记录着Ta非常多的小心思～ 了解Ta，从现在开始Ta 留下来的日记，记录着Ta非常多的小心思～ 了解Ta，从现在开始</view>
				</view>
			</scroll-view>
		</view>
		<view class="opt fa sb">
			<view class="opt_content">
				<image src="/static/images/diary_a1.png" mode="widthFix"></image>
				<view class="opt_title faj">点赞</view>
			</view>
			<view class="opt_content">
				<image src="/static/images/diary_a2.png" mode="widthFix"></image>
				<view class="opt_title faj">评论</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {

	} from '@/utils/api.js'
	import notHave from '@/components/not-have.vue';
	import topSafety from '@/components/top-safety.vue';
	export default {
		components: {
			notHave,
			topSafety,
		},
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
			generateClick() {
				uni.navigateBack({
					delta: 2,
				});
			},
		}
	}
</script>

<style>
	.body {
		position: relative;
	}

	.back {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		display: block;
	}

	.body {
		position: relative;
		padding: 0 60rpx;
	}

	.list {
		position: absolute;
		top: 33%;
		left: 0;
		right: 0;
		bottom: 36%;
		margin: 0 110rpx 0 80rpx;
	}
    
    .scroll-view {
        overflow: hidden;
        height: 100%; /* 让滚动视图填满整个.list容器 */
    }

	.list_content {
		position: relative;
	}

	.list_title {
		font-weight: 500;
		font-size: 36rpx;
		color: #8D58FC;
		line-height: 50rpx;
	}

	.opt {
		position: absolute;
		top: 66%;
		left: 0;
		right: 0;
		margin: 0 92rpx 0 138rpx;
	}

	.opt_content {
		position: relative;
		width: 220rpx;
	}

	.opt_content image {
		width: 100%;
		display: block;
	}

	.opt_title {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 42rpx;
	}
</style>