TimePicker: fix HH:mm style

packages/date-picker/src/basic/time-spinner.vue

 <template>
-  <div class="el-time-spinner">
+  <div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
     <div
       @mouseenter="emitSelectRange('hours')"
       @mousewheel="handleScroll('hour')"

packages/date-picker/src/panel/time.vue

@@ -3,6 +3,7 @@
     <div
       v-show="currentVisible"
       :style="{width: width + 'px'}"
+      :class="{ 'has-seconds': showSeconds }"
       class="el-time-panel">
       <div class="el-time-panel__content">
         <time-spinner

packages/theme-default/src/date-picker/time-picker.css

@@ -13,6 +13,16 @@
     z-index: var(--index-top);
     user-select: none;
 
+    &.has-seconds {
+      .el-time-panel__content::after {
+        left: calc(100% / 3 * 2);
+      }
+
+      .el-time-panel__content::before {
+        padding-left: calc(100% / 3);
+      }
+    }
+
     @e content {
       font-size: 0;
       position: relative;
@@ -37,12 +47,12 @@
       }
 
       &::after {
-        left: calc(100%/3*2);
+        left: 50%;
         margin-left: -2px;
       }
 
       &::before {
-        padding-left: calc(100%/3);
+        padding-left: 50%;
         margin-right: -2px;
       }
     }

packages/theme-default/src/date-picker/time-spinner.css

@@ -2,11 +2,17 @@
 
 @component-namespace el {
   @b time-spinner {
+    &.has-seconds {
+      .el-time-spinner__wrapper {
+        width: calc(100% / 3);
+      }
+    }
+
     @e wrapper {
       height: 190px;
       overflow: hidden;
       display: inline-block;
-      width: calc(100% / 3);
+      width: 50%;
       vertical-align: top;
       position: relative;
       -ms-overflow-style: none;

packages/theme-default/src/time-select.css

@@ -27,7 +27,7 @@
   color: #fff;
 
   &:hover {
-    background-color: #1d8ce0;
+    background-color: var(--color-primary);
   }
 }