operateGraphyItem.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <div id="operateGraphyItem">
  3. <div class="div-box">
  4. <i class="el-icon-rank"></i>
  5. </div>
  6. <div class="div-box">
  7. <i class="el-icon-rank"></i>
  8. </div>
  9. <div class="div-box">
  10. <i class="el-icon-download"></i>
  11. </div>
  12. <div class="div-box">
  13. <i class="el-icon-remove-outline"></i>
  14. </div>
  15. <div class="line">
  16. <el-slider tooltip-class="tooltip-class" v-model="value1"></el-slider>
  17. </div>
  18. <div class="div-box">
  19. <i class="el-icon-circle-plus-outline"></i>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. value1: ""
  28. };
  29. }
  30. };
  31. </script>
  32. <style lang="less">
  33. #operateGraphyItem {
  34. display: flex;
  35. position: relative;
  36. border: 1px #ddd solid;
  37. border-radius: 5px;
  38. overflow: hidden;
  39. .div-box {
  40. font-size: 24px;
  41. width: 40px;
  42. height: 40px;
  43. background: #67c23a;
  44. display: flex;
  45. justify-content: center;
  46. align-items: center;
  47. color: #fff;
  48. border-right: 1px #ddd solid;
  49. cursor: pointer;
  50. }
  51. .line {
  52. width: 200px;
  53. font-size: 12px;
  54. display: block;
  55. background: #67c23a;
  56. border-right: 1px #ddd solid;
  57. .tooltip-class {
  58. width: 100%;
  59. background-color: #409eff;
  60. }
  61. }
  62. }
  63. </style>