首页 > 其他 > 详细

时间轴样式

时间:2019-04-26 11:41:10      阅读:112      评论:0      收藏:0      [点我收藏+]
 1 <template>
 2     <div class="timeAxis">
 3       <div class="time_record" :key=‘item‘ v-for="item in timeRecord">
 4         <div class="time">{{item.teacherSendTestTime}}</div>
 5         <div class="line">
 6           <div class="ball"></div>
 7         </div>
 8     <div class="time_content">内容</div>
 9     </div>
10   </div>  
11 </template>
12 <style scoped=‘scoped‘ lang="scss">
13 .time_record {
14     overflow: hidden;
15     width: 100%;
16     .time {
17         font-size: 0.24rem;
18         color: #756565;
19         float: left;
20         width: 0.6rem;
21         margin-bottom: -5000px;
22         padding-bottom: 5000px;
23     }
24     .line {
25         width: 0.04rem;
26         margin-left: 0.1rem;
27         margin-bottom: -5000px;
28         padding-bottom: 5000px;
29         float: left;
30         position: relative;
31         background-color: #fff;
32         .ball{
33             background: #FF8E00;
34             width: 0.2rem;
35             height: 0.2rem;
36             border-radius: 50%;
37             position: absolute;
38             left: -0.08rem;
39             top: 0.06rem;
40         }
41     }
42     .time_content{
43         float: left;
44     }
45 }
46 </style>        

 

时间轴样式

原文:https://www.cnblogs.com/luov/p/10773224.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!