<!-- 会用用，不会用垃圾吧倒 -->

<!DOCTYPE html>
<html>
<header>
	<title>h5imgui</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="https://unpkg.com/element-ui@2.15.7/lib/index.js"></script>

	<style>
		* {
			padding: 0;
			margin: 0;
		}
		
		.ayimgui {
			position: fixed;
			width: 360px;
			height: 320px;
			top: calc(50% - 180px);
			left: calc(50% - 180px);
			z-index: 999;
			background-color: #F0F0F0;
			/* border-radius: 8px; */
			overflow: hidden;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
            background-image: url("https://livedoor.blogimg.jp/masami96/imgs/b/c/bce205c5.jpg");
		}

		.onlyTitle {
			height: 21px !important;
		}

		.ayimgui .aytitle {
			padding: 0 5px;
			font-size: 16px;
			background-color: #d1d1d1;
		}

		.ayimgui .aytitle .titleClose {
			position: absolute;
			top: 3px;
			right: 6px;
			color: #000;
		}

		.ayimgui .aytitle .titleClose:hover {
			color: #409EFF;
		}

		.ayimgui .aybody {
			padding: 15px;
			height: calc(100% - 21px - 15px - 15px);
			/*减去标题高度，减去上线padding高度*/
			overflow: auto;
			font-size: 14px;
		}


		.aytext {
			width: 100%;
			margin-bottom: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			color: #000;
		}

		.el-checkbox {
			margin: 0px;
		}

		.el-checkbox__label {
			color: #000;
		}

		.el-checkbox__input.is-checked+.el-checkbox__label {
			color: #409EFF;
		}

		.el-checkbox__inner {
			background-color: rgb(254, 254, 254);
			border: none;
		}


		.el-radio {
			margin: 8px 0;
		}

		.el-radio__label {
			color: #000;
		}

		.el-radio__input.is-checked+.el-radio__label {
			color: #409EFF;
		}

		.el-radio__inner {
			background-color: rgb(254, 254, 254);
			border: none;
		}

		.el-radio__input.is-checked .el-radio__inner {
			background-color: rgb(254, 254, 254);
		}

		.el-radio__inner::after {
			width: 10px;
			height: 10px;
			background-color: rgb(58, 138, 247);
		}

		.onlySelect {
			background-color: rgb(254, 254, 254);
			border: none;
		}

		.onlySelect .el-select-dropdown__item {
			color: #000;

		}

		.onlySelect .el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover:hover {
			background-color: transparent;
		}

		.onlySelect .popper__arrow {
			border-bottom-color: rgb(254, 254, 254) !important;
		}

		.onlySelect.el-popper[x-placement^=bottom] .popper__arrow::after {
			border-bottom-color: rgb(8254, 254, 254) !important;
		}

		.el-select {
			width: 100%;
		}

		.el-select .el-input {
			background-color: rgb(254, 254, 254);
		}

		.el-select .el-input__suffix {
			background-color: rgb(160, 196, 243);
			color: #000;
			right: 0;
            
		}

		.el-select .el-select__caret {
			color: #000;
		}

		.el-select .el-input__inner {
			background-color: transparent;
			border: none;
			color: #000;
		}

		.el-select .el-input .el-select__caret {
			color: #000;
		}

		/* 解决ios下拉需要点两次 */
		.el-scrollbar .el-scrollbar__bar {
			opacity: 1 !important;
		}

		.el-button {
			font-size: 14px;
			padding: 5px 10px;
			line-height: 14px;
			color: #62f50c;
			background-color: #B8D1F2;
            
		}

		.el-button:hover {
			opacity: .7;
			color: #f30606;
			background-color: #B8D1F2;
		}

		.el-button:focus,
		.el-button:hover {
			color: #f00909;
			background-color: #B8D1F2;
		}

		.aycollapse {
			width: 100%;
			font-size: 14px;
			background-color: rgb(6, 114, 238);
			color: #000;
		}

		.aytab {
			width: 100%;
			height: 20px;
			display: flex;
			border-bottom: 2px solid rgba(11, 88, 161, 0.048);
		}

		.aytab span {
			padding: 0 5px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgb(0, 3, 7);
			color: #068af7;
			font-size: 14px;
			font-weight: 500;
			margin-left: 10px;
			border-radius: 6px 6px 0 0;
			cursor: pointer;
		}
        button:active {
    background-color: #f00f0f;
    transform: translateY(2px);
        }

        span{
color: #070000;
font-family:sans-serif;
}


		.el-input input {
			background-color: rgb(254, 254, 254);
			border: none;
			border-radius: 0px;
		}
        button {
    width: 100%;
    height: 40px;
    color: rgb(248, 241, 241);
    background-color: #6d262649;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    border: none;
    border-radius: 3px;
    padding: 0 8px;
    margin: 5px 0;
    font-size:9px;
}


	</style>
</header>

<body>
	<div id="app">
		<div :class="!ifshow?'onlyTitle ayimgui':'ayimgui'" ref="menuMain">
			<div class="aytitle" @touchstart="titleTouchStart" @touchmove="titleTouchMove">
				<i :class="ifshow?'el-icon-caret-bottom':'el-icon-caret-top'" @click="ifshow = !ifshow"></i>
				<span class="title-age" style="margin-left:5px;">たべまる専用</span>
				<i class="titleClose el-icon el-icon-close" @click="closeimgui"></i>
			</div>
			<div class="aybody">
				<div class="aytab">
					<span @click="changeTab('メイン')"
						:style="{background:tabValue==='メイン'?'#B1CEF0':'#BDC7D0'}">メイン</span>
					<span @click="changeTab('ネタ')"
						:style="{background:tabValue==='ネタ'?'#B1CEF0':'#BDC7D0'}">ネタ</span>
                        <span @click="changeTab('その他')"
						:style="{background:tabValue==='その他'?'#B1CEF0':'#BDC7D0'}">その他</span>
				</div>

				<div v-show="tabValue==='メイン'">
					<div class="aytext">
                            <button onclick="F1()">フブヌダルク</
                            button>
                            <button onclick="F2()">暴走エンマ</
                            button>
                            <button onclick="F3()">不ドウマ</
                            button>
                            <button onclick="F4()">ワイポ君</
                            button>
                            <button onclick="F5()">シンジ</
                            button>
                            <button onclick="F6()">なつき</
                            button>
                            <button onclick="F9()">編成1</
                            button> 
                            </div>
                            </div>
				<div v-show="tabValue === 'ネタ'">
					<div class="aytext">
                        <button onclick="F7()">圧縮</
                            button>
                            <button onclick="F8()">ステ変更</
                            button>
                            </div>
                            </div> 
                            <div v-show="tabValue==='その他'">
                            <div class="aytext">
                           <span><img src="https://cdn.discordapp.com/attachments/1051831402410283100/1099291794870636664/IMG_1153.png" width="165" height="85" /> 
                            <div>
                            <font color="#fff">
                            </div>
				</div>
                <script>
function F8(){ //あいうえお
h5gg.clearResults();
h5gg.searchNumber('610', 'I32', '0x000000000', '0x300000000');
h5gg.searchNearby('33', 'I32', '0x1000');
h5gg.searchNearby('2101000', 'I32', '0x1000');
h5gg.searchNumber('2101000', 'I32', '0x000000000', '0x300000000');
h5gg.editAll('9001007', 'I32');
};
function F1(){ //フブヌダルク
h5gg.clearResults();
h5gg.searchNumber('9001204', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');

};

function F6(){ //フブヌダルク
h5gg.clearResults();
h5gg.searchNumber('2175000', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');
};


function F2(){ //暴走エンマ
h5gg.clearResults();
h5gg.searchNumber('9000589', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');
};

function F3(){ //不ドウマ
h5gg.clearResults();
h5gg.searchNumber('9001482', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');
};

function F4(){ //ワイポ君
h5gg.clearResults();
h5gg.searchNumber('9001492', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');
};

function F5(){ //
h5gg.clearResults();
h5gg.searchNumber('9001514', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');
};
function F7(){ //BDFHJ
h5gg.clearResults();
h5gg.searchNumber('0.09', 'F32', '0x00000000', '0x200000000');
h5gg.searchNearby('0.2', 'F32', '0x100');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('50', 'F32');
};

function F9(){ //フブヌダルク
h5gg.clearResults();
h5gg.searchNumber('9001204', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');
h5gg.clearResults();
h5gg.searchNumber('9000589', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');
h5gg.clearResults();
h5gg.searchNumber('9001482', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');
h5gg.clearResults();
h5gg.searchNumber('9001492', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');
h5gg.clearResults();
h5gg.searchNumber('9001514', 'I32', '0x00000000', '0x200000000');
h5gg.searchNearby('1', 'F32', '0x100');
h5gg.searchNumber('1', 'F32', '0x00000000', '0x200000000');
h5gg.editAll('5000', 'F32');
};




                    </script>
		</div>
	</div>
	<script>
		var app = new Vue({
			el: "#app",
			data() {
				return {
					ifshow: true,
					checked: false,
					radio: '1',
					activeSelect: '',
					selectOption: [{
						value: 'Option1',//实际内容
						label: 'golden'//显示文案
					}, {
						value: 'Option2',
						label: 'eggs'
					}],
					input: "",
					showOption: false,
					tabValue: "one",
				}
			},
			mounted() {
				this.setRect(360, 320);

				//设置不可拖动
				setWindowDrag(0, 0, 0, 0);
    
				var layout = function()
				{
					//window.orientation是设备握持方向, 不是屏幕显示方向
					if(window.lastorientation==window.orientation) return;
					window.lastorientation=window.orientation;
				
					//window.screen中的宽高不会随着屏幕旋转更新(只会在初始化的时候固定)
					if(Math.abs(window.orientation)==90) {
						//横屏模式
						setWindowRect(0,0,window.screen.height,window.screen.width);
					} else {
						//竖屏模式
						setWindowRect(0,0,window.screen.width,window.screen.height);
					}
				}
	
				layout(); //设置旋转屏幕时自动调整布局和画布
				window.addEventListener("orientationchange", layout, false);
				setWindowRect((window.screen.height - 400) / 2,(window.screen.width - 250) / 2,400,250);

setWindowDrag(0,0,400,30);
				setButtonAction(function () {
					var menu = document.querySelector("#app");
					if (menu.style.display == 'none') {
						menu.style.display = 'block';
						//显示菜单之后, 设置触控不可穿透悬浮窗口
						setWindowTouch(true);
					} else {
						menu.style.display = 'none';
						//隐藏菜单之后, 设置触控穿透悬浮窗口
						setWindowTouch(false);
					}
				});
			},
			methods: {
				setRect(w, h, x = -1, y = -1) {
					var boxW = w;
					var boxH = h;

					var ayMenu = this.$refs.menuMain;
					ayMenu.style.width = `${boxW}px`;
					ayMenu.style.height = `${boxH}px`;
					if (x == -1) ayMenu.style.left = `calc(50% - ${boxW / 2}px)`;
					if (y == -1) ayMenu.style.top = `calc(50% - ${boxH / 2}px)`;
				},
				titleTouchStart(event) {
					this.touchStartX = parseInt(event.touches[0].clientX);
					this.touchStartY = parseInt(event.touches[0].clientY);

					var ayMenu = this.$refs.menuMain;
					this.menuLastX = ayMenu.offsetLeft;
					this.menuLastY = ayMenu.offsetTop;
				},
				titleTouchMove(event) {
					event.preventDefault();
					var distanceX = event.touches[0].clientX - this.touchStartX;
					var distanceY = event.touches[0].clientY - this.touchStartY;

					var ayMenu = this.$refs.menuMain;
					ayMenu.style.left = this.menuLastX + distanceX + "px";
					ayMenu.style.top = this.menuLastY + distanceY + "px";
				},
				//切换导航栏
				changeTab(v) {
					this.tabValue = v;
				},
				closeimgui() {
					var menu = document.querySelector("#app");
					menu.style.display = 'none';
				}
			}
		});
	</script>
</body>

</html>