mainview
This commit is contained in:
YouWei Zhao
parent
9a276883da
commit
11ed345321
@ -1,3 +1,9 @@
|
||||
html{
|
||||
font-size: 4vmin;
|
||||
}
|
||||
input, textarea, select, button {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
html, body, div, img {
|
||||
margin: 0;
|
||||
@ -19,17 +25,16 @@ body {
|
||||
}
|
||||
|
||||
#left, #mid, #right {
|
||||
border-radius: 2px;
|
||||
/* border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */
|
||||
background-color: #F5F5F5;
|
||||
width: 100vmin;
|
||||
height: 100vmin;
|
||||
}
|
||||
|
||||
#left {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 10px;
|
||||
width: 435px;
|
||||
height: 630px;
|
||||
}
|
||||
|
||||
#editArea {
|
||||
@ -83,18 +88,18 @@ body {
|
||||
|
||||
#mid {
|
||||
position: absolute;
|
||||
left: 448px;
|
||||
top: 10px;
|
||||
width: 440px;
|
||||
height: 630px;
|
||||
}
|
||||
|
||||
.map {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 21px;
|
||||
width: 416px;
|
||||
height: 416px;
|
||||
left: 4vmin;
|
||||
top: 4vmin;
|
||||
width: 96vmin;
|
||||
height: 96vmin;
|
||||
}
|
||||
.map canvas{
|
||||
width: 96vmin;
|
||||
height: 96vmin;
|
||||
}
|
||||
|
||||
#mid .tools {
|
||||
@ -193,10 +198,6 @@ body {
|
||||
|
||||
#right {
|
||||
position: absolute;
|
||||
left: 900px;
|
||||
top: 10px;
|
||||
width: 440px;
|
||||
height: 630px;
|
||||
/* border: 1px solid rgb(238, 13, 13); */
|
||||
}
|
||||
|
||||
@ -280,22 +281,23 @@ table.col td {
|
||||
}
|
||||
|
||||
#mapColMark {
|
||||
top: 2px;
|
||||
left: 19px;
|
||||
width: 418px;
|
||||
height: 16px;
|
||||
font-size: 13px;
|
||||
top: 0;
|
||||
left: 4vmin;
|
||||
width: 96vmin;
|
||||
height: 4vmin;
|
||||
font-size: 3vmin;
|
||||
}
|
||||
|
||||
|
||||
#mapColMark td {
|
||||
width: 29px;
|
||||
}
|
||||
|
||||
#mapColMark td:hover .colBlock {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
height: 416px;
|
||||
width: 32px;
|
||||
top: 4vmin;
|
||||
height: 96vmin;
|
||||
width: 7.38vmin;
|
||||
z-index: 100;
|
||||
background-color: rgba(38, 166, 154, .5);
|
||||
}
|
||||
@ -320,11 +322,11 @@ table.row td {
|
||||
}
|
||||
|
||||
#mapRowMark {
|
||||
top: 1px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 416px;
|
||||
font-size: 12px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4vmin;
|
||||
height: 96vmin;
|
||||
font-size: 3vmin;
|
||||
}
|
||||
|
||||
#mapRowMark td {
|
||||
@ -333,9 +335,9 @@ table.row td {
|
||||
|
||||
#mapRowMark td:hover .rowBlock {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
height: 32px;
|
||||
width: 416px;
|
||||
left: 4vmin;
|
||||
height: 7.38vmin;
|
||||
width: 96vmin;
|
||||
z-index: 100;
|
||||
background-color: rgba(76, 34, 27, .5);
|
||||
}
|
||||
@ -388,3 +390,11 @@ table.row td {
|
||||
[v-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#down{
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:100vmin;
|
||||
bottom: 0;
|
||||
width: 100vmin;
|
||||
}
|
||||
@ -1,7 +1,10 @@
|
||||
.leftTab {
|
||||
border-radius: 2px;
|
||||
/* border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); */
|
||||
background-color: #F5F5F5;
|
||||
width: 100vmin;
|
||||
height: 100vmin;
|
||||
}
|
||||
|
||||
.leftTab {
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
if(innerWidth>innerHeight){
|
||||
alert('宽大于高的设备请使用正常版本的editor')
|
||||
if(innerWidth>innerHeight){ //pic:1242*2208 | chrome info:1340*2380
|
||||
alert('宽大于高的设备请使用正常版本的editor, 点击确定跳转')
|
||||
window.location='./editor.html'
|
||||
}
|
||||
</script>
|
||||
@ -214,55 +214,9 @@
|
||||
<canvas class='gameCanvas' id='efg' width='416' height='416'></canvas>
|
||||
<canvas class='egameCanvas' id='eui' width='416' height='416' style='z-index:100'></canvas>
|
||||
</div>
|
||||
<div class="tools">
|
||||
<div id="tip" v-cloak>
|
||||
<div v-if="isSelectedBlock">
|
||||
<p v-if="isClearBlock" class="infoText">当前选择为清除块，可擦除地图上块</p>
|
||||
<div v-else>
|
||||
<p v-if="hasId">图块编号：<span class="infoText">{{ infos['idnum'] }}</span></p>
|
||||
<p v-if="hasId">图块ID：<span class="infoText">{{ infos['id'] }}</span></p>
|
||||
<p v-else class="warnText">该图块无对应的数字或ID存在，请先前往icons.js和maps.js中进行定义！</p>
|
||||
<p>图块所在素材：<span class="infoText">{{ infos['images'] + (isAutotile ? '( '+infos['id']+' )' : '') }}</span>
|
||||
</p>
|
||||
<p>图块索引：<span class="infoText">{{ infos['y'] }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p v-if="whichShow" v-bind:class="[ (whichShow%2) ? 'warnText' : 'successText']">{{ mapMsg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<select id="editModeSelect">
|
||||
<option value="map">地图编辑</option>
|
||||
<option value="loc">地图选点</option>
|
||||
<option value="emenyitem">图块属性</option>
|
||||
<option value="floor">楼层属性</option>
|
||||
<option value="tower">全塔属性</option>
|
||||
<option value="functions">脚本编辑</option>
|
||||
<option value="appendpic">追加素材</option>
|
||||
</select>
|
||||
<br><br><br><br>
|
||||
<select id="selectFloor"></select>
|
||||
<input type="button" value="保存地图" id='saveFloor'/>
|
||||
<!-- -->
|
||||
<div id="bgSelect" v-cloak style="display:none">
|
||||
<span>当前地板: </span>
|
||||
<select v-model="selectedBg">
|
||||
<option disabled value="">请选择地板</option>
|
||||
<option v-for="bg in bgs" v-bind:value="bg">
|
||||
{{ bg }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="selectpng">
|
||||
<input class='input' id='pin' v-model="imgname" placeholder="请输入自定义背景文件名"/>
|
||||
<input class='btn' type="button" value="确定" v-on:click="updatebg"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="right">
|
||||
<div id="right" style="z-index:-1;opacity: 0;">
|
||||
<div id="iconLib">
|
||||
<canvas class='egameCanvas' id='edata' width='416' height='416' style='z-index:0'></canvas>
|
||||
<div id="selectBox">
|
||||
@ -270,6 +224,57 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="down">
|
||||
<div style="margin:1rem">
|
||||
<div class="tools">
|
||||
<div id="tip" v-cloak>
|
||||
<div v-if="isSelectedBlock">
|
||||
<p v-if="isClearBlock" class="infoText">当前选择为清除块，可擦除地图上块</p>
|
||||
<div v-else>
|
||||
<p v-if="hasId">图块编号：<span class="infoText">{{ infos['idnum'] }}</span></p>
|
||||
<p v-if="hasId">图块ID：<span class="infoText">{{ infos['id'] }}</span></p>
|
||||
<p v-else class="warnText">该图块无对应的数字或ID存在，请先前往icons.js和maps.js中进行定义！</p>
|
||||
<p>图块所在素材：<span class="infoText">{{ infos['images'] + (isAutotile ? '( '+infos['id']+' )' : '') }}</span>
|
||||
</p>
|
||||
<p>图块索引：<span class="infoText">{{ infos['y'] }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p v-if="whichShow" v-bind:class="[ (whichShow%2) ? 'warnText' : 'successText']">{{ mapMsg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="button" value="数据区"/><input type="button" value="地图区"/><input type="button" value="素材库"/>
|
||||
<select id="editModeSelect">
|
||||
<option value="map">地图编辑</option>
|
||||
<option value="loc">地图选点</option>
|
||||
<option value="emenyitem">图块属性</option>
|
||||
<option value="floor">楼层属性</option>
|
||||
<option value="tower">全塔属性</option>
|
||||
<option value="functions">脚本编辑</option>
|
||||
<option value="appendpic">追加素材</option>
|
||||
</select>
|
||||
<br><br>
|
||||
<select id="selectFloor"></select>
|
||||
<input type="button" value="保存地图" id='saveFloor'/>
|
||||
<!-- -->
|
||||
<div id="bgSelect" v-cloak style="display:none">
|
||||
<span>当前地板: </span>
|
||||
<select v-model="selectedBg">
|
||||
<option disabled value="">请选择地板</option>
|
||||
<option v-for="bg in bgs" v-bind:value="bg">
|
||||
{{ bg }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="selectpng">
|
||||
<input class='input' id='pin' v-model="imgname" placeholder="请输入自定义背景文件名"/>
|
||||
<input class='btn' type="button" value="确定" v-on:click="updatebg"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="menuDiv">
|
||||
<div id="midMenu" style="display:none">
|
||||
<div id='chooseThis' class="menuitem"><div class="menuitem-content">选中此点</div></div>
|
||||
@ -387,14 +392,14 @@
|
||||
(function () {
|
||||
var colNum = ' ';
|
||||
for (var i = 0; i < 13; i++) {
|
||||
var tpl = '<td>' + i + '<div class="colBlock" style="left:' + (i * 32 + 1) + 'px;"></div></td>';
|
||||
var tpl = '<td>' + (' '+i).slice(-2).replace(' ',' ') + '<div class="colBlock" style="left:' + (i * 96/13 ) + 'vmin;"></div></td>';
|
||||
colNum += tpl;
|
||||
}
|
||||
arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
|
||||
mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
|
||||
var rowNum = ' ';
|
||||
for (var i = 0; i < 13; i++) {
|
||||
var tpl = '<tr><td>' + i + '<div class="rowBlock" style="top:' + (i * 32 + 1) + 'px;"></div></td></tr>';
|
||||
var tpl = '<tr><td>' + (' '+i).slice(-2).replace(' ',' ') + '<div class="rowBlock" style="top:' + (i * 96/13 ) + 'vmin;"></div></td></tr>';
|
||||
rowNum += tpl;
|
||||
}
|
||||
arrRowMark.innerHTML = rowNum;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user