TaxWeChatApp/miniprogram/pages/index/index.wxss

/**index.wxss**/
.iconPanel {
  display: flex;
  padding: 40rpx 0;
  background: #007dff;
}

.iconPanel .item {
  flex: 1;
  width: 0;
}

.iconPanel .item .iconfont {
  display: block;
  margin: 0 auto;
  width: 64rpx;
  height: 64rpx;
  font-size: 64rpx;
  color: #fff;
}

.iconPanel .item .text {
  display: block;
  margin-top: 34rpx;
  height: 30rpx;
  line-height: 30rpx;
  font-size: 30rpx;
  color: #fefefe;
  text-align: center;
}

.topWrapper {
  padding: 0 24rpx;
  background: #fff;
  box-shadow: 0 0 10rpx rgba(215, 217, 227, .35);
}

.companySwitch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 0;
  font-size: 30rpx;
}

.companySwitch .name {
  flex: 1;
  width: 0;
  font-weight: 450;
}

.companySwitch .switch {
  display: flex;
  align-items: center;
}

.companySwitch .switch .text {
  height: 30rpx;
  line-height: 30rpx;
  color: #b3b6c3;
}

.companySwitch .switch .iconfont {
  margin-bottom: 4rpx;
  margin-left: 18rpx;
  height: 32rpx;
  line-height: 32rpx;
  font-size: 32rpx;
  color: #007dff;
}

.swiper {
  width: 100%;
  height: 330rpx;
}

.swiper .pic {
  width: 100%;
  height: 330rpx;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx rgba(0, 125, 255, .3);
}

.iconList {
  padding: 23rpx 0;
  overflow: hidden;
}

.iconList .item {
  padding: 17rpx 0;
  float: left;
  width: 25%;
  text-align: center;
}

.iconList .item .icon {
  display: block;
  margin: 0 auto;
  width: 70rpx;
  height: 70rpx;
}

.iconList .item .text {
  margin-top: 16rpx;
  display: block;
  height: 26rpx;
  line-height: 26rpx;
  font-weight: 400;
}

.bottomWrapper {
  padding: 24rpx 24rpx 60rpx;
}

.notice {
  display: flex;
  align-items: center;
  height: 70rpx;
  background: #fff;
  border-radius: 35rpx;
  box-shadow: 0 0 10rpx rgba(215, 217, 227, .35);
}

.notice .label {
  padding-left: 24rpx;
  display: flex;
  align-items: center;
}

.notice .label .text {
  display: block;
  height: 70rpx;
  line-height: 70rpx;
  color: #383838;
}

.notice .label .icon {
  margin-left: 4rpx;
  width: 57rpx;
  height: 28rpx;
}

.notice .content {
  padding: 0 36rpx 0 16rpx;
  flex: 1;
  width: 0;
  height: 70rpx;
  overflow: hidden;
}

.notice .content .text {
  display: block;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice .detail {
  position: relative;
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 24rpx;
  font-size: 24rpx;
  color: #fc5260;
}

.notice .detail:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background: #d2d2d2;
  height: 30rpx;
  width: 2rpx;
}

.lineGroup {
  margin-top: 24rpx;
  display: flex;
  align-items: center;
  border-radius: 16rpx;
  background: #fff;
  box-shadow: 0 0 10rpx rgba(215, 217, 227, .35);
}

.lineGroup .item {
  position: relative;
  flex: 1;
  width: 0;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lineGroup .item+.item:before {
  content: "";
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background: #dbdce2;
  height: 48rpx;
  width: 2rpx;
}

.lineGroup .item .label {
  display: block;
  height: 88rpx;
  line-height: 88rpx;
  color: #b3b6c3;
}

.lineGroup .item .content {
  display: flex;
  align-items: center;
}

.lineGroup .item .content .text {
  display: block;
  height: 88rpx;
  line-height: 88rpx;
}

.blue {
  color: #007bff;
}

.green {
  color: #3ccbc7;
}

.warning {
  color: #ff8c42;
}

.danger {
  color: #fd2d61;
}

.lineGroup .item .content .iconfont {
  margin-left: 30rpx;
  width: 36rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 36rpx;
  color: #007dff;
}

.lineGroup .item .content .icon-fail {
  color: #d81e06;
}

.totalHead {
  padding: 40rpx 0;
  line-height: 30rpx;
  font-size: 30rpx;
  font-weight: 450;
}

.lineGroup2 {
  display: flex;
  align-items: center;
  border-radius: 16rpx;
  background: #fff;
  box-shadow: 0 0 10rpx rgba(215, 217, 227, .35);
}

.lineGroup2+.lineGroup2 {
  margin-top: 24rpx;
}

.lineGroup2 .item {
  position: relative;
  padding: 40rpx 0;
  flex: 1;
  width: 0;
  text-align: center;
}

.lineGroup2 .item+.item:before {
  content: "";
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background: #dbdce2;
  height: 88rpx;
  width: 2rpx;
}

.lineGroup2 .item .content {
  display: block;
  height: 48rpx;
  line-height: 48rpx;
  font-size: 48rpx;
  font-weight: 450;
  color: #383838;
}

.lineGroup2 .item .content .unit{
  font-size:26rpx;
}

.lineGroup2 .item .label {
  margin-top: 26rpx;
  display: block;
  height: 26rpx;
  line-height: 26rpx;
  color: #b3b6c3;
}

.tabWrapper {
  margin-top: 24rpx;
  padding: 30rpx 30rpx 40rpx;
  border-radius: 16rpx;
  background: #fff;
  box-shadow: 0 0 10rpx rgba(215, 217, 227, .35);
}

.tabBar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 48rpx;
}

.tabBar .item {
  width: 126rpx;
  height: 46rpx;
  line-height: 46rpx;
  text-align: center;
  color: #007dff;
  background: #fff;
  transition: all .3s ease;
  border: solid #eee 1rpx;
  box-sizing: content-box;
}

.tabBar .item+.item {
  border-left: none;
}

.tabBar .item.active {
  color: #b3b6c3;
  background: #f8f9fb;
}

.tabWrapper .lineItem {
  display: flex;
  align-items: center;
  height: 30rpx;
  font-size: 30rpx;
}

.tabWrapper .lineItem+.lineItem {
  margin-top: 40rpx;
}

.tabWrapper .lineItem .label {
  padding-left: 78rpx;
  flex: 1;
  width: 0;
  color: #767b89;
}

.tabWrapper .lineItem .content {
  padding-left: 78rpx;
  flex: 1;
  width: 0;
  text-align: left;
  font-weight: 450;
}