uni-app——uniapp 自定义步骤条样式

最新推荐文章于 2025-05-08 23:02:27 发布

dbt@L

最新推荐文章于 2025-05-08 23:02:27 发布

阅读量356

点赞数 3

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/qq_43201350/article/details/145455797

uni-app 专栏收录该内容

110 篇文章

订阅专栏

效果：
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

当前环境：uniapp + uview1.0 + vue2

<template>
  <view class="construction-site-records">
    <view
      class="desc white-bg"
      style="padding-left: 56rpx;"
      :slot="`content${index}`"
      v-for="(item, index) in list"
      :key="index"
    >
      <!-- 操作人 -->
      <view class="flex-style flex-a-center operator">
        <view class="point"> </view>
        <view class="other">{{ item.userName }}</view>
      </view>
      <view
        style="padding: 15rpx 0 48rpx 48rpx;margin-left: 7.5rpx;"
        :style="
          index !== list.length - 1 ? 'border-left:1rpx solid #0052d9;' : ''
        "
      >
        <view class="img-arr flex-style flex-j-s flex-a-center flex-wrap">
          <view
            class="img-content text-a-center"
            v-for="(imgItem, imgIndex) in item.imgUrls"
            :key="imgIndex"
          >
            <view class="img-content-block position-relative overflow-hidden">
              <image
                class="img"
                :src="imgItem"
                mode="aspectFill"
                @click.stop="handlerPreviewImg(imgItem)"
              >
              </image>
            </view>
          </view>
        </view>
        <view class="time">{{ item.createTime }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          userName: "张三",
          imgUrls: ["http://img3.xxx.jpg", "http://img3.xxx.jpg"],
          createTime: "2022-12-12 12:12:12",
        },
      ],
    };
  },
  methods: {
    handlerPreviewImg(url) {
      uni.previewImage({
        current: 0,
        urls: url,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.flex-style {
  display: flex;
}

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

.flex-j-s {
  justify-content: flex-start;
}

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

.position-relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.point {
  width: 15rpx;
  height: 15rpx;
  background: #ffffff;
  border-radius: 50%;
  border: 1px solid #0052d9;
  margin-right: 32rpx;
}

.construction-site-records {
  border-top: 1rpx solid #f6f6f6;

  .operator {
    margin-bottom: 12rpx;

    .mid {
      border-radius: 6rpx;
      font-size: 22rpx;
      padding: 4rpx 8rpx;
      margin-right: 16rpx;
      margin-left: 8rpx;
    }

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

  .time {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 12rpx;
  }
}

.img-arr {
  &:nth-child(4n + 4) {
    margin-right: 0;
  }

  .img-content {
    margin-bottom: 12rpx;
    flex: 1;
    margin: 0 16rpx 16rpx 0;
    padding-top: 6rpx;
    width: calc((100% - 64rpx) / 4);
    min-width: calc((100% - 64rpx) / 4);
    max-width: calc((100% - 64rpx) / 4);

    .img-content-block {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
    }
  }

  .img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    z-index: 100;
  }
}
</style>