ebike-plus-wx-maintenance/src/style/index.scss

// 测试用的 iconfont，可生效
@import './iconfont.css';
@import './color.scss';
@import './base.css';
// .test {
//   // 可以通过 @apply 多个样式封装整体样式
//   @apply mt-4 ml-4;

//   padding-top: 4px;
//   color: red;
// }

:root,
page {
  // 修改按主题色
  // --wot-color-theme: #37c2bc;

  // 修改按钮背景色
  // --wot-button-primary-bg-color: green;
}

/*
border-t-1
由于uniapp中无法使用*选择器，使用魔法代替*，加上此规则可以简化border与divide的使用，并提升布局的兼容性
1. 防止padding和border影响元素宽度。 (https://github.com/mozdevs/cssremedy/issues/4)
2. 允许仅通过添加边框宽度来向元素添加边框。 (https://github.com/tailwindcss/tailwindcss/pull/116)
3. [UnoCSS]: 允许使用css变量'--un-default-border-color'覆盖默认边框颜色
*/
// 这个样式有重大BUG，先去掉！！(2025-08-15)
// :not(not),
// ::before,
// ::after {
//   box-sizing: border-box; /* 1 */
//   border-width: 0; /* 2 */
//   border-style: solid; /* 2 */
//   border-color: var(--un-default-border-color, #e5e7eb); /* 3 */
// }

.flex {
  display: flex;
}

.b-body-gray {
  background-color: $backgroud-gray;
}

.common-card {
  width: calc(100% - 32px);
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bottom-button-zaping {
  padding: 30rpx;
  width: calc(100% - 60rpx);
  padding-bottom: 50rpx;
  background-color: white;
}

.text-ellipsis-2 {
  white-space: normal; /* 允许换行 */
  word-wrap: break-word; /* 长单词断行 */
  overflow-wrap: break-word; /* 同上 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出时显示省略号 */
  display: -webkit-box; /* 使用弹性盒子模型 */
  -webkit-line-clamp: 2; /* 限制为 2 行 */
  -webkit-box-orient: vertical; /* 垂直排列 */
}

/* 卡片样式 */
.y_card_wrapper {
  padding: 20rpx;
  width: calc(100% - 40rpx);

  .card_box {
    padding: 30rpx 20rpx;
    width: calc(100% - 40rpx);
    border-radius: 10rpx;
    background-color: white;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

    .card_row {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 2rpx solid #ececec;
      padding-top: 30rpx;
      padding-bottom: 30rpx;

      &:first-child {
        padding-top: 0;
      }

      &_key {
        font-size: 30rpx;
        width: 150rpx;
        color: #a6a6a6;
      }
      &_value {
        font-size: 30rpx;
        color: #373737;
        width: calc(100% - 160rpx);
        white-space: normal; /* 允许换行 */
        word-wrap: break-word; /* 长单词断行 */
        overflow-wrap: break-word; /* 同上 */
      }
      &_value_two {
        font-size: 30rpx;
        color: #373737;
        width: calc(100% - 200rpx);
        white-space: normal; /* 允许换行 */
        word-wrap: break-word; /* 长单词断行 */
        overflow-wrap: break-word; /* 同上 */
      }

      &_link {
        width: 30rpx;
      }

      &_small_text {
        color: #c8c7c9;
        font-size: 26rpx;
        margin: 6rpx 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/* 卡片样式2-一行2列的形式 */
.y_card2_wrapper {
  padding: 20rpx 0;
  width: 100%;

  .card_box {
    padding: 30rpx;
    width: calc(100% - 60rpx);
    background-color: white;
    box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 30rpx;

    .card_row {
      display: flex;
      justify-content: space-between;
      margin: 25rpx 0;

      .row_item {
        flex: 1;
        display: flex;

        .label {
          font-size: 28rpx;
          color: #989898;
          width: 150rpx;
        }

        .value {
          font-size: 28rpx;
          color: #141414;
        }
      }
    }

    .card_row_long_3 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 10rpx 0;

      .key {
        font-size: 28rpx;
        color: #989898;
        width: 150rpx;
      }

      .value {
        font-size: 28rpx;
        color: #141414;
        width: calc(100% - 255rpx);
      }

      .icon {
        width: 120rpx;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}