80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<template>
|
|
<slide-template>
|
|
<div ref="container" class="w100 flex no-wrap q-pt-lg">
|
|
<q-resize-observer @resize="updateWidth" />
|
|
<div class="w100 flex justify-center" v-if="containerWidth > 800">
|
|
<q-card
|
|
v-for="(item, idx) in problems"
|
|
:key="idx"
|
|
class="q-pa-md q-ma-sm"
|
|
>
|
|
<problem-section-item
|
|
:icon="item.icon"
|
|
:title="item.title"
|
|
:description="item.description"
|
|
style="overflow: hidden;"
|
|
:style="{ width: cardWidth + 'px' }"
|
|
/>
|
|
</q-card>
|
|
</div>
|
|
|
|
<q-carousel
|
|
v-else
|
|
v-model="slide"
|
|
transition-prev="scale"
|
|
transition-next="scale"
|
|
swipeable
|
|
animated
|
|
navigation
|
|
padding
|
|
height="300px"
|
|
control-color="primary"
|
|
class="w100"
|
|
>
|
|
<q-carousel-slide
|
|
v-for="(item, idx) in problems"
|
|
:key="idx"
|
|
:name="item.title"
|
|
class="flex justify-center q-pa-none q-ma-none"
|
|
>
|
|
<problem-section-item
|
|
:icon="item.icon"
|
|
:title="item.title"
|
|
:description="item.description"
|
|
style="overflow: hidden; min-width: 100px; max-width: 200px;"
|
|
/>
|
|
</q-carousel-slide>
|
|
</q-carousel>
|
|
</div>
|
|
</slide-template>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import ProblemSectionItem from 'components/ProblemSectionItem.vue'
|
|
import SlideTemplate from 'components/SlideTemplate.vue'
|
|
|
|
const problems = [
|
|
{ id: 1, icon: 'mdi-account-group-outline', title: 'problem__address_book', description: 'problem__address_book_description' },
|
|
{ id: 2, icon: 'mdi-clipboard-outline', title: 'problem__tasks', description: 'problem__tasks_description' },
|
|
{ id: 3, icon: 'mdi-calendar-month', title: 'problem__meeting', description: 'problem__meeting_description' },
|
|
{ id: 4, icon: 'mdi-folder-open-outline', title: 'problem__files', description: 'problem__files_description' },
|
|
{ id: 5, icon: 'mdi-lock-outline', title: 'problem__privacy', description: 'problem__privacy_description' }
|
|
]
|
|
|
|
const containerWidth = ref(0)
|
|
const cardWidth = ref(175)
|
|
|
|
const updateWidth = ({ width }) => {
|
|
containerWidth.value = width
|
|
cardWidth.value = width < 1200 ? 250 : 175
|
|
}
|
|
|
|
const slide = ref(problems[0].title)
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|