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>
相关推荐
慕斯策划一场流浪39 分钟前
fastGPT—前端开发获取api密钥调用机器人对话接口(HTML实现)
前端·html·fastgpt·fastgpt创建工作流·fastgpt创建密钥调用接口
碧海饮冰42 分钟前
前端:v-html和v-text在使用上的区别
前端·javascript·html
CD-i43 分钟前
用HTML.CSS.JavaScript实现一个贪吃蛇小游戏
javascript·css·html
好_快1 小时前
Lodash源码阅读-cloneBuffer
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-initCloneArray
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-get
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-stringToPath
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-baseGet
前端·javascript·源码阅读
前端极客探险家1 小时前
如何用 Three.js 和 Vue 3 实现 3D 商品展示
javascript·vue.js·3d
我是小路路呀2 小时前
vue开始时间小于结束时间,时间格式:年月日时分
前端·javascript·vue.js