96 lines
2.8 KiB
HTML
96 lines
2.8 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
body {
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.cloud-promote-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
opacity: .9;
|
|
}
|
|
|
|
.cloud-promote-bar-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 8px;
|
|
}
|
|
|
|
.cloud-promote-bar-right span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 2px;
|
|
/* border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 4px; */
|
|
position: relative;
|
|
margin-right: 0;
|
|
/* margin-right: 5px; */
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cloud-promote-bar-right span img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
<!-- <script>
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const color = urlParams.get('color');
|
|
console.log(window.location);
|
|
document.write(`
|
|
<style>
|
|
body {
|
|
color: ${color};
|
|
}
|
|
</style>
|
|
`)
|
|
</script> -->
|
|
<script>
|
|
window.addEventListener('message', (event) => {
|
|
if (event.data.action === 'init') {
|
|
const color = event.data.payload.color;
|
|
const cloudData = event.data.payload.cloud;
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
body {
|
|
color: ${color};
|
|
}
|
|
`
|
|
document.head.appendChild(style);
|
|
|
|
const promoteItemTemplate = function (item) {
|
|
return `<span key="${item.name}" style="border-color: ${item.color}" onclick="window.uxpHost.postMessage({action: 'open', payload: {url: '${item.url}'}})">
|
|
<img src="${item.icon}" onerror="this.style.display = 'none'" />${item.name}
|
|
</span>
|
|
`
|
|
}
|
|
const cloudPromoteBarRight = document.getElementById('cloud-promote-bar-right');
|
|
cloudPromoteBarRight.innerHTML = cloudData.map(promoteItemTemplate).join('');
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="cloud-promote-bar">
|
|
<span class="cloud-promote-bar-left">云端推荐</span>
|
|
<span class="cloud-promote-bar-right" id="cloud-promote-bar-right">
|
|
|
|
</span>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |