vue css 链式布局模式

<div class="pp-wrap">      <div class="pp-left"><!--跳活动反思--><div class="even-box" v-for="(item,index) in trackingPtoPLeftList" :key="index" @click="jumpReview(item)"><div class="to-box">Play{{ index ? index * 2 + 2 : 2 }}</div><div class="play-cont"><div class="play-title">{{ item.activityName }}</div><div class="play-time">{{ item.timeRange }}</div><div class="play-txt">{{ item.activityNotes }}</div></div><div class="play-bot"><div class="d1">活动分享:<span>{{ item.shareClass }}</span>({{ item.shareClassCount }})</div><div class="d2">活动教研:<span>{{ item.teacherNames }}({{ item.teacherCount }})</span></div></div><!--右侧的箭头--><el-image :src="require(`@/assets/images/arrow_left_bot.png`)" style="position: absolute; top: 42px; right: -101px; width:100px; height:107px"></el-image><el-image :src="require(`@/assets/images/arrow_right_bot.png`)" style="position: absolute; top: 149px; right: -101px; width:100px; height:107px"></el-image></div></div><div class="pp-center"><div class="middle-box"><div class="other-box"><div class="other-box-head">              <span class="s1">游戏缘起</span><span class="s2">{{ form.createTime }}</span>              </div><div class="other-cont">{{ form.origin }}</div></div>       </div><!--跳活动分享--><div class="middle-box" v-for="(item,index) in trackingPtoPList" :key="index" @click="jumpShare(item)"><div class="to-box">to</div>  <div class="mid-cont">     <div class="m1">幼儿:{{ item.kidBehavior }}</div><div class="m2">教师引导:{{ item.teacherBehavior }}</div></div></div></div><div class="pp-right"><!--跳活动反思--><div class="odd-box" v-for="(item,index) in trackingPtoPRightList" :key="index" @click="jumpReview(item)"><div class="to-box">Play{{ index ? index * 2 + 1 : 1 }}</div><div class="play-cont"><div class="play-title">{{ item.activityName }}</div><div class="play-time">{{ item.timeRange }}</div><div class="play-txt">{{ item.activityNotes }}</div></div><div class="play-bot"><div class="d1">活动分享:<span>{{ item.shareClass }}</span>({{ item.shareClassCount }})</div><div class="d2">活动教研:<span>{{ item.teacherNames }}</span>({{ item.teacherCount }})</div></div><!--左侧的箭头--><el-image :src="require(`@/assets/images/arrow_right_bot.png`)" style="position: absolute; top: 53px; left:-101px; width:100px; height:107px"></el-image><el-image :src="require(`@/assets/images/arrow_left_bot.png`)" style="position: absolute; top: 160px; left: -101px; width:100px; height:107px"></el-image></div></div></div>.pp-right{ padding-top: 36px;}
.pp-wrap{ margin-top: 20px; display: flex; width: 1595px;}
.pp-left{ padding-top: 260px;}
.even-box,.odd-box{ position: relative; margin-bottom: 60px; width: 408px; height: 384px; background: #f7f7f7; border: 1px solid #797979; border-radius: 20px;}
.middle-box{ position: relative; margin: 0 100px; width: 579px; height: 185px; border: 1px solid #797979; border-radius: 20px;}
.middle-box{ margin-bottom: 37px; background: #f7f7f7;}
.to-box{ margin: 7px 0 0 8px; display: flex; justify-content: center; align-items: center; width: 106px; height: 56px; font-size: 26px; font-weight: bold; border: 1px solid #797979; border-radius: 28px;}
.other-box{ padding: 20px;}
.other-box-head{ display: flex; align-items: baseline;}
.other-box-head .s1{ max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 28px; font-weight: bold;}
.other-box-head .s2{ margin-left: 20px; font-size: 16px; color: #999;}
.other-cont{ margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 16px;}
.mid-cont div{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mid-cont{ margin-top: 30px; padding: 0 20px; font-size: 20px;}
.play-bot span{ max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.play-bot .d1,.play-bot .d2{ display: flex;}
.play-bot .d2{ margin-top: 10px;}
.play-bot{ padding: 20px; box-sizing: border-box; font-size: 18px;}
.play-txt{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.play-txt{ margin-top: 20px; font-size: 18px;}
.play-time{ margin-top: 15px; font-size: 16px; color: #999;}
.play-title{ font-size: 28px; font-weight: bold;}
.play-cont{ padding: 10px 20px 0 20px; height: 210px; box-sizing: border-box; border-bottom: 1px solid #797979;}箭头两个 大小都是100*107

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/40838.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

echarts柱状选中shadow阴影背景宽度设置

使用line&#xff0c;宽度增大到所需要的宽度&#xff0c;设置下颜色透明度就行 tooltip: {trigger: axis,//把阴影的层级往下降z:-15,axisPointer: {type: line,lineStyle: {color: rgba(150,150,150,0.3),width: 44,type: solid,},}, }, series: [{type: bar,barWidth:20,//…

python自动化办公之BeautifulSoup爬取并解析html文本

用到的库&#xff1a;BeautifulSoup 实现效果&#xff1a;爬取网站内容&#xff0c;拿到html文本并解析html文本 代码&#xff1a; 先爬取 # 先导入requests包 import requests urlhttps://www.baidu.com responserequests.get(url) # 做1个断言&#xff0c;如果执行成功&a…

【C语言】—— 文件操作(上)

【C语言】—— 文件操作&#xff08;上&#xff09; 一、 为什么使用文件二、 什么是文件2.1、 程序文件2.2、 数据文件2.3、 文件名2.4、二进制文件与文本文件 三、 文件的打开和关闭3.1、流和标准流&#xff08;1&#xff09;流&#xff08;2&#xff09;标准流 3.2、文件指针…

64.函数参数和指针变量

目录 一.函数参数 二.函数参数和指针变量 三.视频教程 一.函数参数 函数定义格式&#xff1a; 类型名 函数名(函数参数1,函数参数2...) {代码段 } 如&#xff1a; int sum(int x&#xff0c;int y) {return xy; } 函数参数的类型可以是普通类型&#xff0c;也可以是指针类…

Python可实现各种算法库之algorithms使用详解

概要 在软件开发和计算机科学领域,算法是解决问题的核心工具。Python 作为一种广泛使用的编程语言,提供了多种内置和第三方库来实现各种算法。algorithms 库是一个集合了多种常用算法和数据结构的 Python 库,旨在帮助开发者快速实现和应用这些算法。本文将详细介绍 algorit…

Ollama基于Casaos一键部署,并接入Dify知识库,无需再为API付费

什么是Ollama Ollama是一个开源的大型语言模型服务工具&#xff0c;它帮助用户快速的运行大模型。浪浪云将它做为一键部署通过简单的安装&#xff0c;用户可以执行一条命令就可以运行开源大型语言模型&#xff0c;如 llama3 ,通以千问。极大地简化了部署和管理LLM的过程&#x…

modelscope可控细节的长文档摘要

modelscope可控细节的长文档摘要尝试 本文的想法来自今年OpenAI cookbook的一篇实践&#xff1a;summarizing_long_documents&#xff0c;目标是演示如何以可控的细节程度总结大型文档。 如果我们想让大语言模型总结一份长文档&#xff08;例如 10k 或更多tokens&#xff09;&…

6个步骤实现Postman接口压力测试(建议收藏)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 这里讲是postman做接口并发测试&#xff0c;基础用法不做赘述 1、第一步接口可以通的情况下点击…

Proteus-51单片机-DS18B20多点测温

DS18B20多点测温 一、Proteus仿真演示 每个DS18B20都有一个唯一的64位序列号,这使得在同一总线上可以挂载多个传感器,无需额外的地址分配。主机(通常为单片机)通过特定的时序控制,可以依次读取各个DS18B20的温度数据,实现分布式测温。 二、代码特点 三、开发环境介绍 本…

基于Arduino平台开源小车的初步使用体验

创作原因&#xff1a;偶然有机会接触到基于Arduino平台的开源智能小车&#xff0c;初步使用后与大家分享。因使用时间不常&#xff0c;可以纯当个乐子看看&#xff0c;感谢大家的阅读&#xff01; 图&#xff1a;一款基于Arduino平台的开源小车 一、开发环境 Misly&#xff1…

shark云原生-日志体系-filebeat高级配置(适用于生产)

文章目录 1. filebeat.inputs 静态日志收集器2. filebeat.autodiscover 自动发现2.1. autodiscover 和 inputs2.2. 如何配置1.2.1. Providers 提供者1.2.2. Providers kubernetes templates1.2.3. 基于提示&#xff08;hints&#xff09;的自动发现支持的 **hints**的完整列表&…

windows搭建mqtt服务器,并配置DTU收集传感器数据

1.下载并安装emqx服务器 参考&#xff1a;Windows系统下本地MQTT服务器搭建&#xff08;保姆级教程&#xff09;_mqtt windows-CSDN博客 这里我下载的是emqx-5.3.0-windows-amd64.zip版本 下载好之后&#xff0c;放到服务器的路径&#xff0c;我这里放的地方是&#xff1a;C…

脑启发设计:人工智能的进化之路

编者按&#xff1a;你可以用左手&#xff08;不常用的那只手&#xff09;的小指与食指拿起一件物品么&#xff1f; 试完你是不是发现自己竟然可以毫不费力地用自己不常用的手中&#xff0c;两根使用频率相对较低的手指&#xff0c;做一个不常做的动作。这就是人类大脑不可思议…

py黑帽子学习笔记_burp

配置burp kali虚机默认装好了社区版burp和java&#xff0c;其他os需要手动装 burp是用java&#xff0c;还得下载一个jython包&#xff0c;供burp用 配apt国内源&#xff0c;然后apt install jython --download-only&#xff0c;会只下载包而不安装&#xff0c;下载的目录搜一…

9.x86游戏实战-汇编指令mov

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…

STM32智能农业监控系统教程

目录 引言环境准备智能农业监控系统基础代码实现&#xff1a;实现智能农业监控系统 4.1 数据采集模块 4.2 数据处理与分析 4.3 控制系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;农业监控与优化问题解决方案与优化收尾与总结 1. 引言 智能农业监控系统利用STM32嵌…

PCL从理解到应用【02】PCL环境安装 | PCL测试| Linux系统

前言 本文介绍在Ubuntu18.04系统中&#xff0c;如何安装PCL。 源码安装方式&#xff1a;pcl版本1.91&#xff0c;vtk版本8.2.0&#xff0c;Ubuntu版本18.04。 安装好后&#xff0c;可以看到pcl的库&#xff0c;在/usr/lib/中&#xff1b; 通过编写C代码&#xff0c;直接调用…

华为路由器静态路由配置(eNSP模拟实验)

实验目标 如图下所示&#xff0c;让PC1ping通PC2 具体操作 配置PC设备ip 先配置PC1的ip、掩码、网关。PC2也做这样的配置 配置路由器ip 配置G0/0/0的ip信息 #进入系统 <Huawei>system-view #进入GigabitEthernet0/0/0接口 [Huawei]int G0/0/0 #设置接口的ip和掩码 […

【UE5.3】笔记7 控制Pawn移动

使用A、D键控制角色左右移动 打开我们的BP_Player蓝图类&#xff0c;选择事件图表&#xff0c;添加我们的控制事件 右键&#xff0c;搜索A keyboard&#xff0c;选择A,如下图&#xff0c;D也是 添加扭矩力 首先我们要把我们的player上的模拟物理选项打开&#xff0c;这样我们…

JavaFx基础知识

1.Stage 舞台 如此这样的一个框框&#xff0c;舞台只是这个框框&#xff0c;并不管里面的内容 public void start(Stage primaryStage) throws Exception {primaryStage.setScene(new Scene(new Group()));primaryStage.getIcons().add(new Image("/icon/img.png"))…