这是一款用 Vue 3 单文件应用写的圆形英雄/角色卡片布局：八张角色缩略图沿圆周等分排列，点击任意一张会同步刷新中央大图、右侧详情面板（名字/职业/难度/背景介绍），左下角按钮一键进入浏览器全屏。整体节奏偏游戏 UI 风，适合作为角色/嘉宾/团队/成员的展示区。圆周定位用一个 CSS transform 表达式 `rotate(deg) translate(radius) rotate(-deg)` 完成，无需 JS 计算三角函数；组件不到 200 行、只依赖 Vue 3 一个库。
这款圆环卡片布局的四个亮点
环形定位公式经典：`rotate(45deg) translate(2rem) rotate(-45deg)`——先绕原点转到目标角度、沿 X 轴推出去、再反转让卡片本身正立，用 CSS 就画出等分圆环。
数据驱动写法：`v-for="(el, key) in list"` 循环渲染卡片，`activeIndex` 决定高亮和详情内容，`activeInfo` 是 computed 派生值，选中就自动同步。
全屏切换写了 `requestFullscreen` + Safari `webkitRequestFullscreen` + IE `msRequestFullscreen` 三种兼容，退出同理，可以直接部署到大屏演示。
详情面板背景用 `hero-bg` 层做模糊放大版角色图，`:key="activeIndex"` 强制切换时重建元素以触发 CSS 过渡，比直接改 style 更平滑。
Vue 3 与环形布局的三个技术取舍
其一，环形位置本可以在 JS 里算好绝对 top/left，但 CSS transform 版本响应式友好——`radius` 用 rem 单位后，根字号一改整个圆环等比缩放，不用重算。其二，`itemPosition` 是 computed 返回数组，Vue 会缓存直到 list 变化；如果需要动态增减角色，只改 list 数据即可，位置自动重排。其三，`v-if="activeInfo"` 加 `:key="activeIndex"` 让详情面板整体重建触发 `key` change，避免用 `v-for` transition 的复杂性。源码中均有注释可参考。
把角色数据换成自己的怎么做
角色列表在 `data() { return { list: [...] } }`（约第 7 行），每项含 name/role/difficulty/desc/img/thumbImg 六个字段；把这几项换成自己的团队成员、嘉宾、产品线代言人即可，字段名要保持一致否则模板会读不到。要减少角色数量，直接改 list 长度，环形布局自动均分；要增加到 12 个，`itemPosition` 里的角度计算不用改。要改环半径，`itemPosition` 里的 `radius = "2rem"` 换成你想要的值，卡片会同步拉远/拉近。
浏览器兼容性：Vue 3、transform、fullscreen 全主流浏览器支持；IE 11 及以下不建议使用（Vue 3 已不支持）。详细运行方法请参见压缩包内的帮助文档。
常见问题
能不能把圆环改成半圆或扇形
能。把 `itemPosition` 里的 `360 / len` 改成 `180 / (len - 1)`（半圆），起始角度也调整一下；或改成 `120 / (len - 1)` 得到一段扇形。
详情内容切换时能否加转场动画
能。把详情面板包一层 `
能改成鼠标悬停就切换而不是点击
能。把 `.item` 上的 `@click="activeIndex = key"` 换成 `@mouseenter="activeIndex = key"`，触发时机会更即时；也可以两者都加，兼顾键鼠和触屏。
适合放在哪些页面
适合游戏/动漫官网的角色介绍页、活动嘉宾展示区、团队成员环形排布页、公司高管介绍页、产品线代言人卡片区。下载源码后可作为独立组件嵌入 Vue3 项目。
