修改电子显示屏

src/views/components/systemTime/digit.vue

@@ -1,32 +1,32 @@
 <template>
-  <div class="digit" :style="{width: 11*zoom+'px', height: 20*zoom+'px', top: top+'px'}">
+  <div class="digit" :style="{width: w+'px', height: h+'px'}">
     <div
       class="segment on"
-      :style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowOne), top: zoom+'px', left: zoom*2+'px', right: zoom*2+'px', height: zblod+'px'}"
+      :style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowOne), top: p+'px', left: p+b1+'px', right: b1+'px', width: z1+b1+'px', height: b1+'px'}"
     />
     <div
       class="segment on"
-      :style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowTwo), top: zoom*2+'px', right: zoom+'px', width: zblod+'px', height: zoom*7.5+'px'}"
+      :style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowTwo), top: p+b1+'px', left: p+z1+b2+'px', width: b1+'px', height:z1+'px'}"
     />
     <div
       class="segment on"
-      :style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowThee), bottom: zoom*2+'px', right: zoom+'px', width: zblod+'px', height: zoom*7.5+'px'}"
+      :style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowThee), top: p+z1+b2+'px', left: p+z1+b2+'px', width: b1+'px', height: z1+'px'}"
     />
     <div
       class="segment on"
-      :style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowFour), bottom: zoom+'px', right: zoom*2+'px', height: zblod+'px', left: zoom*2+'px' }"
+      :style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowFour), top: p+z2+b2+'px', left: p+b1+'px', right: b1+'px', width: z1+b1+'px', height: b1+'px'}"
     />
     <div
       class="segment on"
-      :style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowFive), bottom: zoom*2+'px', left: zoom+'px', width: zblod+'px', height: zoom*7.5+'px'}"
+      :style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowFive), top: p+z1+b2+'px', left: p+'px', width: b1+'px', height: z1+'px'}"
     />
     <div
       class="segment on"
-      :style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowSix), top: zoom*2+'px', left: zoom+'px',width: zblod+'px', height: zoom*7.5+'px'}"
+      :style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowSix), top: p+b1+'px', left: p+'px', width: b1+'px', height:z1+'px'}"
     />
     <div
-      class="segment "
+      class="segment on"
-      :style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowSeven), left: zoom*2+'px', right: zoom*2+'px', height: zblod+'px', bottom: zoom*9.5+'px'}"
+      :style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowSeven), top: p+z1+b1+'px', left: p+b1+'px', right: b1+'px', width: z1+b1+'px', height: b1+'px'}"
     />
   </div>
 </template>
@@ -35,10 +35,6 @@
 export default {
 	name: 'Digit',
 	props: {
-		top: {
-			type: Number,
-			required: true
-		},
 		zoom: {
 			type: Number,
 			required: true
@@ -57,9 +53,6 @@ export default {
 		}
 	},
 	computed: {
-		zblod() {
-			return parseInt(this.fine * this.zoom);
-		},
 		isShowOne() {
 			return [2, 3, 5, 6, 7, 8, 9, 0].indexOf(this.number) != -1;
 		},
@@ -80,6 +73,27 @@ export default {
 		},
 		isShowSeven() {
 			return [2, 3, 4, 5, 6, 8, 9].indexOf(this.number) != -1;
+		},
+		b1() {
+			return this.fine * 2;
+		},
+		b2() {
+			return this.fine * 4;
+		},
+		z1() {
+			return this.zoom * 4;
+		},
+		z2() {
+			return this.zoom * 8;
+		},
+		p() {
+			return this.fine * 2;
+		},
+		w() {
+			return this.zoom * 4 + this.fine * 4 + this.p*2;
+		},
+		h() {
+			return this.zoom * 8 + this.fine * 4 + this.p*2;
 		}
 	},
 	methods: {
@@ -92,9 +106,8 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
     .digit {
+		display: inline-block;
 		position: relative;
-        display: inline-flex;
-        justify-content: center;
 
         .segment {
             position: absolute;
@@ -114,6 +127,5 @@ export default {
                 -o-transition: opacity 0s;
             }
         }
-
     }
 </style>

src/views/components/systemTime/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div class="system-time-box">
-    class="system-time-box"
-    :style="{background: background, width: width+'px', height: height+'px', 'line-height': height+'px'}"
-  >
     <template v-for="(item,index) in time">
       <digit
         v-if="Number.isInteger(parseInt(item))"
@@ -10,8 +7,7 @@
         :number="parseInt(item)"
         :color="color"
         :fine="fine"
-        :zoom="time.length - index > 2? zoom: zoom* 0.6"
+        :zoom="time.length - index > 2? zoom: zoom* 0.5"
-        :top="top"
       />
       <separator v-if="!Number.isInteger(parseInt(item))" :key="index" :color="color" :zoom="zoom" :fine="fine" />
     </template>
@@ -53,28 +49,10 @@ export default {
 				return 4;
 			}
 		},
-		width: {
-			type: Number,
-			default() {
-				return 280;
-			}
-		},
-		height: {
-			type: Number,
-			default() {
-				return 80;
-			}
-		},
 		fine: {
 			type: Number,
 			default() {
-				return 1;
+				return 2;
-			}
-		},
-		top: {
-			type: Number,
-			default() {
-				return 1;
 			}
 		}
 	}

src/views/components/systemTime/point.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="point"
-    :style="{background: color, width: zblod+'px', height: zblod+'px', top: top+'px', 'border-radius': 0.5*zblod+'px'}"
+    :style="{background: color, width: fine*2+'px', height: fine*2+'px','border-radius': fine+'px'}"
   />
 </template>
 
@@ -9,10 +9,6 @@
 export default {
 	name: 'Point',
 	props: {
-		top: {
-			type: Number,
-			required: true
-		},
 		zoom: {
 			type: Number,
 			required: true
@@ -25,20 +21,10 @@ export default {
 			type: String,
 			required: true
 		}
-	},
-	computed: {
-		zblod() {
-			return parseInt(this.fine * this.zoom);
-		}
-	},
-	methods: {
 	}
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-    .point {
+
-        position: relative;
-        display: inline-block;
-    }
 </style>

src/views/components/systemTime/separator.vue

@@ -1,9 +1,7 @@
 <template>
-    <div class="separator" :style="{width: zoom+'px', height: zoom*20+'px'}">
+	<div class="separator" :style="{width: w+'px', height: h+'px'}">
-        <div class="point-box">
+		<point class="point" :color="color" :zoom="zoom" :fine="fine" :style="{top: zoom*3+'px'}" />
-            <point :color="color" :zoom="zoom" :fine="fine" :top="-2*zoom"></point>
+		<point class="point" :color="color" :zoom="zoom" :fine="fine" :style="{top: zoom*5+p*2+'px' }" />
-            <point :color="color" :zoom="zoom" :fine="fine" :top="-12*zoom"></point>
-        </div>
 	</div>
 </template>
 
@@ -29,23 +27,26 @@
 	components: {
 		Point
 	},
-        methods: {
+	computed: {
+		p() {
+			return this.fine * 1;
+		},
+		w() {
+			return this.fine * 3;
+		},
+		h() {
+			return this.zoom * 8 + this.fine * 6 + this.p*2;
+		}
 	}
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
     .separator {
-        position: relative;
 		display: inline-block;
-        left: -2px;
-
-        .point-box {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
 		text-align: center;
-            justify-content: center;
+		.point {
+			position: relative;
 		}
     }
 </style>

src/views/display/menuSystemTime.vue

@@ -7,11 +7,8 @@
       <system-time
         class="display-time"
         :time="time"
-        :zoom="1.3"
+        :zoom="4"
-        :width="110"
+        :fine="1.5"
-        :height="32"
-        :fine="2"
-        :top="2"
       />
 
     </template>
@@ -77,6 +74,7 @@ export default {
 	}
 
 	.display-time{
+		padding: 5px;
 		box-shadow: 0px 0px 5px #eee;
         border-radius: 3px;
 	}