zc

pages_basics/views/chemicalsInfo/chemicalsInfo.vue

@@ -5,9 +5,9 @@
 			<img class="logo-img" :src="circularLogo">
 			<view class="title-box">
 				<view class="title-one-box">
-					<view>{{newData.data1}}</view>
-					<view>{{newData.data2?'管控':'非管控'}}</view>
-					<view>{{newData.data3}}</view>
+					<span>{{newData.data1}}</span>
+					<span class="colorA">{{newData.data2?'管控':'非管控'}}</span>
+					<span class="colorB">{{newData.data3}}</span>
 				</view>
 				<view class="title-two-box">编号：{{newData.data4}}</view>
 				<view class="title-three-box">余量：{{newData.data5}}</view>
@@ -143,7 +143,7 @@
 			return {
 				circularLogo: uni.getStorageSync('circularLogo'),
 				newData:{
-					data1:'化学品名称',
+					data1:'化学品名称化学品名称化学品名称化学品名称化学品名称',
 					data2:'1',
 					data3:'使用中',
 					data4:'123456789',
@@ -250,31 +250,73 @@
 		.info-data-box{
 			display: flex;
 			background-color: #fff;
+			padding-bottom:40rpx;
 			.logo-img{
 				width:120rpx;
 				height:120rpx;
 				display: inline-block;
-				margin:40rpx 40rpx 40rpx 30rpx;
+				margin:40rpx 40rpx 0 30rpx;
 			}
 			.title-box{
+				flex:1;
 				.title-one-box{
-					display: flex;
-					view:nth-child(1){
+					margin:28rpx 47rpx 0 0;
+					span:nth-child(1){
 						font-size:30rpx;
 						color:#333;
+						line-height:45rpx;
+						font-size:30rpx;
+						font-weight:700;
 					}
-					view:nth-child(2){
-						
+					span:nth-child(2){
+						display: inline-block;
+						min-width:100rpx;
+						height:34rpx;
+						line-height:32rpx;
+						font-size:24rpx;
+						margin:0 10rpx 0;
+						text-align: center;
+						border-radius:6rpx;
 					}
-					view:nth-child(3){
-						
+					span:nth-child(3){
+						display: inline-block;
+						min-width:120rpx;
+						height:34rpx;
+						line-height:32rpx;
+						font-size:24rpx;
+						margin:0 10rpx 0;
+						text-align: center;
+						border-radius:6rpx;
+					}
+					.colorA{
+						border:1px solid #0183FA;
+						background-color: #fff;
+						color:#0183FA;
+					}
+					.colorB{
+						border:1px solid #D6D6D6;
+						background-color: #D6D6D6;
+						color:#666666;
+					}
+					.colorC{
+						border:1px solid rgba(43,128,255,0.2);
+						background: rgba(43,128,255,0.2);
+						color:#666666;
+					}
+					.colorD{
+						border:1px solid rgba(255,140,0,0.2);
+						background: rgba(255,140,0,0.2);
+						color:#FF8C00;
 					}
 				}
 				.title-two-box{
-					
+					line-height:50rpx;
+					font-size:28rpx;
+					margin-top:10rpx;
 				}
 				.title-three-box{
-					
+					line-height:50rpx;
+					font-size:28rpx;
 				}
 			}
 		}