工作249:uniapp--实战--flex布局--个人资料

<template>
	<view>
		<view  style="width:100%;height: 270rpx;display:flex;align-items: center;background: linear-gradient(215deg, #70C7FA 0%, #05A2EC 100%);">
			<view>
				 <img style="margin-left:32rpx;block; 120rpx;height: 120rpx;border-radius: 50%;" src="../../static/formdailypic/form.png">
			</view>
			
			<view style="display: flex;flex-direction: column;">
				<view style="margin-left: 24rpx;">
				<text style="font-size: 36rpx;color: #FFFFFF;">姓名</text>
				</view>
				<view style="margin:26rpx 0 0 24rpx; width: 120rpx;height: 44rpx;background-color: rgba(255, 255, 255);
box-shadow: 0px 4px 8px rgba(228, 93, 9, 0.29);border-radius: 44rpx;text-align: center;">
					<text style="font-size: ;color: #1FB5FE;">总经理</text>
				</view>
			</view>
		</view>
			<view  style="line-height: 130rpx;width:100%;height:130rpx;display: flex;flex-wrap: wrap;align-items: center;" @click="push">
				<u-icon name="account" style="margin-left: 30rpx;font-size:40rpx;"></u-icon>
				<text style="font-size: 32rpx;margin-left: 30rpx;">个人资料</text>
				<u-icon name="arrow-right" style="font-size:32rpx;margin-left: 435rpx;
color: #D8D8D8;"></u-icon>
			</view>
			<view  style="line-height: 130rpx;width:100%;height:130rpx;display: flex;flex-wrap: wrap;align-items: center;">
				<u-icon name="lock" style="margin-left: 30rpx;font-size:40rpx;"></u-icon>
				<text style="font-size: 32rpx;margin-left: 30rpx;">修改密码</text>
				<u-icon name="arrow-right" style="font-size:32rpx;margin-left: 435rpx;
color: #D8D8D8;"></u-icon>
			</view>
			<view  style="line-height: 130rpx;width:100%;height:130rpx;display: flex;flex-wrap: wrap;align-items: center;">
				<u-icon name="rmb-circle" style="margin-left: 30rpx;font-size:40rpx;"></u-icon>
				<text style="font-size: 32rpx;margin-left: 30rpx;">资产管理</text>
				<u-icon name="arrow-right" style="font-size:32rpx;margin-left: 435rpx;
color: #D8D8D8;"></u-icon>
			</view>
			<view  style="line-height: 130rpx;width:100%;height:130rpx;display: flex;flex-wrap: wrap;align-items: center;" @click="push1">
				<u-icon name="bag" style="margin-left: 30rpx;font-size:40rpx;"></u-icon>
				<text style="font-size: 32rpx;margin-left: 30rpx;">市场管理</text>
				<u-icon name="arrow-right" style="font-size:32rpx;margin-left: 435rpx;
color: #D8D8D8;"></u-icon>
			</view>
		
		
		<view style="width: 400rpx;height: 88rpx;background: linear-gradient(91deg, #43B9FD 0%, #1FB5FE 100%);opacity: 1;
		border-radius: 66rpx;
		position: absolute;
		line-height: 88rpx;
		bottom: 201rpx;
		margin-left: 175rpx;text-align: center;">
			<text style="
font-size: 32rpx;color: #FFFFFF;">退出登录</text>
		</view>

		<u-tabbar v-model="current" :list="list" active-color="#1FB5FE"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "../../static/index/home.png",
						selectedIconPath: "../../static/index/home_select.png",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/index/index", // 1.5.6新增，路径需要以"/"开头
					},
					{
						iconPath: "../../static/index/office.png",
						selectedIconPath: "../../static/index/office_select.png",
						text: '办公管理',
						customIcon: false,
						pagePath: "/pages/office_management/office_management", // 1.5.6新增，路径需要以"/"开头
					},
					{
						iconPath: "../../static/index/mine.png",
						selectedIconPath: "../../static/index/mine_select.png",
						text: '我的',
						customIcon: false,
						pagePath: "/pages/my_info/my_info", // 1.5.6新增，路径需要以"/"开头
					},
				],
				current: 1
			}
		},
		methods: {
			push() {
				console.log(1)
				uni.navigateTo({
					url: '/pages/my_info_message/my_info_message',
				});
			},
			push1() {
				console.log(2)
				uni.navigateTo({
					url: '/pages/my_info_market/my_info_market',
				});
			}
		}
	}
</script>

<style>
	

	

	
</style>

运行结果