item聚焦下边框颜色提示

packages/components/HView/index.vue

 /**
- * @Author Think
- * @Date 2018/11/24
- */
+* @Author Think
+* @Date 2018/11/24
+*/
 
 <template>
   <div :class="{'h-ios': isIos}" class="h-view">
-    <slot />
+    <slot/>
   </div>
 </template>
 
@@ -46,35 +46,43 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
-.h-view {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  // padding-bottom: 44px;
-  // background-color: $bgColor;
-}
-.platform-ios{
-  .h-view{
-   // padding-bottom: 64px;
+<style lang="less">
+  ::selection {
+    background: #3367d6;
+    color: #fff;
+  }
+  input:hover ,input:focus{
+    caret-color: #3367d6;
+  }
+  .h-view {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    // padding-bottom: 44px;
+    // background-color: $bgColor;
   }
-}
 
-// iPhoneX适配
-@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
   .platform-ios {
     .h-view {
-     // padding-bottom: 120px;
+      // padding-bottom: 64px;
     }
   }
-}
 
-// iPhoneX Max适配
-@media only screen and (device-width: 414px) and (device-height: 896px) {
-  .platform-ios {
-    .h-view {
-     // padding-bottom: 120px;
+  // iPhoneX适配
+  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
+    .platform-ios {
+      .h-view {
+        // padding-bottom: 120px;
+      }
+    }
+  }
+
+  // iPhoneX Max适配
+  @media only screen and (device-width: 414px) and (device-height: 896px) {
+    .platform-ios {
+      .h-view {
+        // padding-bottom: 120px;
+      }
     }
   }
-}
 </style>

packages/components/ListItem/Item.vue

 <template>
   <div
-    :class="[showActivated,focus]"
+    :class="[showActivated,focus,focusBorder]"
     :style="{'min-height':minHeight}"
     class="hls-item">
     <div
@@ -63,11 +63,16 @@ export default {
       type: Number,
       default: 0,
     },
+    showFocusBorder: {
+      type: Boolean,
+      default: true,
+    },
   },
   data () {
     return {
       showActivated: '',
       focus: '',
+      focusBorder: '',
       hasTouchEvent: 'ontouchstart' in document,
       Icon: require('./right-gray@2x.png'),
     }
@@ -90,11 +95,16 @@ export default {
       // 移动浏览器中长按元素会触发显示菜单，导致touchend事件不会触发，需要阻止该行为
       e.preventDefault()
     },
-    focusin (e) {
-      this.focus = 'focus'
+    focusin () {
+      let vm = this
+      vm.focus = 'focus'
+      if (vm.showFocusBorder) {
+        vm.focusBorder = 'focus-border'
+      }
     },
-    focusout (e) {
+    focusout () {
       this.focus = ''
+      this.focusBorder = ''
     },
     start (e) {
       if (e.target.readOnly) return
@@ -125,6 +135,14 @@ export default {
     &.activated {
       opacity: 0.8;
     }
+    &.focus-border{
+      .contents {
+        &:after {
+          border-bottom: 2px solid rgba(0, 65, 196, 1); /*no*/
+          color: rgba(0, 65, 196, 1);
+        }
+      }
+    }
 
     .contents {
       height: 100%;

packages/components/ListItem/ListItem.vue

@@ -20,7 +20,6 @@ export default {
     cusClass: {
       type: String,
       default: '',
-
     },
   },
   data () {

packages/components/Select/select.vue

@@ -63,7 +63,7 @@
           color: #828282;
         }
         .h-header-right .h-header-btn {
-          color: #5D98F6;
+          color: @theme-color;
         }
       }
     }