<template> <div> <div class="information-container flex-1-dhc" style="overflow-x: auto"> <van-steps direction="vertical" :active="active"> <van-step> <div class="area"> <div> <div style="margin-left: 10%"> <div style="font-weight: 400; width: 20%">八月</div> <div style="font-size: 18px; width: 20%">18</div> </div> <div style="margin-top: -10%; margin-left: 19%; padding: 5% 5%">公司成立</div> </div> </div> </van-step> <van-step> <div class="area"> <div> <div style="margin-left: 10%"> <div style="font-weight: 400; width: 20%">九月</div> <div style="font-size: 18px; width: 20%">13</div> </div> <div style="margin-top: -10%; margin-left: 19%; padding: 5% 5%">获得国家安全可靠计算机信息系统集成重点企业证书(特一级资质)</div> </div> </div> </van-step> </van-steps> </div> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import { Step, Steps } from "vant"; /** * @Description:企业营销时光轴 * @author pd * @date 2021-11-06 16:42:10 */ Vue.use(Step); Vue.use(Steps); @Component({ name: "EnterpriseMarketTimeLine", }) export default class EnterpriseMarketTimeLine extends Vue { active: any = 1; } </script> <style scoped> .shape { /* border-width: 1 px; */ position: absolute; left: 5%; top: 14%; width: 0.6%; height: 2.5%; background: inherit; background-color: rgba(2, 167, 240, 1); border: none; border-radius: 1%; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .area { border-width: 0px; /* position: absolute; left: 0 px; top: 0 px;*/ width: 100%; height: auto; background: inherit; background-color: rgba(255, 255, 255, 1); border: none; border-radius: 2%; -moz-box-shadow: 0px 1px 3px rgba(204, 204, 204, 1); -webkit-box-shadow: 0px 1px 3px rgb(204 204 204); box-shadow: 0px 1px 3px rgb(204 204 204); } </style>