qiming/qiming-mobile/styles/global.scss

// 文字超出隐藏
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.text-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.border-b {
  border-bottom: 1rpx solid #f0f0f0;
}
.border-t {
  border-top: 1rpx solid #f0f0f0;
}
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

// 获取剩余的空间
.flex-1 {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.content-center {
  justify-content: center;
}

.content-between {
  justify-content: space-between;
}

.content-around {
  justify-content: space-around;
}

.content-end {
  justify-content: flex-end;
}

.px-6 {
  padding-left: 12rpx;
  padding-right: 12rpx;
}

.py-6 {
  padding-top: 12rpx;
  padding-bottom: 12rpx;
}

.px-16 {
  padding-left: 32rpx;
  padding-right: 32rpx;
}

.py-16 {
  padding-top: 32rpx;
  padding-bottom: 32rpx;
}

.py-12 {
  padding-top: 24rpx;
  padding-bottom: 24rpx;
}

.pb-12 {
  padding-bottom: 24rpx;
}

.mt-6 {
  margin-top: 12rpx;
}

.mt-16 {
  margin-top: 32rpx;
}

.mb-12 {
  margin-bottom: 24rpx;
}

.mb-16 {
  margin-bottom: 32rpx;
}

.ml-12 {
  margin-left: 24rpx;
}

.ml-10 {
  margin-left: 20rpx;
}

.ml-24 {
  margin-left: 48rpx;
}

.mr-16 {
  margin-right: 32rpx;
}

.mr-6 {
  margin-right: 12rpx;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-6 {
  margin-bottom: 12rpx;
}

.radius-6 {
  border-radius: 12rpx;
}

.radius-10 {
  border-radius: 20rpx;
}

.font-24 {
  font-size: 24rpx;
}

.font-28 {
  font-size: 28rpx;
}

.font-32 {
  font-size: 32rpx;
}

.font-48 {
  font-size: 48rpx;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-disabled {
  cursor: not-allowed;
}

.overflow-y {
  overflow: auto;
}

.overflow-hide {
  overflow: hidden;
}

.visible-hide {
  visibility: hidden;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.user-select-none {
  user-select: none;
}

.clip-path-animation {
  clip-path: inset(0 50% 0 50%); /* 初始状态，裁剪掉左右两边 */
  animation: unfold 0.5s forwards; /* 应用动画 */
}

@keyframes unfold {
  0% {
    clip-path: inset(0 50% 0 50%);
  }

  50% {
    clip-path: inset(0 25% 0 25%);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

// 会话输出内容点击事件
// 事件绑定配置样式
div.event[event-type][data] {
  display: inline-block;
  font-size: 12px;
  margin: 0 4px;
  padding: 4px 8px;
  cursor: pointer;
  max-width: 100px;
  min-width: 18px;
  border-radius: 24px;
  color: rgba(0, 0, 0, 60%) !important;
  background-color: rgba(0, 0, 0, 5%);
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &:hover {
    background-color: rgba(235, 235, 235);
  }
}

// 图标库样式
.iconfont {
  font-size: 46rpx;
  color: #333;
}