diff --git a/src/views/components/systemTime/digit.vue b/src/views/components/systemTime/digit.vue
index acb7e818d..26b20ee9a 100644
--- a/src/views/components/systemTime/digit.vue
+++ b/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' }"
+      class="segment on"
+      :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'}"
+      class="segment on"
+      :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'}"
+      class="segment on"
+      :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 "
-      :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'}"
+      class="segment on"
+      :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 {
-        position: relative;
-        display: inline-flex;
-        justify-content: center;
+		display: inline-block;
+		position: relative;
 
         .segment {
             position: absolute;
@@ -114,6 +127,5 @@ export default {
                 -o-transition: opacity 0s;
             }
         }
-
     }
 </style>
diff --git a/src/views/components/systemTime/index.vue b/src/views/components/systemTime/index.vue
index a964e1645..84f8e61bb 100644
--- a/src/views/components/systemTime/index.vue
+++ b/src/views/components/systemTime/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="system-time-box"
-    :style="{background: background, width: width+'px', height: height+'px', 'line-height': height+'px'}"
-  >
+  <div class="system-time-box">
     <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"
-        :top="top"
+        :zoom="time.length - index > 2? zoom: zoom* 0.5"
       />
       <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;
-			}
-		},
-		top: {
-			type: Number,
-			default() {
-				return 1;
+				return 2;
 			}
 		}
 	}
diff --git a/src/views/components/systemTime/point.vue b/src/views/components/systemTime/point.vue
index 2be8a63ad..6d03098c4 100644
--- a/src/views/components/systemTime/point.vue
+++ b/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>
diff --git a/src/views/components/systemTime/separator.vue b/src/views/components/systemTime/separator.vue
index 710c219fd..2298f8925 100644
--- a/src/views/components/systemTime/separator.vue
+++ b/src/views/components/systemTime/separator.vue
@@ -1,51 +1,52 @@
 <template>
-    <div class="separator" :style="{width: zoom+'px', height: zoom*20+'px'}">
-        <div class="point-box">
-            <point :color="color" :zoom="zoom" :fine="fine" :top="-2*zoom"></point>
-            <point :color="color" :zoom="zoom" :fine="fine" :top="-12*zoom"></point>
-        </div>
-    </div>
+	<div class="separator" :style="{width: w+'px', height: h+'px'}">
+		<point class="point" :color="color" :zoom="zoom" :fine="fine" :style="{top: zoom*3+'px'}" />
+		<point class="point" :color="color" :zoom="zoom" :fine="fine" :style="{top: zoom*5+p*2+'px' }" />
+	</div>
 </template>
 
 <script>
-    import Point from './point';
+import Point from './point';
 
-    export default {
-        name: 'separator',
-        props: {
-            zoom: {
-                type: Number,
-                required: true,
-            },
-            fine: {
-                type: Number,
-                required: true,
-            },
-            color: {
-                type: String,
-                required: true,
-            }
-        },
-        components: {
-            Point
-        },
-        methods: {
-        }
-    }
+export default {
+	name: 'separator',
+	props: {
+		zoom: {
+			type: Number,
+			required: true,
+		},
+		fine: {
+			type: Number,
+			required: true,
+		},
+		color: {
+			type: String,
+			required: true,
+		}
+	},
+	components: {
+		Point
+	},
+	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;
-        }
+		display: inline-block;
+		text-align: center;
+		.point {
+			position: relative;
+		}
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/display/menuSystemTime.vue b/src/views/display/menuSystemTime.vue
index 526c58b89..ebb8a82c0 100644
--- a/src/views/display/menuSystemTime.vue
+++ b/src/views/display/menuSystemTime.vue
@@ -7,11 +7,8 @@
       <system-time
         class="display-time"
         :time="time"
-        :zoom="1.3"
-        :width="110"
-        :height="32"
-        :fine="2"
-        :top="2"
+        :zoom="4"
+        :fine="1.5"
       />
 
     </template>
@@ -77,6 +74,7 @@ export default {
 	}
 
 	.display-time{
+		padding: 5px;
 		box-shadow: 0px 0px 5px #eee;
         border-radius: 3px;
 	}