反饋已提交
網絡繁忙
在关于图片的报表设计中,行式报表、卡分栏报表都太传统并且不美观,希望实现图片和文字介绍相互转换的报表,如下:
模板下载链接
利用 HTML+CSS 的技术来实现。
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);}
注:移动端无法达到效果
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉