首页样式修改

colorui/main.css

@@ -3943,5 +3943,5 @@ scroll-view.cu-steps .cu-item {
 }
 
 .cu-tag.looknumber:not([class*="bg-"]) {
- background-color: #dd514c;
+ background-color: #dc9d04;
 }

components/drawer/threeLineDrawer.vue

@@ -26,7 +26,7 @@
 						</view>
 						<view class="text-black">设置</view>
 					</view>
-					<view class="action">
+					<view class="action" style="margin-left: -32px;">
 						<view class="icon cuIcon-command text-black">
 						</view>
 						<view class="text-black">修改密码</view>

pages.json

@@ -1,12 +1,6 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages	
 		{
-		    "path" : "components/login/Login",
-		    "style" : {
-				"navigationBarTitleText": "登录"
-			}
-		},
-		{
 			"path": "pages/index/Index",
 			"style": {
 				"navigationBarTitleText": "监视"
@@ -52,31 +46,32 @@
 	    "color": "#DEDFE3",
 	    "selectedColor": "white",
 	    "borderStyle": "black",
-	    "backgroundColor": "#3D6C8A",
+	    "backgroundColor": "#1F1F1F",
+		// #355C76
 	    "list": [{
 	        "pagePath": "pages/index/Index",
-	        "iconPath": "static/picture/indexGray.png",
-	        "selectedIconPath": "static/picture/index.png",
+	        "iconPath": "static/picture/index.png",
+	        "selectedIconPath": "static/picture/indexRed.png",
 	        "text": "监视"
 	    }, {
 	        "pagePath": "pages/analysis/Analysis",
-	        "iconPath": "static/picture/analysisGray.png",
-	        "selectedIconPath": "static/picture/analysis.png",
+	        "iconPath": "static/picture/analysis.png",
+	        "selectedIconPath": "static/picture/analysisRed.png",
 	        "text": "分析"
 	    }, {
 	        "pagePath": "pages/forecast/Forecast",
-	        "iconPath": "static/picture/forecastGray.png",
-	        "selectedIconPath": "static/picture/forecast.png",
+	        "iconPath": "static/picture/forecast.png",
+	        "selectedIconPath": "static/picture/forecastRed.png",
 	        "text": "预测"
 	    }, {
 	        "pagePath": "pages/task/Task",
-	        "iconPath": "static/picture/taskGray.png",
-	        "selectedIconPath": "static/picture/task.png",
+	        "iconPath": "static/picture/task.png",
+	        "selectedIconPath": "static/picture/taskRed.png",
 	        "text": "任务"
 	    },{
 	        "pagePath": "pages/mine/Mine",
-	        "iconPath": "static/picture/mineGray.png",
-	        "selectedIconPath": "static/picture/mine.png",
+	        "iconPath": "static/picture/mine.png",
+	        "selectedIconPath": "static/picture/mineRed.png",
 	        "text": "我"
 	    }]
 	}

pages/analysis/Analysis.vue

@@ -53,36 +53,36 @@
 	}
 	.top {
 		width: 100%;
-		height: 105upx;
+		height: 95upx;
 		padding-top: 5upx;
-		background-color: #3D6C8A;
+		background-color: #E93131;
 	}
 	.threeLine {
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: left;
 	}
 	.text {
 		width: calc(100% - 100px);
-		height: 50px;
+		height: 45px;
 		float: left;
 		color: white;
-		line-height: 50px;
+		line-height: 45px;
 		text-align: center;
 		font-size: 18px;
 	}
 	.notice{
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: left;
 	}
 	.plus {
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: right;
 		color: white;
 		font-size: 35px;
-		line-height: 50px;
+		line-height: 45px;
 		text-align: center;
 	}
 </style>

pages/forecast/Forecast.vue

@@ -53,36 +53,36 @@
 	}
 	.top {
 		width: 100%;
-		height: 105upx;
+		height: 95upx;
 		padding-top: 5upx;
-		background-color: #3D6C8A;
+		background-color: #E93131;
 	}
 	.threeLine {
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: left;
 	}
 	.text {
 		width: calc(100% - 100px);
-		height: 50px;
+		height: 45px;
 		float: left;
 		color: white;
-		line-height: 50px;
+		line-height: 45px;
 		text-align: center;
 		font-size: 18px;
 	}
 	.notice{
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: left;
 	}
 	.plus {
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: right;
 		color: white;
 		font-size: 35px;
-		line-height: 50px;
+		line-height: 45px;
 		text-align: center;
 	}
 </style>

pages/index/Index.vue

@@ -2,7 +2,7 @@
 	<view class="content">
 		<view class="top">
 			<view class="threeLine" @tap="openDrawer">
-				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 10px;margin-left: 10px;"></image>
+				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image>
 			</view>
 			<view class="text">
 				<view class="notice">
@@ -20,6 +20,52 @@
 		<div>
 			<drawer ref="drawer"></drawer>
 		</div>
+		<!--时间组件-->
+		<view class="time">
+			<view class="timeText">推荐时间</view>
+			<view class="timeIcon">
+				
+			</view>
+		</view>
+		<!--电量卡片-->
+		<view class="electricityCard">
+			<view class="allDayLong">安全天数:</view>
+			<view class="installedCapacity">装机容量:</view>
+			<view class="preissue">预测发电量:</view>
+			<view class="dayHair">日发电量:</view>
+			<view class="internet">上网电量:</view>
+		</view>
+		<!--风速卡片-->
+		<view class="speedPower">
+			<view class="averageSpeed">
+				<view class="averageSpeedText">平均风速</view>
+				<view class="averageSpeedmaxmin">
+					<view class="averageSpeedmin">min</view>
+					<view class="averageSpeedmax">max</view>
+				</view>
+			</view>
+			<view class="forecastSpeed">
+				<view class="forecastSpeedText">预测风速</view>
+				<view class="forecastSpeedmaxmin">
+					<view class="forecastSpeedmin">min</view>
+					<view class="forecastSpeedmax">max</view>
+				</view>
+			</view>
+			<view class="actualPower">
+				<view class="actualPowerText">实际功率</view>
+				<view class="actualPowermaxmin">
+					<view class="actualPowermin">min</view>
+					<view class="actualPowermax">max</view>
+				</view>
+			</view>
+			<view class="theoreticalPower">
+				<view class="theoreticalPowerText">理论功率</view>
+				<view class="theoreticalPowermaxmin">
+					<view class="theoreticalPowermin">min</view>
+					<view class="theoreticalPowermax">max</view>
+				</view>
+			</view>
+		</view>
 		<!-- <view class="details">
 			<view class="detailsText" @tap="common.navTo('/components/detail/Detail')"> 详情 〉</view>
 		</view> -->
@@ -36,8 +82,9 @@ export default {
 		return{
 			badge: 22,
 			drawerList:["状态监视","矩阵监视","风场监视","人员监视"],
-			inconList:["form","favor","question","edit"]
-			
+			inconList:["form","favor","question","edit"],
+			minaverageSpeed:'12',
+			maxaverageSpeed:'25'
 		}
 	},
 	methods:{
@@ -56,49 +103,236 @@ page {
 }
 .top {
 	width: 100%;
-	height: 105upx;
+	height: 95upx;
 	padding-top: 5upx;
-	background-color: #3D6C8A;
+	background-color: #E93131;
 }
 .threeLine {
 	width: 50px;
-	height: 50px;
+	height: 45px;
 	float: left;
 }
 .text {
 	width: calc(100% - 100px);
-	height: 50px;
+	height: 45px;
 	float: left;
 	color: white;
-	line-height: 50px;
+	line-height: 45px;
 	text-align: center;
 	font-size: 18px;
 }
 .notice{
 	width: 50px;
-	height: 50px;
+	height: 45px;
 	float: left;
 }
 .plus {
 	width: 50px;
-	height: 50px;
+	height: 45px;
 	float: right;
 	color: white;
 	font-size: 35px;
-	line-height: 50px;
+	line-height: 45px;
 	text-align: center;
 }
-.details{
+.time{
+	margin-top: 10px;
 	width: 100%;
 	height: 50px;
-	background-color: #0081FF;
 	float: left;
+	background-color: white;
 }
-.detailsText{
+.timeText{
+	width: 70%;
+	height: 50px;
+	float: left;
 	line-height: 50px;
-	float: right;
-	margin-right: 20px;
-	font-size: 18px;
-	color: white;
+	text-align: center;
+	font-size: 15px;
+	margin-left: 7px;
+}
+.timeIcon{
+	width: 25%;
+	height: 50px;
+	float: left;
+	margin-left: 5px;
+}
+.electricityCard{
+	width: 100%;
+	height: 90px;
+	background-color: white;
+	float: left;
+	margin-top: 20rpx;
+}
+.allDayLong{
+	width: 47%;
+	height: 35px;
+	margin: 5px;
+	background-color: white;
+	line-height: 35px;
+	float: left;
+	font-size: 13px;
+}
+.installedCapacity{
+	width: 47%;
+	height: 35px;
+	margin: 5px;
+	background-color: white;
+	line-height: 35px;
+	float: left;
+	font-size: 13px;
+}
+.preissue{
+	width: 35%;
+	height: 35px;
+	margin: 5px;
+	background-color: white;
+	line-height: 35px;
+	float: left;
+	font-size: 13px;
+}
+.dayHair{
+	width: 28%;
+	height: 35px;
+	margin: 5px;
+	background-color: white;
+	line-height: 35px;
+	float: left;
+	font-size: 13px;
+}
+.internet{
+	width: 28%;
+	height: 35px;
+	margin: 5px;
+	background-color: white;
+	line-height: 35px;
+	float: left;
+	font-size: 13px;
+}
+.speedPower{
+	margin-top: 10px;
+	width: 100%;
+	height: 90px;
+	float: left;
+}
+.averageSpeed{
+	margin-left: 3px;
+	width: 24%;
+	height: 90px;
+	float: left;
+	background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
+	box-shadow: 2px 2px 2px #bbb;
+	border-radius: 3px;
+	text-align: left;
+}
+.forecastSpeed{
+	margin-left: 3px;
+	width: 24%;
+	height: 90px;
+	float: left;
+	background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
+	box-shadow: 2px 2px 2px #bbb;
+	border-radius: 3px;
+	text-align: left;
+}
+.actualPower{
+	margin-left: 3px;
+	width: 24%;
+	height: 90px;
+	float: left;
+	background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
+	box-shadow: 2px 2px 2px #bbb;
+	border-radius: 3px;
+	text-align: left;
+}
+.theoreticalPower{
+	margin-left: 3px;
+	width: 24%;
+	height: 90px;
+	float: left;
+	background: -webkit-gradient(linear, 0% 200%, 0% 0%, from(#71BE5A), color-stop(0.85, #FFFFFF), to(#ffffff));
+	box-shadow: 2px 2px 2px #bbb;
+	border-radius: 3px;
+	text-align: left;
+}
+.averageSpeedText{
+	width: 100%;
+	height: 50px;
+	text-align: center;
+	line-height: 50px;
+}
+.forecastSpeedText{
+	width: 100%;
+	height: 50px;
+	text-align: center;
+	line-height: 50px;
+}
+.actualPowerText{
+	width: 100%;
+	height: 50px;
+	text-align: center;
+	line-height: 50px;
+}
+.theoreticalPowerText{
+	width: 100%;
+	height: 50px;
+	text-align: center;
+	line-height: 50px;
+}
+.averageSpeedmin{
+	width: 50%;
+	height: 30px;
+	float: left;
+	line-height: 30px;
+	text-align: center;
+}
+.averageSpeedmax{
+	width: 50%;
+	height: 30px;
+	float: left;
+	line-height: 30px;
+	text-align: center;
+}
+.forecastSpeedmin{
+	width: 50%;
+	height: 30px;
+	float: left;
+	line-height: 30px;
+	text-align: center;
+}
+.forecastSpeedmax{
+	width: 50%;
+	height: 30px;
+	float: left;
+	line-height: 30px;
+	text-align: center;
+}
+.actualPowermin{
+	width: 50%;
+	height: 30px;
+	float: left;
+	line-height: 30px;
+	text-align: center;
+}
+.actualPowermax{
+	width: 50%;
+	height: 30px;
+	float: left;
+	line-height: 30px;
+	text-align: center;
+}
+.theoreticalPowermin{
+	width: 50%;
+	height: 30px;
+	float: left;
+	line-height: 30px;
+	text-align: center;
+}
+.theoreticalPowermax{
+	width: 50%;
+	height: 30px;
+	float: left;
+	line-height: 30px;
+	text-align: center;
 }
 </style>

pages/mine/Mine.vue

@@ -53,36 +53,36 @@
 	}
 	.top {
 		width: 100%;
-		height: 105upx;
+		height: 95upx;
 		padding-top: 5upx;
-		background-color: #3D6C8A;
+		background-color: #E93131;
 	}
 	.threeLine {
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: left;
 	}
 	.text {
 		width: calc(100% - 100px);
-		height: 50px;
+		height: 45px;
 		float: left;
 		color: white;
-		line-height: 50px;
+		line-height: 45px;
 		text-align: center;
 		font-size: 18px;
 	}
 	.notice{
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: left;
 	}
 	.plus {
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: right;
 		color: white;
 		font-size: 35px;
-		line-height: 50px;
+		line-height: 45px;
 		text-align: center;
 	}
 </style>

pages/task/Task.vue

@@ -53,36 +53,36 @@
 	}
 	.top {
 		width: 100%;
-		height: 105upx;
+		height: 95upx;
 		padding-top: 5upx;
-		background-color: #3D6C8A;
+		background-color: #E93131;
 	}
 	.threeLine {
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: left;
 	}
 	.text {
 		width: calc(100% - 100px);
-		height: 50px;
+		height: 45px;
 		float: left;
 		color: white;
-		line-height: 50px;
+		line-height: 45px;
 		text-align: center;
 		font-size: 18px;
 	}
 	.notice{
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: left;
 	}
 	.plus {
 		width: 50px;
-		height: 50px;
+		height: 45px;
 		float: right;
 		color: white;
 		font-size: 35px;
-		line-height: 50px;
+		line-height: 45px;
 		text-align: center;
 	}
 </style>