初始化
This commit is contained in:
484
src/assets/style/controlCabin.css
Normal file
484
src/assets/style/controlCabin.css
Normal file
@@ -0,0 +1,484 @@
|
||||
.control-cabin-left-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.title-bg {
|
||||
width: 450rem;
|
||||
height: 49rem;
|
||||
background: url('../controlCabinImages/title_bg.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 84rem;
|
||||
margin-bottom: 30rem;
|
||||
}
|
||||
.title-bg img {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
}
|
||||
.title-bg p {
|
||||
font-family: 'newFont';
|
||||
font-size: 24rem;
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.cabin-left-and-right {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
.left-wrap-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 民族 */
|
||||
.wrapper-item {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sub-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
position: relative;
|
||||
}
|
||||
.sub-title-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.sub-title-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #2F63EB;
|
||||
font-size: 12rem;
|
||||
}
|
||||
.more img {
|
||||
margin-left: 0rem;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.sub-title img {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin-top: -10rem;
|
||||
}
|
||||
.sub-title p {
|
||||
font-family: 'newFont';
|
||||
font-size: 16rem;
|
||||
color: #fff;
|
||||
}
|
||||
.echarts-wrap {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.echarts-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-wrap-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sub-special-title {
|
||||
display: flex;
|
||||
}
|
||||
/* 年龄分布 */
|
||||
.age-item {
|
||||
max-height: 136rem;
|
||||
min-height: 136rem;
|
||||
height: 136rem;
|
||||
}
|
||||
.sub-special-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100rem;
|
||||
height: 27rem;
|
||||
background: url('../controlCabinImages/title_left_bg.png');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.sub-special-left p {
|
||||
font-family: 'newFont';
|
||||
font-size: 16rem;
|
||||
color: #fff;
|
||||
padding: 0 4rem;
|
||||
}
|
||||
.sub-special-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 84rem;
|
||||
height: 27rem;
|
||||
background: url('../controlCabinImages/title_right_bg.png');
|
||||
background-size: 100% 100%;
|
||||
margin-left: -6rem;
|
||||
font-family: 'newFont';
|
||||
font-size: 16rem;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.age-item .echarts-wrap {
|
||||
padding: 16rem 16rem 0 16rem;
|
||||
}
|
||||
.age-item-bar {
|
||||
width: 100%;
|
||||
height: 18rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rem;
|
||||
}
|
||||
.bar-left {
|
||||
margin-right: 16rem;
|
||||
width: 64rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #C4C4C4;
|
||||
}
|
||||
.bar-right {
|
||||
flex: 1;
|
||||
height: 10rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #6A7EA1;
|
||||
display: flex;
|
||||
}
|
||||
.color-bar {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 60%;
|
||||
background: #3BA4DA;
|
||||
border-radius: 8px;
|
||||
}
|
||||
/* 政策奖励 */
|
||||
.zc-item {
|
||||
max-height: 206rem;
|
||||
min-height: 206rem;
|
||||
height: 206rem;
|
||||
margin-bottom: 16rem;
|
||||
}
|
||||
.ZCDataList-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.zc-item-card {
|
||||
width: 90rem;
|
||||
height: 90rem;
|
||||
background: url('../controlCabinImages/ZC_bg.png');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
display: flex;;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.key-value {
|
||||
font-family: 'newFont';
|
||||
color: #fff;
|
||||
font-size: 24rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.key-value span {
|
||||
color: #fff;
|
||||
font-size: 12rem;
|
||||
}
|
||||
.key-name {
|
||||
color: #C4C4C4;
|
||||
position: absolute;
|
||||
bottom: -4rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
/* 荣誉 */
|
||||
.honor-wrap {
|
||||
padding: 24rem 0;
|
||||
}
|
||||
.honor-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.honor-item-bar {
|
||||
width: 100%;
|
||||
height: 42rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rem;
|
||||
}
|
||||
.honor-left {
|
||||
width: 48rem;
|
||||
height: 100%;
|
||||
background: url('../controlCabinImages/honor_left_bg1.png');
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.honor-right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: url('../controlCabinImages/honor_right_bg.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: -8rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.honor-text-left {
|
||||
padding-left: 20rem;
|
||||
font-size: 12rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.honor-text-right {
|
||||
font-family: 'newFont';
|
||||
color: #fff;
|
||||
font-size: 24rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-left: 22rem;
|
||||
}
|
||||
.honor-text-right span {
|
||||
color: #fff;
|
||||
font-size: 12rem;
|
||||
}
|
||||
/* center 上部 */
|
||||
.centertop-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding-top: 32rem;
|
||||
display: flex;
|
||||
padding-left: 54rem;
|
||||
}
|
||||
.center-top-left {
|
||||
width: 320rem;
|
||||
height: 84rem;
|
||||
background: url('../controlCabinImages/center_top_left.png');
|
||||
background-size: 100% 100%;
|
||||
padding-left: 88rem;
|
||||
}
|
||||
.top-left-data {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12rem 0;
|
||||
}
|
||||
.total-num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
color: #fff;
|
||||
}
|
||||
.total-num span {
|
||||
font-size: 20rem;
|
||||
color: #fff;
|
||||
font-family: 'newFont';
|
||||
}
|
||||
.top-left-sex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0rem;
|
||||
}
|
||||
.sex-item {
|
||||
flex: 1;
|
||||
}
|
||||
.top-left-data .sex-item .sex-num {
|
||||
font-size: 20rem;
|
||||
color: #fff;
|
||||
font-family: 'newFont';
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.top-left-data .sex-item .sex-num span, .sex-name {
|
||||
font-size: 12rem;
|
||||
color: #fff;
|
||||
}
|
||||
.sex-rate {
|
||||
margin-left: 4rem;
|
||||
}
|
||||
.center-top-right {
|
||||
flex: 1;
|
||||
margin-left: 32rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 90px;
|
||||
}
|
||||
.right-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 90rem;
|
||||
}
|
||||
.right-item .item-bg {
|
||||
width: 100%;
|
||||
height: 62rem;
|
||||
background: url('../controlCabinImages/center_top_right.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.item-top-name {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
color: #fff;
|
||||
}
|
||||
.new-family {
|
||||
font-size: 20rem;
|
||||
color: #fff;
|
||||
font-family: 'newFont';
|
||||
}
|
||||
.item-bottom-name {
|
||||
color: #C4C4C4;
|
||||
font-size: 14rem;
|
||||
text-align: center;
|
||||
}
|
||||
/* 地图 */
|
||||
.mapContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.map-content {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.leng-wrap {
|
||||
position: absolute;
|
||||
right: 20rem;
|
||||
width: 110rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.leng-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12rem;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
.leng-item:nth-child(2) .leng-item-bg,.leng-item:nth-child(7) .leng-item-bg {
|
||||
min-width: 40rem;
|
||||
width: 40rem;
|
||||
max-width: 40rem;
|
||||
}
|
||||
.leng-item-name {
|
||||
white-space: nowrap;
|
||||
min-width: 90rem;
|
||||
max-width: 90rem;
|
||||
width: 90rem;
|
||||
text-align: right;
|
||||
}
|
||||
.leng-item-bg {
|
||||
height: 10rem;
|
||||
min-width: 48rem;
|
||||
width: 48rem;
|
||||
max-width: 48rem;
|
||||
background: #404BFF;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
/* */
|
||||
.center-top-wrapper {
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 发展方向 */
|
||||
.body-right-dir-wrap {
|
||||
height: 254rem;
|
||||
max-height: 254rem;
|
||||
min-height: 254rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.center-bottom-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.title-flex-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.title-right-backbg {
|
||||
background: url('../controlCabinImages/title_right_backbg.png');
|
||||
background-size: 100% 100%;
|
||||
justify-content: flex-end;
|
||||
padding-right: 68rem;
|
||||
margin-bottom: 10rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.title-backbg-text {
|
||||
margin-right: 16rem;
|
||||
}
|
||||
.right-center-wrapper {
|
||||
width: 100%;
|
||||
height: 260rem;
|
||||
max-height: 260rem;
|
||||
min-height: 260rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 16rem;
|
||||
}
|
||||
.right-bottom-wrapper {
|
||||
display: flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
margin-top: 12rem;
|
||||
}
|
||||
.right-bottom-top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.bottom-top-item {
|
||||
height: 22rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8rem;
|
||||
border-radius: 5px;
|
||||
background: #0E42A1;
|
||||
color: #FFFFFF;
|
||||
font-size:12rem;
|
||||
margin-right: 30rem;
|
||||
}
|
||||
.bottom-top-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.bottom-top-item img {
|
||||
width: 16rem;
|
||||
height: 16rem;
|
||||
}
|
||||
.die-height {
|
||||
height: 180rem;
|
||||
max-height: 180rem;
|
||||
min-height: 180rem;
|
||||
flex: 1.2;
|
||||
}
|
||||
.title-bg {
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
37
src/assets/style/reset.css
Normal file
37
src/assets/style/reset.css
Normal file
@@ -0,0 +1,37 @@
|
||||
CSS Document
|
||||
* { box-sizing: border-box; }
|
||||
/* body { font:12px/1.5 "微软雅黑",Arial,Tahoma, Helvetica,\5b8b\4f53, sans-serif; } */
|
||||
body{overflow: auto;}
|
||||
html,body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,object,code,em,span,var,legend,button,input,textarea,th,td,a,img,header,footer,nav,aside,audio,datalist,section { margin:0;padding:0;border:0;outline:0;box-sizing: border-box;font-family: Source Han Sans; font-size: 12rem; }/*清除内外边距*/
|
||||
:focus { outline:0; }
|
||||
ul,ol,ul li,ol li { list-style: none; }/*重置列表*/
|
||||
address,caption,cite,em,code,dfn,th,var { font-style:normal;font-weight:normal; }
|
||||
form label { cursor:pointer; }
|
||||
input,button,select,textarea { font-family:inherit;font-size:100%;outline:none; }
|
||||
textarea { resize:none }
|
||||
input { vertical-align:middle; }
|
||||
img { border:0; }/*重置图片元素*/
|
||||
table { border-collapse:collapse;border-spacing: 0; }/*重置表格*/
|
||||
button,input[type="reset"],input[type="button"],input[type="submit"] { line-height:normal !important; }
|
||||
a { text-decoration:none;}
|
||||
a:hover { text-decoration:underline; };
|
||||
/* 通用的class */
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.no-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
padding: 56px 0 0 0;
|
||||
color: #ccc;
|
||||
}
|
||||
Reference in New Issue
Block a user