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.rhkb.cn/news/371877.html

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

相关文章

Linux定位CPU飙高代码

Linux定位CPU飙高代码 1、查看服务进程ID 命令 &#xff1a; ps -ef | grep {服务名称} 2、根据进程id查看进程内所有线程 &#xff1a; 命令 &#xff1a; top -Hp {PID} 3、线程ID 转换十六进制 命令&#xff1a; printf “0x%x” {PID} 4、jstack工具跟踪堆栈 命令 &…

水果商城系统 SpringBoot+Vue

1、技术栈 技术栈&#xff1a;SpringBootVueMybatis等使用环境&#xff1a;Windows10 谷歌浏览器开发环境&#xff1a;jdk1.8 Maven mysql Idea 数据库仅供学习参考 【已经答辩过的毕业设计】 项目源码地址 2、功能划分 3、效果演示

逆变器学习笔记(三)

DCDC电源芯片外围器件选型_dcdc的comp补偿-CSDN博客、 1.芯片的COMP引脚通常用于补偿网络&#xff1a; 芯片的COMP引脚通常用于补偿网络&#xff0c;在控制环路中发挥重要作用。COMP引脚接电容和电阻串联接地&#xff0c;主要是为了稳定控制环路、调整环路响应速度和滤波噪声…

入门 Vue Router

Vue Router Vue Router插件做了什么&#xff1f; 全局注册 RouterView 和 RouterLink 组件。添加全局 $router 和 $route 属性。启用 useRouter() 和 useRoute() 组合式函数。触发路由器解析初始路由。 标签介绍 RouterView 加载指定页面 <RouterLink to"/home"…

中学生物实验室建设及实验室配置方案

开展好实验教学&#xff0c;是学好生物的前提条件&#xff0c;生物学实验是培养学生创新思维和实践操作能力的有效途径&#xff0c;是转变学生学习方式的有效手段。中学生物实验室建设及配置方案&#xff0c;充分考虑学校实验教学需求、学生身心发展特点&#xff0c;助力学校在…

基于1bitDAC的MU-MIMO的非线性预编码算法matlab性能仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 基于1-bit DAC的非线性预编码背景 4.2 ZF&#xff08;Zero-Forcing&#xff09; 4.3 WF&#xff08;Water-Filling&#xff09; 4.3 MRT&#xff08;Maximum Ratio Transmission&…

python破解字母已知但大小写未知密码

python穷举已知字符串中某个或多个字符为大写的所有情况 可以使用递归函数来实现这个功能。以下是一个示例代码&#xff1a; def generate_uppercase_combinations(s, index0, current):if index len(s):print(current)returngenerate_uppercase_combinations(s, index 1, …

linux RTC时钟时间出现了明显的偏移

RTC时钟时间出现了明显的偏移 1、开发环境2、问题阐述3、验证问题3.1、首先去排查了硬件电路和芯片电压不稳定的问题。3.2、晶振的问题。3.3、芯片本身3.4、芯片寄存器 4、代码修改 1、开发环境 平台&#xff1a;imx6ul kernel版本&#xff1a;linux4.1.5 RTC芯片&#xff1a;…

启发式防御大模型越狱攻击

前言 在本文中&#xff0c;我们来分析、复现几个典型的启发式的防御工作&#xff0c;用于防御面向大语言模型的越狱攻击。 Self Examination 首先来看Self Examination方法。 这是一种简单的零样本防御LLM攻击的方法&#xff0c;旨在防止用户接触到由LLMs诱导产生的有害或恶…

GPT4又双叒叕被超越?商汤日日新5.5震撼发布!

商汤最强大脑日日新5.5震撼上线: 6000亿参数、全面对标GPT-4 前言 日日新5.5发布 人工智能领域的领军企业商汤科技&#xff0c;近日在2024世界人工智能大会上带来了一个重磅消息&#xff1a;他们全新升级的"日日新SenseNova 5.5"大模型正式发布&#xff01; 这一消息…

第3章 信息技术服务知识

第3章 信息技术服务知识 本章介绍一些信息技术服务相关的基本知识和概念&#xff0c;包括产品、服务、信息技术服务、运维、运营和经营、IT治理、IT服务管理、项目管理、质量管理、信息安全管理、信息技术服务财务管理等。希望读者通过了解和掌握这些基本概念&#xff0c;为今…

Spring cloud 中使用 OpenFeign:让 http 调用更优雅

注意&#xff1a;本文演示所使用的 Spring Cloud、Spring Cloud Alibaba 的版本分为为 2023.0.0 和 2023.0.1.0。不兼容的版本可能会导致配置不生效等问题。 1、什么是 OpenFeign Feign 是一个声明式的 Web service 客户端。 它使编写 Web service 客户端更加容易。只需使用 F…

flutter开发实战-Webview及dispose关闭背景音

flutter开发实战-Webview及dispose关闭背景音 当在使用webview的时候&#xff0c;dispose需要关闭网页的背景音或者音效。 一、webview的使用 在工程的pubspec.yaml中引入插件 webview_flutter: ^4.4.2webview_cookie_manager: ^2.0.6Webview的使用代码如下 初始化WebView…

【知网CNKI-注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

Trinity:转录组从头组装

安装 #下载安装包 wget -c https://github.com/trinityrnaseq/trinityrnaseq/releases/download/Trinity-v2.15.1/trinityrnaseq-v2.15.1.FULL.tar.gztar -xzvf trinityrnaseq-v2.15.1.FULL.tar.gz cd trinityrnaseq-v2.15.1 make make plugins #安装依赖 mamba install -c bio…

Vue3使用markdown编辑器之Bytemd

官网地址&#xff1a;https://bytemd.js.org/playground GitHub地址&#xff1a;https://github.com/bytedance/bytemd ByteMD 是字节跳动出品的富文本编辑器&#xff0c;功能强大&#xff0c;可以免费使用&#xff0c;而且支持很多掘金内置的主题&#xff0c;写作体验很棒。 …

Flask之电子邮件

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、使用Flask-Mail发送电子邮件 1.1、配置Flask-Mail 1.2、构建邮件数据 1.3、发送邮件 二、使用事务邮件服务SendGrid 2.1、注册SendGr…

element-ui输入框如何实现回显的多选样式?

废话不多说直接上效果&#x1f9d0; 效果图 <template><div><el-form:model"params"ref"queryForm"size"small":inline"true"label-width"68px"><el-form-item label"标签" prop"tag&q…

安全防御(防火墙)

第二天&#xff1a; 1.恶意程序---一般会具有一下多个或则全部特点 1.非法性&#xff1a;你未经授权它自动运行或者自动下载的&#xff0c;这都属于非法的。那恶意程序一般它会具有这种特点&#xff0c; 2.隐蔽性&#xff1a;一般隐藏的会比较深&#xff0c;目的就是为了防止…

MySQL性能优化 一、系统配置优化

数据库优化纬度有四个&#xff1a; 硬件升级、系统配置、表结构设计、SQL语句及索引。 优化选择&#xff1a; 优化成本&#xff1a;硬件升级 > 系统配置 > 表结构设计 > SQL语句及索引优化效果&#xff1a;硬件升级 < 系统配置 < 标结果设计 < SQL语句及索…