risk-wx/pages/index.vue

<template>
	<view class="content">
		<!-- 头部 -->
		<view class="head">
			<!-- 用户头像 -->
			<image :src="avatar" class="user" @click="userTo()">
				<text class="name">{{$store.state.user.name}}</text>
		</view>
		<!-- 司机报单 -->
		<view class="driverEntry" @click="driverClass('BD')">
			<!-- 图标 -->
			<span class="icon iconfont">&#xe509;</span>
			<view class="message">
				<text class="main">司机报单</text>
				<!-- <text class="assist">司机报单</text> -->
			</view>
		</view>

		<!-- 费用报销 -->
		<view class="driverEntry" @click="driverClass('BX')">
			<!-- 图标 -->
			<span class="icon iconfont">&#xe640;</span>
			<view class="message">
				<text class="main">费用报销</text>
				<!-- <text class="assist">费用报销</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			}
		},
		onLoad() {},
		onReachBottom() {},
		methods: {
			driverClass(type) {
				//跳转列表
				uni.navigateTo({
					url: '/pages/listview?type=' + type
				});
			}
		},
	}
</script>

<style lang="scss">
	@import url("/font/iconfont.css");

	.content {

		// background-color: #f6f6f6;

		// 头部
		.head {
			width: 100%;
			height: 360rpx;
			background-color: #3c9cff;
			position: relative;

			// 用户头像
			.user {
				width: 200rpx;
				height: 200rpx;
				border-radius: 100rpx;
				position: absolute;
				top: 40rpx;
				left: calc(50% - 100rpx);
				border-radius: 200rpx;
			}

			// 用户名字
			.name {
				color: #fff;
				font-size: 40rpx;
				position: absolute;
				bottom: 40rpx;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 200rpx;
			}
		}

		// 司机报单
		.driverEntry {
			width: 90%;
			height: 300rpx;
			border-radius: 20rpx;

			margin: 30rpx auto 0 auto;
			// margin-top: 30rpx;

			position: relative;

			background-color: #fff;
			border: 4rpx solid #e6e6e6;

			.icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 60rpx;
				color: #377bdc;

				font-size: 160rpx;
			}

			.message {
				width: 60%;
				height: 100%;

				position: absolute;
				right: 0;


				.main {
					position: absolute;
					font-size: 30rpx;
					font-weight: 600;
					color: #4d88de;
					top: 100rpx;
				}

				.assist {
					position: absolute;
					font-size: 30rpx;
					color: #a0a0a0;
					top: 160rpx;

				}
			}
		}
	}
</style>