<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style> .content{ margin-left: 20px; } .circledot{ width: 10px; height: 10px; border-radius: 50%; background: #70A0FF; border: 2px solid #d6ecff; transform: translateX(-50%); } .line{ border-left: 1px solid red; } </style> <body> <div class="content"> <div class="line"> <div class="circledot"></div> <div>123213</div> <div>97slkfj</div> </div> <div class="line"> <div class="circledot"></div> <div>123213</div> <div>97slkfj</div> <div>123213</div> </div> <div class="circledot"></div> </div> </body> </html>
/** * @Description: 时间线 * @date: 2021/9/29 */ <template> <div class="content"> <div class="line"> <div class="circledot"> <span>2021</span> </div> </div> <div class="line"> <div class="darkcircledot"></div> </div> <div class="line"> <div class="circledot"></div> </div> </div> </template> <script> export default { name: 'timeline', components: { }, props: { }, data () { return { } }, methods: { } } </script> <style lang="less" scoped> .content{ margin-left: 20px; margin-top: 20px; } .circledot{ transform: translateY(-50%); &:before{ content: ""; display: inline-block; background: url("./yuan.png") center/contain no-repeat; width: 10px; height: 10px; transform: translateX(-55%); } } .darkcircledot{ transform: translateY(-50%); &:before{ content: ""; display: inline-block; background: url("./hyan.png") center/contain no-repeat; background-size: 100%; width: 8px; height: 8px; transform: translateX(-55%); } } .line{ border: 1px dashed red; } </style>