liug_mobile/pages/home/index.vue

<template>
	<view>
		<view class="banner"><image src="../../static/my2.png" mode="widthFix"></image></view>
		<view class="ccn" style="margin-top: -150px;">
			<view class="cn">
				<view class="rows">
					<view class="row" @click="go('/pages/test/index')">
						<view class="out">
							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
							<view class="tit omit">设备借还记录设备借还记录</view>
						</view>
					</view>
					<view class="row" @click="go('/pages/test/index')">
						<view class="out">
							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
							<view class="tit omit">设备借还记录</view>
						</view>
					</view>
					<view class="row" @click="go('/pages/test/index')">
						<view class="out">
							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
							<view class="tit omit">设备借还记录</view>
						</view>
					</view>
					<view class="row" @click="go('/pages/test/index')">
						<view class="out">
							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
							<view class="tit omit">设备借还记录</view>
						</view>
					</view>
					<view class="row" @click="go('/pages/model/index')">
						<view class="out">
							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
							<view class="tit omit">设备台账</view>
						</view>
					</view>
					<view class="row" @click="go('/pages/test/index')">
						<view class="out">
							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
							<view class="tit omit">设备借还记录</view>
						</view>
					</view>
					<view class="row" @click="go('/pages/test/index')">
						<view class="out">
							<view class="ioc" style="background-color: #2196F3;"><text class="icon">&#xe6f3;</text></view>
							<view class="tit omit">设备借还记录</view>
						</view>
					</view>
					<view class="clear"></view>
				</view>
			</view>
		</view>
		<view class="ccn">
			<view class="cn">
				<view class="lable">
					<text>审批中心</text>
					<text class="more">更多></text>
				</view>
				<view class="list">
					<view class="tab"><u-tabs :list="tab" :current="current" @click="click"></u-tabs></view>
					<view class="item" v-for="(item, index) in list" :key="index" @click="detail(item.id)">
						<view class="title">
							<text class="icon">&#xe602;</text>
							<text>报告流程</text>
						</view>
						<view class="desc">
							<view class="name">杨军</view>
							<view class="bm omit">电器技术研究所</view>
							<view class="date">2022-09-14 10:51:12</view>
						</view>
						<view class="clear"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			user: {},
			current: 0,
			tab: [{ name: '待审批', badge: { value: 5 } }, { name: '已审批' }],
			list: [{}, {}, {}, {}, {}]
		};
	},
	onShow() {
		this.getData();
	},
	methods: {
		getData() {},
		//跳转
		go(url) {
			uni.navigateTo({ url: url });
		},
		click(e) {},
		//退出登录
		exit() {
			uni.showModal({
				title: '提示',
				content: '确定退出登录?',
				success: res => {
					if (res.confirm) {
						uni.removeStorageSync('user');
						this.user = {};
					}
				}
			});
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.getData();
			uni.stopPullDownRefresh();
		}, 1000);
	}
};
</script>

<style lang="scss">
page {
	background-color: #f1f0f1;
}
.banner {
	image {
		width: 100%;
	}
}
.ccn {
	padding: 13px;
	overflow: hidden;
	position: relative;
	margin-top: -15px;
	.cn {
		background-color: white;
		border-radius: 8px;
		padding: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.rows {
			margin-top: 3%;
			.row {
				float: left;
				width: 33.33%;
				text-align: center;
				.out {
					padding: 5px;
					.ioc {
						width: 40px;
						height: 40px;
						background-color: red;
						border-radius: 40%;
						text-align: center;
						margin: 0 auto;
						line-height: 40px;
						.icon {
							font-size: 19px;
							color: white;
						}
					}
					.tit {
						font-size: 14px;
						margin-top: 5px;
						color: #848484;
					}
				}
			}
		}
		.lable {
			font-size: 17px;
			color: $font-c;
			font-weight: bold;
			.more {
				float: right;
				font-size: 14px;
				font-weight: normal;
				color: #848484;
			}
		}
		.list {
			.tab {
				background-color: aliceblue;
				border-radius: 3px;
				margin-top: 7px;
			}
			.item {
				margin-top: 10px;
				padding: 10px 5px 15px 5px;
				border-bottom: 1px solid #f0f2f7;
				&:last-child {
					border: 0px;
				}
				.title {
					font-size: 17px;
					color: $font-c;
					.icon {
						padding-right: 5px;
					}
				}
				.desc {
					font-size: 14px;
					color: #848484;
					padding-top: 5px;
					.name {
						float: left;
						padding-right: 10px;
					}
					.bm {
						float: left;
						width: 40%;
					}
					.date {
						float: right;
					}
				}
			}
		}
	}
}
</style>