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>
相关推荐
恋猫de小郭7 分钟前
Flutter Widget IDE 预览新进展,开始推进落地发布
android·前端·flutter
jingling5551 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
Freedom风间6 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军7 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军7 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪7 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer7 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu7 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风7 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui