byte-sailing-vue/src/views/equipment/four.vue

<template>
  <div class="four">
    <div class="top">
      <div class="compute">
        <img src="/img/warpKnittingMachine/4/btn_js.png" alt="" />
      </div>
      <div class="back">
        <img src="/img/warpKnittingMachine/4/btn_back.png" alt="" />
      </div>
    </div>
    <div class="body">
      <div class="line" style="margin-top: 68px">
        <input
          v-for="item in 5"
          :key="item"
          type="text"
          disabled
          :style="getStyle(item)"
        />
        <img
          style="margin-left: 50px"
          src="/img/warpKnittingMachine/4/btn_gx.png"
          alt=""
        />
      </div>
      <div class="line" style="margin-top: 15px">
        <input
          v-for="item in 5"
          :key="item"
          type="text"
          disabled
          :style="getStyle(item)"
        />
        <img
          style="margin-left: 50px"
          src="/img/warpKnittingMachine/4/btn_gx.png"
          alt=""
        />
      </div>
      <div class="line" style="margin-top: 15px">
        <input
          v-for="item in 5"
          :key="item"
          type="text"
          disabled
          :style="getStyle(item)"
        />
        <img
          style="margin-left: 50px"
          src="/img/warpKnittingMachine/4/btn_gx.png"
          alt=""
        />
      </div>
      <div class="line" style="margin-top: 15px">
        <input
          v-for="item in 5"
          :key="item"
          type="text"
          disabled
          :style="getStyle(item)"
        />
        <img
          style="margin-left: 50px"
          src="/img/warpKnittingMachine/4/btn_gx.png"
          alt=""
        />
      </div>
      <div class="line" style="margin-top: 15px">
        <input
          v-for="item in 5"
          :key="item"
          type="text"
          disabled
          :style="getStyle(item)"
        />
        <img
          style="margin-left: 50px"
          src="/img/warpKnittingMachine/4/btn_gx.png"
          alt=""
        />
      </div>
      <div class="line" style="margin-top: 15px">
        <input
          v-for="item in 5"
          :key="item"
          type="text"
          disabled
          :style="getStyle(item)"
        />
        <img
          style="margin-left: 50px"
          src="/img/warpKnittingMachine/4/btn_gx.png"
          alt=""
        />
      </div>
      <div class="line" style="margin-top: 15px">
        <input
          v-for="item in 5"
          :key="item"
          type="text"
          disabled
          :style="getStyle(item)"
        />
        <img
          style="margin-left: 50px"
          src="/img/warpKnittingMachine/4/btn_gx.png"
          alt=""
        />
      </div>
      <div class="line" style="margin-top: 15px">
        <input
          v-for="item in 5"
          :key="item"
          type="text"
          disabled
          :style="getStyle(item)"
        />
        <img
          style="margin-left: 50px"
          src="/img/warpKnittingMachine/4/btn_gx.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      att: "sss",
      next: ">>",
      last: "<<",
    };
  },
  methods: {
    getStyle(index) {
      switch (index) {
        case 1:
          return { background: "#ccc" };
        case 2:
          return { background: "#ccc", "margin-left": "40px" };
        case 3:
          return { background: "#ccc", "margin-left": "50px" };
        case 4:
          return { background: "#000", "margin-left": "55px" };
        case 5:
          return { background: "#000", "margin-left": "55px" };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.four {
  width: 1200px;
  height: 625px;
  background: url("/img/warpKnittingMachine/4/jbj4.png") no-repeat;
  background-size: 1200px 625px;
  position: relative;
  input {
    height: 30px;
    width: 120px;
    line-height: 30px;
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 35px;
    .compute {
      padding-left: 20px;
    }
    .back {
      padding-right: 20px;
    }
  }

  .line {
    display: flex;
    padding-left: 140px;
  }
}
img {
  cursor: pointer;
}
</style>