开泵流程相关界面优化

zuoxiao

2024-05-30 910c37c43eceb27888b90631c868caa08f7eafcc

 pages/home/home.wxss

@@ -11,19 +11,20 @@

.head-wrapper {
  background-color: #1890FF;
  height: 30vh;
  height: 25vh;
  width: 100%;
  padding-left: 40rpx;
  display: grid;
  flex-direction: column;
  align-items: center;

  border-bottom-left-radius: 5rpx;
  border-bottom-right-radius: 5rpx;
  z-index: 1;
  border-top: 1px solid #0484fc;

}

.head-top {
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  /* 在纵向方向上居中对齐 */
@@ -31,13 +32,49 @@


.head-text-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  align-items: left;
  justify-content: center;
  margin-left: 15rpx;
}

.head-button-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 15rpx;
}


.head-bottom {
  margin-top: 20rpx;
  color: #fff;
  font-size: 35rpx;
}

.unbind {
  font-size: 30rpx;
  /* 按钮文字的字体大小 */
  color: #1890FF;
  /* 按钮文字颜色 */
  background-color: #fff;
  /* 按钮背景颜色 */
  border: none;
  /* 去掉按钮边框 */
  border-radius: 20px;
  /* 按钮圆角 */
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-top: 5rpx;
  padding-bottom: 5rpx;
  margin-bottom: 10rpx;
}

.head-text-wrapper text {
  margin-bottom: 10rpx;
  color: #fff;
}

@@ -64,6 +101,8 @@
}

.center-view {
  flex: 1;
  /* 每个元素平分宽度 */
  display: flex;
  flex-direction: column;
  /* 在纵向上排列子元素 */
@@ -73,9 +112,20 @@
  /* 在横向和纵向上都居中显示子元素 */
}

.center-view image,
.center-view t-avatar {
  width: 90rpx;
  /* 根据需要调整图标大小 */
  height: 90rpx;
  /* 根据需要调整图标大小 */
  margin-bottom: 10rpx;
  /* 图标和文本之间的间距 */
}

.center-view text {
  margin-top: 15rpx;
  font-size: 30rpx;
  color: #1890FF;
}

.bottom-wrapper {
@@ -98,7 +148,7 @@

.list-item {
  background-color: #fff;
  margin-top: 10rpx;
  margin-top: 2rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -106,17 +156,15 @@
  padding-right: 30rpx;
  padding-top: 20rpx;
  padding-bottom: 20rpx;

  margin-left: 20rpx;
  margin-right: 20rpx;
}

.list-item text {
  font-size: 30rpx;
}

.list-item image {
  width: 80rpx;
  height: 80rpx;
}


.list-item-piping {
  display: flex;
@@ -127,7 +175,103 @@
.bottom-title {
  border-radius: 5px 5px 0 0;
  background-color: #fff;
  padding-left: 30rpx;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  display: flex;
  align-items: center;
  /* 垂直方向居中 */
  justify-content: space-between;
  /* 子元素在主轴上的对齐方式 */
  padding: 10px;
  /* 容器的内边距 */
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-top: 20rpx;
}

.bottom-title-text {
  position: absolute;
  /* 绝对定位 */
  left: 50%;
  /* 移动到容器的中间 */
  transform: translateX(-50%);
  /* 通过平移自身宽度的一半来实现真正的居中 */
  font-size: 16px;
  /* 字体大小 */
  color: #333;
  /* 字体颜色 */
}

.refresh-button {
  margin-left: auto;
  /* 将按钮推到容器的最右侧 */
  font-size: 30rpx;
  /* 按钮文字的字体大小 */
  color: #fff;
  /* 按钮文字颜色 */
  background-color: #1890FF;
  /* 按钮背景颜色 */
  border: none;
  /* 去掉按钮边框 */
  border-radius: 5px;
  /* 按钮圆角 */
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-top: 5rpx;
  padding-bottom: 5rpx;
}

.refresh-view {
  text-align: center;
  padding: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  width: 20rpx;
  height: 20rpx;
  background-color: #333;
  border-radius: 50%;
  margin: 0 5px;
  animation: blink 1.4s infinite both;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
.switch{
  --td-switch-checked-color: #1890FF;
}


.item-left {
  display: flex;
  align-items: center;
}
.item-left text{
  font-size: 40rpx;
}
.item-img {
  width: 40rpx;
  /* 根据需要调整图标大小 */
  height: 40rpx;
  /* 根据需要调整图标大小 */
  margin-left: 20rpx;
}
.t-dialog{
  --td-dialog-content-font-size:40rpx;
  --td-dialog-content-line-height:50rpx
}