vue 项目块状样式布局展示

vue代码：

<template>
  <div>
    <div class="main">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          :class="{ new: item.new }"
          @click="Operat(item)"
        >
          <span>{{ item.drug_name }}</span>
        </li>
      </ul>
    </div>
    <div>
      <span class="bottom">
        <el-button @click="Cancel()" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="Save()">确 定</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import { GetCUseTItems, SaveRecipe } from "@/api/recipe.js";
export default {
  data() {
    return {
      list: [],
      value: "",
      selected: [],
      type: "0",
      drugParam: {},
      emer_med_rec_id: "",
    };
  },
  mounted() {
    this.Init();
  },
  methods: {
    Init() {
      GetCUseTItems(this.type).then((res) => {
        if (res.code == 1) {
          res.data = JSON.parse(res.data.toString());
          res.data.forEach((t) => {
            t.new = false;
          });
          this.list = res.data;
          //console.log(res.data);
        } else {
          this.showTip("获取药品失败!", "error");
        }
      });
    },
    Operat(item) {
      if (item.new) {
        this.selected.forEach((t) => {
          if (t.drug_code == item.drug_code) {
            this.selected.remove(item.drug_code);
          }
        });
        item.new = false;
      } else {
        this.selected.push(item.drug_code);
        item.new = true;
      }
      console.log(this.selected);
    },

    Cancel() {
      this.$emit("cancelSch");
    },
    Save() {
      if (this.selected.length == 0) {
        this.showTip("您未选择药品!", "warning");
        return;
      }

      this.drug_code = {
        drug_codes: this.selected,
        emer_med_rec_id: this.emer_med_rec_id,
      };
      //console.log(this.drug_code);
      SaveRecipe(this.drug_code).then((res) => {
        if (res.code == 1) {
          this.showTip(res.message, "success");
          this.Init();
        } else {
          this.showTip(res.message, "error");
        }
      });
    },
  },
};
</script>

<style scoped>
.main {
  min-height: 400px;
  margin: 30px 30px;
   calc(100% - 200px);
  overflow-x: hidden;
  overflow-y: scroll;
}
.main ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.add {
  display: inline-block;
  border-radius: 5px;
  padding: 5px;
  background-color: #08304a;
}
.main ul > li {
  display: inline-block;
  /* background-color: #b3ee3a;
  color: #333; */
  background-color: #08304a;
  color: #aaa;
  border-radius: 5px;
  padding: 16px 20px;
  font-size: 19px;

  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
}
.main ul > li.selected {
  background-color: #ccc;
  cursor: default;
  color: #888;
}
.main ul > li.new {
  /* background-color: #08304a;
  color: #aaa; */
  background-color: #b3ee3a;
  color: #333;
  /* min- 150px; */
}
.main li > i {
  position: absolute;
  top: 2px;
  right: 3px;
  color: #fff;
  font-size: 13px;
  border-radius: 15px;
  padding: 0 3px;
  background-color: #ff0000;
  font-weight: bold;
}
/* .bottom {
  float: right;
  margin-right: 30px;
  margin-bottom: 30px;
} */
.bottom {
  margin-left: 70%;
}
</style>>

 效果页面：