vue 项目块状样式布局展示

vue代码：
  1 <template>
  2   <div>
  3     <div class="main">
  4       <ul>
  5         <li
  6           v-for="(item, index) in list"
  7           :key="index"
  8           :class="{ new: item.new }"
  9           @click="Operat(item)"
 10         >
 11           <span>{{ item.drug_name }}</span>
 12         </li>
 13       </ul>
 14     </div>
 15     <div>
 16       <span class="bottom">
 17         <el-button @click="Cancel()" size="mini">取 消</el-button>
 18         <el-button type="primary" size="mini" @click="Save()">确 定</el-button>
 19       </span>
 20     </div>
 21   </div>
 22 </template>
 23 
 24 <script>
 25 import { GetCUseTItems, SaveRecipe } from "@/api/recipe.js";
 26 export default {
 27   data() {
 28     return {
 29       list: [],
 30       value: "",
 31       selected: [],
 32       type: "0",
 33       drugParam: {},
 34       emer_med_rec_id: "",
 35     };
 36   },
 37   mounted() {
 38     this.Init();
 39   },
 40   methods: {
 41     Init() {
 42       GetCUseTItems(this.type).then((res) => {
 43         if (res.code == 1) {
 44           res.data = JSON.parse(res.data.toString());
 45           res.data.forEach((t) => {
 46             t.new = false;
 47           });
 48           this.list = res.data;
 49           //console.log(res.data);
 50         } else {
 51           this.showTip("获取药品失败!", "error");
 52         }
 53       });
 54     },
 55     Operat(item) {
 56       if (item.new) {
 57         this.selected.forEach((t) => {
 58           if (t.drug_code == item.drug_code) {
 59             this.selected.remove(item.drug_code);
 60           }
 61         });
 62         item.new = false;
 63       } else {
 64         this.selected.push(item.drug_code);
 65         item.new = true;
 66       }
 67       console.log(this.selected);
 68     },
 69 
 70     Cancel() {
 71       this.$emit("cancelSch");
 72     },
 73     Save() {
 74       if (this.selected.length == 0) {
 75         this.showTip("您未选择药品!", "warning");
 76         return;
 77       }
 78 
 79       this.drug_code = {
 80         drug_codes: this.selected,
 81         emer_med_rec_id: this.emer_med_rec_id,
 82       };
 83       //console.log(this.drug_code);
 84       SaveRecipe(this.drug_code).then((res) => {
 85         if (res.code == 1) {
 86           this.showTip(res.message, "success");
 87           this.Init();
 88         } else {
 89           this.showTip(res.message, "error");
 90         }
 91       });
 92     },
 93   },
 94 };
 95 </script>
 96 
 97 <style scoped>
 98 .main {
 99   min-height: 400px;
100   margin: 30px 30px;
101    calc(100% - 200px);
102   overflow-x: hidden;
103   overflow-y: scroll;
104 }
105 .main ul {
106   list-style: none;
107   padding: 0;
108   margin: 0;
109 }
110 .add {
111   display: inline-block;
112   border-radius: 5px;
113   padding: 5px;
114   background-color: #08304a;
115 }
116 .main ul > li {
117   display: inline-block;
118   /* background-color: #b3ee3a;
119   color: #333; */
120   background-color: #08304a;
121   color: #aaa;
122   border-radius: 5px;
123   padding: 16px 20px;
124   font-size: 19px;
125 
126   margin-right: 10px;
127   margin-bottom: 10px;
128   cursor: pointer;
129   position: relative;
130 }
131 .main ul > li.selected {
132   background-color: #ccc;
133   cursor: default;
134   color: #888;
135 }
136 .main ul > li.new {
137   /* background-color: #08304a;
138   color: #aaa; */
139   background-color: #b3ee3a;
140   color: #333;
141   /* min- 150px; */
142 }
143 .main li > i {
144   position: absolute;
145   top: 2px;
146   right: 3px;
147   color: #fff;
148   font-size: 13px;
149   border-radius: 15px;
150   padding: 0 3px;
151   background-color: #ff0000;
152   font-weight: bold;
153 }
154 /* .bottom {
155   float: right;
156   margin-right: 30px;
157   margin-bottom: 30px;
158 } */
159 .bottom {
160   margin-left: 70%;
161 }
162 </style>>
效果页面：