yangshi_cloudExbition/src/pages/scenePage/views/gui/vrcon.vue

<template>
  <div>
    <div id="help-dialog" class="nav-help-dialog" style="display: none;">
            <div class="nav-help-elements">
                <div class="help-tabs">
                    <div class="navigation-tab">
                        <span>{[{ HELP_NAVIGATION_TAB }]}</span>
                    </div>
                    <div class="more-help-tab">
                        <span>{[{ HELP_MORE_HELP_TAB }]}</span>
                    </div>
                </div>
            </div>
            <div id="navigation-help-wrapper">
                <div id="navigation-help" class="help outer">
                    <div class="interactions left">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <hr>
                        <div class="bottom-info"></div>
                        <img class="keyboard">
                    </div>
                    <div class="interactions middle">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <hr>
                        <div class="bottom-info"></div>
                        <img class="keyboard">
                    </div>
                    <div class="interactions right">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <hr>
                        <div class="bottom-info"></div>
                        <img class="keyboard">
                    </div>
                </div>
            </div>
            <div id="more-help-wrapper">
                <div id="more-help">
                    <div class="ui-instructions more-help-hlr">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-tour">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-dollhouse">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-inside">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-360">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-floors">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-tag">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-vr">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-fullscreen">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                    <div class="ui-instructions more-help-zoom">
                        <h2 class="top-info"></h2>
                        <img class="big-image">
                        <div class="bottom-info"></div>
                    </div>
                </div>
            </div>
            <div class="close">
                <a>
                    <i class="icon icon-close"></i>
                </a>
            </div>
        </div>
        <div id="vr-modal" class="vr-popup" style="display: none;">
            <div class="title">{[{ VR_VIEW_SPACE }]}</div>
            <div class="outer">
                <div class="inner">
                    <h3 class="vr-popup-title">
                        <span class="show-supported p1">
                            <p class="center">{[{ VR_SHOW_SUPPORTED }]}</p>
                        </span>
                        <span class="show-unsupported p1">{[{ VR_SHOW_UNSUPPORTED }]}</span>
                        <span class="show-ios p1">
                            {[{ VR_SHOW_IOS_1 }]}<br>
                            <br>
                        </span>
                        <span class="show-ios p2">{[{ VR_WHAT_YOU_NEED }]}</span>
                    </h3>
                    <div class="vr-images">
                        <div class="img-container cardboard first">
                            <img class="vr-sm-image first">
                            <div class="vr-img-caption first">
                                <span class="show-supported show-desktop show-ios p1">
                                    <b class="cardboard">{[{ VR_GOOGLE_CARDBOARD }]}</b>
                                    <b class="gearvr hidden">{[{ VR_SAMSUNG_GEAR_VR }]}</b>
                                </span>
                                <span class="show-supported show-unsupported show-desktop p2">{[{ VR_NEED_CARDBOARD
                                    }]}</span>
                                <span class="show-supported show-unsupported show-desktop p3">{[{ VR_NEED_SAMSUNG
                                    }]}</span>
                                <span class="show-ios p2">
                                    <b>{[{ VR_GOOGLE_CARDBOARD }]}</b>
                                    <br>
                                    <br>
                                </span>
                            </div>
                        </div>
                        <div class="front-close">
                            <span class="front-close-x">&#x2715;</span>
                        </div>
                        <div class="img-container gearvr second">
                            <img class="vr-sm-image second">
                            <div class="vr-img-caption second">
                                <span class="show-supported show-desktop p1">
                                    <b>{[{ VR_SAMSUNG_GEAR_VR }]}</b>
                                </span>
                                <span class="show-supported p2">
                                    <p>
                                        <b>{[{ VR_COMPATIBLE_ANDROID }]}</b>
                                    </p>
                                    <p>{[{ VR_ANDROID_DETAIL }]}</p>
                                </span>
                                <span class="show-desktop p2">
                                    <p>
                                        <b>{[{ VR_COMPATIBLE_IPHONES_1 }]}</b>
                                    </p>
                                    <p>{[{ VR_COMPATIBLE_IPHONES_2 }]}</p>
                                </span>
                                <span class="show-ios p2">
                                    <p>
                                        <b b id="vr-compatible-iphones-3">{[{ VR_COMPATIBLE_IPHONES_3 }]}</b>
                                    </p>
                                    <p id="vr-compatible-iphones-2b">{[{ VR_COMPATIBLE_IPHONES_2 }]}</p>
                                </span>
                                <span class="show-unsupported p1 p2">
                                    <p>
                                        <b>{[{ VR_COMPATIBLE_ANDROID }]}</b>
                                    </p>
                                    <p>{[{ VR_ANDROID_DETAIL }]}</p>
                                </span>
                                <span class="show-supported show-unsupported show-desktop p3">
                                    <p>
                                        <b>{[{ VR_COMPATIBLE_SAMSUNG }]}</b>
                                    </p>
                                    <p>{[{ VR_SAMSUNG_DETAIL }]}</p>
                                </span>
                            </div>
                        </div>
                        <div class="img-container third">
                            <img class="vr-sm-image third">
                            <div class="vr-img-caption third">
                                <span class="show-supported show-unsupported show-ios p2">
                                    <p>
                                        <b>{[{ VR_APP_FOR_CARDBOARD }]}</b>
                                    </p>
                                    <p>
                                        <a class="cardboardLink">{[{ VR_DOWNLOAD_HERE }]}</a>
                                    </p>
                                </span>
                                <span class="show-desktop p2">
                                    <p>
                                        <b>{[{ VR_ANDROID_DVICES }]}</b>
                                    </p>
                                    <p>{[{ VR_ANDROID_DETAIL }]}</p>
                                </span>
                                <span class="show-supported show-unsupported p3">
                                    <p>
                                        <b>{[{ VR_APP_FOR_SAMSUNG }]}</b>
                                    </p>
                                    <p>
                                        <a class="gearLink">{[{ VR_DOWNLOAD_HERE }]}</a>
                                    </p>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="vr-popup-body">
                        <span class="show-supported p1">
                            <p>
                                <i>{[{ VR_REQUIRE_HEADSET }]}</i>
                            </p>
                            <br>
                            <p>
                                <i>{[{ VR_REDIRECT_TO_STORE }]}</i>
                            </p>
                            <br>
                            <p class="improper-embed hidden">
                                <i>{[{ VR_IMPROPER_EMBED }]}</i>
                            </p>
                        </span>
                        <span class="show-ios p1">
                            <p>
                                <i id="show-ios-2">{[{ VR_SHOW_IOS_2 }]}</i>
                            </p>
                        </span>
                        <span class="show-desktop p1">
                            <p></p>
                            <h3>{[{ VR_OPEN_ANDROID_LINK }]}</h3>
                            <p>
                                <br>
                            </p>
                            <p class="logo-button">
                                <span class="modelLink"></span>
                            </p>
                            <br>
                            <br>
                            <p></p>
                            <h3>{[{ VR_ANDROID_OPTIONS }]}</h3>
                            <p></p>
                        </span>
                    </div>
                </div>
                <div class="vr-buttons">
                    <div class="next-button"></div>
                    <div class="prev-button">{[{ VR_PREVIOUS_CAPS }]}</div>
                    <div class="vr-arrows prev-container">
                        <!-- <img class="prev-arrow" src="images/arrow.png"> -->
                    </div>
                    <div class="vr-arrows next-container">
                        <!-- <img class="next-arrow" src="images/arrow.png"> -->
                    </div>
                </div>
                <div class="vr-page"></div>
                <div class="close">
                    <a>
                        <i class="icon icon-close"></i>
                    </a>
                </div>
            </div>
        </div>
  </div>
</template>