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>
相关推荐
gzzeason1 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7782 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽20 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟21 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦21 分钟前
前端列表页大数据内存优化的思考
前端·面试
自由逐风22 分钟前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子22 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
云动雨颤26 分钟前
流量分发代码实战|学会用JS控制用户访问路径
javascript
欢乐时光c26 分钟前
常见请求头响应头的含义
前端·面试
wzyoung26 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js