fxc-wecat/pages/index/index.wxss

/**index.wxss**/
.sj_tit{ padding: 20rpx 20rpx; font-size: 30rpx; line-height: 42rpx; color: #333333; display: flex; justify-content: space-between; align-items: center;}
.sj_tit view{ font-size: 24rpx; color: #999999;}
.sj_zttj1{ padding:10rpx 20rpx 20rpx 20rpx; display: flex; justify-content: space-between;}
.sj_zttj1_item{ width: 224rpx; height: 142rpx; display: flex; justify-content: center; align-items: center; flex-direction: column; flex: none; background: #FDFDFD; border-radius: 12rpx; }
.sj_zttj1_num{ font-size: 30rpx; color: #2751DD; line-height: 42rpx;}
.sj_zttj1_lb{ font-size: 20rpx; color: #333333; line-height: 28rpx; padding-top: 12rpx;}
.sj_zttj2{ padding:0rpx 20rpx; display: flex; justify-content: space-between;}
.sj_zttj2_item{ width: 344rpx; height: 142rpx; box-sizing: border-box; padding-left: 30rpx; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; flex: none; background: #FDFDFD; border-radius: 12rpx;background-size: 100%; }
/* .sj_zttj2_item:nth-child(1){ background: linear-gradient(226deg, #FCFCFF 0%, #EDF1FF 100%);} */
.sj_zttj2_item:nth-child(1){ background:url(https://oss.zhongyihz.cn/group156/default/20220816/16/12/6/b97f5d9ca0a5de97a83e7145bba9226b.png); background-size: 100% 100%;}
.sj_zttj2_item:nth-child(2){ background:url(https://oss.zhongyihz.cn/group156/default/20220816/16/27/6/a31243e56febda4c322cd53aa38d079f.png); background-size: 100% 100%;}
/* .sj_zttj2_item:nth-child(2){ background: linear-gradient(45deg, #FCEFE3 0%, #FFFAF5 100%);} */
.sj_zttj2_num{ font-size: 30rpx; color: #333333; line-height: 42rpx;}
.sj_zttj2_lb{ font-size: 20rpx; color: #333333; line-height: 28rpx; padding-top: 12rpx;}

.sj_yj1{ height: 148rpx; background: #ffffff; box-sizing: border-box; padding: 75rpx 132rpx 0 132rpx; display: flex; justify-content: space-between; align-items: center; }
.sj_yj1>view{ width: 120rpx; height: 50rpx; line-height: 50rpx; border-radius: 52rpx; border: 1px solid #C0C0C0; text-align: center; font-size: 24rpx; color: #333333;}
.sj_yj1>view.sec{ color: #2C59E6; border: 1px solid #2C59E6; background: rgba(44, 89, 230, 0.1100);}
.sj_yj2{height:355rpx;width: 100%;background-color: #fff;padding: 32rpx 30rpx; box-sizing: border-box;}

.sj_cys{ background: #ffffff; padding: 40rpx 20rpx; display: flex; justify-content: space-between; align-items: center;}
.sj_cys_item{ flex: none; width: 50%;}
.sj_cys_tit{ font-size: 24rpx; color: #999999;text-align: center;}
.sj_cys_chart{ width: 238rpx; height: 238rpx; margin: auto;}
.sj_cys_val{ font-size: 24rpx; color: #999999;text-align: center;}

.sj_yc{background: #ffffff; padding: 20rpx 20rpx;}
.sj_yc_item>view{ display: flex; justify-content: space-between; align-items: stretch;}
.sj_yc_item>view>view{ width: 100%; padding: 10rpx;}
.sj_yc_tr1,.sj_yc_tr3{ background: #F8F8F8; font-size: 24rpx; color: #333333;}
.sj_yc_tr2,.sj_yc_tr4{ font-size: 18rpx; color: #333333; padding: 10rpx 0;border-top: 1rpx solid #F8F8F8;}
.sj_yc_tr1>view:nth-child(1),
.sj_yc_tr2>view:nth-child(1),
.sj_yc_tr3>view:nth-child(1),
.sj_yc_tr4>view:nth-child(1){text-align: left;}
.sj_yc_tr1>view:nth-child(2),
.sj_yc_tr2>view:nth-child(2){text-align: center;overflow: hidden;
  text-overflow: ellipsis;white-space: nowrap;}
.sj_yc_tr3>view:nth-child(2),
.sj_yc_tr4>view:nth-child(2){text-align: right;overflow: hidden;
  text-overflow: ellipsis;white-space: nowrap;}
.sj_yc_tr1>view:nth-child(3),
.sj_yc_tr2>view:nth-child(3){text-align: right;overflow: hidden;
  text-overflow: ellipsis;white-space: nowrap;}
.sj_cydd{ height: 398rpx; background: #ffffff;}
.sj_csfb{ height: 584rpx; background: #ffffff;}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background: #fff;
}

.home_top_map {
  width: 100%;
  /* padding: 5rpx 12rpx; */
  display: flex;
}

.map_data {
  /* margin-left: 1%; */
  margin-top: 10rpx;
  width:100%;
  display: flex; justify-content: space-between; align-items: stretch;
}

.map {
  /* margin-right: 1%; */
  border-radius: 5%;
  width:100%;
  height: 900rpx;
}

.home_map {
  width: 100%;
  height: 100%;
}

.cover-view {
  position: absolute;
  bottom: 0rpx;
  left: 0rpx;
  z-index: 1;
}

.cover-image {
  width: 60%;
  height: 60%;
}

.map_data_top {
  height:220rpx;
  width: 49%;
  background: #fff;
  border-radius: 15rpx;
  margin-bottom: 4%;
  border: 1rpx solid #eee;
  color: #999;
  box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
}

.map_data_bottom {
  background: #fff;
  height:220rpx;
  width: 49.5%;
  border-radius: 15rpx;
  box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.07);
  /* margin-top: 2%; */
  border: 1rpx solid #eee;
}

.map_data_top>view {
  height: 20%;
  text-align: center;
  font-size: 19rpx;
  display: flex;
  align-items: center;
}

.map_data_top>view>text {
  white-space: nowrap;
  margin: 0 15rpx 0 15rpx;
}
.map_data_top>view>view {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dataObj {
  width: 100%;
  /* height: 210rpx; */
  background-color: #f8f8f8;
  padding: 19rpx 30rpx;
  box-sizing: border-box;
}

.backData {
  margin-top: 15rpx;
  display: flex;
  justify-content: space-between;
}

.backA {
  width: 158rpx;
  height: 126rpx;
  position: relative;
  text-align: center;
  background-repeat: no-repeat;
}

.backA>view {
  font-size: 18rpx;
  color: #fff;
  position: absolute;
  top: 10rpx;
  left: 16rpx;
}

.backA>text {
  font-size: 39rpx;
  color: #fff;
  width: 100%;
  display: flex;
  /* line-height: 64px; */
  position: absolute;
  top: 44rpx;
  left: 0;
  text-align: center;
  justify-content: center;
}

.backA image {
  width: 100%;
  height: 100%;
}
.temperature{
  /* margin-bottom: 19rpx; */
}
.temperature>text {
  padding: 0 30rpx 15rpx 30rpx;
  display: block;
}

.temperatureData {
  display: flex;
  justify-content: space-between;
  padding: 57rpx 0 62.5rpx 0;
  border-bottom: 5rpx solid #f8f8f8;
  background-color: #fff;
}

.temperatureData>view {
  width: 33%;
}

.temperatureData>view>text {
  display: block;
  font-size: 42rpx;
  font-style: italic;
  color: #295AFD;
  text-align: center;
  font-weight: 700;
}

.temperatureData>view>view {
  color: #999;
  font-size: 21.5rpx;
  text-align: center;
}

.temperatureDataBorder {
  border-left: 1rpx solid #E3E7ED;
  border-right: 1rpx solid #E3E7ED;
}

.waringTop {
  display: flex;
  justify-content: space-between;
  padding: 15rpx 0;
}

.legend {
  display: flex;
  align-items: center;
}

.legend>view {
  display: flex;
  align-items: center;
}

.legend>view>view {
  width: 20rpx;
  height: 20rpx;
}

.legend>view>text {
  font-size: 25rpx;
  color: #999999;
  margin: 0 15rpx;
}

.waringStatu {
  margin-top: 19rpx;
  background-color: #fff;
}

.waringStatu>view {
  padding: 15rpx 30rpx;
  border-bottom: 5rpx solid #f8f8f8;
}

.round {
  padding: 15rpx 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.round > view{
  width: 25%;
}
.round .border{
  /* border: 2rpx solid #DCD7FC;
  padding: 18rpx; */
  border-radius: 50%;
  width: 120rpx;
  height: 120rpx;
}
.round .canvas_radius{
  border: 2rpx solid #DCD7FC;
  padding: 10rpx;
  border-radius: 50%;
  background: #FFF;
  width: 140rpx;
  height: 140rpx;
  margin-left: 15rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.round .roundName{
  text-align: center;
  color: #999999;
  padding-top: 16rpx;
  padding-bottom: 36rpx;
}
.roundText {
  display: flex;
  justify-content: space-around;
}

.roundLine {
  width: 5px;
  display: flex;
  align-items: center;
  text-align: center;
}

.roundLine view {
  width: 2.5rpx;
  height: 50%;
  background: #E3E7ED;
}

/* .round >view{
  width: 200rpx;
  height: 200rpx;
  border: 2.5rpx solid #DCD7FC;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
} */
.transportationStatu {
  display: flex;
  justify-content: space-between;
  padding: 18rpx 30rpx;
  /* background: #FFF; */
}

.transportationStatu>view {
  color: #999999;
  font-size: 24rpx;
}

.barChart,
.pieDom,.labelNum {
  height: 500rpx;
  width: 100%;
  background-color: #fff;
  padding: 32rpx 30rpx;
  box-sizing: border-box;
}

.textFoot {
  padding: 15rpx 30rpx;
}

.textFoot>.textActive {
  color: #333333;
  font-size: 24rpx;
  padding: 15rpx 0 30rpx 0;
  /* text-indent:48rpx; */
}

.textFoot>.active {
  display: flex;
}

.textFoot>.active>view>image {
  width: 180rpx;
  height: 140rpx;
  padding-left: 38rpx;
}

.text {
  color: #999999;
  font-size: 16rpx;
  display: block;
  /* text-indent:32rpx; */
}

.botActive {
  color: #999999;
  font-size: 22rpx;
  padding: 65rpx 0;
  text-align: center;
}

.dingwei {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 10rpx;
  right: 10rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50rpx;
  background: #ffffff;
}

.dingwei_img {
  width: 30rpx;
  height: 30rpx;
}

.no_data {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  border-radius: 16rpx;
}

.no_data cover-image {
  width: 442rpx;
  height: 194rpx;
  flex: none;
}

.no_data image {
  width: 50%;
  height: 50%;
  flex: none;
}

.no_data_txt {
  font-size: 22rpx;
  line-height: 36rpx;
  flex: none;
  padding-top: 10rpx;
  color: #999999;
}

.homeTop {
  position: relative;
  height: 1000rpx;
  overflow: hidden;
  background: url(http://oss.zhongyihz.cn/group156/images/161158d59a4c2d37364430d360ec4c2a.png) top center no-repeat fixed;
  background-size: 750rpx 1344rpx;
}

.idx_banner {
  height: 1344rpx;
  width: 750rpx;
}

.homeTop .mask {
  height: 240rpx;
  width: 100%;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 15% -20% 0 0;
}

.homeTop .mask>.temo {
  width: 100%;
  height: 60rpx;
  background: red;
  border-radius: 50% 50% 0 0;
  opacity: .1;
  position: absolute;
  top: -60rpx;
  transform: rotate(180deg);
  z-index: 100;
}

.newsList {
  background: #fff;
  padding: 15rpx 30rpx 0 30rpx;
}

.newsList>view {
  display: flex;
  padding: 15rpx 0;
  border-bottom: 2.5rpx solid #f8f8f8;
}

.newsList>view>.newsListInfo {
  width: 68%;
  margin-right: 2%;
}

.newsList>view>.newsListInfo>text {
  color: #222222;
  padding-bottom: 32rpx;
  display: block;
}

.newsList>view>.newsListInfo>view {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.newsList>view>.newsListInfo>view>text {
  font-size: 22rpx;
  color: #999999;
}

.newsList>view>.newsListImg {
  width: 30%;
}

.newsList>view>.newsListImg image {
  height: 100%;
  border-radius: 10rpx;
}

.cu-custom {
  background: transparent;
}

.idx_nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 174rpx;
  box-sizing: border-box;
  z-index: 1;
  padding: 0 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.idx_nav_bg {
  width: 750rpx;
  height: 174rpx;
  position: absolute;
  top: 0;
  left: 0;
}

.idx_nav_item {
  text-align: center;
  font-size: 24rpx;
  color: #333333;
  position: relative;
  z-index: 1;
}

.idx_nav_item image {
  width: 100rpx;
  height: 100rpx;
  margin: auto;
  display: block;
}

.idx_tit {
  /* position: relative; */
  color: #ffffff;
  font-size: 30rpx;
  position: fixed;
  width: 100%;
  z-index: 99;
  /* line-height: 50rpx; */
  text-align: center;
  /* padding: 80rpx 0 0 0; */
}
.idx_active{
  background-color: var(--color);
}
.idx_tit .statusBar{
  position: absolute;
  width: calc(100% - 440rpx);
  margin: auto;
  margin: auto;
  height: 60rpx;
  font-size: 32rpx;
  line-height: 60rpx;
  left: 0;
  right: 0;
  bottom: 0;
}
.idx_tit .msgBar{
  position: absolute;
  height: 60rpx;
  font-size: 32rpx;
  line-height: 60rpx;
  left: 20rpx;
  bottom: 0;
}
.idx_tit .msgBar cover-image{
  width: 45rpx;
  height: 45rpx;
}
.no_data {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 50rpx 0 !important;
  text-align: center;
  background: #ffffff;
  border-radius: 16rpx;
}

.no_data cover-image {
  width: 442rpx;
  height: 194rpx;
  flex: none;
}

.no_data image {
  /* width: 442rpx; */
  height: 84rpx;
  flex: none;
}

.no_data_txt {
  font-size: 26rpx;
  line-height: 36rpx;
  flex: none;
  padding-top: 10rpx;
  color: #999999;
}
.labelNum_label{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.labelNum_label >text{
  color: #999999;
  font-size: 24rpx;
}
.labelNum_label > view{
  color: #E87E04;
  background: rgba(232, 126, 4, 0.16);
  padding: 10rpx 32rpx;
  border-radius: 32rpx;
}


/* 新增 */
.idx_menu{
  position: relative;
  width: 100%;
  height: 174rpx;
}
.idx_menu .idx_nav{
  padding: 0 20rpx;
}

.cardTitle1{color: #fff;display: flex;align-items: center;position: relative;width: 110rpx;height: 180rpx;margin-left: 20rpx;}
.cardTitle1>view{ position: absolute;  transform-origin: 160rpx 55rpx; transition: all 0.6s linear 0s; cursor: pointer; overflow: hidden;}
.cardTitle1>view:nth-child(1){ background: rgb(10,92,170);padding-left: 15rpx;}
.cardTitle1>view:nth-child(2){ background: red;}
.cardTitle1>view:nth-child(3){ background: rgb(114,205,255);padding-left: 15rpx;}
.cardBtn0{
  top: 0;
  left: 0;
  z-index: 0;
  width: 170rpx;
  height: 170rpx;
  line-height: 170rpx;
  border-radius: 30rpx 30rpx 30rpx 0;
}
.cardBtn1{
  top: 15rpx;
  left: 70rpx;
  z-index: 1;
  width: 140rpx;
  height: 140rpx;
  line-height: 140rpx;
  border-radius: 25rpx 25rpx 25rpx 0;
}
.cardBtn2{ 
  top: 24rpx;
  left: 149rpx;
  z-index: 2;
  width: 120rpx;
  height: 120rpx;
  line-height: 120rpx;
  border-radius: 25rpx 25rpx 25rpx 0;
  text-align: center;
}
.productDetail{
  margin-top: 20rpx;
}
.projectText{
  font-size: 24rpx;
  padding: 0 20rpx;
  color: #333;
  margin-left: 260rpx;
}
.product_All_Flex{
  display: flex;
  justify-content: space-between;
}
.product_All .card_right,.product_All .card_left{
  background: #FFF;
  width: 48.5%;
  height: 500rpx;
}
.card_text{
  font-size: 30rpx;
  height: 20%;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card_but{
  height: 530rpx;
  width: 100%;
}
.card_right_top{
  height: 150rpx;
  width: 100%;
}
.card_right_but{
  height: 530rpx;
  width: 100%;
}
.card_left_pie{
  height: 500rpx;
  width: 20%;
}
.card_right_pie{
  width: 80%;
  height: 500rpx;
  padding-top: 87rpx;
}
.card_right_pie_index{
  width: 100%;
  height: 120rpx;
}
.card_seven_right_pie{
  height: 80%;
  width: 100%;
}

.product_All{
  width: 100%;
  background: #FFF;
  margin-top: 20rpx;
}
.product_name{
  display: flex;
  justify-content: space-between;
  padding: 35rpx 20rpx;
  align-content: center;
}
.product_name .card_tab{
  border-radius: 20rpx;
  color: #2D59E6;
  padding:0 16rpx;
  font-size: 26rpx;
  border: 2rpx solid #2d59e6;
}
.product_content{
  display: flex;
  justify-content: space-between;
}
.product_name .card_unit{
  color: #666666;
}
.card_product_one{
  height: 300rpx;
  width:33%;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
}
.card_pie{
  display: flex;
  justify-content: space-between;
}
.card_product_pie{
  height: 50%;
}
.card_pie_name {
  display: flex;
  justify-content: space-between;
  height: 50rpx;
  line-height: 50rpx;
}
.card_pie_name > view{
  width: 33%;
  text-align: center;
  color: #666;
  font-size: 18rpx;
}
.card_pie_lenged{
  display: flex;
  justify-content: center;
}
.card_pie_lenged > view{
  display: flex;
  align-items: center;
}
.card_pie_lenged > view > view{
  width: 15rpx;
  height: 15rpx;
  border-radius: 50%;
}
.card_pie_lenged > view > text{
  font-size: 22rpx;
  color: #666;
  padding-left: 12rpx;
}