105 lines
3.8 KiB
HTML
105 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" href="/logo.png" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>智慧社区</title>
|
|
<script>
|
|
var FitConfig = {
|
|
mode:{
|
|
'mobile':{
|
|
ref:750,
|
|
maxWidth:750
|
|
},
|
|
'pc':{
|
|
ref:1920
|
|
}
|
|
},
|
|
rate:0,
|
|
width:0,
|
|
radix:100,
|
|
height:0,
|
|
_subscriber:undefined,
|
|
subscriber:function (name,options) {
|
|
if (this._subscriber === undefined) this._subscriber = {};
|
|
this._subscriber[name] = options;
|
|
return this._triggerSubscriber(name);
|
|
},
|
|
unsubscribe:function (name) {
|
|
if (this._subscriber === undefined) return false;
|
|
delete this._subscriber[name];
|
|
},
|
|
_triggerSubscriber(name){
|
|
|
|
if (this._subscriber === undefined) return;
|
|
var triggers;
|
|
var mode = this.getMode();
|
|
if (name) {
|
|
triggers = [name];
|
|
} else {
|
|
triggers = Object.keys(this._subscriber);
|
|
}
|
|
|
|
for (var i=0;i<triggers.length;i++) {
|
|
if (this._subscriber[triggers[i]]) {
|
|
if (typeof this._subscriber[triggers[i]] === 'function') {
|
|
this._subscriber[triggers[i]](this,{
|
|
value:(mode.radix || this.radix) * mode.realRate + 'px'
|
|
});
|
|
} else if (typeof this._subscriber[triggers[i]] === 'object') {
|
|
for (var j=0;j<this._subscriber[triggers[i]].els.length;j++) {
|
|
this._subscriber[triggers[i]].els[j].style.fontSize = (this._subscriber[triggers[i]].radix || mode.radix || this.radix) * mode[this._subscriber[triggers[i]].rateKey || 'realRate'] + 'px';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
getMode:function () {
|
|
return this.width <= this.mode.mobile.ref ? this.mode.mobile : this.mode.pc;
|
|
},
|
|
unit:function (value) {
|
|
return this.rate * value;
|
|
},
|
|
trigger:function () {
|
|
this.width = window.innerWidth;
|
|
this.height = window.innerHeight;
|
|
var mode = this.getMode();
|
|
mode.width = this.width;
|
|
mode.realRate = this.realRate = mode.width / mode.ref;
|
|
if (mode.minWidth) {
|
|
mode.width = Math.max(mode.width,mode.minWidth);
|
|
}
|
|
if (mode.maxWidth) {
|
|
mode.width = Math.min(mode.width,mode.maxWidth);
|
|
}
|
|
mode.rate = this.rate = mode.width / mode.ref;
|
|
document.documentElement.style.fontSize = (mode.radix || this.radix) * mode.rate + 'px';
|
|
return this._triggerSubscriber();
|
|
},
|
|
init:function (){
|
|
this.trigger();
|
|
document.onblur = function(){
|
|
window.scroll(0,0);
|
|
document.scrollIntoView && document.scrollIntoView();
|
|
};
|
|
var that = this;
|
|
return window.addEventListener('resize',function () {
|
|
return that.trigger();
|
|
})
|
|
}
|
|
};
|
|
FitConfig.init();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="app" style="width: 100%;height: 100%"></div>
|
|
<div id="trigger_detail_modal"></div>
|
|
<div id="selector-detail-modal"></div>
|
|
<script>
|
|
window.global = window.globalThis || (window.globalThis = window);
|
|
</script>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|