vue版本更新流程样式

 

<!-- 版本管理 -->
<template>
  <div class="versioMnanagement">
    <div class="met-log-body">
      <ul class="met-log-list">
        <template v-for="(item, index) in dataList">
          <h2 class="year" :key="index">{{ item.year }}</h2>
          <li class="position-relative" :key="index + key" v-for="(sub, key) in item.list">
            <h3 class="date">{{ sub.publishDate }}</h3>
            <span class="rounded-circle">.</span>
            <div>
              <dt class="dtStyle">
                <h4>{{ sub.versionNum }} 更新日志</h4>
              </dt>
              <dd class="card">
                <div class="met-editor">
                  <p class="editorTitle">
                    <strong>更新日志：</strong>
                  </p>
                  <p class="listContent">
                    <span v-html="sub.updateLog"></span>
                  </p>
                </div>
              </dd>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
  import api from '@/projects/admin/api/version.js'
  import dayjs from 'dayjs'
  import * as _ from 'lodash'
  export default {
    name: 'versioMnanagement',
    data() {
      return {
        dataList: []
      }
    },

    components: {},

    created() {
      this.getList()
    },
    computed: {},

    mounted: {},

    methods: {
      // 获取列表
      async getList() {
        const vo = {
          Sorting: 'publishDate desc'
        }
        const res = await api.getList(vo)
        // 获取年份
        this.dataList = []
        const a = res.data.items.map(item => { return dayjs(item.publishDate).format('YYYY') })
        const year = _.uniqBy(a, (item) => { return item })
        year.forEach(item => {
          const vo = {
            year: item,
            list: []
          }
          res.data.items.forEach(sub => {
            if (dayjs(sub.publishDate).format('YYYY') === item) {
              sub.publishDate = dayjs(sub.publishDate).format('YYYY-MM-DD')
              vo.list.push(sub)
            }
          })
          this.dataList.push(vo)
        })
      }
    }
  }

</script>
<style lang='scss' scoped>
.versioMnanagement {
  background: #fff;
  height: 100%;
  padding: 30px 0;
}
.met-log-list {
  list-style: none;
}
.date {
  position: absolute;
  left: -70px;
  top: 26px;
  color: #6c757d;
  font-size: 16px;
  font-weight: 400;
}

.editorTitle {
  margin-bottom: 12px;
}
.met-editor {
  box-sizing: border-box;
  padding: 16px;
}
.dtStyle {
  padding-top: 17px;
  font-weight: 400;
  box-sizing: border-box;
  margin-bottom: 14px;
  font-size: 24px;
  h4 {
    font-weight: 400;
    color: #2a333c;
  }
}
.listContent {
  line-height: 24px;
}
.position-relative {
  padding-left: 68px;
  position: relative;
  width: 50%;
}
.position-relative::before {
  content: '';
  width: 1px;
  height: 100%;
  background: #26b1e7;
  position: absolute;
  left: 32px;
  top: 0;
}
.year {
  font-weight: 500;
  font-size: 36px;
  color: #212529;
}
.met-log-body {
  margin-left: 100px;
  padding-left: 100px;
  .rounded-circle {
    position: absolute;
    font-weight: 700;
    text-align: center;
    background-color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    line-height: 7px;
    border: 2px solid #26b1e7;
    color: #26b1e7;
    left: 22px;
    top: 26px;
    font-size: 20px;
  }
  .card {
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;

    overflow: auto;
    max-height: 380px;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 4px;
    background-color: #f8f9fa;
  }
  .card::-webkit-scrollbar {
    background-color: #26b1e7;
    width: 8px;
    height: 5px;
  }
  .card::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .card::-webkit-scrollbar-thumb {
    background: #26b1e7;
    border-radius: 5px;
  }
  .card::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .card::-webkit-scrollbar-corner {
    background: #26b1e7;
  }
  .met-edito {
    max-height: 300px;
    color: #6c757d;
  }
}
</style>