“仁王2技能图”的版本间差异
来自仁王 wiki
（测试技能图效果） |
小 （已保护“仁王2技能图”：未完成，勿动（[编辑=仅允许管理员]（无限期）[移动=仅允许管理员]（无限期））） |
||
| （未显示同一用户的8个中间版本） | |||
| 第1行： | 第1行： | ||
| + | <html lang="zh"> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
| 第6行： | 第7行： | ||
<link rel="stylesheet/less" type="text/css" href="css/skill.less"/> | <link rel="stylesheet/less" type="text/css" href="css/skill.less"/> | ||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> | <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> | ||
| + | <style> | ||
| + | html, body, #app{ | ||
| + | height: 100%; | ||
| + | } | ||
| + | #app { | ||
| + | color: white; | ||
| + | } | ||
| + | |||
| + | .out{ | ||
| + | display: flex; | ||
| + | display: -webkit-flex; /* Safari */ | ||
| + | flex-wrap: wrap; | ||
| + | .svg{ | ||
| + | border: 1px solid #404040; | ||
| + | } | ||
| + | .remark{ | ||
| + | display: flex; | ||
| + | .show-box{ | ||
| + | background-color: white; | ||
| + | height: 300px; | ||
| + | width: 190px; | ||
| + | border: 1px solid #404040; | ||
| + | color: white !important; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .infobox-skill, .infobox-skill-type, .infobox-detail, .infobox-instruct { | ||
| + | margin: 7px; | ||
| + | border-radius: 4px; | ||
| + | width: 180px; | ||
| + | } | ||
| + | |||
| + | .infobox-skill { | ||
| + | background-image: linear-gradient(to right,#eee,#404040); | ||
| + | |||
| + | } | ||
| + | |||
| + | .infobox-skill-type { | ||
| + | background-image: linear-gradient(to left,white,#404040); | ||
| + | |||
| + | } | ||
| + | .infobox-detail { | ||
| + | background-color: rgba(0,0,0,.82); | ||
| + | |||
| + | } | ||
| + | .infobox-instruct { | ||
| + | background-image: linear-gradient(to left,white,#404040); | ||
| + | |||
| + | } | ||
| + | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
| 第11行： | 第63行： | ||
<div class="out"> | <div class="out"> | ||
<div class="svg"> | <div class="svg"> | ||
| − | <svg id="taidao" height=" | + | <svg id="taidao" height="100%" width="100%" viewbox="0 0 600,600"> |
<template v-for="item in bigCircleConfig"> | <template v-for="item in bigCircleConfig"> | ||
<circle :cx="item.cx" :cy="item.cy" :r="item.r" :stroke="item.stroke" stroke-width="1" | <circle :cx="item.cx" :cy="item.cy" :r="item.r" :stroke="item.stroke" stroke-width="1" | ||
| 第455行： | 第507行： | ||
</script> | </script> | ||
</body> | </body> | ||
| + | </html> | ||
2022年5月24日 (二) 22:21的最新版本
