将coilId的存储模式改成string

apps/hand-factory/pages/index.vue

@@ -1,8 +1,9 @@
 <template>
-	<view>
-		<klp-header @lineChange="setActive"></klp-header>
+	<view class="production-page">
 		
-		<view class="">
+		<klp-header @lineChange="setActive" class="line-header"></klp-header>
+		
+		<view class="content-wrapper">
 			<Acidity v-if="active == 0"/>
 			<Paint v-else-if="active == 1"/>
 			<Zinc1 v-else-if="active == 2"></Zinc1>
@@ -13,36 +14,84 @@
 </template>
 
 <script>
-	import Acidity from '@/components/lines/acidity.vue'
-	import Paint from '@/components/lines/paint.vue'
-	import Zinc1 from '@/components/lines/zinc1.vue'
-	import Zinc2 from '@/components/lines/zinc2.vue'
-	import Zinc3 from '@/components/lines/zinc3.vue'
-	
-	export default {
-		components: {
-			Acidity,
-			Paint,
-			Zinc1,
-			Zinc2,
-			Zinc3
-		},
-		data() {
-			return {
-				active: 0
+import Acidity from '@/components/lines/acidity.vue'
+import Paint from '@/components/lines/paint.vue'
+import Zinc1 from '@/components/lines/zinc1.vue'
+import Zinc2 from '@/components/lines/zinc2.vue'
+import Zinc3 from '@/components/lines/zinc3.vue'
+
+export default {
+	components: {
+		Acidity,
+		Paint,
+		Zinc1,
+		Zinc2,
+		Zinc3
+	},
+	data() {
+		return {
+			active: 0
+		}
+	},
+	methods: {
+		next() {
+			if (this.active >= 5) {
+				this.active = 0
+			} else {
+				this.active += 1
 			}
 		},
-		methods: {
-			next() {
-				if (this.active >= 5) {
-					this.active = 0
-				} else {
-					this.active += 1
-				}
-			},
-			setActive({ index, line }) {
-				this.active = index;
-			}
+		setActive({ index, line }) {
+			this.active = index;
 		}
 	}
-</script>
+}
+</script>
+
+<style scoped lang="scss">
+.production-page {
+	min-height: 100vh;
+	background: #f6f6f6;
+}
+
+/* 顶部装饰 */
+.page-header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 40rpx 30rpx 20rpx;
+	background: #fff;
+	border-bottom: 1rpx solid #e8e8e8;
+	
+	.header-title {
+		font-size: 28rpx;
+		font-weight: 500;
+		color: #333;
+		letter-spacing: 2rpx;
+		padding: 0 30rpx;
+	}
+	
+	.header-line {
+		height: 2rpx;
+		background: linear-gradient(90deg, transparent, #ddd, transparent);
+		flex: 1;
+		max-width: 100rpx;
+		
+		&.line-left {
+			background: linear-gradient(90deg, transparent, #ddd);
+		}
+		
+		&.line-right {
+			background: linear-gradient(90deg, #ddd, transparent);
+		}
+	}
+}
+
+.line-header {
+	background: #fff;
+}
+
+.content-wrapper {
+	padding: 20rpx;
+}
+</style>