b23_zuma/packages/UserGuide/static/template/default/index.html

<div id="app">
    <div class="step-1" v-if="currentStep==1">
        <h1>{{ titleI18n }}</h1>
        <h3><ui-hint class="top" style="margin-top: -15px; font-size: 16px;">{{ step1I18n }}</ui-hint></h3>
        <br/>

        <div class="node-and-text" v-for="(index, item) in guideArray">
            <div class="title-and-operate-buttons">
                <div class="title-and-alias">
                    <h2>{{ guideI18n }} {{index+1}}</h2>
                    &nbsp;
                    <div style="padding-top: 15px;">
                        <ui-button v-if="!item.isAliased" @click="showAliasInput(index)" type="icon" style="width: 28px;"><img :src="editImg" width="16" height="16" style="margin-left: -10px;"></ui-button>
                        <div v-else class="alias-input-close">
                            <ui-input placeholder="set alias" style="width: 60px;" :value="item.alias" @change="setAlias($event.target.value, index)"></ui-input>
                            <ui-button @click="hideAliasInput(index)" type="icon" style="width: 10%;"><img :src="closeImg" width="16" height="16" style="margin-left: -10px;">></ui-button>
                        </div>
                    </div>
                </div>
                <div class="operate-buttons">
                    <ui-button @click="moveUp(index)">{{ moveUpI18n }}</ui-button>
                    &nbsp;
                    <ui-button @click="moveDown(index)">{{ moveDownI18n }}</ui-button>
                    &nbsp;
                    <ui-button @click="deleteGuide(index)">{{ deleteI18n }}</ui-button>
                </div>
            </div>
            <div class="touch-and-key">
                <ui-select :value="item.guideType" @change="onGuideTypeSelectionChange($event.target.value, index)" style=" width: 25%; margin-bottom: 10px;">
                    <option value="touch">触摸引导</option>
                    <option value="key">按键引导</option>
                </ui-select>
                &nbsp;<ui-select :value="item.uiType" @change="onUiTypeChange($event.target.value, index)" style=" width: 25%; margin-bottom: 10px;">
                <option value="1">战斗引导</option>
                <option value="2">建筑引导</option>
                <option value="101">功能开启引导</option>
            </ui-select>
                <span v-if="item.guideType=='touch'" style="width: 100%; margin-bottom: 10px;">
                    <span v-if="!item.isDynamic" style="width: 100%;" class="touch-node-btn">
                        <ui-node  @change="onNodeSelectionChange($event.target.value, index)" droppable="cc.Node" :value="item.nodeUUID" style="width: 90%;" placeholder="select node"></ui-node>
                        <ui-button @click="switchBetweenStaticAndDynamic(index)" type="icon" style="width: 10%;"><img :src="editImg" width="16" height="16" style="margin-left: -10px;"></ui-button>
                    </span>
                    <span v-else style="width: 100%;" class="touch-node-btn">
                        <ui-input placeholder="input node's path, e.g. Canvas/Demo/Btn" style="width: 95%;" :value="item.path" @change="onDynamicNodePathChange($event.target.value, index)"></ui-input>
                        <ui-button @click="switchBetweenStaticAndDynamic(index)" type="icon" style="width: 10%;"><img :src="selectImg" width="16" height="16" style="margin-left: -10px;"></ui-button>
                    </span>
                </span>
                <span v-else style="width: 75%; margin-bottom: 10px;" class="key-input-btn">
                    <ui-input placeholder="set key" style="width: 90%;" :value="item.key" @change="onKeyChange($event.target.value, index)"></ui-input>
                    <ui-button @click="showKeyHelp" type="icon" style="width: 10%;"><img :src="helpImg" width="16" height="16" style="margin-left: -10px;"></ui-button>
                </span>
            </div>
            <div v-if="guideTextType=='zh'" style="width: 100%;height: 30px">
                <ui-text-area @change="onGuideTextChange($event.target.value, index)" placeholder="set guide text (zh)" style="margin-bottom: 20px; width: 100%;" :value="item.guideText"></ui-text-area>
                <div class="textarea-btn">
                    <ui-button @click="changeGuideTextType" style="padding-left: 4px; padding-right: 4px;" class="transparent">→ en</ui-button>
                </div>
            </div>
            <div v-if="guideTextType=='en'" style="width: 100%;height: 30px">
                <ui-text-area @change="onGuideTextChange($event.target.value, index)" placeholder="set guide text (en)" style="margin-bottom: 20px; width: 100%;" :value="item.guideEnText"></ui-text-area>
                <div class="textarea-btn">
                    <ui-button @click="changeGuideTextType" style="padding-left: 4px; padding-right: 4px;" class="transparent">→ zh</ui-button>
                </div>
            </div>
            <div class="touch-node-btn" style="width: 100%;height: 40px; margin-top: 20px">
                arrowX <ui-input placeholder="arrowX" style="width: 50px;" :value="item.arrowPos[0]" @change="onArrowPosXChange($event.target.value, index)"></ui-input>
                arrowY <ui-input placeholder="arrowY" style="width: 50px;" :value="item.arrowPos[1]" @change="onArrowPosYChange($event.target.value, index)"></ui-input>
                arrowRotation <ui-input placeholder="arrowRotation" style="width: 50px;" :value="item.arrowRotation" @change="onArrowRotationChange($event.target.value, index)"></ui-input>
                textBgX <ui-input placeholder="textBgX" style="width: 50px;" :value="item.textBgPos[0]" @change="onTextBgPosXChange($event.target.value, index)"></ui-input>
                textBgY <ui-input placeholder="textBgY" style="width: 50px;" :value="item.textBgPos[1]" @change="onTextBgPosYChange($event.target.value, index)"></ui-input>
                arrowType <ui-input placeholder="textBgY" style="width: 50px;" :value="item.arrowType" @change="onArrowTypeChange($event.target.value, index)"></ui-input>
                <ui-checkbox :value="item.showTextBg" @change="onShowTextBgChange($event.target.value, index)">showTextBg</ui-checkbox>
                <ui-checkbox :value="item.showRole" @change="onShowRoleChange($event.target.value, index)">showRole</ui-checkbox>
                <ui-checkbox :value="item.prevent" @change="onPreventChange($event.target.value, index)">prevent</ui-checkbox>
            </div>
        </div>

        <div class="step-1-buttons">
            <div class="last-guide" @click="useLastGuide">
                <img :src="prevplayImg" width="11" height="11">&nbsp;{{ useLastGuideI18n }}
            </div>
            <div>
                <ui-button @click="addGuide"><img :src="addImg" width="16" height="16">&nbsp;{{ addI18n }}</ui-button>
                &nbsp;
                <ui-button @click="confirmStep1"><img :src="confirmImg" width="16" height="16">&nbsp;{{ confirmI18n }}</ui-button>
            </div>
        </div>
    </div>
    <div class="step-2" v-if="currentStep==2">
        <h1>{{ titleI18n }}</h1>
        <h3><ui-hint class="top" style="margin-top: -15px; font-size: 16px;">{{ step2I18n }}</ui-hint></h3>
        <br/>
        <div class="section-list">
            <ui-section style="width: 100%;" expand>
                <div class="header">{{ guideSignI18n }}</div>
                <div class="section">
                    <div v-for="(index, item) in guideSignPicArray" class="img-checkbox">
                        <img :src="item.path" height="60"/>
                        <ui-checkbox @confirm="onGuideSignCheckboxConfirm(index)" :value="item.value">{{item.name}}</ui-checkbox>
                    </div>
                </div>
            </ui-section>
            <ui-section style="width: 100%;" expand>
                <div class="header">{{ textBgI18n }}</div>
                <div class="section">
                    <div v-for="(index, item) in textBgPicArray" class="img-checkbox">
                        <img :src="item.path" height="60" width="120" />
                        <ui-checkbox @confirm="onTextBgCheckboxConfirm(index)" :value="item.value">{{item.name}}</ui-checkbox>
                    </div>
                </div>
            </ui-section>
        </div>
        <div class="step-2-buttons">
            <ui-button @click="back"><img :src="backImg" width="16" height="16">&nbsp;{{ goBackI18n }}</ui-button>
            &nbsp;&nbsp;
            <ui-button @click="confirmStep2"><img :src="confirmImg" width="16" height="16">&nbsp;{{ confirmI18n }}</ui-button>
        </div>
    </div>
</div>