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 {
|
html, body, div, img {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -19,17 +25,16 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#left, #mid, #right {
|
#left, #mid, #right {
|
||||||
border-radius: 2px;
|
/* border-radius: 2px;
|
||||||
box-sizing: border-box;
|
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 {
|
#left {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 5px;
|
|
||||||
top: 10px;
|
|
||||||
width: 435px;
|
|
||||||
height: 630px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#editArea {
|
#editArea {
|
||||||
@ -83,18 +88,18 @@ body {
|
|||||||
|
|
||||||
#mid {
|
#mid {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 448px;
|
|
||||||
top: 10px;
|
|
||||||
width: 440px;
|
|
||||||
height: 630px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.map {
|
.map {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 20px;
|
left: 4vmin;
|
||||||
top: 21px;
|
top: 4vmin;
|
||||||
width: 416px;
|
width: 96vmin;
|
||||||
height: 416px;
|
height: 96vmin;
|
||||||
|
}
|
||||||
|
.map canvas{
|
||||||
|
width: 96vmin;
|
||||||
|
height: 96vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mid .tools {
|
#mid .tools {
|
||||||
@ -193,10 +198,6 @@ body {
|
|||||||
|
|
||||||
#right {
|
#right {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 900px;
|
|
||||||
top: 10px;
|
|
||||||
width: 440px;
|
|
||||||
height: 630px;
|
|
||||||
/* border: 1px solid rgb(238, 13, 13); */
|
/* border: 1px solid rgb(238, 13, 13); */
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -280,22 +281,23 @@ table.col td {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#mapColMark {
|
#mapColMark {
|
||||||
top: 2px;
|
top: 0;
|
||||||
left: 19px;
|
left: 4vmin;
|
||||||
width: 418px;
|
width: 96vmin;
|
||||||
height: 16px;
|
height: 4vmin;
|
||||||
font-size: 13px;
|
font-size: 3vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#mapColMark td {
|
#mapColMark td {
|
||||||
width: 29px;
|
width: 29px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mapColMark td:hover .colBlock {
|
#mapColMark td:hover .colBlock {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 19px;
|
top: 4vmin;
|
||||||
height: 416px;
|
height: 96vmin;
|
||||||
width: 32px;
|
width: 7.38vmin;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
background-color: rgba(38, 166, 154, .5);
|
background-color: rgba(38, 166, 154, .5);
|
||||||
}
|
}
|
||||||
@ -320,11 +322,11 @@ table.row td {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#mapRowMark {
|
#mapRowMark {
|
||||||
top: 1px;
|
top: 0;
|
||||||
left: 2px;
|
left: 0;
|
||||||
width: 16px;
|
width: 4vmin;
|
||||||
height: 416px;
|
height: 96vmin;
|
||||||
font-size: 12px;
|
font-size: 3vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mapRowMark td {
|
#mapRowMark td {
|
||||||
@ -333,9 +335,9 @@ table.row td {
|
|||||||
|
|
||||||
#mapRowMark td:hover .rowBlock {
|
#mapRowMark td:hover .rowBlock {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 18px;
|
left: 4vmin;
|
||||||
height: 32px;
|
height: 7.38vmin;
|
||||||
width: 416px;
|
width: 96vmin;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
background-color: rgba(76, 34, 27, .5);
|
background-color: rgba(76, 34, 27, .5);
|
||||||
}
|
}
|
||||||
@ -388,3 +390,11 @@ table.row td {
|
|||||||
[v-cloak] {
|
[v-cloak] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#down{
|
||||||
|
position: absolute;
|
||||||
|
left:0;
|
||||||
|
top:100vmin;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100vmin;
|
||||||
|
}
|
||||||
@ -1,7 +1,10 @@
|
|||||||
.leftTab {
|
.leftTab {
|
||||||
border-radius: 2px;
|
/* border-radius: 2px;
|
||||||
box-sizing: border-box;
|
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 {
|
.leftTab {
|
||||||
|
|||||||
@ -8,8 +8,8 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script>
|
<script>
|
||||||
if(innerWidth>innerHeight){
|
if(innerWidth>innerHeight){ //pic:1242*2208 | chrome info:1340*2380
|
||||||
alert('宽大于高的设备请使用正常版本的editor')
|
alert('宽大于高的设备请使用正常版本的editor, 点击确定跳转')
|
||||||
window.location='./editor.html'
|
window.location='./editor.html'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -214,55 +214,9 @@
|
|||||||
<canvas class='gameCanvas' id='efg' width='416' height='416'></canvas>
|
<canvas class='gameCanvas' id='efg' width='416' height='416'></canvas>
|
||||||
<canvas class='egameCanvas' id='eui' width='416' height='416' style='z-index:100'></canvas>
|
<canvas class='egameCanvas' id='eui' width='416' height='416' style='z-index:100'></canvas>
|
||||||
</div>
|
</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>
|
||||||
<div id="right">
|
<div id="right" style="z-index:-1;opacity: 0;">
|
||||||
<div id="iconLib">
|
<div id="iconLib">
|
||||||
<canvas class='egameCanvas' id='edata' width='416' height='416' style='z-index:0'></canvas>
|
<canvas class='egameCanvas' id='edata' width='416' height='416' style='z-index:0'></canvas>
|
||||||
<div id="selectBox">
|
<div id="selectBox">
|
||||||
@ -270,6 +224,57 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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="menuDiv">
|
||||||
<div id="midMenu" style="display:none">
|
<div id="midMenu" style="display:none">
|
||||||
<div id='chooseThis' class="menuitem"><div class="menuitem-content">选中此点</div></div>
|
<div id='chooseThis' class="menuitem"><div class="menuitem-content">选中此点</div></div>
|
||||||
@ -387,14 +392,14 @@
|
|||||||
(function () {
|
(function () {
|
||||||
var colNum = ' ';
|
var colNum = ' ';
|
||||||
for (var i = 0; i < 13; i++) {
|
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;
|
colNum += tpl;
|
||||||
}
|
}
|
||||||
arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
|
arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
|
||||||
mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
|
mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
|
||||||
var rowNum = ' ';
|
var rowNum = ' ';
|
||||||
for (var i = 0; i < 13; i++) {
|
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;
|
rowNum += tpl;
|
||||||
}
|
}
|
||||||
arrRowMark.innerHTML = rowNum;
|
arrRowMark.innerHTML = rowNum;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user