<style> .sysLog_Content { margin: 40px 0 0 40px; height:90%; overflow-y: auto; } .sysLog_List { position: relative; margin-left: 10px; border-left:1px solid #d1d1d1; padding:0 0 20px 17px; } .sysLog_List:first-child{ margin-top:5px; } .sysLog_List:last-child{ border-left:0; } .sysCircle { display: inline-block; width: 13px; height: 13px; background-color: #36AF84; border: 2px solid #58D2A7; border-radius: 50%; margin-right: 10px; position: relative; top: -4px; } .sysFirDate { color: #38425D; font-weight: bold; font-size: 12px; position: relative; top: -4px; } .sysContent_main { width: 894px; min-height: 101px; background-color: #fff; border: 1px solid #E5E5E5; border-radius: 8px; margin-top: 10px; color: #333333; font-size: 14px; padding: 20px; } .sysPosi_div { margin: -4px 0 0 -24px; } .sysCircle_other { width: 13px; height: 13px; display: inline-block; border-radius: 50%; background-color: #B1B1B1; border: 2px solid #EFEFEF; margin-right: 10px; position: relative; top: -3px; } .sysFirDate_other { color: #38425D; font-size: 12px; position: relative; top: -4px; } </style> <template> <div class="sysLog_Content"> <div class="sysLog_List" v-for="(item,index) in dataList"> <div class="sysPosi_div"> <span class="sysCircle" v-if="index==0"></span> <span class="sysCircle_other" v-else></span> <span style="font-size:14px;margin-right:20px;position:relative;top:-4px;">{{item.UpdateTitle}}</span> <span class="sysFirDate" v-if="index==0">{{item.UpdateTimeStr}}</span> <span class="sysFirDate_other" v-else>{{item.UpdateTimeStr}}</span> </div> <div class="sysContent_main" v-html="item.UpdateContent"> </div> </div> </div> </template> <script> export default { data() { return { msg: { pageIndex: 1, pageSize: 15 }, dataList: [], }; }, methods: { getList() { this.apipost("sysrecord_get_GetPageList", this.msg, res => { if (res.data.resultCode == 1) { this.dataList = res.data.data.pageData; } }, err => {} ); }, }, mounted() { this.getList(); } }; </script>