3D卡片翻转报表

编辑
  • 文档创建者:axing
  • 浏览次数:894次
  • 编辑次数:3次
  • 最近更新:jiangsr 于 2018-08-15
  • 1. 描述

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


    模板下载链接

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

    如下图:

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

    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

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