86 lines
2.1 KiB
Vue
Executable File
86 lines
2.1 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<q-header v-if="header && myvisible" elevated reveal>
|
|
<q-banner
|
|
inline-actions
|
|
rounded
|
|
dense
|
|
:class="
|
|
bgcolor +
|
|
` cursor-pointer q-mx-sm ` +
|
|
clcolor +
|
|
` ` +
|
|
myclass +
|
|
' ' +
|
|
getclass()
|
|
"
|
|
:style="`text-align: center; `"
|
|
@click="apri()"
|
|
>
|
|
<template v-slot:avatar>
|
|
<q-icon v-if="canopen && icon" :name="icon" color="white" />
|
|
</template>
|
|
<template v-slot:action>
|
|
<div class="cursor-pointer">
|
|
<q-icon v-if="canopen" :name="iconopen()" color="white" />
|
|
</div>
|
|
</template>
|
|
<span :class="{'mybanner': !small, 'mybanner-small': small, myclasstext: true}" :style="mystyle">{{
|
|
title
|
|
}}</span>
|
|
</q-banner>
|
|
</q-header>
|
|
<q-banner
|
|
v-else
|
|
inline-actions
|
|
rounded
|
|
dense
|
|
:class="
|
|
bgcolor +
|
|
` cursor-pointer q-my-sm ` +
|
|
clcolor +
|
|
` ` +
|
|
myclass +
|
|
' ' +
|
|
getclass()
|
|
"
|
|
:style="`text-align: center ; ${gradient}`"
|
|
@click="apri()"
|
|
>
|
|
<template v-slot:avatar>
|
|
<q-icon v-if="canopen && icon" :name="icon" color="white" />
|
|
</template>
|
|
<template v-slot:action>
|
|
<div class="cursor-pointer">
|
|
<q-icon v-if="canopen" :name="iconopen()" color="white" />
|
|
</div>
|
|
</template>
|
|
<span :class="{'mybanner': !small, 'mybanner-small': small, myclasstext: true}" :style="mystyle">{{
|
|
title
|
|
}}</span>
|
|
</q-banner>
|
|
|
|
<q-slide-transition>
|
|
<div>
|
|
<div v-if="myvisible" class="rounded-borders">
|
|
<slot></slot>
|
|
</div>
|
|
<div
|
|
v-if="imgpreview"
|
|
class="text-center cursor-pointer clBorderSteps"
|
|
style="opacity: 0.5"
|
|
@click="myvisible = !myvisible"
|
|
>
|
|
<q-img :src="imgpreview" class="img"></q-img>
|
|
</div>
|
|
</div>
|
|
</q-slide-transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CTitleBanner.ts">
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import './CTitleBanner.scss';
|
|
</style>
|