418 lines
23 KiB
Vue
418 lines
23 KiB
Vue
<!--
|
||
* @Author: gtz
|
||
* @Date: 2021-04-16 10:57:43
|
||
* @LastEditors: gtz
|
||
* @LastEditTime: 2021-04-23 14:13:48
|
||
* @Description: file content
|
||
-->
|
||
<template>
|
||
<div style="height: calc(100vh - 30px - 97px); padding: 10px 16px;">
|
||
<div class="grid">
|
||
<div v-for="(item, index) in sortList" :key="item.id" class="report-item" :class="backgroundClass(index)">
|
||
<div class="report-item__content">
|
||
<div class="report-item__content-inner">
|
||
<div class="report-item__head">
|
||
<h1>{{ item.quantity }}</h1>
|
||
<div>
|
||
<span class="report-category">
|
||
<span class="report-category__icon" v-html="iconSvg(item.name)">
|
||
<!-- <svg v-html="item.icon"></svg> -->
|
||
</span>
|
||
<span class="report-category__name">{{ item.name }}报表</span>
|
||
</span>
|
||
<span class="report-category__static">Reports</span>
|
||
</div>
|
||
</div>
|
||
|
||
<ul class="report-item__list">
|
||
<li v-if="!item.quantity">
|
||
<span class="icon icon-no-reports" />
|
||
<span style="color: #909090;">暂无报表</span>
|
||
</li>
|
||
|
||
<template v-else>
|
||
<li v-for="n in item.reportNames" :key="n">
|
||
<span class="icon" />
|
||
<span>{{ n }}</span>
|
||
</li>
|
||
<!-- <li v-for="n in item.quantity" :key="n">
|
||
<span class="icon" />
|
||
<span>报表{{ n }}</span>
|
||
</li> -->
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
<button class="report-item__button" @click="handleClick(item.id)">
|
||
了解详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { list } from '@/api/report-manage/formSort'
|
||
export default {
|
||
data() {
|
||
return {
|
||
sortList: [],
|
||
allNum: 0
|
||
}
|
||
},
|
||
created() {
|
||
this.init()
|
||
},
|
||
methods: {
|
||
backgroundClass(index) {
|
||
return {
|
||
'bg-energy': index === 0,
|
||
'bg-order': index === 1,
|
||
'bg-pl': index === 2,
|
||
'bg-eq': index === 3,
|
||
'bg-people': index === 4,
|
||
'bg-quality': index === 5
|
||
}
|
||
},
|
||
iconSvg(name) {
|
||
switch (name) {
|
||
case '人员':
|
||
return `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<title>icon/实时报警/设备报表备份</title>
|
||
<defs>
|
||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||
<stop stop-color="#AB97F8" offset="0%"></stop>
|
||
<stop stop-color="#735EEE" offset="100%"></stop>
|
||
</linearGradient>
|
||
</defs>
|
||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||
<g id="2-7报表管理" transform="translate(-1103.000000, -712.000000)" fill-rule="nonzero">
|
||
<g id="编组-20备份-3" transform="translate(1022.000000, 688.000000)">
|
||
<g id="编组-3备份" transform="translate(80.000000, 24.000000)">
|
||
<g id="icon/实时报警/设备报表备份" transform="translate(1.000000, 0.000000)">
|
||
<g id="安全生产管理" fill="#000000" opacity="0">
|
||
<rect id="矩形" x="0" y="0" width="32" height="32"></rect>
|
||
</g>
|
||
<path d="M7.5,11.5 C7.5,9.01465446 9.51435911,7 11.9994072,7 C14.4856409,7 16.5,9.01465448 16.5,11.5 C16.5,13.9853455 14.4844553,16 11.9994072,16 C9.51435913,16 7.5,13.9853455 7.5,11.5 Z M13.5921181,23.9824137 L13.5921181,23.6921587 C13.5921181,21.5508228 14.7515157,19.6692481 16.5,18.5601807 C15.7101381,18.1920901 14.8440431,18.0005915 13.966458,18 L10.2535693,18 C7.07578721,18 4.5,20.4282026 4.5,23.4244918 L4.5,23.7746047 C4.5,25 7.07578721,25 10.2535693,25 L13.8033444,25 C13.6588964,24.679016 13.5869005,24.3321744 13.5921181,23.9824137 L13.5921181,23.9824137 Z M21,10 C19.0677778,10 17.5,11.5668934 17.5,13.5 C17.5,15.4331066 19.0677778,17 21,17 C22.9333333,17 24.5,15.4331066 24.5,13.5 C24.5,11.5668934 22.9344445,10 21,10 Z M21,10 C19.0677778,10 17.5,11.5668934 17.5,13.5 C17.5,15.4331066 19.0677778,17 21,17 C22.9333333,17 24.5,15.4331066 24.5,13.5 C24.5,11.5668934 22.9344445,10 21,10 Z M20.0373467,19 C17.5312152,19 15.5,21.0820373 15.5,23.6504666 L15.5,23.9502333 C15.5,25 17.5312152,25 20.0373467,25 L22.9648829,25 C25.4698997,25 27.5,24.9615086 27.5,23.9502333 L27.5,23.6504666 C27.5,21.0820373 25.4698997,19 22.9648829,19 L20.0373467,19 Z" id="形状" fill="url(#linearGradient-1)"></path>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>`
|
||
case '能源':
|
||
return `<svg width="32px" height="33px" viewBox="0 0 32 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<title>编组 7</title>
|
||
<defs>
|
||
<linearGradient x1="100%" y1="100%" x2="20.318998%" y2="7.84095011e-14%" id="linearGradient-2">
|
||
<stop stop-color="#42FFF4" offset="0%"></stop>
|
||
<stop stop-color="#45F2EC" offset="100%"></stop>
|
||
</linearGradient>
|
||
</defs>
|
||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||
<g id="2-7报表管理" transform="translate(-584.000000, -248.000000)" fill-rule="nonzero">
|
||
<g id="编组-2" transform="translate(504.000000, 224.000000)">
|
||
<g id="编组-7" transform="translate(80.000000, 24.674419)">
|
||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32.1488372"></rect>
|
||
<path d="M18.4136636,12.7050859 L18.4136636,6.6709268 L8.3453454,6.6709268 C7.2407759,6.6709268 6.3453454,7.5663573 6.3453454,8.6709268 L6.3453454,18.739245 L6.3453454,18.739245 L12.3795045,18.739245 L12.3795045,12.7050859 L18.4136636,12.7050859 Z M19.6204955,13.9119177 L19.6204955,19.9460769 L13.5863364,19.9460769 L13.5863364,25.980236 L23.6546546,25.980236 C24.7592241,25.980236 25.6546546,25.0848055 25.6546546,23.980236 L25.6546546,13.9119177 L25.6546546,13.9119177 L19.6204955,13.9119177 Z" id="形状" fill="url(#linearGradient-2)"></path>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>`
|
||
case '订单':
|
||
return `<svg width="32px" height="33px" viewBox="0 0 32 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<title>切片</title>
|
||
<defs>
|
||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
|
||
<stop stop-color="#FFE107" offset="0%"></stop>
|
||
<stop stop-color="#FFC003" offset="100%"></stop>
|
||
</linearGradient>
|
||
</defs>
|
||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||
<g id="2-7报表管理" transform="translate(-1102.000000, -248.000000)" fill-rule="nonzero">
|
||
<g id="编组-20" transform="translate(989.000000, 224.000000)">
|
||
<g id="安全生产管理" transform="translate(113.000000, 24.674419)">
|
||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="32" height="32.1488372"></rect>
|
||
<path d="M6.05780587,11.9972065 L15.6745644,17.5753832 C15.7708298,17.6313659 15.8800757,17.6609671 15.9913058,17.6609671 C16.1055887,17.6609671 16.2177737,17.6300547 16.3147648,17.5718917 L25.8579059,12.0367198 C26.1599408,11.860996 26.2633739,11.471057 26.0883577,11.1675108 C26.0315235,11.0688338 25.9493026,10.9873375 25.8517817,10.9324744 L16.3451526,5.39410909 C16.248917,5.33805819 16.1396708,5.30839651 16.0284324,5.30839651 C15.9041622,5.30824662 15.7825988,5.34486158 15.6789086,5.41367417 L6.14343858,10.9444604 C5.84129773,11.1188217 5.73669911,11.5077388 5.91029552,11.8114127 C5.94948055,11.8799829 6.00108471,11.9405857 6.06244668,11.9900958 L6.05780587,11.9972065 Z M23.5596063,14.8513694 L22.7976333,15.293337 L22.7976333,15.293337 L16.4926828,18.8585498 C16.1870008,19.0314015 15.813053,19.0312448 15.5075159,18.8581371 L8.44009134,14.8539557 C8.13113696,14.6789118 7.75252789,14.6808376 7.44537012,14.8590152 L6.14345977,15.6142341 L6.14345977,15.6142341 C5.84131892,15.7885953 5.73667792,16.1774912 5.91031671,16.4810587 C5.95017271,16.5508534 6.00287886,16.6123951 6.06562533,16.6624029 L6.06159904,16.669173 L15.6746492,22.2451143 C15.8729351,22.3604405 16.1177695,22.3591377 16.3148284,22.241708 L25.8579059,16.7064722 C26.159962,16.5306633 26.2633951,16.1407668 26.0883789,15.8373058 C26.0313964,15.7385862 25.9492814,15.6570473 25.8517605,15.6021629 L24.564748,14.8523379 C24.254217,14.6714198 23.8704854,14.67105 23.5596063,14.8513694 Z M23.566966,19.5253319 L22.8051137,19.9672408 L22.8051137,19.9672408 L16.4950708,23.5684717 C16.1882007,23.7436069 15.8116874,23.7438032 15.5046347,23.5689882 L9.19807441,19.9784604 L9.19807441,19.9784604 L8.43569437,19.5363074 C8.12540564,19.3563511 7.74250087,19.3563681 7.4322281,19.5363519 L6.14345977,20.2839439 L6.14345977,20.2839439 C5.84131892,20.4582839 5.7367203,20.8472223 5.91031671,21.1507898 C5.94972822,21.2198075 6.00173442,21.2807443 6.06361219,21.3304095 L6.05922565,21.3374138 L15.6745856,26.9147389 C15.7708469,26.9707439 15.8800894,27.0002981 15.991327,27.0004348 C16.1051469,27.0005234 16.216887,26.9697887 16.314786,26.9114603 L25.8579271,21.376182 C26.159962,21.2003305 26.2633951,20.8103488 26.0883789,20.5070156 C26.0315447,20.408296 25.9494085,20.3267359 25.8517817,20.2718727 L24.5721346,19.5263048 C24.2615976,19.3453749 23.8778527,19.3450035 23.566966,19.5253319 Z" id="形状" fill="url(#linearGradient-3)"></path>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>`
|
||
case '设备':
|
||
return `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<title>切片</title>
|
||
<defs>
|
||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
|
||
<stop stop-color="#FF8B87" offset="0%"></stop>
|
||
<stop stop-color="#FF534F" offset="100%"></stop>
|
||
</linearGradient>
|
||
</defs>
|
||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||
<g id="2-7报表管理" transform="translate(-585.000000, -712.000000)" fill-rule="nonzero">
|
||
<g id="编组-20备份-2" transform="translate(504.000000, 688.000000)">
|
||
<g id="编组-3备份" transform="translate(80.000000, 24.000000)">
|
||
<g id="icon/实时报警/设备报表" transform="translate(1.000000, 0.000000)">
|
||
<g id="安全生产管理" fill="#000000" opacity="0">
|
||
<rect id="矩形" x="0" y="0" width="32" height="32"></rect>
|
||
</g>
|
||
<g id="ico_设备管理_设备配置（精准医学）" transform="translate(6.193988, 6.000000)" fill="url(#linearGradient-4)">
|
||
<path d="M16.5597695,13.8582665 C18.0517684,13.8582665 19.2612725,15.0677706 19.2612725,16.5597695 C19.2612725,17.9943838 18.143018,19.1678158 16.7306168,19.2559576 L16.5597695,19.2612725 L3.0522545,19.2612725 C1.56025559,19.2612725 0.350751499,18.0517684 0.350751499,16.5597695 C0.350751499,15.1251552 1.46900602,13.9517232 2.8814072,13.8635814 L3.0522545,13.8582665 L16.5597695,13.8582665 Z M16.2229762,14.9408172 C15.3729045,14.9408172 14.6837853,15.6299365 14.6837853,16.4800081 C14.6837853,17.3300798 15.3729045,18.019199 16.2229762,18.019199 C17.0730478,18.019199 17.7621671,17.3300798 17.7621671,16.4800081 C17.7621671,15.6299365 17.0730478,14.9408172 16.2229762,14.9408172 Z M16.5597695,7.10450899 C18.0517684,7.10450899 19.2612725,8.31401308 19.2612725,9.80601199 C19.2612725,11.2406263 18.143018,12.4140583 16.7306168,12.5022001 L16.5597695,12.507515 L3.0522545,12.507515 C1.56025559,12.507515 0.350751499,11.2980109 0.350751499,9.80601199 C0.350751499,8.37139766 1.46900602,7.19796566 2.8814072,7.10982387 L3.0522545,7.10450899 L16.5597695,7.10450899 Z M16.2229762,8.26682112 C15.3729045,8.26682112 14.6837853,8.95594035 14.6837853,9.80601199 C14.6837853,10.6560836 15.3729045,11.3452029 16.2229762,11.3452029 C17.0730478,11.3452029 17.7621671,10.6560836 17.7621671,9.80601199 C17.7621671,8.95594035 17.0730478,8.26682112 16.2229762,8.26682112 Z M16.5597695,0.350751499 C18.0517684,0.350751499 19.2612725,1.56025559 19.2612725,3.0522545 C19.2612725,4.48686883 18.143018,5.66030083 16.7306168,5.74844262 L16.5597695,5.7537575 L3.0522545,5.7537575 C1.56025561,5.7537575 0.350751539,4.54425339 0.350751539,3.0522545 C0.350751539,1.61764018 1.46900604,0.444208168 2.8814072,0.356066378 L3.0522545,0.350751499 L16.5597695,0.350751499 Z M3.39586248,1.56247664 C2.54579083,1.56247664 1.85667161,2.25159586 1.85667161,3.10166751 C1.85667161,3.95173916 2.54579083,4.64085838 3.39586248,4.64085838 C4.24593413,4.64085838 4.93505335,3.95173916 4.93505335,3.10166751 C4.93505335,2.25159586 4.24593413,1.56247664 3.39586248,1.56247664 Z" id="形状结合"></path>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>`
|
||
case '产线':
|
||
return `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<title>icon/实时报警/设备报表备份 3</title>
|
||
<defs>
|
||
<linearGradient x1="50%" y1="26.1720856%" x2="50%" y2="100%" id="linearGradient-5">
|
||
<stop stop-color="#5C9BFF" offset="0%"></stop>
|
||
<stop stop-color="#2F62FE" offset="100%"></stop>
|
||
</linearGradient>
|
||
</defs>
|
||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||
<g id="2-7报表管理" transform="translate(-1619.000000, -248.000000)" fill-rule="nonzero">
|
||
<g id="编组-20备份" transform="translate(1539.000000, 224.000000)">
|
||
<g id="icon/实时报警/设备报表备份-3" transform="translate(80.000000, 24.000000)">
|
||
<g id="安全生产管理" fill="#000000" opacity="0">
|
||
<rect id="矩形" x="0" y="0" width="32" height="32"></rect>
|
||
</g>
|
||
<g id="编组" transform="translate(7.000000, 7.750000)" fill="url(#linearGradient-5)">
|
||
<path d="M17.8125,14.8125 L1.6875,14.8125 L1.6875,0.1875 C1.6875,0.084375 1.603125,0 1.5,0 L0.1875,0 C0.084375,0 0,0.084375 0,0.1875 L0,16.3125 C0,16.415625 0.084375,16.5 0.1875,16.5 L17.8125,16.5 C17.915625,16.5 18,16.415625 18,16.3125 L18,15 C18,14.896875 17.915625,14.8125 17.8125,14.8125 Z M3.375,13.3125 L15.9375,13.3125 C16.040625,13.3125 16.125,13.228125 16.125,13.125 L16.125,2.90625 C16.125,2.7375 15.9210937,2.65546875 15.8039062,2.77265625 L10.875,7.7015625 L7.9359375,4.7953125 C7.86328125,4.72265625 7.74375,4.72265625 7.67109375,4.7953125 L3.24140625,9.2390625 C3.20625,9.27421875 3.1875,9.32109375 3.1875,9.3703125 L3.1875,13.125 C3.1875,13.228125 3.271875,13.3125 3.375,13.3125 Z" id="形状"></path>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>`
|
||
case '质量':
|
||
return `<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<title>切片</title>
|
||
<defs>
|
||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
|
||
<stop stop-color="#B5EB45" offset="0%"></stop>
|
||
<stop stop-color="#7ED321" offset="100%"></stop>
|
||
</linearGradient>
|
||
</defs>
|
||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||
<g id="2-7报表管理" transform="translate(-1620.000000, -712.000000)" fill-rule="nonzero">
|
||
<g id="编组-20备份-4" transform="translate(1539.000000, 688.000000)">
|
||
<g id="icon/实时报警/设备报表备份-2" transform="translate(81.000000, 24.000000)">
|
||
<g id="安全生产管理" fill="#000000" opacity="0">
|
||
<rect id="矩形" x="0" y="0" width="32" height="32"></rect>
|
||
</g>
|
||
<path d="M19.6816106,20.2821267 L23.7404818,24.3409979 C23.9659747,24.5664907 23.9659747,24.9347957 23.7404818,25.1565303 C23.5187472,25.3782649 23.146684,25.3782649 22.9249494,25.1565303 L18.8660782,21.0976591 L19.6816106,20.2821267 Z M20.2866831,6.83523685 C17.4116494,7.28622254 15.4987184,10.0485099 16.1000326,12.912269 L7.58016142,21.4358984 C6.49403756,22.518264 6.49403756,24.2808664 7.58016142,25.3594739 C8.65876885,26.4380813 10.4288877,26.4380813 11.5037369,25.3594739 L20.0273663,16.8358444 C22.8911254,17.4334004 25.657171,15.5279859 26.1006402,12.649194 C26.2096284,11.9576826 25.9315206,11.5630701 25.5669738,11.5630701 C25.3978542,11.5630701 25.2137017,11.6457508 25.0333074,11.8223869 L24.0185896,12.8371047 C22.9399822,13.9157121 21.1698634,13.9157121 20.0912559,12.8371047 C19.0051321,11.7509808 19.0051321,9.99213663 20.0912559,8.90977098 C20.0912559,8.90977098 20.5459998,8.45502707 21.1059737,7.89505319 C21.6133326,7.39145254 21.3615323,6.80892935 20.5760656,6.81265156 C20.4821102,6.81265156 20.3843967,6.82396221 20.2866831,6.83523685 Z M8.53791335,24.4005171 C7.63882347,23.5014273 8.29585069,21.9798906 9.54074436,21.9798906 C10.785638,21.9798906 11.454192,23.5014273 10.5493388,24.4005171 C9.9902893,24.9538032 9.09119943,24.9538032 8.53791335,24.4005171 Z M7.572645,7.67707679 L6.2610283,8.98493528 L7.8958514,11.2774458 L9.26759952,11.9990229 L12.4771143,15.2085377 L13.7849728,13.9006792 L10.5829745,10.6874062 L9.86139735,9.31565812 L7.572645,7.67707679 L7.572645,7.67707679 Z M19.354646,18.8051486 L17.3928583,20.7669363 C17.212464,20.9473306 17.212464,21.2404713 17.3928583,21.4208655 L22.0267362,26.0547435 C22.7483133,26.7725623 23.9246343,26.7763206 24.6462114,26.0547435 C25.3677885,25.3331664 25.3677885,24.1568454 24.6462114,23.4352683 L20.0123335,18.8013904 C19.828181,18.6209961 19.5387985,18.6209961 19.354646,18.8051486 L19.354646,18.8051486 Z" id="形状" fill="url(#linearGradient-6)"></path>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>`
|
||
}
|
||
},
|
||
init() {
|
||
list({}).then(res => {
|
||
this.allNum = 0
|
||
this.sortList = res.data.map(item => {
|
||
if (item.name === '能源') {
|
||
return { ...item, reportNames: ['产线电量日能耗统计'] }
|
||
} else if (item.name === '订单') {
|
||
return { ...item, reportNames: ['订单历史记录', '在线订单进度'] }
|
||
} else if (item.name === '设备') {
|
||
return { ...item, reportNames: ['设备报警', '设备加工数量统计', '设备OEE'] }
|
||
} else if (item.name === '人员') {
|
||
return { ...item, reportNames: ['班组加工数量统计'] }
|
||
} else if (item.name === '产线') {
|
||
return { ...item, reportNames: ['产线日产量统计', '产线历史产量记录'] }
|
||
} else if (item.name === '质量') {
|
||
return { ...item, quantity: 1, reportNames: ['质量缺陷分析'] }
|
||
} else {
|
||
// mock
|
||
return item
|
||
}
|
||
})
|
||
res.data.forEach(item => {
|
||
this.allNum += item.quantity
|
||
})
|
||
})
|
||
},
|
||
handleClick(id) {
|
||
console.log('click id: ', id)
|
||
this.$router.push({
|
||
name: 'ReportSortList',
|
||
query: {
|
||
sortId: id
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.grid {
|
||
height: 100%;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
grid-template-rows: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.report-item {
|
||
background-color: white;
|
||
overflow: hidden;
|
||
border-radius: 16px;
|
||
// padding: 64px 100px;
|
||
// padding: 4rem 6.25rem;
|
||
// margin-bottom: 16px;
|
||
// margin-bottom: 1rem;
|
||
color: #161616;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.report-item__content {
|
||
width: 60%;
|
||
margin: auto;
|
||
background-color: transparent;
|
||
|
||
.report-item__content-inner {
|
||
// width: 80%;
|
||
// margin: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.report-item__head {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
h1 {
|
||
margin: 0;
|
||
// font-size: 5rem;
|
||
font-size: 80px;
|
||
line-height: 112px;
|
||
font-weight: 500;
|
||
margin-right: 32px;
|
||
}
|
||
|
||
div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
|
||
span.report-category {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.report-category__name {
|
||
font-size: 18px;
|
||
line-height: 25px;
|
||
// font-size: 18px;
|
||
letter-spacing: 2px;
|
||
}
|
||
}
|
||
span.report-category__static {
|
||
font-size: 32px;
|
||
line-height: 45px;
|
||
}
|
||
}
|
||
}
|
||
|
||
ul.report-item__list {
|
||
margin: 0;
|
||
padding: 0;
|
||
align-self: center;
|
||
// margin-left: 26%;
|
||
width: 188.55px;
|
||
|
||
list-style: none;
|
||
min-height: 120px;
|
||
overflow: scroll;
|
||
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span.icon {
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
// border-radius: 50%;
|
||
background-color: #0b58ff;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
&:not(:last-child) {
|
||
margin-bottom: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
button.report-item__button {
|
||
border: none;
|
||
outline: none;
|
||
background-color: #0b58ff;
|
||
color: white;
|
||
width: 80%;
|
||
display: inline-block;
|
||
margin-left: 10%;
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.bg-people,
|
||
.bg-energy,
|
||
.bg-eq,
|
||
.bg-pl,
|
||
.bg-quality,
|
||
.bg-order {
|
||
position: relative;
|
||
}
|
||
|
||
.bg-order {
|
||
background: url(./dd.png) no-repeat, white;
|
||
background-size: 100% 100%;
|
||
// background: url(./bg-o.svg) no-repeat, white;
|
||
// background-position: top -180px right -130px;
|
||
}
|
||
|
||
.bg-eq {
|
||
background: url(./sb.png) no-repeat, white;
|
||
background-size: 100% 100%;
|
||
// background: url(./bg-o.svg) no-repeat, white;
|
||
// background-position: left -150px bottom -200px;
|
||
}
|
||
|
||
.bg-energy {
|
||
background: url(./ny.png) no-repeat, white;
|
||
background-size: 100% 100%;
|
||
// background: url(./bg-c.svg) no-repeat, white;
|
||
// background-position: left -100px top -100px;
|
||
}
|
||
|
||
.bg-pl {
|
||
background: url(./cx.png) no-repeat, white;
|
||
background-size: 100% 100%;
|
||
// background: url(./bg-o.svg) right -220px bottom -100px no-repeat, url(./bg-o.svg) left -170px top -180px no-repeat,
|
||
// white;
|
||
}
|
||
|
||
.bg-quality {
|
||
background: url(./zl.png) no-repeat, white;
|
||
background-size: 100% 100%;
|
||
// background: url(./bg-c-r.svg) no-repeat, white;
|
||
// background-position: right -150px bottom -100px;
|
||
}
|
||
|
||
.icon-no-reports {
|
||
background-color: #ff5854 !important;
|
||
}
|
||
</style>
|