uniapp-qxk/pages/index/index - 副本.vue

<template>
	<view class="content">
		<view class="nav">
			<view :style="{height:h+'px'}"></view>
			<view class="navContent">
				<view class="searchBtn">
					<image class="searchIcon" src="../../static/搜索.png"></image>
				</view>
				<text class="title">评级中心</text>
				<view style="flex: 1;"></view>
			</view>
		</view>
		<view class="splitLine"></view>
		<view class="headContent" @click="toSettings">
			<view class="avatarPanle">
				<view class="avatarContent">
					<u-avatar size="56" :src="src"></u-avatar>
					<u-badge class="badge" :absolute="true" numberType="overflow" :offset="[1,-10]" max="99" :value="value"></u-badge>
				</view>
			</view>
			<view class="namePanel">
				<text>请先登录</text>
				<image class="nextIcon" src="../../static/下一步.png"></image>
			</view>
		</view>
		<view style="height: 30rpx;background-color: #F6F6F6;"></view>
		<view class="orderPanel">
			<view class="orderPanelTop">
				<view>
					我的订单
				</view>
				<view>
					<view>全部</view>
					<image class="nextIcon" src="../../static/下一步.png"></image>
				</view>
			</view>
			<view class="orderItemPanel">
				<view class="orderItem">
					<image class="orderIcon" src="../../static/待确认.png"></image>
					<u-badge class="badge" :absolute="true" numberType="overflow" :offset="[0,0]" max="99" :value="value"></u-badge>
					<text class="orderItemTitel">待确认</text>
				</view>
				<view class="orderItem">
					<image class="orderIcon" src="../../static/评级中.png"></image>
					<u-badge class="badge" :absolute="true" numberType="overflow" :offset="[0,0]" max="99" :value="value"></u-badge>
					<text  class="orderItemTitel">评级中</text>
				</view>
				<view class="orderItem">
					<image class="orderIcon" src="../../static/待付款.png"></image>
					<u-badge class="badge" :absolute="true" numberType="overflow" :offset="[0,0]" max="99" :value="value"></u-badge>
					<text  class="orderItemTitel">待付款</text>
				</view>
				<view class="orderItem">
					<image class="orderIcon" src="../../static/待收货.png"></image>
					<u-badge class="badge" :absolute="true" numberType="overflow" :offset="[0,0]" max="99" :value="value"></u-badge>
					<text  class="orderItemTitel">待收货</text>
				</view>
			</view>
			<view style="height: 30rpx;background-color: #F6F6F6;"></view>
			<view class="servicePanel">
				<view class="serviceTitlePanel" >
					<view>
						<view>快速评级</view>
						<view>7days</view>
					</view>
					<view>
						<view>
							查看详情
						</view>
						<image class="nextIcon" src="../../static/下一步.png"></image>
					</view>
				</view>
				<view class="serviceItemPanel">
					<view class="serviceItem serviceItemSelected">
						<image class="serviceItemIcon" src="../../static/全面评级.png"></image>
						<text class="serviceItemTitle">全面评级</text>
					</view>
					<view class="serviceItem serviceItemNormal">
						<image class="serviceItemIcon" src="../../static/全面评级.png"></image>
						<text class="serviceItemTitle">全面评级</text>
					</view>
				</view>
				<view class="serviceItemPanel">
					<view class="serviceItem serviceItemNormal">
						<image class="serviceItemIcon" src="../../static/全面评级.png"></image>
						<text class="serviceItemTitle">全面评级</text>
					</view>
					<view class="serviceItem serviceItemNormal">
						<image class="serviceItemIcon" src="../../static/全面评级.png"></image>
						<text class="serviceItemTitle">全面评级</text>
					</view>
				</view>
				<view class="agreetPanel">
					<view class="agreetTop">
						<image class="checkBtn" src="../../static/勾选.png"></image>
						<text>阅读并同意</text>
						<text>《相关协议》</text>
					</view>
					<view class="serviceNextBtn">
						<text>下一步</text>
					</view>
				</view>
			</view>
			<view class=""></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				h:0,
				src:"https://cdn.uviewui.com/uview/album/1.jpg",
				value:888,
				type:"warning"
			}
		},
		onLoad() {
			let sysInfo = uni.getSystemInfoSync()
			console.log(sysInfo)
			this.h = sysInfo.statusBarHeight
		},
		onShow(){
			// let sysInfo = uni.getStorageInfoSync()
			// console.log(sysInfo)
			// this.h = sysInfo.statusBarHeight
		},
		methods: {
			toSettings(){
				uni.navigateTo({
					url:"../settings/settings"
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}
	.nav{
		display: flex;
		flex-direction: column;
		background-color: white;
	}
	.navContent{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 44px;
		align-items: center;
	}
	
	.searchIcon{
		width: 38rpx;
		height: 36rpx;
		margin-left: 34rpx;
	}
	.searchBtn{
		flex: 1;
		display: flex;
		align-items: center;
		
	}
	.title{
		text-align: center;
		color: #333333;
		font-size: 36rpx;
		font-weight: bold;
		flex: 1;
	}
	.headContent{
		height: 258rpx;
		align-items: center;
		flex-direction: column;
		
	}
	.avatarPanle{
		margin-top: 40rpx;

	}
	.avatarContent{
		display: block;
		position: relative;
	}
	.badge{
		background-color: #EA2B2B;
	}
	.nextIcon{
		width: 44rpx;
		height: 44rpx;
	}
	.namePanel{
		margin-top: 20rpx;
		font-size: 34rpx;
	}
	.orderIcon{
		width: 60rpx;
		height: 60rpx;
	}
	.orderPanel{
		margin-top: 30rpx;
		flex-direction: column;
	}
	.orderItem{
		flex-direction: column;
		position: relative;
		align-items: center;
	}
	.orderItemPanel{
		justify-content: space-around;
		margin-bottom: 40rpx;
	}
	.orderPanelTop{
		justify-content: space-between;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-bottom: 40rpx;
	}
	.orderItemTitel{
		margin-top: 12rpx;
		font-size: 28rpx;
		color: #555555;
	}
	.serviceItem{
		width: 332rpx;
		height: 160rpx;
		border-radius: 6rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	
	}
	.serviceItemSelected{
		border: #E7A23F 2rpx solid;
	}
	.serviceItemNormal{
		border: #c3c3c3 2rpx solid;
	}
	.serviceItemIcon{
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 14rpx;
	}
	.servicePanel{
		flex-direction: column;
	}
	.serviceItemPanel{
		justify-content: space-around;
		margin-top: 20rpx;
		
	}
	.serviceTitlePanel{
		justify-content: space-between;
	}
	.checkBtn{
		width: 44rpx;
		height: 44rpx;
		margin-right: 14rpx;
	}
	.agreetPanel{
		flex-direction: column;
	}
	.agreetTop{
		margin-left: 32rpx;
		margin-top: 20rpx;
	}
	.serviceNextBtn{
		margin-top: 20rpx;
		height: 96rpx;
		background-color: #E7A23F;
		color: white;
		margin-left: 32rpx;
		margin-right: 32rpx;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
		margin-bottom: 40rpx;
	}
</style>