79 lines
1.6 KiB
Vue
79 lines
1.6 KiB
Vue
<script>
|
|
|
|
import { mapActions, mapState } from 'pinia'
|
|
// import { SearchStore } from '@/stores/search'
|
|
|
|
import SvgIcon from '@jamescoyle/vue-icon';
|
|
import { mdiMagnify } from '@mdi/js';
|
|
|
|
export default {
|
|
props: [],
|
|
data(){
|
|
return {
|
|
magnify_path: mdiMagnify
|
|
}
|
|
},
|
|
computed: {
|
|
// ...mapState(SearchStore,['statics'])
|
|
},
|
|
created () {
|
|
console.log("search created");
|
|
// this.loadStatics()
|
|
},
|
|
methods: {
|
|
// ...mapActions(SearchStore,['loadStatics']),
|
|
},
|
|
components: {
|
|
SvgIcon
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div id="search-block">
|
|
<router-link :to="{ name: 'search' }">
|
|
<svg-icon type="mdi" :path="magnify_path"></svg-icon>
|
|
<span>recherche</span>
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// $pad: 0.75em;
|
|
// #search-block{
|
|
// position: relative;
|
|
|
|
// span{
|
|
// display: inline-block;
|
|
// @include btn();
|
|
// }
|
|
// form{
|
|
// background-color: #fff;
|
|
// border-radius: 5px;
|
|
// padding: 0 $pad;
|
|
// position: absolute;
|
|
// bottom: 110%;
|
|
// left: -$pad;
|
|
// >*{
|
|
// margin: 0 0 0.5em 0;
|
|
// }
|
|
// overflow: hidden;
|
|
// max-height:1px;
|
|
// opacity: 0;
|
|
// $delay: 0.5s;
|
|
// transition: opacity 0.3s ease-out $delay,max-height 0.3s ease-out $delay, padding 0.3s ease-out $delay + 0.1s;
|
|
// }
|
|
// &:hover{
|
|
// form{
|
|
// box-shadow: 0 0 5px $btns_back;
|
|
// padding: $pad;
|
|
// max-height: 100px;
|
|
// opacity: 1;
|
|
// transition: opacity 0.3s ease-out,max-height 0.3s ease-out, padding 0.3s ease-out 0.1s;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
</style>
|