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>
相关推荐
IT_陈寒43 分钟前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿44 分钟前
react 实现插槽slot功能
前端
stoneship1 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 小时前
一文读懂Font文件
前端
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js
真夜2 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js