mes_mobile/App.vue

<script>
	export default {
		onLaunch: function() {
			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
			console.log('App Launch')
			// #ifndef MP-WEIXIN
				uni.hideTabBar();
			// #endif
			
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
		@import '@/static/customicons.css';
		@import 'uni.scss';
	/* #endif */
	
	// 设置整个项目的背景色
	page {
		background-color: $uni-bg-color-default !important;
		color: $uni-text-color-inverse;
	}
	.example-info {
		font-size: 14px;
		color: $uni-text-color;
		padding: 10px;
	}
	.page_padding{padding: 14px;}
	.page_content{padding: 0 12px 10px;}
	//内容框
	.contentboxsty{border-radius: 8px;background: $uni-bg-color-primary;}
	//没有底部边框
	.noborbot{border-bottom:none !important}
	
	.t-icon{background-repeat: no-repeat;}
	.icon22{width: 22px;height: 22px;}
	
	//字体大小
	.font12{font-size: 12px;}
	.font13{font-size: 13px;}
	.font14{font-size: 14px;}
	.font15{font-size: 15px;}
	.font20{font-size: 20px;}
	.font22{font-size: 22px;}
	.font24{font-size: 24px;}
	.font35{font-size: 35px;}
	.font_bold{font-weight: bold;}
	
	//文字颜色
	.text_color_black{color: $uni-text-color-default;}
	.theme_color{color: $uni-text-color-primary } //主题绿
	//按钮颜色
	.but_color{background: $uni-color-primary !important;}
	
	//布局
	.flex_layout{display: flex;}
	.flex1{flex: 1;}
	//paddind
	.padd_rigth5{padding-right: 5px;}
	.padd_bot6{padding-bottom: 6px;}
	.padd_top12{padding-top:12px;}
	.padd_rigth12{padding-right: 12px;}
	.padd_bot12{padding-bottom: 12px;}
	.padd_left12{padding-left:12px;}
	//margin
	.mar_top12{margin-top: 12px;}
	.page_list{margin-bottom: 12px;padding:0 12px;}
	
	//有详情的列表
	.detail_list{
		margin-bottom: 12px;
		.list_top{
			display: flex;
			padding:12px;
			font-size: 14px;
			border-radius: 8px 8px 0px 0px;
			background: linear-gradient(90deg, rgba(61, 84, 176, 0.70) 5.83%, rgba(58, 77, 158, 0.00) 73.76%);
			.top_left{flex: 1;display: flex;align-items: center; font-weight: bold;}
			.top_right{display: flex;align-items: center;font-weight: bold;}
			.top_right .arrow{margin-left: 5px;font-weight: normal;}
		}
		.list_content{padding:12px;position: relative;}
		.list_content .card_right{position: absolute;top: 12px;right: 12px;}
		
		.card_right{
			display: flex;
			flex-direction: column;
			.status{
				padding: 3px 10px;
				background: $uni-bg-color-success-dark;
				color: $uni-text-color-success;
				border-radius: 4px;
				font-size: 12px;
			}
			.success{
				background: $uni-bg-color-success-dark;
				color: $uni-text-color-success;
			}
			.warning{
				background: $uni-bg-color-warning-dark;
				color: $uni-text-color-warning;
			}
			.error{
				background: $uni-bg-color-error-dark;
				color: $uni-text-color-danger;
			}
		}
	}
	.flexBox .detail_list:first-child{
		margin-top: 2px;
	}
	// 检索固定
	.headerViewFixed{
		background: $uni-bg-color-default;
	}
	//页面固定按钮
	.bottom_but{
		width: 100%;
		position: fixed;
		bottom: 0px;
		background-color: #060B26;
		border-top: 1px solid #2E3249;
		height: 80px;
		// bottom: 40px;bottom: 40px;position: fixed;width: calc(100% - 28px);
		view{width: 50%;text-align: center;margin: 0 20px;border-radius: 19px;background: #DDD;line-height: 38px;height: 38px;margin-top: 6px;}
	}
	//底部固定添加按钮
	.page_bottom_button{
		width: 100%;position: fixed;bottom: 0px;background-color: #060B26;border-top: 1px solid #2E3249;height: 80px;
		.page_add{display: flex;justify-content: center;margin: 7px 20px;border-radius: 17.5px;background: #1C2755;line-height: 35px;}
	}
	.bot_padding{padding-bottom: 100px;}
	
	.placeholderStyle{
		color: $uni-text-color-placeholder;
		font-size: 14px;
	}
	
	// 圆形进度条
	.progressBg{
		position: absolute;
		left: 2px;
		top: 2px;
		z-index: 20;
		background: $uni-bg-color-primary;
		width: 98px;
		height: 98px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border-radius: 50%;
	}
	.progressBox{
		background: $uni-bg-color-default-dark;
		width: 90px;
		height: 90px;
		border-radius: 50%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.circle-progress {
	  width: 102px;
	  height: 102px;
	  position: relative;
	  overflow: hidden;
	  background: $uni-bg-color-primary;
	}
	
	.circle-progress__bar {
	  position: absolute;
	  z-index: 10;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  background-image: conic-gradient($uni-color-primary 0%, $uni-color-primary var(--progress), transparent 0);
	}
</style>