Ry Role Test
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>10×10角色网格（自动换行）</title> <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script> <script src="https://ltda.wikidot.com/ry-role-component/code/1"></script> <style> .grid-container { display: flex; flex-wrap: wrap; /* 开启自动换行 */ width: 100%; /* 计算容器总宽度：10个角色宽度 + 9个间距 */ gap: 10px; /* 角色之间的间距 */ padding: 20px; margin: 0 auto; /* 容器居中 */ } .grid-cell { width: 160px; /* 固定每个格子宽度 */ height: 80px; /* 固定每个格子高度 */ display: flex; align-items: center; justify-content: center; border: 1px solid #eee; box-sizing: border-box; /* 确保边框不影响尺寸计算 */ } </style> </head> <body> <div id="app"> 刷新页面，人物会刷新 <!-- <div class="grid-container"> --> <!-- 循环生成100个角色，自动换行 --> <!-- <div class="grid-cell" v-for="j,i in 180" :key="j"> --> <role-component style="padding: 20px;" :size="60" :body="getRandom(0,23)" :left-hand="getRandom(0,35)" :left-hand-rotate="getRandom(-90,90)" :right-hand="getRandom(0,35)" :right-hand-rotate="getRandom(-90,90)" :eye="getRandom(0,2)" :eye-offset-x="getRandom(-10,5)" :eye-offset-y="getRandom(-15,10)" :eyebrow="getRandom(0,3)" :eyebrow-offset-x="getRandom(-10,20)" :eyebrow-offset-y="getRandom(-20,10)" :mouth="getRandom(0,3)" :mouth-offset-x="getRandom(-15,15)" :mouth-offset-y="getRandom(0,20)" /> <!-- </div> --> <!-- </div> --> </div> <script> let URL = window.location.href; let Name = URL.split('=')[1]; console.log('name', Name) new Vue({ el: '#app', methods: { // 生成指定范围的随机整数 getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } } }); </script> </body> </html>