123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- <template>
- <main class="tab-pane">
- <div class="row">
- <div class="col-xs-12 col-sm-4">
- <!-- <div class="info-text mode-select">
- Menu
- </div> -->
- <div class="row mode-select-container">
- <div class="col-sm-12 col-sm-offset-0">
- <div class="col-xs-12 col-sm-6">
- <div
- class="choice"
- :class="{ active: menuIndex === 0 }"
- @click="menuIndex = 0"
- >
- <div class="card card-checkboxes card-hover-effect">
- <i class="fa fa-bar-chart"></i>
- <p>Stats</p>
- </div>
- </div>
- </div>
- <div class="col-xs-12 col-sm-6">
- <div
- class="choice"
- :class="{ active: menuIndex === 1 }"
- @click="menuIndex = 1"
- >
- <div class="card card-checkboxes card-hover-effect">
- <i class="fa fa-trophy"></i>
- <p>Score</p>
- </div>
- </div>
- </div>
- <div class="col-xs-12 col-sm-6">
- <div
- class="choice"
- :class="{ active: menuIndex === 2 }"
- @click="menuIndex = 2"
- >
- <div class="card card-checkboxes card-hover-effect">
- <i class="fa fa-sitemap"></i>
- <p>Mapper</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-12 col-sm-8">
- <AnalysisStats v-if="menuIndex === 0" />
- <AnalysisScore v-if="menuIndex === 1" />
- <AnalysisMapper v-if="menuIndex === 2" />
- </div>
- </div>
- </main>
- </template>
- <script>
- export default {
- data: () => {
- return {
- menuIndex: null,
- }
- },
- created: function () {
- /* Set menu index. */
- this.menuIndex = 0
- },
- }
- </script>
- <style scoped>
- .mode-select, .menu-title {
- font-size: 2.0em;
- }
- .mode-select-container {
- margin-top: -30px;
- }
- .choice.active {
- box-shadow: 0px 12px 17px -7px rgba(0, 0, 0, 0.3);
- -webkit-transform: translateY(-10px);
- -moz-transform: translateY(-10px);
- -o-transition: translateY(-10px);
- -ms-transform: translateY(-10px);
- transform: translateY(-10px);
- }
- .choice.active:hover {
- box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);
- -webkit-transform: translateY(0px);
- -moz-transform: translateY(0px);
- -o-transition: translateY(0px);
- -ms-transform: translateY(0px);
- transform: translateY(0px);
- }
- </style>
|