反馈已提交

网络繁忙

3D卡片翻转报表

  • 文档创建者:axing
  • 编辑次数:7次
  • 最近更新:Catqiu 于 2022-03-22
  • 1. 概述

    1.1 预期效果

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

    动画1.gif

    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>"

    如下图所示:

    2.png

    3)设置 A3 单元格显示内容为「用 HTML 显示内容」,如下图所示:

    2.png

    4)设置 A4 的左父格为 A3 单元格,如下图所示:

    2.png

    5)将第一和第二行隐藏,并在「模板>报表分栏」中设置分栏,设置如下:

    2.png

    6)将 card.css 文件保存到项目路径 %FR_HOME%\webroot\help\css 下,在「模板>模板 Web 属性>引用 css」中引入该 CSS,如下图所示:

    2.pngCSS 文件下载链接: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


    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭