首页切图完成

src/assets/css/_mixin.scss

@@ -261,6 +261,77 @@
 }
 
 
+@mixin elInput(
+  $height: calcvh(27),
+  $color: #9fceff,
+  $placeholderColor: #9fceff,
+  $background: rgba(0, 28, 103, 0.56),
+  $borderColor: #059ede,
+  $borderRadius: 0,
+) {
+  .el-input {
+    font-size: calcvw(14);
+    .el-input__clear {
+      color: $color;
+      &:hover {
+        color: $color;
+      }
+    }
+  }
+  .el-input__inner {
+    height: $height;
+    background: $background;
+    border: 1px solid $borderColor;
+    color: $color;
+    border-radius: $borderRadius;
+    &:hover {
+      border: 1px solid $borderColor;
+    }
+    &:focus {
+      border-color: $borderColor;
+    }
+    &::placeholder {
+      color: $placeholderColor;
+    }
+  }
+  .el-input__icon {
+    line-height: $height;
+  }
+}
+
+@mixin elSelect($color: #9fceff, $borderColor: #059ede) {
+  .el-select {
+    width: 100%;
+    &:hover {
+      .el-input__inner {
+        border-color: $borderColor;
+      }
+    }
+    .el-input.is-focus {
+      .el-input__inner {
+        border-color: $borderColor;
+      }
+    }
+    .el-input {
+      .el-input__inner {
+        &:hover {
+          border-color: $borderColor;
+        }
+      }
+      .el-select__caret {
+        color: $color;
+      }
+    }
+    .el-input__inner:focus {
+      border-color: $borderColor;
+    }
+  }
+  .el-icon-arrow-up:before {
+    content: '\e78f';
+    color: $color;
+  }
+}
+
 // 超宽显示省略号
 @mixin ellipsis {
 	@media screen and (min-width: 992px){

src/views/Home/comps/list2.vue

+<template>
+  <div class="list">
+    <div v-for="(tmp, i) in list" :key="i" class="row">
+      <div class="col li">
+        <span></span>
+        <span>墨玉树上老菌菌业有限公司墨玉树上老菌菌业有限公司</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['list'],
+}
+</script>
+<style lang="scss" scoped>
+.list {
+  margin: 0;
+  padding: 7px 0;
+  .row {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    margin: 0;
+    .li {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      @include ellipsis;
+      span {
+        display: inline-block;
+        &:nth-child(1) {
+          width: 4px;
+          height: 4px;
+          background: #f26335;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+        &:nth-child(2) {
+          flex: 1;
+          @include ellipsis;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Home/comps/other-list.vue

+<template>
+  <div class="list">
+    <div v-for="(tmp, i) in list" :key="i" class="row">
+      <div class="col li">
+        <span></span>
+        <span>墨玉树上老菌菌业有限公司墨玉树上老菌菌业有限公司</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['list'],
+}
+</script>
+<style lang="scss" scoped>
+.list {
+  margin: 0;
+  padding-bottom: 10px;
+  .row {
+    display: flex;
+    justify-content: space-between;
+    padding: 2.8px 0;
+    margin: 0;
+    .li {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      @include ellipsis;
+      span {
+        display: inline-block;
+        &:nth-child(1) {
+          width: 4px;
+          height: 4px;
+          background: #f26335;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+        &:nth-child(2) {
+          flex: 1;
+          @include ellipsis;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Home/comps/yyly-list.vue

+<template>
+  <div class="list">
+    <div v-for="(tmp, i) in list" :key="i" class="row">
+      <div class="col li">
+        <span></span>
+        <span>墨玉树上老菌菌业有限公司墨玉树上老菌菌业有限公司</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['list'],
+}
+</script>
+<style lang="scss" scoped>
+.list {
+  margin: 0;
+  padding-bottom: 10px;
+  .row {
+    display: flex;
+    justify-content: space-between;
+    padding: 5.5px 0;
+    margin: 0;
+    .li {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      @include ellipsis;
+      span {
+        display: inline-block;
+        &:nth-child(1) {
+          width: 4px;
+          height: 4px;
+          background: #f26335;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+        &:nth-child(2) {
+          flex: 1;
+          @include ellipsis;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file