css 样式垂直排列

<template>
  <div>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <img src="../assets/0.png" alt="">
        <div class="num">{{index+1}}</div>
        <div class="title">{{item}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s,在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s,在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s,在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s,在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s,在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s,在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s',
        '在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s'
      ]
    }
  }
}
</script>

<style lang="less" scoped>
ul {
  width: 1080px;
  margin: 0 auto;
  display: flex;
  overflow-y: auto;
  margin-top: 30px;
}
li {
  padding: 120px 20px 20px 20px;
  height: 750px;
  // 内容垂直
  writing-mode: vertical-lr;
  text-align: justify;
  background: #fff;
  margin: 30px 40px 30px 0px;
  position: relative;
  box-shadow: 0px 2px 4px 0px rgba(0, 70, 139, 0.04);
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  img {
    width: 58px;
    height: 58px;
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translate(-50%, 0);
  }
  .num {
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translate(-50%, 0);
    font-size: 24px;
  }
  .title {
    min-width: 58px;
    display: flex;
    align-items: center;
    -webkit-text-orientation: sideways;
    line-height: 28px;
  }
  transition: all 0.5s;
  &:hover {
    transform: scale(1.02);
    box-shadow: 0px 2px 8px 4px rgba(0, 70, 139, 0.04);
    color: #004ca1;
  }
}
</style>