vue时间线组件(可以自己改样式，容易使用)

Posted 2023-04-16

参考技术A <view class="record">

    <view class="record_list">

        <view class="record_line">

            <view class="dot"></view>

            <view class="line"></view>

        </view>

        <view class="record_con">

            <view class="record_time">2021/12/13  12:00:00</view>

            <view class="record_txt">佛手柑橘处理了《流程审批系统2.0》有BUG报错该条工单。佛手柑橘处理了《流程审批系统2.0》有BUG报 错该条工单。佛手柑橘处理了《流程审批系统2.0》有BUG报错该条工单。</view>

        </view>

    </view>

<view class="record_list">

        <view class="record_line">

            <view class="dot"></view>

            <view class="line" v-if="false"></view>

        </view>

        <view class="record_con">

            <view class="record_time">2021/12/13  12:00:00</view>

            <view class="record_txt">佛手柑橘处理了《流程审批系统2.0》有BUG报错该条工单。</view>

        </view>

    </view>

</view>

<style scoped lang="scss">

.record

padding:132rpx 48rpx 40rpx;

background:#f6f6f6;

min-height:100vh;

box-sizing: border-box;

.record_list

display: flex;

.record_line

.dot

width: 24rpx;

height: 24rpx;

border: 1px solid #D60011;

border-radius: 50%;

position:relative;

&::after

content:'';

display: block;

width: 12rpx;

height: 12rpx;

background: #D60011;

border-radius: 50%;

position:absolute;

top:6rpx;

left:6rpx;





.line

width: 2rpx;

background-color: #D60011;

margin:0 auto;

height: calc(100% - 26rpx);





.record_con

margin-left:20rpx;

padding-bottom:32rpx;

.record_time

color: #666666;

font-size:24rpx;

font-weight: 400;



.record_txt

margin-top:18rpx;

width: 580rpx;

background: #FFFFFF;

border-radius: 8rpx;

padding:32rpx;

box-sizing: border-box;

font-size:28rpx;

font-weight: 400;

color:#111;









</style>

效果

vue 基于elment UI tree 组件实现带引号提示线

实现样式

 

 准备工作，先实现 树状组件的基本样式

      <span style="height:500px; display:block; overflow-y:auto;" class="mytree">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :props="defaultProps"
        ></el-tree>
      </span>

　接下来修改css ，注： 我使用的是 scss，less 也行

  .mytree /deep/ {
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .el-tree-node {
      position: relative;
      padding-left: 16px;
    }
    //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
    .el-tree-node__expand-icon.is-leaf {
      display: none;
    }
    .el-tree-node__children {
      padding-left: 16px;
    }

    .el-tree-node :last-child:before {
      height: 38px;
    }

    .el-tree > .el-tree-node:before {
      border-left: none;
    }

    .el-tree > .el-tree-node:after {
      border-top: none;
    }

    .el-tree-node:before {
      content: ‘‘;
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }

    .el-tree-node:after {
      content: ‘‘;
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }

    .el-tree-node:before {
      border-left: 1px solid #c0c4cc;
      bottom: 0px;
      height: 100%;
      top: -26px;
      width: 1px;
    }

    .el-tree-node:after {
      border-top: 1px solid #c0c4cc;
      height: 20px;
      top: 12px;
      width: 24px;
    }
  }

　　完，大功告成！