|
- <template>
- <div class="tabs">
- <div class="tabs__buttons">
- <button
- @click="activeTab = 'Intro'"
- :class="activeTab === 'Intro' && 'active'"
- >
- Задача
- </button>
- <button
- @click="activeTab = 'Pots'"
- :class="activeTab === 'Pots' && 'active'"
- >
- Банки
- </button>
- <button
- @click="activeTab = 'Jams'"
- :class="activeTab === 'Jams' && 'active'"
- >
- Варенья
- </button>
- <button
- @click="activeTab = 'Result'"
- :class="activeTab === 'Result' && 'active'"
- >
- Разливаем
- </button>
- </div>
-
- <Intro v-if="activeTab === 'Intro'" class="tabs__body" />
- <Pots
- v-if="activeTab === 'Pots'"
- class="tabs__body"
- :pots="pots"
- @removePot="removePot"
- @addPot="addPot"
- />
- <Jams
- v-if="activeTab === 'Jams'"
- class="tabs__body"
- :jams="jams"
- @removeJam="removeJam"
- @addJam="addJam"
- />
- <Result
- v-if="activeTab === 'Result'"
- class="tabs__body"
- :propPots="pots"
- :propJams="jams"
- />
- </div>
- </template>
-
- <script>
- /* eslint-disable no-unused-vars */
- import Intro from "./components/Intro";
- import Pots from "./components/Pots";
- import Jams from "./components/Jams";
- import Result from "./components/Result";
-
- export default {
- name: "App",
- components: {
- Intro,
- Pots,
- Jams,
- Result,
- },
- data: function () {
- return {
- activeTab: "Intro",
- pots: [
- { id: "b1", vol: 3000 },
- { id: "b2", vol: 1000 },
- { id: "b3", vol: 100 },
- { id: "b4", vol: 850 },
- { id: "b5", vol: 500 },
- { id: "b6", vol: 750 },
- { id: "b7", vol: 500 },
- { id: "b8", vol: 450 },
- { id: "b9", vol: 450 },
- { id: "b10", vol: 300 },
- { id: "b11", vol: 350 },
- { id: "b12", vol: 100 },
- { id: "b13", vol: 150 },
- { id: "b14", vol: 100 },
- { id: "b15", vol: 50 },
- ],
- jams: [
- { id: "j1", vol: 3550 },
- { id: "j2", vol: 1700 },
- { id: "j3", vol: 2220 },
- ],
- };
- },
- methods: {
- removePot: function (index) {
- this.pots.splice(index, 1);
- },
- addPot: function (id, vol) {
- const f = this.pots.filter((p) => p.id === id);
- if (f.length > 0) {
- f[0].vol = +vol;
- } else {
- this.pots.push({ id, vol: +vol });
- }
- },
- removeJam: function (index) {
- this.jams.splice(index, 1);
- },
- addJam: function (id, vol) {
- const f = this.jams.filter((j) => j.id === id);
- if (f.length > 0) {
- f[0].vol = +vol;
- } else {
- this.jams.push({ id, vol: +vol });
- }
- },
- },
- };
- </script>
-
- <style lang="scss" scoped>
- #app {
- margin: 1rem;
- }
-
- .tabs {
- max-width: 1440px;
- margin: 60px auto;
- min-height: 75vh;
- display: flex;
- flex-direction: column;
-
- &__buttons {
- display: flex;
- flex-direction: row;
-
- button {
- appearance: none;
- border: none;
- padding: 1rem 2rem;
- font-size: 1.25rem;
- background: #ccc;
- border-bottom: 1px solid #ccc;
-
- &.active {
- background: #fff;
- border-bottom: 1px solid #fff;
- }
- }
- }
-
- &__body {
- background: #fff;
- flex-grow: 1;
- padding: 1rem 2rem;
- }
- }
- </style>
|