时间轴样式

 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