82 lines
2.5 KiB
Vue
82 lines
2.5 KiB
Vue
<template>
|
|
<div class="nation-card-basic bg2">
|
|
<div class="name tb-title">국가명</div>
|
|
<div class="type-head tb-head bg1">성향</div>
|
|
<div class="type-body tb-body"></div>
|
|
<div class="c12-head tb-head bg1">c12</div>
|
|
<div class="c12-body tb-body"></div>
|
|
<div class="c11-head tb-head bg1">c11</div>
|
|
<div class="c11-body tb-body"></div>
|
|
<div class="pop-head tb-head bg1">총 주민</div>
|
|
<div class="pop-body tb-body"></div>
|
|
<div class="crew-head tb-head bg1">총 병사</div>
|
|
<div class="crew-body tb-body"></div>
|
|
<div class="gold-head tb-head bg1">국고</div>
|
|
<div class="gold-body tb-body"></div>
|
|
<div class="rice-head tb-head bg1">병량</div>
|
|
<div class="rice-body tb-body"></div>
|
|
<div class="bill-head tb-head bg1">지급률</div>
|
|
<div class="bill-body tb-body"></div>
|
|
<div class="taxRate-head tb-head bg1">세율</div>
|
|
<div class="taxRate-body tb-body"></div>
|
|
<div class="cityCnt-head tb-head bg1">속령</div>
|
|
<div class="cityCnt-body tb-body"></div>
|
|
<div class="genCnt-head tb-head bg1">장수</div>
|
|
<div class="genCnt-body tb-body"></div>
|
|
<div class="power-head tb-head bg1">국력</div>
|
|
<div class="power-body tb-body"></div>
|
|
<div class="tech-head tb-head bg1">기술력</div>
|
|
<div class="tech-body tb-body"></div>
|
|
<div class="strategicCmd-head tb-head bg1">전략</div>
|
|
<div class="strategicCmd-body tb-body"></div>
|
|
<div class="diplomaticCmd-head tb-head bg1">외교</div>
|
|
<div class="diplomaticCmd-body tb-body"></div>
|
|
<div class="prohibitScout-head tb-head bg1">임관</div>
|
|
<div class="prohibitScout-body tb-body"></div>
|
|
<div class="prohibitWar-head tb-head bg1">전쟁</div>
|
|
<div class="prohibitWar-body tb-body"></div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.nation-card-basic{
|
|
width: 500px;
|
|
height: 193px;
|
|
display: grid;
|
|
grid-template-columns: 7fr 18fr 7fr 18fr;
|
|
grid-template-rows: repeat(10, calc(193px / 10));
|
|
|
|
border-bottom: solid 1px gray;
|
|
border-right: solid 1px gray;
|
|
|
|
.name{
|
|
grid-column: 1 / span 4;
|
|
}
|
|
|
|
.type-body{
|
|
grid-column: 2 / span 3;
|
|
}
|
|
}
|
|
|
|
.tb-title{
|
|
text-align: center;
|
|
padding: 0px;
|
|
line-height: calc(193px / 10);
|
|
|
|
border-left: solid 1px gray;
|
|
border-top: solid 1px gray;
|
|
}
|
|
.tb-head{
|
|
border-left: solid 1px gray;
|
|
border-top: solid 1px gray;
|
|
|
|
text-align: center;
|
|
padding: 0px;
|
|
line-height: calc(193px / 10);
|
|
}
|
|
|
|
.tb-body{
|
|
border-top: solid 1px gray;
|
|
padding: 0px;
|
|
line-height: calc(193px / 10);
|
|
}
|
|
</style> |