<template>
	<view class="page">
		<view class='wraper'>
			<view class='header'>
				<view class="header-item">哈哈</view>
				<view class="header-item">哈哈</view>
				<view class="header-item">哈哈</view>
				<view class="header-item">哈哈</view>
				<view class="header-item">哈哈</view>
				<view class="header-item">哈哈</view>
			</view>
			<view class='main'>
				<view class="main-left">
				</view>
				<view class="main-right">
					<scroll-view class='main-scroll' scroll-y style="height: 100%">
						<view class='list-box'>
							<view class='list-item' v-for="(item,index) in data.cardList">
								<view class='list-item-left'>
									<image class="list-item-img" src="../../static/logo.png"></image>
								</view>
								<view class='list-item-right'>
								<text class="list-item-title">{{item.name}}</text>
								<view class='list-item-content'>{{item.content}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class='footer'>footer</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	import useCounter from '../../composables/counter'
	import {
		ref,
		reactive,
		computed,
		watch
	} from 'vue'
	const data = reactive({
		a: 1,
		b: 2,
		windowHeight: 0,
		name: "jack",
		cardList: [{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},{
			name: '最灵繁的人也看不见自己的背脊脊脊脊脊脊脊脊。',
			content: '一切利己的生活，都是非理性的，动物的生活。 —— 列夫·托尔斯泰'
		},]
	})

	uni.getSystemInfo({
		success: res => {
			console.log(res)
			data.a = res
		}
	})
	watch(data, (newValue, oldValue) => {
		console.log('v1====', newValue, oldValue);
	})
	onLoad((options) => {
		console.log('页面初始化')
	});
	onShow(() => {
		console.log('页面出现时')
	});
	uni.getSystemInfo({
		success(r) {
			data.b = r
		}
	})
	console.log(data.a)
</script>

<style>

</style>
