|
|
| 第1行： |
第1行： |
| <includeonly> | | <includeonly> |
| <style>
| |
| /* 容器样式 */
| |
| .character-shuju .character-stats {
| |
| background-color: #333;
| |
| /* 深色背景 */
| |
| padding: 20px;
| |
| border-radius: 10px;
| |
| color: white;
| |
| max-width: 600px;
| |
| /* 或根据实际需要调整 */
| |
| margin: auto;
| |
| }
| |
|
| |
| /* 等级显示部分 */
| |
| .character-shuju .level-display {
| |
| margin-bottom: 20px;
| |
| }
| |
|
| |
| /* 滑动条样式 */
| |
| .character-shuju #levelSlider {
| |
| -webkit-appearance: none;
| |
| /* 针对旧的Safari浏览器 */
| |
| /* 移除默认样式 */
| |
| appearance: none;
| |
| /* 标准属性，适用于大多数现代浏览器 */
| |
| width: 100%;
| |
| height: 8px;
| |
| background: #555;
| |
| outline: none;
| |
| border-radius: 5px;
| |
| }
| |
|
| |
| .character-shuju #levelSlider::-webkit-slider-thumb {
| |
| /* -webkit-appearance: none; */
| |
| appearance: none;
| |
| /* width: 20px;
| |
| height: 20px;
| |
| background: #FFF;
| |
| border-radius: 50%; */
| |
| cursor: pointer;
| |
| background: url(https://i.17173cdn.com/g8bz6k/zzz/4/4b/bat-hk-1.png?20240627074413);
| |
| background-repeat: no-repeat;
| |
| /* background-size: 100% 100%; */
| |
| aspect-ratio: 91 / 69;
| |
| /* display: block; */
| |
| height: 100%;
| |
| width: auto;
| |
| top: 0;
| |
| }
| |
|
| |
| .character-shuju #levelSlider::-moz-range-thumb {
| |
| width: 20px;
| |
| height: 20px;
| |
| background: #FFF;
| |
| border-radius: 50%;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| /* 统计数据网格 */
| |
| .character-shuju .stats-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(2, 1fr);
| |
| /* 两列布局 */
| |
| gap: 10px;
| |
| }
| |
|
| |
| /* 单个统计数据项 */
| |
| .character-shuju .stat-item {
| |
| background: #222;
| |
| /* 较浅的背景色 */
| |
| padding: 3px;
| |
| padding-right: 13px;
| |
| padding-left: 13px;
| |
| border-radius: 5px;
| |
| border-radius: 1.25vw;
| |
| }
| |
|
| |
| .character-shuju .stat-label {
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .character-shuju .stat-label2 {
| |
| font-weight: bold;
| |
| color: #d3ff00;
| |
| }
| |
|
| |
| .character-shuju .stat-value2 {
| |
| float: right;
| |
| /* 值显示在右侧 */
| |
| }
| |
|
| |
| .character-shuju .slider-container {
| |
| border-radius: 1.25vw;
| |
| outline: .10417vw solid #000000;
| |
| border: .10417vw solid #313131;
| |
| box-sizing: border-box;
| |
| background: #313131;
| |
| align-items: center;
| |
| padding: 0 0 0 1.82292vw;
| |
| height: 2.5vw;
| |
| overflow: hidden;
| |
| display: flex;
| |
| width: 100%;
| |
| }
| |
|
| |
| .character-shuju #levelSlider {
| |
| -webkit-appearance: none;
| |
| appearance: none;
| |
| /* 标准属性，适用于大多数现代浏览器 */
| |
| height: 100%;
| |
| /* 将滑条高度设置为容器的100% */
| |
| background: transparent;
| |
| /* 使默认的背景透明 */
| |
| outline: none;
| |
| border-radius: 5px;
| |
| }
| |
|
| |
| .character-shuju label[for="levelSlider"] {
| |
| display: inline-block;
| |
| /* 使标签以块级元素方式显示，支持宽度设置 */
| |
| min-width: 90px;
| |
| /* 设置一个最小宽度，根据实际需求调整 */
| |
| margin-right: 10px;
| |
| /* 与滑动条之间添加一些间隔 */
| |
| font-weight: bold;
| |
| /* 加粗字体，使其更加突出 */
| |
| }
| |
|
| |
| .character-shuju input[type="range" i] {
| |
| margin: 0px;
| |
| }
| |
| </style>
| |
| <div class="character-shuju"> | | <div class="character-shuju"> |
| <div class="character-stats"> | | <div class="character-stats"> |
| 第313行： |
第181行： |
| }); | | }); |
| </script> | | </script> |
| </includeonly> | | </includeonly><noinclude>{{#widget:CharacterAttributes}} |
| <noinclude>{{#widget:CharacterAttributes}} | |
