Skip to content

R
report-html-template
Commit b3279462 by 呼呼啦啦
Options

庐山html

parent bdd55b6c
正在显示 包含 382 行增加 和 0 行删除
lushan-report/assets/down_icon.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_2491_18344"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_2491_18344)"><g transform="matrix(1,0,0,-1,0,35.9775390625)"><path d="M9.3007209375,18.11948353125L15.4040609375,25.11337953125C15.5029609375,25.22627953125,15.5266609375,25.38659953125,15.4645609375,25.523259531249998C15.4025609375,25.65991953125,15.2662609375,25.74764953125,15.1162609375,25.74754953125L12.1162609375,25.74754953125C11.9254909375,25.74590953125,11.7634309375,25.88674953125,11.7384609375,26.07587953125C11.5135709375,27.70403953125,10.1552709375,34.90486953125,3.7235909375,35.97076953125C3.5507109375,36.00416953125,3.3773999375,35.91516953125,3.3038189375,35.755169531250004C3.2302379375,35.59516953125,3.2754199375,35.40566953125,3.4132529375000003,35.29616953125C4.5151809375,34.432569531249996,5.954440937499999,32.75946953125,6.3592309375,29.78196953125C6.514640937499999,28.57236953125,6.5897609375,27.35384953125,6.5841209375,26.134349531250002C6.5841709375,25.921709531250002,6.4144009375,25.74793953125,6.2018109374999995,25.74304953125L2.9050159375,25.74304953125C2.7549349375,25.74314953125,2.6186806375,25.65541953125,2.5566499375,25.518759531249998C2.4946190375,25.38209953125,2.5182876875,25.22177953125,2.6171643375,25.10887953125L8.725010937499999,18.11948353125C8.8773409375,17.94519803125,9.1483909375,17.94519803125,9.3007209375,18.11948353125Z" fill="#85F1A2" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
lushan-report/assets/up_icon.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18" viewBox="0 0 18 18"><defs><clipPath id="master_svg0_2438_42385"><rect x="0" y="0" width="18" height="18" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_2438_42385)"><g><path d="M9.3007209375,0.130714L15.4040609375,7.12461C15.5029609375,7.23751,15.5266609375,7.39783,15.4645609375,7.53449C15.4025609375,7.67115,15.2662609375,7.75888,15.1162609375,7.75878L12.1162609375,7.75878C11.9254909375,7.75714,11.7634309375,7.89798,11.7384609375,8.08711C11.5135709375,9.71527,10.1552709375,16.9161,3.7235909375,17.982C3.5507109375,18.0154,3.3773999375,17.9264,3.3038189375,17.7664C3.2302379375,17.6064,3.2754199375,17.4169,3.4132529375000003,17.3074C4.5151809375,16.4438,5.954440937499999,14.7707,6.3592309375,11.7932C6.514640937499999,10.5836,6.5897609375,9.36508,6.5841209375,8.14558C6.5841709375,7.93294,6.4144009375,7.75917,6.2018109374999995,7.75428L2.9050159375,7.75428C2.7549349375,7.75438,2.6186806375,7.66665,2.5566499375,7.52999C2.4946190375,7.39333,2.5182876875,7.23301,2.6171643375,7.12011L8.725010937499999,0.130714C8.8773409375,-0.0435715,9.1483909375,-0.0435715,9.3007209375,0.130714Z" fill="#F18585" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
lushan-report/report.css 0 → 100644
html,
body,
.wrap {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.wrap {
background: url(./assets/bg.png) no-repeat;
background-size: 100% 100%;
color: #fff;
}
.top-title {
height: 60px;
padding-bottom: 10px;
background: url(./assets/report-header.png) no-repeat;
background-size: 100% 100%;
font-size: 32px;
}
@media screen and (max-width: 750px) {
.top-title {
font-size: 20px;
background: none;
}
.invest-wrapper-flex .invest-wrapper-content-left {
width: 100%;
}
.content {
padding: 0 20px;
}
}
.content {
height: calc(100% - 70px);
max-width: 900px;
overflow: auto;
margin: auto;
}
.content::-webkit-scrollbar {
display: none;
}
.content-item {
margin-bottom: 20px;
}
.content-item-title {
margin-bottom: 10px;
font-weight: 600;
font-size: 20px;
}
.project-info .content-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.content-wrap-2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.content-wrap-2 .operator-wrapper-content-box-title {
display: flex;
justify-content: center;
}
.operation-info .content-wrap {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 40px;
}
.invest-wrapper-flex {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.invest-wrapper-content-left {
width: 400px;
height: 300px;
}
.invest-chart-wrapper {
width: 100%;
height: 100%;
}
.invest-wrapper-content-right {
flex: 1;
display: flex;
align-items: center;
}
.invest-wrapper-content-right > .wrap {
padding: 0 10px;
}
.invest-wrapper-bracket-big {
height: 40px;
width: 5px;
}
.invest-wrapper-bracket-big > img {
width: 100%;
height: 100%;
}
.invest-wrapper-content-red-arrow {
display: inline-block;
width: 20px;
height: 20px;
background: url('./assets/up_icon.svg');
background-repeat: no-repeat;
}
.invest-wrapper-content-green-arrow {
display: inline-block;
width: 20px;
height: 20px;
background: url('./assets/down_icon.svg');
background-repeat: no-repeat;
}
.invest-wrapper-content-first-text {
display: flex;
align-items: baseline;
font-size: 14px;
}
.invest-wrapper-content-number {
font-size: 20px;
color: #f18585;
margin: 0 4px;
}
.project-wrapper {
justify-content: space-between;
margin-right: 30px;
}
.project-left {
width: 66px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10px;
}
.project-img-1 {
background: url('./assets/icon_ylcs_di.png') no-repeat;
background-size: 100% 100%;
}
.project-img-2 {
background: url('./assets/icon_ylcs1_di.png') no-repeat;
background-size: 100% 100%;
}
.project-right {
flex: 1;
margin-left: 15px;
}
.project-right > p:nth-of-type(1) {
font-size: 15px;
color: #b3d6f9;
opacity: 0.8;
}
.project-right > p:nth-of-type(2) {
font-size: 20px;
margin-top: 4px;
}
.project-right > p:nth-of-type(2) > span {
font-size: 14px;
}
.operator-wrapper-content-box {
}
.operator-wrapper-content-box-title {
font-size: 14px;
color: #fff;
min-width: 80px;
text-align: center;
display: inline-block;
}
.operator-wrapper-content-box-chart {
background-size: cover;
padding-top: 4px;
box-sizing: border-box;
display: flex;
justify-content: center;
}
.operator-wrapper-content-box-progress {
background-size: cover;
padding-top: 4px;
box-sizing: border-box;
display: flex;
}
.chart-area {
padding: 6px;
width: 80px;
height: 80px;
box-sizing: border-box;
background: url('./assets/chart-bg.png') no-repeat;
background-size: cover;
}
.chart-area .chart-wrapper {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
.circle-bar {
position: relative;
height: 100%;
padding: 8px;
box-sizing: border-box;
}
.circle-bar-1,
.circle-bar-2,
.circle-bar-5 {
background: #00b5ff;
}
.circle-bar-3,
.circle-bar-7 {
background: #f3be28;
}
.circle-bar-4,
.circle-bar-6 {
background-color: #35b327;
}
.mask {
background-color: #2c3849;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.mask :first-child {
display: block;
}
.circle-bar-left,
.circle-bar-right {
background-color: #2c3849;
}
/*自身以及子元素都是圆*/
.circle-bar,
.circle-bar > * {
border-radius: 50%;
}
.circle-bar-left,
.circle-bar-right {
background-color: #2c3849;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.circle-bar-right {
clip: rect(0, auto, auto, 35px);
}
.circle-bar-left {
clip: rect(0, 35px, auto, 0);
}
.percent {
z-index: 2;
}
.percent-text {
opacity: 0.7;
font-size: 12px;
}
.chart-desc {
font-size: 14px;
flex: 1;
margin-left: 10px;
}
.chart-desc-task {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8px;
box-sizing: border-box;
padding-bottom: 6px;
position: relative;
}
.chart-desc-task::after {
content: '';
height: 18px;
width: 100%;
background: url(./assets/desc-line.png) no-repeat;
background-size: 100% 16px;
position: absolute;
bottom: 0;
left: 0;
}
.chart-desc-text {
color: #fff;
opacity: 0.8;
}
.chart-desc-value {
margin-left: auto;
margin-right: 10px;
color: #fff;
font-weight: 700;
font-family: DIN Alternate-Bold;
}
.chart-desc-unfinished-value {
color: #ff6464;
font-weight: 700;
margin-left: auto;
margin-right: 10px;
font-family: DIN Alternate-Bold;
}
.chart-desc-daily-legend {
background: rgba(92, 179, 255, 0.302);
opacity: 1;
border: 2px solid #5cb3ff;
margin-right: 4px;
width: 4px;
height: 4px;
}
.chart-desc-handle-legend {
background: rgba(255, 100, 100, 0.302);
opacity: 1;
border: 2px solid #ff6464;
margin-right: 4px;
width: 4px;
height: 4px;
}
.will-finished {
background: rgba(61, 235, 213, 0.302);
opacity: 1;
border: 2px solid #3debd5;
margin-right: 4px;
width: 6px;
height: 6px;
}
.repair-require-chart {
width: 80px;
height: 80px;
background: url(./assets/repair-require-bg.png) no-repeat;
background-size: 100% 100%;
}
.repair-require-chart-wrapper,
.contract-chart-wrapper {
height: 100%;
}
.contract-chart {
width: 80px;
height: 80px;
background: url(./assets/contract-bg.png) no-repeat;
background-size: 100% 100%;
}
.advise-info .content-wrap {
display: block;
}
.advise-wrapper-content-item {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.advise-wrapper-content-item img {
width: 13px;
height: 13px;
margin-right: 13px;
}
.advise-wrapper-content-item-text {
color: #fff;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论