css 样式垂直排列

javascript 复制代码
<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>
相关推荐
柯南二号4 分钟前
【大前端】 断点续传 + 分片上传(大文件上传优化) 的前端示例
前端
前端小超超10 分钟前
如何配置capacitor 打包的安卓app固定竖屏展示?
android·前端·gitee
xiaopengbc24 分钟前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君28 分钟前
React中台系统如何嵌入到业务系统中
前端
Slice_cy30 分钟前
不定高虚拟列表
前端
前端AK君39 分钟前
React组件库如何在vue项目中使用
前端
Moonbit1 小时前
MoonBit 再次走进清华:张宏波受邀参加「思源计划」与「程序设计训练课」
前端·后端·编程语言
RestCloud1 小时前
一站式数据集成:iPaaS 如何让开发者和业务人员都满意?
前端·后端·架构
li35741 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
菜市口的跳脚长颌1 小时前
Web3 基础
前端