-
-
方菁 小试身手Lv3
发表于2018-8-10 11:05
楼主
一、页面效果图
二、门户恢复流程
1、创建门户
备份文件：
PCDEMODHY.zip
(2.79 MB, 下载次数: )
三、导航页门户说明
复制代码
由于浏览器ie8/9不支持swiper控件，因此分别为ie8/9和其他浏览器制作了两种导航页面。
ie8/9导航页效果图：
其他浏览器效果图：
二、门户恢复流程
1、创建门户
在【门户管理】中创建新门户，选择从空白页面创建一个id为“PCDEMODHY”的门户：
2、恢复门户备份
将如下的zip文件在【文件】导航树根节点进行上传，zip压缩包无需解压。
备份文件：
PCDEMODHY.zip
(2.79 MB, 下载次数: )
1、 退出按钮
退出按钮使用门户组件【链接】实现，在右侧的属性面板中设置了背景图片和事件脚本：
a） 背景图片的地址要正确
b） 鼠标单击：弹出退出的提示窗口
c） 鼠标悬停：更换为高亮样式的背景图片
d） 鼠标移出：高亮样式的背景图片还原为默认样式的背景图片
2、 前端脚本文件
除了退出按钮通过门户组件实现外，其他的效果都是通过前端脚本文件实现的。
在属性面板中加入如下脚本实现html文件的加载，脚本中包含了一个判断条件：当浏览器为ie8/9时加载“html_ie9”文件夹中的脚本，否则加载“html”文件夹中的脚本。
- insertBaiduTuiguang();
- if(isie9||isie8){
- $p.$("iframe1").setUrl("../../vfs/root/portals/pages/esp/PCDEMODHY/html_ie9/index.html?v=5");
- }else{
- $p.$("iframe1").setUrl("../../vfs/root/portals/pages/esp/PCDEMODHY/html/index.html?v=5");
- }
“html_ie9”文件夹:
这个页面主要是通过css样式来实现：
1）大背景图、中间主要内容部分通过position: fixed定位让内容水平垂直居中。
2）中间8个六边形图片通过position: absolute定位让其分布在合适的位置。
3）鼠标放在8个六边形上的特效是通过css3动画（animation、transform、transition）实现。
4）内容自适应屏幕主要是通过媒体查询【@media(min-width: 1680px)】、transform【transform:scale(0.9,0.9)】、定位来实现。
“html”文件夹：
这个页面主要是通过js+css样式来实现：
1） 页面上轮播切换效果是swiper.min.js的横向的循环切换图片插件实现的：
a）点击这个导航图片内容会对应的切换到中间位置，用到了Pagination（分页器）组件
b） 中间图片内容分布用到了Callbacks （回调函数）
c） 还有用到Autoplay(自动切换)组件、Loop (环路)、slidesPerView及其他
2）鼠标放在8个六边形上的特效是通过css3动画（animation、transform、transition）实现。
3）内容自适应屏幕主要是通过媒体查询【@media(min-width: 1680px)】、transform【transform:scale(0.9,0.9)】、定位来实现。
最近看过此主题的会员
19个回答
想晴的天 发表于 2018-8-16 14:57
运行什么效果都没有啊， 结构树里也什么都没有啊
请检查一下备份包是否上传成功，并且脚本中的地址是否与您上传的资源的地址是否一致。注意下图中的红色部分的代码要根据您本地资源路径来进行调整。
本帖最后由 chenxing 于 2019-5-15 18:23 编辑
这是什么原因导致的，路径跟上传的
本帖最后由 chenxing 于 2019-5-15 18:25 编辑
chenxing 发表于 2019-5-15 18:22
这是什么原因导致的，路径跟上传的
业绩统计(20190409_172039).zip
(2.49 KB, 下载次数: )
