From 57741a7cddfb4b01f4423e125e304b72eff4306d Mon Sep 17 00:00:00 2001
From: Panzihang <819652404@qq.com>
Date: Wed, 19 Jul 2023 18:12:19 +0800
Subject: [PATCH] =?UTF-8?q?pad=E5=8D=95=E8=AF=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                         |  14 +-
 pages/shipWork/mixWork.vue      |  49 +++---
 pages/shipWork/peopleAdd.vue    |  31 ++--
 pages/shipWork/shiftAdd.vue     | 251 ++++++++++++++++++--------
 pages/shipWork/shiftDetails.vue | 303 +++++++++++++++-----------------
 pages/shipWork/untieAdd.vue     | 242 +++++++++++++++++--------
 pages/shipWork/untieCord.vue    |  58 +++---
 7 files changed, 561 insertions(+), 387 deletions(-)

diff --git a/App.vue b/App.vue
index 87d0b45..1749be1 100644
--- a/App.vue
+++ b/App.vue
@@ -17,4 +17,16 @@
 	@import "style/css/main.css";
 	@import "style/css/flex-main.css";
 	@import "/style/iconfont.css";
-</style>
+
+	/deep/.uni-select {
+		background-color: #fff;
+	}
+
+	/deep/.uni-date-x--border {
+		background-color: #fff;
+	}
+
+	/deep/.superwei-combox {
+		background-color: #fff;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/shipWork/mixWork.vue b/pages/shipWork/mixWork.vue
index dddc6bf..ae710ff 100644
--- a/pages/shipWork/mixWork.vue
+++ b/pages/shipWork/mixWork.vue
@@ -6,7 +6,7 @@
 					@click="tabsClick(item,index)">{{item}}</view>
 			</view>
 			<!-- 人员信息列表 -->
-			<view class="ul" v-if="tabsType == 1">
+			<view class="ul" v-if="tabsType == 0">
 				<view class="li" v-for="(item,index) in peopleInfo" :key="index" @click="add('look',item,index)">
 					<view class="title">航次：{{item.vvyName}}</view>
 					<p>贸易类型：{{item.tradeTypeName}}</p>
@@ -17,12 +17,12 @@
 				</view>
 			</view>
 			<!-- 工班信息列表 -->
-			<view class="ul" v-if="tabsType == 2">
-				<view class="li" v-for="(item,index) in shiftInfo" :key="index" @click="lookShift">
+			<view class="ul" v-if="tabsType == 1">
+				<view class="li" v-for="(item,index) in shiftInfo" :key="index" @click="lookShift(item,index)">
 					<view class="title">航次：{{item.vvyName}}</view>
-					<view class="shift" v-for="(item2,index2) in item.workMessageDetailReqDTOS" :key="index2">
-						<p>{{item2.wkdId}}</p>
-						<span>作业时间：{{item2.workTime}}</span>
+					<view class="shift" v-for="(item2,index2) in item.shiftList" :key="index2">
+						<p>{{item2.gbTextValue}}</p>
+						<span>作业开始时间：{{item2.startTime}}</span>
 					</view>
 					<view class="state">状态：未上传</view>
 				</view>
@@ -39,38 +39,35 @@
 			return {
 				shipInfo: [],
 				tabsList: ["人员信息", "工班信息"],
-				tabsType: 1, // 1是人员信息  2是工班信息
+				tabsType: 0, // 0是人员信息  1是工班信息
 				tabsIndex: 0,
 				// 人员信息列表
 				peopleInfo: [],
 				// 工班信息列表
-				shiftInfo: [{
-					vvyName: "511I",
-					workMessageDetailReqDTOS: [{
-						wkdId: "一工班",
-						workTime: "2023/09/09 13:00:00"
-					}, {
-						wkdId: "二工班",
-						workTime: "2023/09/09 13:00:00"
-					}, {
-						wkdId: "三工班",
-						workTime: "2023/09/09 13:00:00"
-					}]
-				}, ]
+				shiftInfo: []
 
 			}
 		},
 		mounted() {
+			this.tabsType = this.$route.query.infoType
+			if (this.tabsType != 0 || this.tabsType != 1) {
+				this.tabsType = 0
+				this.tabsIndex = 0
+			} else {
+				this.tabsIndex = this.tabsType
+			}
+			this.peopleInfo = uni.getStorageSync('addPeopleArr')
+			this.shiftInfo = uni.getStorageSync('addShiftArr')
+			console.log(this.shiftInfo)
 			this.shipInfo = uni.getStorageSync('shipInfo')
-			this.peopleInfo = uni.getStorageSync('addPeopleArr');
 		},
 		methods: {
 			tabsClick(item, index) {
 				this.tabsIndex = index;
 				if (item == "人员信息") {
-					this.tabsType = 1;
+					this.tabsType = 0;
 				} else {
-					this.tabsType = 2;
+					this.tabsType = 1;
 				}
 			},
 			add(state, item, index) {
@@ -80,7 +77,7 @@
 					state: state
 				}
 				const params = encodeURIComponent(JSON.stringify(obj));
-				if (this.tabsType == 1) {
+				if (this.tabsType == 0) {
 					uni.navigateTo({
 						url: `/pages/shipWork/peopleAdd?params=${params}`
 					})
@@ -90,7 +87,9 @@
 					})
 				}
 			},
-			lookShift() {
+			lookShift(item, index) {
+				uni.setStorageSync('shiftRow', item);
+				uni.setStorageSync('shiftRowIndex', index);
 				uni.navigateTo({
 					url: `/pages/shipWork/shiftDetails`
 				})
diff --git a/pages/shipWork/peopleAdd.vue b/pages/shipWork/peopleAdd.vue
index fb4d08d..c428755 100644
--- a/pages/shipWork/peopleAdd.vue
+++ b/pages/shipWork/peopleAdd.vue
@@ -112,7 +112,6 @@
 			}
 		},
 		mounted() {
-
 			if (this.obj.state == "edit" || this.obj.state == "look") {
 				this.getRow()
 			}
@@ -139,19 +138,17 @@
 			getRow() {
 				this.peopleRow = uni.getStorageSync('peopleRow');
 				this.peopleRowIndex = uni.getStorageSync('peopleRowIndex');
-				if (this.obj.state == "edit") {
-					this.hcValue = this.peopleRow.vvyId
-					this.hcTextValue = this.peopleRow.vvyName
-					this.tqValue = this.peopleRow.weatherId
-					this.tqTextValue = this.peopleRow.weatherType
-					this.bwValue = this.peopleRow.bthId
-					this.bwTextValue = this.peopleRow.bthIdName
-					this.workValue = this.peopleRow.workSuite
-					this.shipValue = this.peopleRow.shipPerson
-					this.datetime = [this.peopleRow.jobStartTime, this.peopleRow.jobEndTime]
-					this.startTime = this.peopleRow.jobStartTime
-					this.endTime = this.peopleRow.jobEndTime
-				}
+				this.hcValue = this.peopleRow.vvyId
+				this.hcTextValue = this.peopleRow.vvyName
+				this.tqValue = this.peopleRow.weatherId
+				this.tqTextValue = this.peopleRow.weatherType
+				this.bwValue = this.peopleRow.bthId
+				this.bwTextValue = this.peopleRow.bthIdName
+				this.workValue = this.peopleRow.workSuite
+				this.shipValue = this.peopleRow.shipPerson
+				this.datetime = [this.peopleRow.jobStartTime, this.peopleRow.jobEndTime]
+				this.startTime = this.peopleRow.jobStartTime
+				this.endTime = this.peopleRow.jobEndTime
 			},
 			// 航次下拉
 			hcChange(e) {
@@ -197,7 +194,7 @@
 			// 取消
 			cancel() {
 				uni.navigateTo({
-					url: '/pages/shipWork/mixWork'
+					url: '/pages/shipWork/mixWork?infoType=0'
 				})
 			},
 			// 删除
@@ -206,7 +203,7 @@
 				addPeopleArr.splice(this.peopleRowIndex, 1)
 				uni.setStorageSync('addPeopleArr', addPeopleArr);
 				uni.navigateTo({
-					url: '/pages/shipWork/mixWork'
+					url: '/pages/shipWork/mixWork?infoType=0'
 				})
 			},
 			// 保存
@@ -243,7 +240,7 @@
 				}
 
 				uni.navigateTo({
-					url: '/pages/shipWork/mixWork'
+					url: '/pages/shipWork/mixWork?infoType=0'
 				})
 			},
 			// 编辑
diff --git a/pages/shipWork/shiftAdd.vue b/pages/shipWork/shiftAdd.vue
index 67b6e43..81f3276 100644
--- a/pages/shipWork/shiftAdd.vue
+++ b/pages/shipWork/shiftAdd.vue
@@ -32,12 +32,12 @@
 					<view class="li">
 						<p class="liTitle"><text class="required">*</text>工班：</p>
 						<uni-data-select v-model="item.gbValue" :localdata="gbList"
-							@change="gbChange"></uni-data-select>
+							@change="gbChange(item,index)"></uni-data-select>
 					</view>
 					<view class="li">
 						<p class="liTitle"><text class="required">*</text>作业时间 ：</p>
 						<uni-datetime-picker v-model="item.datetime" type="datetimerange" rangeSeparator="-"
-							@change="changeLog" />
+							@change="changeLog(item)" />
 					</view>
 				</view>
 				<view class="ulTop"><text @click="ulAdd2">添加</text><text @click="del">删除</text><van-icon
@@ -46,7 +46,7 @@
 					<view class="li">
 						<p class="liTitle"><text class="required">*</text>车型：</p>
 						<uni-data-select v-model="item.cxValue" :localdata="cxList"
-							@change="cxChange"></uni-data-select>
+							@change="cxChange(item,index)"></uni-data-select>
 					</view>
 					<view class="li">
 						<p><text class="required">*</text>数量：</p>
@@ -55,7 +55,7 @@
 					<view class="li">
 						<p class="liTitle"><text class="required">*</text>装卸方式：</p>
 						<uni-data-select v-model="item.fsValue" :localdata="fsList"
-							@change="fsChange"></uni-data-select>
+							@change="fsChange(item,index)"></uni-data-select>
 					</view>
 					<view class="li widthLi">
 						<p class="liTitle">备注：</p>
@@ -73,7 +73,7 @@
 						<view class="li">
 							<p class="liTitle"><text class="required">*</text>翻仓类型：</p>
 							<uni-data-select v-model="item.fcValue" :localdata="fcList"
-								@change="fcChange"></uni-data-select>
+								@change="fcChange(item,index)"></uni-data-select>
 						</view>
 					</view>
 					<view v-for="(item2,index2) in item.fcUlList2" :key="index2 + 'fc2'">
@@ -82,20 +82,21 @@
 						<view class="ul ul2 fcUl2">
 							<view class="li">
 								<p class="liTitle"><text class="required">*</text>翻舱起点位置：</p>
-								<uni-easyinput v-model="item2.qdValue" focus placeholder="请输入翻舱起点位置"></uni-easyinput>
+								<uni-easyinput v-model="item2.qdValue" placeholder="请输入翻舱起点位置"></uni-easyinput>
 							</view>
 							<view class="li">
 								<p class="liTitle"><text class="required">*</text>翻舱终点位置：</p>
-								<uni-easyinput v-model="item2.zdValue" focus placeholder="请输入翻舱终点位置"></uni-easyinput>
+								<uni-easyinput v-model="item2.zdValue" placeholder="请输入翻舱终点位置"></uni-easyinput>
 							</view>
 							<view class="li">
 								<p class="liTitle"><text class="required">*</text>工班：</p>
 								<uni-data-select v-model="item2.gbValue" :localdata="gbList"
-									@change="gbChange"></uni-data-select>
+									@change="fcgbChange(index,item2,index2)"></uni-data-select>
 							</view>
 							<view class="li">
 								<p class="liTitle"><text class="required">*</text>作业时间 ：</p>
-								<uni-datetime-picker v-model="item2.datetime" type="datetimerange" rangeSeparator="-" />
+								<uni-datetime-picker v-model="item2.datetime" type="datetimerange" rangeSeparator="-"
+									@change="changeLog(item2)" />
 							</view>
 							<view class="li">
 								<p class="liTitle"><text class="required">*</text>数量：</p>
@@ -125,11 +126,12 @@
 						</view>
 						<view class="li">
 							<p class="liTitle"><text class="required">*</text>普通工人：</p>
-							<uni-number-box v-model="otherObj.ptWorker" />
+							<uni-number-box v-model="otherObj.ptworker" />
 						</view>
 						<view class="li">
 							<p class="liTitle"><text class="required">*</text>作业时间 ：</p>
-							<uni-datetime-picker v-model="otherObj.workTime" type="datetimerange" rangeSeparator="-" />
+							<uni-datetime-picker v-model="otherObj.datetime" type="datetimerange" rangeSeparator="-"
+								@change="changeLog(otherObj)" />
 						</view>
 						<view class="li">
 							<p class="liTitle"><text class="required">*</text>重量：</p>
@@ -165,7 +167,8 @@
 			</template>
 			<view class="btnList">
 				<van-button type="default" @click="cancel">取消</van-button>
-				<van-button type="info" @click="save">保存</van-button>
+				<van-button type="info" @click="back" v-if="active > 0">上一步</van-button>
+				<van-button type="info" @click="save" v-if="active == 2">保存</van-button>
 				<van-button type="info" @click="next" v-if="active < 2">下一步</van-button>
 			</view>
 		</view>
@@ -184,6 +187,8 @@
 					}]
 				},
 				obj: {},
+				dataInfo: {},
+				shiftRowIndex: 0,
 				active: 0,
 				stepList: [{
 						title: '工班信息'
@@ -207,79 +212,52 @@
 				zxList: [],
 				ulList1: [{
 					gbValue: "",
-					dataTime: ""
+					gbTextValue: "",
+					datetime: ['', ''],
+					startTime: "",
+					endTime: "",
 				}],
 				// 工班下拉框
-				gbList: [{
-						value: "工班0",
-						text: "工班0"
-					},
-					{
-						value: "工班1",
-						text: "工班1"
-					},
-					{
-						value: "工班2",
-						text: "工班2"
-					},
-				],
+				gbList: [],
 				ulList2: [{
 					cxValue: "",
+					cxTextValue: "",
 					numValue: 0,
 					fsValue: "",
+					fsTextValue: "",
 					notes: "",
 				}],
 				// 车型下拉
-				cxList: [{
-						value: "车型0",
-						text: "车型0"
-					},
-					{
-						value: "车型1",
-						text: "车型1"
-					},
-					{
-						value: "车型2",
-						text: "车型2"
-					},
-				],
+				cxList: [],
 				// 装卸方式下拉
-				fsList: [{
-						value: "装卸方式0",
-						text: "装卸方式0"
-					},
-					{
-						value: "装卸方式1",
-						text: "装卸方式1"
-					},
-					{
-						value: "装卸方式2",
-						text: "装卸方式2"
-					},
-				],
+				fsList: [],
 
 				// 翻仓信息
 				// 翻仓类型下拉
 				fcList: [{
-						value: "翻仓类型0",
+						value: "0",
 						text: "翻仓类型0"
 					},
 					{
-						value: "翻仓类型1",
+						value: "1",
 						text: "翻仓类型1"
 					},
 					{
-						value: "翻仓类型2",
+						value: "2",
 						text: "翻仓类型2"
 					},
 				],
 				fcUlList: [{
 					fcValue: "",
+					fcTextValue: "",
 					fcUlList2: [{
 						qdValue: "",
 						zdValue: "",
 						gbValue: "",
-						dataTime: "",
+						gbTextValue: "",
+						datetime: ['', ''],
+						startTime: "",
+						endTime: "",
 						numValue: 0,
 						tjValue: 0,
 						zlValue: 0
@@ -290,7 +268,9 @@
 				otherObj: {
 					jsWorker: 0,
 					ptworker: 0,
-					workTime: "",
+					datetime: ['', ''],
+					startTime: "",
+					endTime: "",
 					zlValue: 0,
 					tjValue: 0,
 					describe: "",
@@ -307,23 +287,69 @@
 		},
 		mounted() {
 			this.getShip()
+			if (this.obj.state == 'edit') {
+				this.editData();
+			}
 		},
 		methods: {
 			// 获取船只信息
 			getShip() {
 				this.shipInfo = uni.getStorageSync('shipInfo')
+				// 航次数据
 				this.shipInfo.voyageScheduleDataList.forEach((v, index) => {
 					this.hcList.push({
 						text: v.vvyName,
 						value: v.vvyId
 					})
 				})
+				// 装卸类型数据
 				this.shipInfo.handTypeList.forEach((v, index) => {
 					this.zxList.push({
 						text: v.ptrDesc,
 						value: v.ptrCode
 					})
 				})
+				// 工班数据
+				this.shipInfo.shipmentBasicShiftList.forEach((v, index) => {
+					this.gbList.push({
+						text: v.pwcTypeDesc,
+						value: v.pwcId
+					})
+				})
+				// 车型数据
+				this.shipInfo.shipmentVehicleModeList.forEach((v, index) => {
+					this.cxList.push({
+						text: v.bvmName,
+						value: v.bvmId
+					})
+				})
+				// 装卸方式
+				this.shipInfo.loadTypeList.forEach((v, index) => {
+					this.fsList.push({
+						text: v.ptrDesc,
+						value: v.ptrCode
+					})
+				})
+				// 翻仓类型
+				this.shipInfo.retallyMessageRespList.forEach((v, index) => {
+					this.fcList.push({
+						text: v.retallyTypeName,
+						value: v.retallyType
+					})
+				})
+			},
+			//状态为编辑获取数据
+			editData() {
+				this.dataInfo = uni.getStorageSync('shiftRow')
+				this.shiftRowIndex = uni.getStorageSync('shiftRowIndex')
+				this.hcValue = this.dataInfo.vvyId
+				this.hcTextValue = this.dataInfo.vvyName
+				this.zxValue = this.dataInfo.zxId
+				this.zxTextValue = this.dataInfo.zxTextValue
+				this.ulList1 = this.dataInfo.shiftList
+				this.ulList2 = this.dataInfo.shiftList2
+				this.fcUlList = this.dataInfo.fcList
+				this.otherObj = this.dataInfo.otherList
 			},
 			// 工班信息相关
 			// 航次下拉
@@ -347,14 +373,26 @@
 			// 点击第一个添加
 			ulAdd1() {
 				this.ulList1.push({
+					datetime: ['', ''],
 					gbValue: "",
-					dataTime: ""
+					gbTextValue: ""
+
 				})
 			},
 			// 工班下拉
-			gbChange(e) {},
+			gbChange(item, index) {
+				this.ulList1[index].gbValue = item.gbValue
+				this.gbList.forEach(v => {
+					if (v.value == item.gbValue) {
+						item.gbTextValue = v.text
+					}
+				})
+			},
 			// 作业时间
-			changeLog(e) {},
+			changeLog(item) {
+				item.startTime = item.datetime[0].slice(0, item.datetime[0].length - 3)
+				item.endTime = item.datetime[1].slice(0, item.datetime[1].length - 3)
+			},
 			// 点击第二个添加
 			ulAdd2() {
 				this.ulList2.push({
@@ -368,28 +406,62 @@
 				this.ulList2.splice(0, 1)
 			},
 			// 车型下拉
-			cxChange(e) {},
+			cxChange(item, index) {
+				this.ulList2[index].cxValue = item.cxValue
+				this.cxList.forEach(v => {
+					if (v.value == item.cxValue) {
+						item.cxTextValue = v.text
+					}
+				})
+			},
 			// 数量
 			numChange(val) {},
 			// 装卸方式下拉
-			fsChange(e) {},
+			fsChange(item, index) {
+				this.ulList2[index].fsValue = item.fsValue
+				this.fsList.forEach(v => {
+					if (v.value == item.fsValue) {
+						item.fsTextValue = v.text
+					}
+				})
+			},
 
 			// 翻仓信息
 			// 翻仓类型下拉
-			fcChange(e) {},
+			fcChange(item, index) {
+				this.fcUlList[index].fcValue = item.fcValue
+				this.fcList.forEach(v => {
+					if (v.value == item.fcValue) {
+						item.fcTextValue = v.text
+					}
+				})
+			},
+			// 翻仓工班
+			fcgbChange(index, item2, index2) {
+				this.fcUlList[index].fcUlList2[index2].gbValue = item2.gbValue
+				this.gbList.forEach(v => {
+					if (v.value == item2.gbValue) {
+						item2.gbTextValue = v.text
+					}
+				})
+			},
 			// 翻仓add
 			fcAdd() {
 				this.fcUlList.push({
 					fcValue: "",
+					fcTextValue: "",
 					fcUlList2: [{
 						qdValue: "",
 						zdValue: "",
 						gbValue: "",
-						dataTime: "",
-						numValue: 12,
-						tjValue: 12,
-						zlValue: 12
-					}]
+						gbTextValue: "",
+						datetime: ['', ''],
+						startTime: "",
+						endTime: "",
+						numValue: 0,
+						tjValue: 0,
+						zlValue: 0
+					}],
 				})
 			},
 			fcAdd2(index) {
@@ -397,7 +469,10 @@
 					qdValue: "",
 					zdValue: "",
 					gbValue: "",
-					dataTime: "",
+					gbTextValue: "",
+					datetime: ['', ''],
+					startTime: "",
+					endTime: "",
 					numValue: 0,
 					tjValue: 0,
 					zlValue: 0
@@ -411,15 +486,47 @@
 			// 取消
 			cancel() {
 				uni.navigateTo({
-					url: '/pages/shipWork/mixWork'
+					url: '/pages/shipWork/mixWork?infoType=1'
 				})
 			},
-			// 保存
-			save() {},
+			// 上一步
+			back() {
+				this.active = this.active - 1
+			},
 			// 下一步
 			next() {
 				this.active = this.active + 1
 			},
+			// 保存
+			save() {
+				let addShiftArr = uni.getStorageSync('addShiftArr')
+				let addShiftObj = {
+					vvyName: this.hcTextValue,
+					vvyId: this.hcValue,
+					zxName: this.zxTextValue,
+					zxId: this.zxValue,
+					shiftList: this.ulList1,
+					shiftList2: this.ulList2,
+					fcList: this.fcUlList,
+					otherList: this.otherObj
+				}
+				if (this.obj.state == 'add') {
+					if (addShiftArr != "") {
+						addShiftArr.push(addShiftObj)
+						uni.setStorageSync('addShiftArr', addShiftArr);
+					} else {
+						addShiftArr = []
+						addShiftArr.push(addShiftObj)
+						uni.setStorageSync('addShiftArr', addShiftArr);
+					}
+				} else {
+					addShiftArr[this.shiftRowIndex] = addShiftObj;
+					uni.setStorageSync('addShiftArr', addShiftArr);
+				}
+				uni.navigateTo({
+					url: '/pages/shipWork/mixWork?infoType=1'
+				})
+			},
 		}
 	}
 </script>
diff --git a/pages/shipWork/shiftDetails.vue b/pages/shipWork/shiftDetails.vue
index 9d979ff..1ce236c 100644
--- a/pages/shipWork/shiftDetails.vue
+++ b/pages/shipWork/shiftDetails.vue
@@ -3,197 +3,142 @@
 		<view class="container">
 			<custom-tabs type="c1" :value="value" @change="changeIndex">
 				<custom-tab-pane label="工班信息" name="c1_1">
-					<ul>
-						<li>
+					<view></view>
+					<view class="ul">
+						<view class="li">
 							<p>船名：</p>
-							<span>快乐号</span>
-						</li>
-						<li>
+							<text>{{shipInfo.voyageScheduleDataList[0].spmName}}</text>
+						</view>
+						<view class="li">
 							<p>航次：</p>
-							<span>JK97065578</span>
-						</li>
-						<li>
+							<text>{{shipInfo.voyageScheduleDataList[0].vvyName}}</text>
+						</view>
+						<view class="li">
 							<p>进出口：</p>
-							<span>进口</span>
-						</li>
-						<li>
+							<text>{{shipInfo.voyageScheduleDataList[0].importExportFlagName}}</text>
+						</view>
+						<view class="li">
 							<p>贸易类型：</p>
-							<span>外贸</span>
-						</li>
-						<li>
+							<text>{{shipInfo.voyageScheduleDataList[0].tradeTypeName}}</text>
+						</view>
+						<view class="li">
 							<p>装卸类型：</p>
-							<span> 装货</span>
-						</li>
-					</ul>
-					<ul>
-						<li>
+							<text> {{dataInfo.zxName}}</text>
+						</view>
+					</view>
+					<view class="ul bUl" v-for="(item,index) in dataInfo.shiftList" :key="index + 'a'">
+						<view class="li">
 							<p>工班：</p>
-							<span> 一工班</span>
-						</li>
-						<li>
+							<text> {{item.gbTextValue}}</text>
+						</view>
+						<view class="li">
 							<p>作业时间：</p>
-							<span> 2023/06/06 12:00 - 023/06/06 13:00</span>
-						</li>
-						<li>
+							<text> {{item.startTime}} - {{item.endTime}}</text>
+						</view>
+					</view>
+					<view class="ul bUl" v-for="(item,index) in dataInfo.shiftList2" :key="index + 'b'">
+						<view class="li">
 							<p>车型：</p>
-							<span>轿车</span>
-						</li>
-						<li>
+							<text>{{item.cxTextValue}}</text>
+						</view>
+						<view class="li">
 							<p>数量：</p>
-							<span>100</span>
-						</li>
-						<li class="wLi">
+							<text>{{item.numValue}}</text>
+						</view>
+						<view class="li wLi">
 							<p>备注：</p>
-							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
-								laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
-								sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
-								nascetur ridiculus mus. Nam</span>
-						</li>
-						<li>
-							<p>车型：</p>
-							<span>备件</span>
-						</li>
-						<li>
-							<p>数量：</p>
-							<span>100</span>
-						</li>
-						<li class="wLi">
-							<p>备注：</p>
-							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
-								laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
-								sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
-								nascetur ridiculus mus. Nam</span>
-						</li>
-					</ul>
-					<ul>
-						<li>
-							<p>工班：</p>
-							<span> 二工班</span>
-						</li>
-						<li>
-							<p>作业时间：</p>
-							<span> 2023/06/06 12:00 - 023/06/06 13:00</span>
-						</li>
-						<li>
-							<p>车型：</p>
-							<span>轿车</span>
-						</li>
-						<li>
-							<p>数量：</p>
-							<span>100</span>
-						</li>
-						<li class="wLi">
-							<p>备注：</p>
-							<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
-								laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
-								sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
-								nascetur ridiculus mus. Nam</span>
-						</li>
-					</ul>
+							<text>{{item.notes}}</text>
+						</view>
+					</view>
 				</custom-tab-pane>
 				<custom-tab-pane label="翻仓信息" name="c1_2">
-					<view class="fcInfo" v-for="(item,index) in fcList" :key="index + 'fc'">
+					<view class="fcInfo" v-for="(item,index) in dataInfo.fcList" :key="index + 'fc'">
 						<view class="fcBox">
 							<p>翻舱类型：</p>
-							<span>舱内翻</span>
+							<text>{{item.fcTextValue}}</text>
 						</view>
-						<ul v-for="(item2,index2) in item.infoList" :key="index2 + 'info'">
-							<li>
+						<view class="ul" v-for="(item2,index2) in item.fcUlList2" :key="index2 + 'info'">
+							<view class="li">
 								<p>航次：</p>
-								<span>JK97065578</span>
-							</li>
-							<li>
+								<text>{{shipInfo.voyageScheduleDataList[0].vvyName}}</text>
+							</view>
+							<view class="li">
 								<p>翻舱起点：</p>
-								<span>D5H4</span>
-							</li>
-							<li>
+								<text>{{item2.qdValue}}</text>
+							</view>
+							<view class="li">
 								<p>翻舱终点：</p>
-								<span>舱外</span>
-							</li>
-							<li>
+								<text>{{item2.zdValue}}</text>
+							</view>
+							<view class="li">
 								<p>作业时间：</p>
-								<span>2023/06/06 12:00 - 023/06/06 13:00</span>
-							</li>
-							<li>
-								<p>车型：</p>
-								<span>轿车</span>
-							</li>
-							<li>
+								<text>{{item2.startTime}} - {{item2.endTime}}</text>
+							</view>
+							<view class="li">
 								<p>数量：</p>
-								<span>100</span>
-							</li>
-							<li>
+								<text>{{item2.numValue}}</text>
+							</view>
+							<view class="li">
 								<p>体积：</p>
-								<span>30</span>
-							</li>
-							<li>
+								<text>{{item2.tjValue}}</text>
+							</view>
+							<view class="li">
 								<p>重量：</p>
-								<span>50</span>
-							</li>
-						</ul>
-
+								<text>{{item2.zlValue}}</text>
+							</view>
+						</view>
 					</view>
 				</custom-tab-pane>
 				<custom-tab-pane label="其他信息" name="c1_3">
 					<view class="otherInfo">
 						<p class="title">辅助作业</p>
-						<ul>
-							<li>
+						<view class="ul">
+							<view class="li">
 								<p>技术工人：</p>
-								<span>10</span>
-							</li>
-							<li>
+								<text>{{dataInfo.otherList.jsWorker}}</text>
+							</view>
+							<view class="li">
 								<p>普通工人：</p>
-								<span>30</span>
-							</li>
-							<li>
+								<text>{{dataInfo.otherList.ptworker}}</text>
+							</view>
+							<view class="li">
 								<p>作业时间：</p>
-								<span>2023/06/06 12:00 - 023/06/06 13:00</span>
-							</li>
-							<li>
+								<text>{{dataInfo.otherList.startTime}} - {{dataInfo.otherList.endTime}}</text>
+							</view>
+							<view class="li">
 								<p>重量：</p>
-								<span>50</span>
-							</li>
-							<li>
+								<text>{{dataInfo.otherList.zlValue}}</text>
+							</view>
+							<view class="li">
 								<p>体积：</p>
-								<span>30</span>
-							</li>
-							<li class="wLi">
+								<text>{{dataInfo.otherList.tjValue}}</text>
+							</view>
+							<view class="li wLi">
 								<p>描述：</p>
-								<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
-									laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
-									sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
-									montes,nascetur ridiculus mus. Nam</span>
-							</li>
-						</ul>
+								<text>{{dataInfo.otherList.describe}}</text>
+							</view>
+						</view>
 						<p class="title">待工作业</p>
-						<ul>
-							<li class="wLi">
+						<view class="ul">
+							<view class="li wLi">
 								<p>描述：</p>
-								<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
-									laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
-									sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
-									montes,nascetur ridiculus mus. Nam</span>
-							</li>
-						</ul>
+								<text>{{dataInfo.otherList.dgWork}}</text>
+							</view>
+						</view>
 						<p class="title">作业备注</p>
-						<ul>
-							<li class="wLi">
+						<view class="ul">
+							<view class="li wLi">
 								<p>描述：</p>
-								<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
-									laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
-									sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
-									montes,nascetur ridiculus mus. Nam</span>
-							</li>
-						</ul>
-
+								<text>{{dataInfo.otherList.notes}}</text>
+							</view>
+						</view>
 					</view>
 				</custom-tab-pane>
 			</custom-tabs>
 			<view class="btnList">
 				<van-button type="default" @click="cancel">取消</van-button>
-				<van-button type="default">删除</van-button>
-				<van-button type="info">编辑</van-button>
+				<van-button type="default" @click="del">删除</van-button>
+				<van-button type="info" @click="edit('edit')">编辑</van-button>
 			</view>
 		</view>
 	</view>
@@ -204,13 +149,24 @@
 		data() {
 			return {
 				value: 0,
-				fcList: [{
-					infoList: [{}, {}]
-				}, {
-					infoList: [{}]
-				}]
+				shipInfo: {
+					voyageScheduleDataList: [{
+						spmName: "",
+						importExportFlagName: "",
+						tradeTypeName: ""
+					}]
+				},
+				dataInfo: {
+					otherList: {}
+				},
+				shiftRowIndex: 0,
 			}
 		},
+		mounted() {
+			this.shipInfo = uni.getStorageSync('shipInfo')
+			this.dataInfo = uni.getStorageSync('shiftRow')
+			this.shiftRowIndex = uni.getStorageSync('shiftRowIndex')
+		},
 		methods: {
 			changeIndex(e) {
 				// console.log('选中:', e)
@@ -218,7 +174,26 @@
 			// 取消
 			cancel() {
 				uni.navigateTo({
-					url: '/pages/shipWork/mixWork'
+					url: '/pages/shipWork/mixWork?infoType=1'
+				})
+			},
+			// 删除
+			del() {
+				let addShiftArr = uni.getStorageSync('addShiftArr')
+				addShiftArr.splice(this.shiftRowIndex, 1)
+				uni.setStorageSync('addShiftArr', addShiftArr);
+				uni.navigateTo({
+					url: '/pages/shipWork/mixWork?infoType=1'
+				})
+			},
+			// 编辑
+			edit(state) {
+				this.obj = {
+					state: state
+				};
+				const params = encodeURIComponent(JSON.stringify(this.obj));
+				uni.navigateTo({
+					url: `/pages/shipWork/shiftAdd?params=${params}`
 				})
 			},
 		}
@@ -242,11 +217,11 @@
 					font-size: 16px;
 				}
 
-				ul {
+				.ul {
 					border-bottom: 1px dashed #ccc;
 				}
 
-				ul:last-child {
+				.ul:last-child {
 					border: none;
 				}
 			}
@@ -261,12 +236,18 @@
 				}
 			}
 
-			ul {
+			.ul[data-v-298cacec] {
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+			}
+
+			.ul {
 				display: flex;
 				justify-content: space-between;
 				flex-wrap: wrap;
 
-				li {
+				.li {
 					width: 45%;
 					display: flex;
 					padding: 10px 20px;
@@ -284,6 +265,10 @@
 				}
 			}
 
+			.bUl {
+				border-top: 1px solid #999;
+			}
+
 			.btnList {
 				display: flex;
 				justify-content: center;
diff --git a/pages/shipWork/untieAdd.vue b/pages/shipWork/untieAdd.vue
index 754db5b..34e87ed 100644
--- a/pages/shipWork/untieAdd.vue
+++ b/pages/shipWork/untieAdd.vue
@@ -1,64 +1,60 @@
 <template>
 	<view class="untieAdd">
 		<view class="container">
-			<ul>
-				<li>
+			<view class="ul">
+				<view class="li">
 					<p>船名：</p>
-					<span>快乐号</span>
-				</li>
-				<li>
-					<p><span class="required" v-if="obj.state != 'look'">*</span>船舶净吨：</p>
+					<text>{{shipInfo.voyageScheduleDataList[0].spmName}}</text>
+				</view>
+				<view class="li">
+					<p><text class="required" v-if="obj.state != 'look'">*</text>船舶净吨：</p>
 					<uni-number-box v-model="zlShip" v-if="obj.state != 'look'" />
-					<span v-else>100</span>
-				</li>
-				<li>
-					<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
+					<text v-else>{{zlShip}}</text>
+				</view>
+				<view class="li">
+					<p><text class="required" v-if="obj.state != 'look'">*</text>航次：</p>
 					<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
 						v-if="obj.state != 'look'"></uni-data-select>
-					<span v-else>CK98796</span>
-				</li>
-				<li>
+					<text v-else>{{hcTextValue}}</text>
+				</view>
+				<view class="li">
 					<p>进出口：</p>
-					<span>进口</span>
-				</li>
-				<li>
+					<text>{{shipInfo.voyageScheduleDataList[0].importExportFlagName}}</text>
+				</view>
+				<view class="li">
 					<p>贸易类型：</p>
-					<span>内贸</span>
-				</li>
-				<li>
-					<p><span class="required" v-if="obj.state != 'look'">*</span>泊位：</p>
+					<text>{{shipInfo.voyageScheduleDataList[0].tradeTypeName}}</text>
+				</view>
+				<view class="li">
+					<p><text class="required" v-if="obj.state != 'look'">*</text>泊位：</p>
 					<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"
 						v-if="obj.state != 'look'"></uni-data-select>
-					<span v-else>1泊位</span>
-				</li>
-				<li>
-					<p><span class="required" v-if="obj.state != 'look'">*</span>系缆时间：</p>
-					<uni-datetime-picker v-model="xlTime" type="datetimerange" rangeSeparator="-" @change="changeLog"
-						v-if="obj.state != 'look'" />
-					<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span>
-				</li>
-				<li>
+					<text v-else>{{bwTextValue}}</text>
+				</view>
+				<view class="li">
+					<p><text class="required" v-if="obj.state != 'look'">*</text>系缆时间：</p>
+					<uni-datetime-picker v-model="xlTime" @change="changeLog1" v-if="obj.state != 'look'" />
+					<text v-else>{{xlTime}}</text>
+				</view>
+				<view class="li">
 					<p>解缆时间：</p>
-					<uni-datetime-picker v-model="jlTime" type="datetimerange" rangeSeparator="-" @change="changeLog"
-						v-if="obj.state != 'look'" />
-					<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span>
-				</li>
-				<li>
+					<uni-datetime-picker v-model="jlTime" @change="changeLog2" v-if="obj.state != 'look'" />
+					<text v-else>{{jlTime}}</text>
+				</view>
+				<view class="li">
 					<p>移泊时间：</p>
-					<uni-datetime-picker v-model="ybTime" type="datetimerange" rangeSeparator="-" @change="changeLog"
-						v-if="obj.state != 'look'" />
-					<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span>
-				</li>
-				<li>
+					<uni-datetime-picker v-model="ybTime" @change="changeLog3" v-if="obj.state != 'look'" />
+					<text v-else>{{ybTime}}</text>
+				</view>
+				<view class="li">
 					<p>停泊时间：</p>
-					<uni-datetime-picker v-model="tbTime" type="datetimerange" rangeSeparator="-" @change="changeLog"
-						v-if="obj.state != 'look'" />
-					<span v-else>2020-04-21 00:00 - 2020-04-21 00:00</span>
-				</li>
-			</ul>
+					<uni-datetime-picker v-model="tbTime" @change="changeLog4" v-if="obj.state != 'look'" />
+					<text v-else>{{tbTime}}</text>
+				</view>
+			</view>
 			<view class="btnList">
 				<van-button type="default" @click="cancel">取消</van-button>
-				<van-button type="default" v-if="obj.state == 'look'">删除</van-button>
+				<van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</van-button>
 				<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
 				<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
 			</view>
@@ -70,63 +66,115 @@
 	export default {
 		data() {
 			return {
+				shipInfo: {
+					voyageScheduleDataList: [{
+						spmName: "",
+						importExportFlagName: "",
+						tradeTypeName: ""
+					}]
+				},
 				obj: {},
+				untieRow: {},
+				untieRowIndex: 0,
 				// 航次下拉框
 				hcValue: "",
-				hcList: [{
-						value: 0,
-						text: "航次0"
-					},
-					{
-						value: 1,
-						text: "航次1"
-					},
-					{
-						value: 2,
-						text: "航次2"
-					},
-				],
+				hcTextValue: "",
+				hcList: [],
 				// 船舶净吨
-				zlShip: 100,
+				zlShip: 0,
 				// 泊位下拉框
 				bwValue: "",
-				bwList: [{
-						value: 0,
-						text: "泊位0"
-					},
-					{
-						value: 1,
-						text: "泊位1"
-					},
-					{
-						value: 2,
-						text: "泊位2"
-					},
-				],
+				bwTextValue: "",
+				bwList: [],
 				// 系缆时间
-				xlTime: "",
+				xlTime: [''],
 				// 解缆时间
-				jlTime: "",
+				jlTime: [''],
 				// 移泊时间
-				ybTime: "",
+				ybTime: [''],
 				// 停泊时间
-				tbTime: "",
+				tbTime: [''],
 			}
 		},
 		onLoad(options) {
 			if ('params' in options) {
 				// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
 				this.obj = JSON.parse(decodeURIComponent(options.params))
+				console.log(this.obj)
 			}
 		},
+		mounted() {
+			if (this.obj.state == "edit" || this.obj.state == "look") {
+				this.getRow()
+			}
+			this.getShip()
+		},
 		methods: {
+			// 获取船只信息
+			getShip() {
+				this.shipInfo = uni.getStorageSync('shipInfo')
+				this.shipInfo.pubBerthesManageRespList.forEach((v, index) => {
+					this.bwList.push({
+						text: v.bthBthnm,
+						value: v.bthId
+					})
+				})
+				this.shipInfo.voyageScheduleDataList.forEach((v, index) => {
+					this.hcList.push({
+						text: v.vvyName,
+						value: v.vvyId
+					})
+				})
+			},
+			// 获取当前行信息
+			getRow() {
+				this.untieRow = uni.getStorageSync('untieRow');
+				this.untieRowIndex = uni.getStorageSync('untieRowIndex');
+				console.log(this.untieRow)
+				console.log(this.untieRowIndex)
+				this.hcValue = this.untieRow.vvyId
+				this.hcTextValue = this.untieRow.vvyName
+				this.zlShip = this.untieRow.zlShip
+				this.bwValue = this.untieRow.bthId
+				this.bwTextValue = this.untieRow.bthIdName
+				this.xlTime = this.untieRow.xlTime
+				this.jlTime = this.untieRow.jlTime
+				this.ybTime = this.untieRow.ybTime
+				this.tbTime = this.untieRow.tbTime
+			},
 			// 航次下拉
 			hcChange(e) {
 				this.hcValue = e;
+				this.hcList.forEach(v => {
+					if (v.value == e) {
+						this.hcTextValue = v.text
+					}
+				})
 			},
 			// 泊位下拉
 			bwChange(e) {
 				this.bwValue = e;
+				this.bwList.forEach(v => {
+					if (v.value == e) {
+						this.bwTextValue = v.text
+					}
+				})
+			},
+			// 系缆时间
+			changeLog1(e) {
+				this.xlTime = e.slice(0, e.length - 3)
+			},
+			// 解缆时间
+			changeLog2(e) {
+				this.jlTime = e.slice(0, e.length - 3)
+			},
+			// 移泊时间
+			changeLog3(e) {
+				this.ybTime = e.slice(0, e.length - 3)
+			},
+			// 停泊时间
+			changeLog4(e) {
+				this.tbTime = e.slice(0, e.length - 3)
 			},
 			// 取消
 			cancel() {
@@ -134,8 +182,46 @@
 					url: '/pages/shipWork/untieCord'
 				})
 			},
+			// 删除
+			del() {
+				let addUntieArr = uni.getStorageSync('addUntieArr')
+				addUntieArr.splice(this.untieRowIndex, 1)
+				uni.setStorageSync('addUntieArr', addUntieArr);
+				uni.navigateTo({
+					url: '/pages/shipWork/untieCord'
+				})
+			},
 			// 保存
 			save() {
+				let addUntieArr = uni.getStorageSync('addUntieArr')
+				let addUntieObj = {
+					zlShip: this.zlShip,
+					vvyId: this.hcValue,
+					vvyName: this.hcTextValue,
+					bthId: this.bwValue,
+					bthIdName: this.bwTextValue,
+					tradeTypeName: this.shipInfo.voyageScheduleDataList[0].tradeTypeName,
+					importExportFlagName: this.shipInfo.voyageScheduleDataList[0].importExportFlagName,
+					spmName: this.shipInfo.voyageScheduleDataList[0].spmName,
+					xlTime: this.xlTime,
+					jlTime: this.jlTime,
+					ybTime: this.ybTime,
+					tbTime: this.tbTime
+				}
+
+				if (this.obj.state == "edit") {
+					addUntieArr[this.untieRowIndex] = addUntieObj;
+					uni.setStorageSync('addUntieArr', addUntieArr);
+				} else if (this.obj.state == "add") {
+					if (addUntieArr != "") {
+						addUntieArr.push(addUntieObj)
+						uni.setStorageSync('addUntieArr', addUntieArr);
+					} else {
+						addUntieArr = []
+						addUntieArr.push(addUntieObj)
+						uni.setStorageSync('addUntieArr', addUntieArr);
+					}
+				}
 				uni.navigateTo({
 					url: '/pages/shipWork/untieCord'
 				})
@@ -157,12 +243,12 @@
 		.container {
 			padding: 30px 20px;
 
-			ul {
+			.ul {
 				display: flex;
 				flex-wrap: wrap;
 				justify-content: space-between;
 
-				li {
+				.li {
 					width: 44%;
 					border-top: 1px solid #ccc;
 					border-bottom: 1px solid #ccc;
diff --git a/pages/shipWork/untieCord.vue b/pages/shipWork/untieCord.vue
index 9c19fb5..24e0351 100644
--- a/pages/shipWork/untieCord.vue
+++ b/pages/shipWork/untieCord.vue
@@ -1,16 +1,16 @@
 <template>
 	<view class="untieCord">
 		<view class="container">
-			<ul>
-				<li v-for="(item,index) in infoList" :key="index" @click="add('look')">
-					<view class="title">航次：{{item.val1}}</view>
-					<p>状态：{{item.val2}}</p>
-					<p>进出口：{{item.val3}}</p>
-					<p>贸易类型：{{item.val4}}</p>
-					<p>泊位：{{item.val5}}</p>
-					<p>系缆时间：{{item.val6}}</p>
-				</li>
-			</ul>
+			<view class="ul">
+				<view class="li" v-for="(item,index) in infoList" :key="index" @click="add('look',item,index)">
+					<view class="title">航次：{{item.spmName}}</view>
+					<p>状态：未上传</p>
+					<p>进出口：{{item.importExportFlagName}}</p>
+					<p>贸易类型：{{item.tradeTypeName}}</p>
+					<p>泊位：{{item.bthIdName}}</p>
+					<p>系缆时间：{{item.xlTime}}</p>
+				</view>
+			</view>
 			<view class="addBtn" @click="add('add')">+ 新增</view>
 		</view>
 	</view>
@@ -20,32 +20,20 @@
 	export default {
 		data() {
 			return {
-				infoList: [{
-					val1: "JK9795799",
-					val2: "待上传",
-					val3: "进口",
-					val4: "外贸",
-					val5: "一泊位",
-					val6: "05/30  8:00",
-				}, {
-					val1: "JK9795799",
-					val2: "待上传",
-					val3: "进口",
-					val4: "外贸",
-					val5: "一泊位",
-					val6: "05/30  8:00",
-				}, {
-					val1: "JK9795799",
-					val2: "待上传",
-					val3: "进口",
-					val4: "外贸",
-					val5: "一泊位",
-					val6: "05/30  8:00",
-				}]
+				shipInfo: {},
+				infoList: []
 			}
 		},
+		mounted() {
+			this.shipInfo = uni.getStorageSync('shipInfo')
+			this.infoList = uni.getStorageSync('addUntieArr')
+			console.log(this.shipInfo)
+			console.log(this.infoList)
+		},
 		methods: {
-			add(state) {
+			add(state, item, index) {
+				uni.setStorageSync('untieRow', item);
+				uni.setStorageSync('untieRowIndex', index);
 				const obj = {
 					state: state,
 				}
@@ -63,10 +51,10 @@
 		.container {
 			padding: 30px 20px;
 
-			ul {
+			.ul {
 				padding: 20px 0;
 
-				li {
+				.li {
 					display: flex;
 					justify-content: space-between;
 					border-bottom: 1px solid #ccc;