Vue's calculated attribute computed application--icon arc arrangement

1. Legends need to be displayed in the daily development topology diagram, but the normal legends are arranged horizontally as shown in the figure below, but the requirements are always changing. If you want the legends to be arranged in a semicircle or a curve, we can use the calculation attribute to design

 Two, directly on the code

html code:

<div class="topo_box">
      <div class="topu-img-list">
        <div
          v-for="(itemQ, index) in imgTagTopu"
          :key="index"
          class="item"
          :style="styleFn(index)"S
        >
          <img :src="itemQ.img" alt />
          <p>{
   
   { index }}</p>
        </div>
      </div>
    </div>

js code:

export default {
  data() {
    return {
      imgTagTopu: [
        {
          img: require("@/assets/img/2-hight.png"),
        },
        {
          img: require("@/assets/img/1.png"),
        },
        {
          img: require("@/assets/img/2-midde.png"),
        },
        {
          img: require("@/assets/img/2.png"),
        },
        {
          img: require("@/assets/img/3.png"),
        },
        {
          img: require("@/assets/img/4.png"),
        },
      ],
    };
  },
  computed: {
    styleFn() {
      return (index) => {
        if (index == 0) {
          return `position: relative;top: -3rem;`;
        }
        if (index == 1) {
          return `position: relative;top: -2rem;`;
        }
        if (index == 2) {
          return `position: relative;top: -1rem;`;
        }
        if (index == 3) {
          return `position: relative;top: -1rem;`;
        }
        if (index == 4) {
          return `position: relative;top: -2rem;`;
        }
        if (index == 5) {
          return `position: relative;top: -3rem;`;
        }
      };
    },
  },
};

css code:

.topo_box {
  width: 70%;
  height: 500px;
  position: relative;
  background: white;
  .topu-img-list {
    position: absolute;
    width: 60%;
    padding: 0px;
    top: 3rem;
    display: flex;
    justify-content: space-between;
    .item {
      position: relative;
      text-align: center;
      top: 0rem;
      img {
        width: 1rem;
        height: 1rem;
      }
    }
  }
}

Three, the effect is as follows:

ps: The rendering effect is slightly ugly, mainly for the application of computed. This example can be applied to many arc-arranged styles in the actual development process.