<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="Expires" content="0">
|
<meta http-equiv="Pragma" content="no-cache">
|
<meta http-equiv="Cache-control" content="no-cache">
|
<meta http-equiv="Cache" content="no-cache">
|
<title>缩放</title>
|
<link href="../../css/icon/iconfont.css?v=20230090601" rel="stylesheet">
|
<link href="../../js/vue/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
|
<link href="../../css/myelement.css?v=20230090601" rel="stylesheet">
|
<script src="../../js/vue/vue.js"></script>
|
<script src="../../js/vue/elementDefault.js"></script>
|
<script src="../../js/vue/element-ui/lib/index.js"></script>
|
<script src="../../js/myelement.js"></script>
|
</head>
|
|
<body style="margin: 0px;">
|
<div id="app">
|
<div class="h_box" :style="{width: box_width + 'px', height: box_height + 'px'}">
|
<iframe class="iframe_1" :style="{width: '100vw', height: '100vh', transform: 'scale(' + scale_width + ',' + scale_height + ')'}" frameborder="0" src="../../login.html"></iframe>
|
</div>
|
</div>
|
</body>
|
<style>
|
.h_box {
|
background-color: #d9f4ac;
|
}
|
.iframe_1 {
|
transform-origin: left top;
|
transform: scale(13%);
|
}
|
</style>
|
<script type="text/javascript">
|
vue = new Vue({
|
el: "#app",
|
data: {
|
box_width: 200,
|
box_height: 200,
|
scale_width: 0.15,
|
scale_height: 0.15,
|
|
|
},
|
|
created() {
|
var win_ratio = window.devicePixelRatio;
|
var screen_width = window.screen.width; //document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
|
var screen_height = window.screen.height; //document.documentElement.clientHeight;//获取当前分辨率下的可是区域宽度
|
|
var document_width = document.documentElement.clientWidth;
|
var document_height = document.documentElement.clientHeight;
|
var scale_width_ = this.box_width / document_width; // 分母——设计稿的分辨率
|
var scale_height_ = this.box_height / document_height; // 分母——设计稿的分辨率
|
var scale_wh_min = scale_width_ > scale_height_ ? scale_height_ : scale_width_; // 选择小的倍率
|
this.scale_width = scale_wh_min;
|
this.scale_height = scale_wh_min;
|
},
|
|
mounted() {
|
|
},
|
|
methods:{
|
|
}
|
});
|
</script>
|
</html>
|
