vue 手写一个步骤条。

最新推荐文章于 2024-05-31 09:44:04 发布

放学别走啊

最新推荐文章于 2024-05-31 09:44:04 发布

阅读量652

点赞数

分类专栏： vue js html css js 文章标签： vue.js 前端 css3

本文链接：https://blog.youkuaiyun.com/weixin_46113850/article/details/126872689

版权

vue 同时被 3 个专栏收录

52 篇文章

订阅专栏

html css js

28 篇文章

订阅专栏

18 篇文章

订阅专栏

此博客展示了从2011年至2022年的粮情更新，记录了出粮、出粮中和未出粮三个阶段的时间节点，帮助读者了解粮食处理的实时状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
在这里插入图片描述

<view class="process_more">
 <!-- 步骤条 -->
 <view class="set-2" :key="index" v-for="(item, index) in options">
   <view class="set-3">
     <view>
       <text>{{ item.time }}</text>
       <text class="left_img"></text>
       <text>1份</text>
     </view>
     <view class="height" v-if="index!=options.length - 1"></view>
   </view>
   <view>{{ item.text1 }}</view>
 </view>
</view>

options: [
  {
    text1: '已出粮',
    time: '2021-3',
  },
  {
    text1: '出粮中',
    time: '2022-5',
  },
  {
    text1: '未出粮',
    time: '2011-3',
  }
],

.process_more {
  .set-2 {
    display: flex;
    justify-content: space-between;
  }
  .set-3 {
    .left_img {
      border-radius: 50%;
      display: inline-block;
      margin: 0 26rpx;
      width: 30rpx;
      height: 30rpx;
      background: #FFDA00;
    }
    .height {
      height: 60rpx;
      background: #DDDDDD;
      width: 1px;
      margin-left: 125rpx;
    }
  }
}