<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例页面</title>
<style>
button {
padding: 10px;
font-size: 16px;
}
.container{
display: flex;
flex-wrap: wrap;
position: relative;
width: 100vw;
}
img{
position: absolute;
height: 70vw;
width: 100vw;
}
span{
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<h1>示例页面</h1>
<div class="container">
<img src="https://gitee.com/harmonyos-cases/cases/raw/master/CommonAppDevelopment/feature/imageenableanalyzer/src/main/resources/base/media/imageenableanalyzer_cat2.JPG"/>
<span>
首次加载时h5页面从网络中加载图片和vue.global.js，并同时保存到本地内存/磁盘中。后续重新打开该页面，将从本地加载资源。
</span>
</div>
</div>
<script src="http://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const { createApp } = Vue;
createApp({
data() {
return {
title: '示例页面'
};
},
methods: {
}
}).mount('#app');
});
</script>
</body>
</html>