等高对其css的样式

最新推荐文章于 2023-08-29 22:42:18 发布

曲小强

最新推荐文章于 2023-08-29 22:42:18 发布

阅读量164

点赞数

分类专栏： CSS 文章标签： css vue.js 前端

本文链接：https://blog.csdn.net/quhongqiang/article/details/127844942

版权

CSS 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<style>
  * {
    margin: 0; padding: 0;
  }
  .video_list {
    margin: 10px;
    display: flex;
    overflow-y: hidden;
  }
  .video_list li {
    border: 1px solid #aaa;
    border-radius: 5px;
    margin-right: 10px;
    display: inline-block;
    padding-bottom: 10px;
  }
  .video_list li img {
    width: 100%;
  }
  .video_list li:nth-last-child(1) {
    margin-right: 0;
  }
  .video_list::-webkit-scrollbar{
    display: none;
  }
  .title {
    width: 120px;
    /* autoprefixer: off */
    /* autoprefixer: ignore next */   
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    padding: 0 10px;
  }
  .cell {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  del {
    font-size: 12px;
    padding: 0 10px;
  }
</style>
</head>
<body>
<div id="app">
  <div>
    <ul class="video_list" ref="content">
      <li v-for="(item, index) in list" :key="index">
        <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt="">
        <div class="title">{{item.title}}</div>
        <div class="cell">
          <span>￥259</span>
          <span>+</span>
        </div>
        <del>￥275.25</del>
        <div v-if="item.isBtn">
          <button>查看详情</button>
        </div>
      </li>
     </ul>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    list: [
      {
        title: '啊啊啊啊啊啊啊啊',
        isBtn: false,
      },
      {
        title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
        isBtn: true,
      },
      {
        title: '啊啊啊啊啊啊啊啊',
        isBtn: true,
      },
      {
        title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
        isBtn: false,
      },
      {
        title: '啊啊啊啊啊啊啊啊',
        isBtn: false,
      },
      {
        title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
        isBtn: true,
      }
    ]
  }
})
</script>
</body>
</html>

曲小强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
等高对其css的样式

'啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊''啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊''啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊''啊啊啊啊啊啊啊啊''啊啊啊啊啊啊啊啊''啊啊啊啊啊啊啊啊'
复制链接

扫一扫

专栏目录