3D卡片翻转报表

编辑
  • 文档创建者:axing
  • 浏览次数:1893次
  • 编辑次数:4次
  • 最近更新:Kevin-s 于 2019-06-20
  • 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

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