57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<video-background
|
|
src="/video/bg-video.mp4"
|
|
style=" height: 100vh;"
|
|
>
|
|
|
|
<div class="container-fluid pt-3">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-3 text-center text-sm-start">
|
|
<nuxt-link class="navbar-brand" to="/">
|
|
<img src="/svglogo.svg" height="35" class="img " alt="imae">
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="col-12 text-center justify-content-center col-lg-9 pt-1">
|
|
<div class="progress mx-auto ms-lg-3 mt-2 " style="width: 70%;height: 12px">
|
|
<div class="progress-bar bar" role="progressbar" :style="{ 'width': count + '%' }" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<NuxtPage page-key="child" />
|
|
|
|
|
|
</div>
|
|
</video-background>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import {useCounterStore} from '@/stores/counter';
|
|
import {mapState,mapActions} from "pinia";
|
|
export default {
|
|
computed:{...mapState(useCounterStore,['count'])},
|
|
methods:{
|
|
...mapActions(useCounterStore,['increment']),
|
|
...mapActions(useCounterStore,['decrement'])
|
|
},
|
|
data(){
|
|
return{
|
|
bar_val:25,
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style >
|
|
.bar{
|
|
background-color: #e9c046 !important;
|
|
}
|
|
.checklabel{
|
|
background-color: white ;
|
|
width: 150px;
|
|
}
|
|
</style> |