3D卡片翻转报表

编辑
文档创建者:axing (73248 )     浏览次数:485次     编辑次数:3次     最近更新:jiangsr 于 2018-08-15     

目录:

1. 描述编辑

在关于图片的报表设计中,行式报表、卡分栏报表都太传统并且不美观,希望实现图片和文字介绍相互转换的报表,如下:

222

模板下载链接

2. 思路编辑

利用HTML+css的技术来实现。

3.实现步骤编辑

1)先准备数据,如效果图所示,我们需要名字、头像、信息三个部分的内容

利用sql将这三部分内容拼接起来(由于frdemo没有响应的表,这里就写下格式)

select name as 姓名,image as 头像,'name:'+name+'<br>sex:'+sex+'<br>age:'+age+'<br>birth:'+birth+'<br>tel:'+tel+'<br>addr:'+addr as 信息 from table

2)将第一步数据集的头像放在A1单元格(横向扩展),信息放在A2单元格,姓名放在A4单元格

在A3单元格里填入如下公式:

 

"<div class='flip-container' ontouchstart='this.classList.toggle(\'hover\');'>" + "<div class='flipper'>" + "<div class='front'> <img src='" + A1 + "' width=120px; style='border-radius:10px;'/></div>" + "<div class='back'>" + A2 + "</div>" + "</div></div>"

如下图:

222

3)将第一第二行隐藏,并在模板-报表分栏中设置分栏,设置如下:

222

4)将card.css文件保存到项目路径webroot\help\css下,在模板-模板Web属性-引用css中引入该css。

其中,css文件如下:

.flip-container { /*设置元素被查看位置的视图*/ -webkit-perspective: 1000; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { /*定义沿着Y轴的3D旋转(旋转的角度)*/ transform: rotateY(180deg); } .flip-container, .front, .back { width: 120px; height: 120px; } /* flip speed goes here */ .flipper { /*完成过渡效果所需的时间*/ transition: 0.6s; /*转换的子元素保留其3D转换(保持运动完的状态)*/ transform-style: preserve-3d; /*设置元素相对定位*/ position: relative; } /* hide back of pane during swap */ .front, .back { /*设置元素的背面不可见*/ backface-visibility: hidden; /*设置元素的边框属性*/ border:1px solid #d6ccc4; /*设置元素的边框圆角*/ border-radius:10px; /*设置元素绝对定位*/ position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { /*设置元素的堆叠顺序,顺序高的显示在前面*/ z-index: 2; } /* back, initially hidden pane */ .back { /*设置元素背景颜色*/ background-color:#e7e5e1; /*定义沿着Y轴的3D旋转(旋转的角度)*/ transform: rotateY(180deg); }

注:移动端无法达到效果

附件列表


主题: 专题总结
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]