vue3-scene-web/src/views/home/components/menu/index.tsx

import { defineComponent } from 'vue';
import './index.scss';

export default defineComponent({
  name: 'HomeMenu',
  emits: ['showCover'],
  render() {
    return (
      <div class="pinBottom-container">
        <div class="pinBottom left">
          <div class="viewContainer">
            <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
              <a>
                <img class="w52" src="./images/play.png" data-original-title="播放" />
              </a>
            </div>
            <div id="play" class="ui-icon" data-original-title="播放">
              <a>
                <img class="w52" src="./images/play.png" />
              </a>
            </div>
            <div id="pause" class="ui-icon" style="display: none;">
              <a>
                <img class="w52" title="暂停" src="./images/pause.png" />
              </a>
            </div>
            <div id="next" class="next desktop-only ui-icon wide" style="display: none;">
              <a>
                <i title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
              </a>
            </div>
            <div id="gui-modes-map" class="ui-icon double active">
              <div data-original-title="导览" id="pullTab" title="">
                <img class="icon icon-inside" src="./images/auto.png" title="导览" />
              </div>
              <div data-original-title="热点列表" id="hotList" title="" style="display: none">
                <img class="icon icon-inside" src="./images/hotlist.png" title="热点列表" />
              </div>
              <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
                <img class="icon icon-inside" src="./images/inside.png" title="全景漫游" />
              </div>
              <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="" class="">
                <img class="icon icon-inside" src="./images/dollhouse.png" title="迷你模型" />
              </div>
              <div data-original-title="俯视图" id="gui-modes-floorplan" title="">
                <img class="icon icon-inside" src="./images/floor.png" title="俯视图" />
              </div>
              <div data-original-title="VR" id="vr" title="" style="display: none;">
                <img class="icon icon-inside" src="./images/VR.png" title="VR" />
              </div>
              <div
                data-original-title="消除外壳"
                id="gui-remove-face"
                title=""
                style="display: none; float: left;"
              >
                <img class="icon icon-inside" src="./images/face.jpg" />
              </div>
            </div>
          </div>
        </div>
        <div class="pinBottom right hideTarget">
          <div class="rightViewContainer clearfix">
            <div class="ui-icon wide" onClick={() => this.$emit('showCover')}>
              <a>
                <img class="w52" src="./images/icon-home@2x-min.png" />
              </a>
            </div>
            <div id="volume" class="ui-icon wide">
              <a>
                <img class="w52" src="./images/Volume btn_on.png" />
              </a>
            </div>
            <div id="vr" class="ui-icon wide hidden" style="display: none;">
              <a>
                <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
              </a>
            </div>
            <div id="sharing" class="ui-icon wide hidden" style="display: none;">
              <a>
                <i title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
              </a>
            </div>
            <div
              id="gui-fullscreen"
              class="ui-icon wide"
              data-placement="top"
              title="{[{ VIEW_FULLSCREEN }]}"
            >
              <a>
                <img class="w52" src="./images/icon-fangda@2x-min.png" draggable={false} />
              </a>
            </div>
            <div
              id="gui-fullscreen-exit"
              class="ui-icon wide"
              data-placement="top"
              title="{[{ EXIT_FULLSCREEN }]}"
              style="display: none;"
            >
              <a>
                <img class="w52" src="./images/icon-suoxiao@2x-min.png" draggable={false} />
              </a>
            </div>
            <div class="pull-right terms terms2">
              <a>{'{[{ TERMS }]}'}</a>
            </div>
          </div>
        </div>
      </div>
    );
  },
});