epdc-resident-mp-js/pages/mine/mine.wxss

page {
  width: 100%;
  height: 100vh;
  background: #f7f7f7;
}
.mine {
  width: 100%;
  height: 100%;
  background: #f7f7f7;
}
.mine .personal-info {
  width: 100%;
  height: 310rpx;
  box-sizing: border-box;
  padding: 30rpx;
  background: #fff;
}
.mine .personal-info .box {
  width: 100%;
  height: 100%;
  position: relative;
}
.mine .personal-info .box .bg-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mine .personal-info .box .content {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;
  overflow: hidden;
}
.personal-info .box .content .bottom {
  margin-top: 50rpx !important;
  box-sizing: border-box;
  padding-left: 30rpx;
  width: 100%;
  height: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.personal-info .box .content .bottom text{
  color: #fff;
  font-size: 30rpx;
  line-height: 30rpx;
}
.personal-info .box .content .top {
  margin-top: 30rpx;
  box-sizing: border-box;
  padding-left: 30rpx;
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.personal-info .box .content .top .left {
  height: 100%;
  display: flex;
  align-items: center;
  width: calc(100% - 130rpx);
}
.personal-info .box .content .top .avatar {
  width: 100rpx;
  height: 100rpx;
  position: relative;
}
.personal-info .box .content .top .avatar .avatar-content {
  width: 100%;
  height: 100%;
  object-fit:cover;
  border-radius: 50%;
}
.personal-info .box .content .top .right {
  height: 100%;
  width: calc(100% - 100rpx);
  margin-left: 14rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.personal-info .box .content .top .right .nickname {
  font-size: 30rpx;
  color: #fff;
}
.personal-info .box .content .top .right .party-flag {
  width: 72rpx;
  height: 24rpx;
  background: #FFE25E;
  border-radius:12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10rpx;
}
.personal-info .box .content .top .right .party-flag view {
  color: #FD1D11;
  font-size: 18rpx;
  margin-right: 4rpx;
  height: 24rpx;
  line-height: 24rpx;
}
.personal-info .box .content .top .right .party-flag image {
  width: 18rpx;
  height: 18rpx;
  object-fit: cover;
}
.personal-info .box .content .top .complete-info {
  width: 190rpx;
  height: 46rpx;
  position: relative;
}
.personal-info .box .content .top .complete-info .complete-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.personal-info .box .content .top .complete-info .complete-content {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.personal-info .box .content .top .complete-info .complete-content .tip {
  font-size: 22rpx;
  color: #fff;
  height: 46rpx;
  line-height: 46rpx;
}
.personal-info .box .content .top .complete-info .complete-content .rightsword {
  width: 14rpx;
  height: 18rpx;
  object-fit: cover;
  margin-left: 9rpx;
}
.personal-info .box .content .bottom {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.personal-info .box .content .bottom .operation {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5rpx;
}
.personal-info .box .content .bottom .operation + .operation {
  border-left: 1rpx solid rgba(255,255,255,0.55);
}
.personal-info .box .content .bottom .operation image {
  width: 32rpx;
  height: 32rpx;
  object-fit: cover;
}
.personal-info .box .content .bottom .operation .tip {
  font-size: 22rpx;
  margin-top: 10rpx;
  color: rgba(255,255,255,0.55);
}

.tab-bar {
  width: 100%;
  height: 90rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}
.tab-bar .type {
  font-size: 30rpx;
  color: #999;
  flex: 1;
  text-align: center;
  height: 90rpx;
  line-height: 90rpx;
}
.tab-bar .hover-tabbar {
  background: #f3f3f3;
}
.tab-bar .type.selected-issue {
  color: #F82525;
  font-weight: bolder;
}
.tab-bar .type.selected-project {
  color: #F82525;
  font-weight: bolder;
}
.tab-bar .type.selected-topic {
  color: #F82525;
  font-weight: bolder;
}
.tab-bar .select-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80rpx;
  height: 6rpx;
  background: #f95454;
  border-radius: 4rpx;
  transition: left 0.5s ease;
}
.tab-bar .select-bar.selected-issue {
  left: 11%;
  transition: left 0.5s ease;
}
.tab-bar .select-bar.selected-project {
  left: 44.5%;
  transition: left 0.5s ease;
}
.tab-bar .select-bar.selected-topic {
  left: 78%;
  transition: left 0.5s ease;
}

.issue-list {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
}
.issue-list .issue-nodata {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 70rpx;
}
.issue-list .issue-nodata .no-data {
  width: 258rpx;
  height: 244rpx;
  object-fit: cover;
}
.issue-list .issue-nodata .tip {
  font-size: 28rpx;
  color: #bcbcbc;
  line-height: 40rpx;
  height: 40rpx;
}
.issue-list .issue-nodata .add-issue {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 30rpx;
}
.issue-list .issue-nodata .add-issue .issue-trigger {
  width: 100rpx;
  height: 66rpx;
  object-fit: cover;
  margin-right:20rpx;
  position: absolute;
  left: -120rpx;
  bottom: 10rpx;
}
.issue-list .issue-nodata .add-issue button {
  width: 140rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 6rpx;
  text-align:center;
  padding: 0;
  outline: none;
  border: 0;
  color: #fff;
  font-size: 22rpx;
  background: linear-gradient(to right, #f51111, #ff4b4b);
}
.issue-list .issue-nodata .add-issue button::after {
  border: 0;
}
.issue-list .issue-nodata .add-issue .hover-add-issue {
  background: red;
}

.project-list {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
}
.project-list .project-nodata {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 70rpx;
}
.project-list .project-nodata .no-data {
  width: 260rpx;
  height: 246rpx;
  object-fit: cover;
}
.project-list .project-nodata .tip {
  font-size: 28rpx;
  color: #bcbcbc;
  line-height: 40rpx;
  height: 40rpx;
}
.project-list .project-nodata .add-issue {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 30rpx;
}
.project-list .project-nodata .add-issue .issue-trigger {
  width: 100rpx;
  height: 66rpx;
  object-fit: cover;
  margin-right:20rpx;
  position: absolute;
  left: -120rpx;
  bottom: 10rpx;
}
.project-list .project-nodata .add-issue button {
  width: 140rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 6rpx;
  text-align:center;
  padding: 0;
  outline: none;
  border: 0;
  color: #fff;
  font-size: 22rpx;
  background: linear-gradient(to right, #f51111, #ff4b4b);
}
.project-list .project-nodata .add-issue button::after {
  border: 0;
}
.project-list .project-nodata .add-issue .hover-add-issue {
  background: red;
}

.topic-list {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
}
.topic-list .topic-nodata {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 70rpx;
}
.topic-list .topic-nodata .no-data {
  width: 258rpx;
  height: 244rpx;
  object-fit: cover;
}
.topic-list .topic-nodata .tip {
  font-size: 28rpx;
  color: #bcbcbc;
  line-height: 40rpx;
  height: 40rpx;
}

.nomore-tip {
  width: 100%;
  height: 100rpx;
  background: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 26rpx;
}