<template>
  <view class="home_root">
	  <view class="home_main">
		  <view class="home_header">
		  		  <view class="header_img">
					  <image class="imge_head" src="@/assets/images/头像true.png"></image>
				  </view>
				  <view class="header_name">
					  <text class="name_title">李芳芳</text>
					  <view class="name_butt">
						  <text><navigator url="../my/index">修改个人信息</navigator></text>
					  </view>
						  
				  </view>
		  </view>
		  <view class="home_contre">
		  			<view class="contre_butt">
						<button>
							<view class="contrebutt_imgs"><image src="@/assets/images/通行二维码.png"></image></view>
							<view class="contre_text">通行二维码</view>
						</button>
					</view>
					<view class="contre_img">
						 <image class="contre_image" src="@/assets/images/二维码.png"></image>
					</view>
					<view class="contre_title"><text class="title_text">
当日一次有效</text></view>
					
		  </view>
	  </view>
	  <Tabbar/>
  </view>

</template>

<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import Tabbar from '@/components/Tabbar'

const DefaultPageInfo = {
  page: 1,
  pageSize: 10
}

interface Item {
  id: number
  importance: string
  money: string
  content: string
  title: string
  image: string
}

interface IState {
  list: Item[]
  pullRefreshLoading: boolean
  loading: boolean
  finishedText: string
  finished: boolean
  params: typeof DefaultPageInfo
}

const state: IState = reactive({
  list: [],
  // 下拉刷新
  pullRefreshLoading: false,
  // 上滑加载
  loading: false,
  finishedText: '加载中...',
  finished: false,
  params: { ...DefaultPageInfo }
})

const data = [
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
]


// 获取列表
const getList = async () => {

}
// 上滑加载
const onLoad = () => {
  state.finishedText = '加载中...'
  state.loading = true
  getList()
}
// 下拉刷新
const onRefresh = () => {
  state.finishedText = '加载中...'
  state.loading = true
  state.finished = false
  state.params.page = 1
  getList()
}

const { list, pullRefreshLoading, loading, finishedText, finished } = toRefs(state)
</script>

<style lang="less" scoped>
@root_vw: 750;
.get_vw(@vw){
	@sty: (@vw/@root_vw) * 100vw;
}
.home_root {
	.home_main {
		.home_contre{
			margin-top: .get_vw(69)[@sty];
			.contre_title{
				margin-top: .get_vw(23)[@sty];
				text-align: center;
				.title_text{
					width: .get_vw(180)[@sty];
					height: .get_vw(42)[@sty];
					font-size: .get_vw(30)[@sty];
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: .get_vw(42)[@sty];
				}
			}
			.contre_img{
				text-align: center;
				margin-top: .get_vw(23)[@sty];
				.contre_image{
					width: .get_vw(470)[@sty];
					height: .get_vw(470)[@sty];
				}
			}
			.contre_butt{
				button{
					width: .get_vw(252)[@sty];
					height: .get_vw(48)[@sty];
					background: #E9F3FF;
					border-radius: .get_vw(24)[@sty];
					display: flex;
					display: -webkit-flex;
					justify-content: space-around;
					padding-left: 0px;
					.contrebutt_imgs{
						width: .get_vw(30)[@sty];
						height: .get_vw(30)[@sty];
						margin: auto .get_vw(5)[@sty];
						position: relative;
						image{
							position: absolute;
							width: 100%;
							height: 100%;
						}
					}
					.contre_text{
						width: .get_vw(150)[@sty];
						height: .get_vw(48)[@sty];
						font-size: .get_vw(30)[@sty];
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #4C9FFF;
						line-height: .get_vw(42)[@sty];
					}
				}
			}
		}
		.home_header{
			
			.header_name{
				display: -webkit-flex;
				display: flex;
				margin-top: .get_vw(23)[@sty];
				.name_butt{
					width: .get_vw(216)[@sty];
					height: .get_vw(48)[@sty];
					border-radius: .get_vw(24)[@sty];
					border: .get_vw(1)[@sty] solid #4C9FFF;
					text-align: center;
					margin-left: .get_vw(54)[@sty];
					text{
						width: .get_vw(168)[@sty];
						height: .get_vw(40)[@sty];
						font-size: .get_vw(28)[@sty];
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #4C9FFF;
						line-height: .get_vw(48)[@sty];
					}
				}
				.name_title{
					width: .get_vw(90)[@sty];
					height: .get_vw(42)[@sty];
					font-size: .get_vw(30)[@sty];
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: .get_vw(42)[@sty];
					margin-left: .get_vw(290)[@sty];
				}
			}
			// margin-bottom: .get_vw(793)[@sty];
			.header_img{
				text-align: center;
				.imge_head{
					width: .get_vw(160)[@sty];
					height: .get_vw(160)[@sty];
					padding: 2.get_vw(470)[@sty];
					margin-top: -(.get_vw(65)[@sty]);
					background: #FFFFFF 100%;
					border-radius: 12.get_vw(470)[@sty];
				}
			}
		}
		width: .get_vw(670)[@sty];
		height: .get_vw(888)[@sty];
		border-radius: 12.get_vw(470)[@sty];
		background: #FFFFFF 100%;
		margin: .get_vw(117)[@sty] auto;
	}
	height: 100vh;
	width: 100vw;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	 /* chrome 10+, safari 5.1+ */
	 background-image: -webkit-linear-gradient(#2988F3,#7BCCFC);
	 /* firefox; multiple color stops */
	 background-image: -moz-linear-gradient(top,#2988F3,#7BCCFC);
	 /* ie 6+ */
	 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2988F3', endColorstr='#7BCCFC');
	 /* ie8 + */
	 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2988F3', endColorstr='#7BCCFC')";
	 /* ie10 */
	 background-image: -ms-linear-gradient(#2988F3,#7BCCFC);
	 /* opera 11.1 */
	 background-image: -o-linear-gradient(#2988F3,#7BCCFC);
	 /* 标准写法 */
	 background-image: linear-gradient(#2988F3,#7BCCFC);
	
	
}
</style>
