1. 概述
1.1 预期效果
在关于图片的报表设计中,行式报表、卡分栏报表都太传统并且不美观,希望实现图片和文字介绍相互转换的报表,如下图所示:
1.2 实现思路
利用 HTML+CSS 的技术来实现。
2. 示例
2.1 准备头像
1)请下载示例中所用的图片:头像.zip
2)将下载好的压缩包放到%FR_HOME%\webroot\help\picture 文件夹下进行解压。
2.2 新建内置数据集
新建一张普通报表,新建内置数据集,我们需要名字、头像、信息三个部分的内容,如下图所示:
相关信息如下表所示:
信息 | 头像 | 姓名 |
---|---|---|
姓名:夏梅 性别:女 年龄:18 | /webroot/help/picture/夏梅.png | 夏梅 |
姓名:孙红 性别:女 年龄:18 | /webroot/help/picture/孙红.png | 孙红 |
姓名:安娜 性别:女 年龄:18 | /webroot/help/picture/安娜.png | 安娜 |
姓名:汤姆 性别:男 年龄:18 | /webroot/help/picture/汤姆.png | 汤姆 |
姓名:艾克 性别:男 年龄:18 | /webroot/help/picture/艾克.png | 艾克 |
姓名:德玛 性别:男 年龄:18 | /webroot/help/picture/德玛.png | 德玛 |
注:也可以使用 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.3 设计模板
1)将内置数据集中的头像放在 A1 单元格并设置为「横向扩展」,信息放在 A2 单元格,姓名放在 A4 单元格。
2)在 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'>" + REPLACE(A2, " ","<br /><br />")+"</div>" + "</div></div>"
如下图所示:
3)设置 A3 单元格显示内容为「用 HTML 显示内容」,如下图所示:
4)设置 A4 的左父格为 A3 单元格,如下图所示:
5)将第一和第二行隐藏,并在「模板>报表分栏」中设置分栏,设置如下:
6)将 card.css 文件保存到项目路径 %FR_HOME%\webroot\help\css 下,在「模板>模板 Web 属性>引用 css」中引入该 CSS,如下图所示:
CSS 文件下载链接:card.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);
}
2.4 效果预览
2.4.1 PC 端
保存模板,点击分页预览,效果如 1.1 节所示。
2.4.2 移动端
不支持移动端。
3. 模板下载
点击下载模板:3D卡片翻转报表.cpt