css:
.container { display: flex; flex-direction: column; width: 100%; height: 1200px; } swiper { width: 100%; height: 350px; } swiper image { width: 100%; height: 350px; } marquee { margin-top: 20px; margin-bottom: 20px; width: 100%; } image-animator { width: 100%; height: 550px; }js: （采用动静分离，详见下文）
import fetch from \'@system.fetch\'; export default { data: { dataUrl: "http://milkytea.free.idcfengye.com/text/newyear.json", swipeImg: [], text: "", animatorImg: [] }, onInit() { fetch.fetch({ url: this.dataUrl, responseType: \'json\', success: res => { let data = JSON.parse(res.data); let imgUrl = data.imgUrl; let swipeImg = data.swipeImg; let animatorImg = data.animatorImg; for (let i in swipeImg) { swipeImg[i] = imgUrl + swipeImg[i]; } for (let i in animatorImg) { animatorImg[i].src = imgUrl + animatorImg[i].src; } this.swipeImg = swipeImg; this.text = data.text; this.animatorImg = animatorImg; } }) } }4、nginx动静分离
在这个模块中，我并没有将图片放在项目工程目录中，甚至图片的url都没有写在js文件中。一是现在app功能越发强大，占用的存储空间也越来越大，如果将静态资源全部存放在工程目录中加大了空间的占用量。二是如果图片定期更换，或者服务器地址更换，写在代码里不便于维护。
nginx服务器可以实现动静分离，将本地路径作为静态资源服务器。基本配置如下，在nginx.conf中添加一个server：
server{ listen 8500; server_name localhost; location / { root /Users/liuyufeng/image/; autoindex on; } location ~ ^/(images|text|video|audio)/ { root /Users/liuyufeng/image/; autoindex on; access_log on; expires 30d; } }将本地文件夹"/Users/liuyufeng/image"和localhost:8500绑定，并通过正则匹配"images","text","video","audio"四个子目录，分别存放图片、文本、视频、音频。重启nginx后，访问localhost:8500：
本地目录就成为了静态资源服务器，不得不感叹nginx的强大。
在鸿蒙项目中，总不能请求localhost，因此再搭配内网穿透，将本地服务器和域名绑定就可以了。
刚才模块中的js代码，就是通过请求静态资源中的newyear.json文件获取图片路径以及文字数据，实现了动静分离。
newyear.json
{ "imgUrl": "http://milkytea.free.idcfengye.com/images/newyear/", "swipeImg": ["swiper1.jpg", "swiper2.jpg", "swiper3.jpg"], "animatorImg": [ { "src": "newyear1.jpeg", "width": 500, "height": 500 }, { "src": "newyear2.jpeg" }, { "src": "newyear3.jpeg" }, { "src": "newyear4.jpeg", "width": 400, "height": 400, "top": 100, "left": 100 } ], "text": "新春佳节，快乐假期，祝你放假快乐，阖家幸福，新春大吉! 福气高，乐逍遥，生活日日美，收入月月高。" }作者：Chris.