From 3967cba687031da7be2623b3b7731b257590df2b Mon Sep 17 00:00:00 2001
From: wangchen <wangcen@wsmis.com>
Date: Wed, 5 Jul 2023 10:56:11 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9D=99=E6=80=81=E9=83=A8=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/sider-bar/slider-bar.vue |  90 +++++++++++------
 pages.json                          |  12 +++
 pages/discharge/index.vue           |  96 ++++++++++++++++++
 pages/index/index.vue               |  47 ++++++++-
 pages/shipWork/index.vue            | 150 ++++++++++++++++++++++++++++
 style/css/main.css                  |   2 +-
 6 files changed, 362 insertions(+), 35 deletions(-)
 create mode 100644 pages/discharge/index.vue
 create mode 100644 pages/shipWork/index.vue

diff --git a/components/sider-bar/slider-bar.vue b/components/sider-bar/slider-bar.vue
index db3e72b..ab627a5 100644
--- a/components/sider-bar/slider-bar.vue
+++ b/components/sider-bar/slider-bar.vue
@@ -1,32 +1,60 @@
-<template>
-  <view class="sidebar">
-    <view class="item">
-		装船指令
+<template>
+	<view class="sidebar">
+		<navigator url="/pages/index/index" open-type="redirect">
+			<view class="item" :class="path==1?'active':''">
+				装船指令
+			</view>
+		</navigator>
+		<navigator url="/pages/discharge/index" open-type="redirect">
+			<view class="item" :class="path==2?'active':''">
+				卸船指令
+			</view>
+		</navigator>
+		<navigator url="/pages/shipWork/index" open-type="redirect">
+			<view class="item" :class="path==3?'active':''">
+				船舶作业
+			</view>
+		</navigator>
+		<view class="item">
+			货物质量
+		</view>
+		<view class="item">
+			场位监控
+		</view>
 	</view>
-	<view class="item">
-		卸船指令
-	</view>
-	<view class="item">
-		船舶作业
-	</view>
-	<view class="item">
-		货物质量
-	</view>
-	<view class="item">
-		场位监控
-	</view>
-  </view>
-</template>
-
-<style>
-.sidebar {
-  width: 100px;
-  background-color: #f2f2f2;
-  .item {
-	  height: 45px;
-	  line-height: 45px;
-	  text-align: center;
-	  color: #999999;
-  }
-}
-</style>
\ No newline at end of file
+</template>
+<script>
+	export default {
+		name: "footTab",
+		props: {
+			path: {
+				type: [String || Number]
+			},
+		},
+		onLoad() {
+
+		},
+		components: {},
+		methods: {
+
+		}
+	};
+</script>
+
+<style>
+	.sidebar {
+		width: 100px;
+		background-color: #f2f2f2;
+
+		.item {
+			height: 45px;
+			line-height: 45px;
+			text-align: center;
+			color: #999999;
+		}
+
+		.active {
+			color: #5573d7;
+		}
+	}
+</style>
diff --git a/pages.json b/pages.json
index 1356288..8f274fb 100644
--- a/pages.json
+++ b/pages.json
@@ -5,6 +5,18 @@
 			"style": {
 				"navigationBarTitleText": "首页"
 			}
+		},
+		{
+			"path": "pages/discharge/index",
+			"style": {
+				"navigationBarTitleText": "卸船指令"
+			}
+		},
+		{
+			"path": "pages/shipWork/index",
+			"style": {
+				"navigationBarTitleText": "船舶作业"
+			}
 		}
 	],
 	"tabBar": {
diff --git a/pages/discharge/index.vue b/pages/discharge/index.vue
new file mode 100644
index 0000000..1a44a63
--- /dev/null
+++ b/pages/discharge/index.vue
@@ -0,0 +1,96 @@
+<template>
+	<view class="app">
+		<head-info></head-info>
+		<view class="container">
+			<side-bar path='2'></side-bar>
+			卸船指令
+		</view>		
+	</view>
+
+</template>
+
+<script>
+	import SideBar from '@/components/sider-bar/slider-bar';
+	import HeadInfo from '@/components/head-info/head-info';
+	export default {
+		data() {
+			return {
+				ltemList:[1,1,1,1,2,1,1,1,1],
+			}
+		},
+		onLoad() {
+
+		},
+		components: {
+			SideBar,
+			HeadInfo
+		},
+		methods: {
+
+		}
+	};
+</script>
+
+<style>
+	.container {
+		display: flex;
+	}
+
+	.content {
+		flex: 1;
+		padding: 20px;
+
+		.form {
+			display: flex;
+			justify-content: flex-end;
+
+			.input {
+				width: 200px;
+				height: 35px;
+				line-height: 35px;
+				border: 1px solid #c9cacb;
+				border-radius: 5px;
+				padding-left: 10px;
+				margin-left: 15px;
+			}
+		}
+
+		.itemList {
+			width: 100%;
+			display: flex;
+			justify-content: flex-start;
+			flex-wrap: wrap;
+			.item {
+				width: 32%;
+				margin-top: 15px;
+				margin-right: 2%;
+				height: 160px;
+				border: 1px solid #c9cacb;
+				padding: 22px 15px;
+				.title {
+					display: flex;
+					justify-content: space-between;
+					font-size: 21px;
+					margin-bottom: 20px;
+					font-weight: 700;
+				}
+				.status {
+					font-size: 16px;
+					font-weight: 400;
+				}
+				.row {
+					display: flex;
+					justify-content: space-between;
+					font-size: 18px;
+					margin: 10px 0;
+					.text {
+						display: block;
+					}
+				}
+			}
+			.item:nth-child(3n) {
+				margin-right: 0;
+			}
+		}
+	}
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b809eeb..2dfeca0 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -2,7 +2,7 @@
 	<view class="app">
 		<head-info></head-info>
 		<view class="container">
-			<side-bar></side-bar>
+			<side-bar path='1'></side-bar>
 			<view class="content">
 				<view class="form">
 					<input class="input" type="text" placeholder="港区" />
@@ -10,7 +10,27 @@
 				</view>
 				<view class="itemList">
 					<view v-for="(item, index) in ltemList" :key="index" class="item">
-
+                           <view class="title">
+                           	 <view class="name">
+                           	 	海王星领袖
+                           	 </view>
+							 <view class="status">
+							 	<text v-if="item==1" class="green">●  作业中</text>
+								<text v-else>●  已完成</text>
+							 </view>
+                           </view>
+                           <view class="">
+                           	<view class="table">
+                           		<view class="row">
+                           			<text>航次:735546</text>
+									<text>贸易类型: 内贸</text>
+                           		</view>
+								<view class="row">
+									<text>进出口: 进口</text>
+									<text>泊位: 一泊位</text>
+								</view>
+                           	</view>
+                           </view>
 					</view>
 				</view>
 			</view>
@@ -74,8 +94,29 @@
 				width: 32%;
 				margin-top: 15px;
 				margin-right: 2%;
-				height: 190px;
+				height: 160px;
 				border: 1px solid #c9cacb;
+				padding: 22px 15px;
+				.title {
+					display: flex;
+					justify-content: space-between;
+					font-size: 21px;
+					margin-bottom: 20px;
+					font-weight: 700;
+				}
+				.status {
+					font-size: 16px;
+					font-weight: 400;
+				}
+				.row {
+					display: flex;
+					justify-content: space-between;
+					font-size: 18px;
+					margin: 10px 0;
+					.text {
+						display: block;
+					}
+				}
 			}
 			.item:nth-child(3n) {
 				margin-right: 0;
diff --git a/pages/shipWork/index.vue b/pages/shipWork/index.vue
new file mode 100644
index 0000000..e151e1e
--- /dev/null
+++ b/pages/shipWork/index.vue
@@ -0,0 +1,150 @@
+<template>
+	<view class="app">
+		<head-info></head-info>
+		<view class="container">
+			<side-bar path='3'></side-bar>
+			<view class="content">
+				<view class="form">
+					<view class="select">
+						<uni-data-select v-model="value" :localdata="range" @change="change">
+						</uni-data-select>
+					</view>
+					<input class="input" type="text" placeholder="船名/航次" />
+				</view>
+				<view class="itemList">
+					<view v-for="(item, index) in ltemList" :key="index" class="item">
+						<view class="title">
+							<view class="name">
+								海王星领袖
+							</view>
+							<view class="status">
+								<text v-if="item==1" class="green">● 作业中</text>
+								<text v-else>● 已完成</text>
+							</view>
+						</view>
+						<view class="">
+							<view class="table">
+								<view class="row">
+									<text>航次:735546</text>
+									<text>贸易类型: 内贸</text>
+								</view>
+								<view class="row">
+									<text>进出口: 进口</text>
+									<text>泊位: 一泊位</text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script>
+	import SideBar from '@/components/sider-bar/slider-bar';
+	import HeadInfo from '@/components/head-info/head-info';
+	export default {
+		data() {
+			return {
+				value: 0,
+				range: [{
+						value: 0,
+						text: "篮球"
+					},
+					{
+						value: 1,
+						text: "足球"
+					},
+					{
+						value: 2,
+						text: "游泳"
+					},
+				],
+				ltemList: [1, 1, 1, 1, 2, 1, 1, 1, 1],
+			}
+		},
+		onLoad() {
+
+		},
+		components: {
+			SideBar,
+			HeadInfo
+		},
+		methods: {
+			change(e) {
+				console.log("e:", e);
+			},
+		}
+	};
+</script>
+
+<style>
+	.container {
+		background-color: #f5f6fa;
+		display: flex;
+	}
+
+	.content {
+		padding: 20px;
+		.form {
+			display: flex;
+			.select {
+				width: 100px;
+			}
+			.input {
+				width: 200px;
+				height: 35px;
+				line-height: 35px;
+				border: 1px solid #c9cacb;
+				border-radius: 5px;
+				padding-left: 10px;
+				margin-left: 15px;
+			}
+		}
+
+		.itemList {
+			width: 100%;
+			display: flex;
+			justify-content: flex-start;
+			flex-wrap: wrap;
+			.item {
+				width: 48%;
+				margin-top: 15px;
+				margin-right: 4%;
+				height: 160px;
+				border: 1px solid #c9cacb;
+				padding: 22px 15px;
+
+				.title {
+					display: flex;
+					justify-content: space-between;
+					font-size: 21px;
+					margin-bottom: 20px;
+					font-weight: 700;
+				}
+
+				.status {
+					font-size: 16px;
+					font-weight: 400;
+				}
+
+				.row {
+					display: flex;
+					justify-content: space-between;
+					font-size: 18px;
+					margin: 10px 0;
+
+					.text {
+						display: block;
+					}
+				}
+			}
+
+			.item:nth-child(2n) {
+				margin-right: 0;
+			}
+		}
+	}
+</style>
diff --git a/style/css/main.css b/style/css/main.css
index 124692c..fae2f63 100644
--- a/style/css/main.css
+++ b/style/css/main.css
@@ -2977,7 +2977,7 @@ swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
 }
 .content{
 	width: 100vw;
-	height: 100vh;
+	min-height: 100vh;
 }
 image{
 	width: 100%;