|
@@ -1,7 +1,7 @@
|
|
|
<script>
|
|
|
|
|
|
import { mapActions, mapState } from 'pinia'
|
|
|
-import { StaticsStore } from '@/stores/statics'
|
|
|
+// import { SearchStore } from '@/stores/search'
|
|
|
|
|
|
import SvgIcon from '@jamescoyle/vue-icon';
|
|
|
import { mdiMagnify } from '@mdi/js';
|
|
@@ -14,17 +14,14 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapState(StaticsStore,['statics'])
|
|
|
+ // ...mapState(SearchStore,['statics'])
|
|
|
},
|
|
|
created () {
|
|
|
console.log("search created");
|
|
|
// this.loadStatics()
|
|
|
},
|
|
|
methods: {
|
|
|
- ...mapActions(StaticsStore,['loadStatics']),
|
|
|
- onSubmitSearch (event) {
|
|
|
- console.log("onSubmitSearch", event);
|
|
|
- }
|
|
|
+ // ...mapActions(SearchStore,['loadStatics']),
|
|
|
},
|
|
|
components: {
|
|
|
SvgIcon
|
|
@@ -35,52 +32,48 @@ export default {
|
|
|
|
|
|
<template>
|
|
|
<div id="search-block">
|
|
|
- <label for="">
|
|
|
+ <router-link :to="{ name: 'search' }">
|
|
|
<svg-icon type="mdi" :path="magnify_path"></svg-icon>
|
|
|
<span>recherche</span>
|
|
|
- </label>
|
|
|
- <form action="" @submit.prevent="onSubmitSearch">
|
|
|
- <input type="text">
|
|
|
- <input type="submit" value="rechercher">
|
|
|
- </form>
|
|
|
-
|
|
|
+ </router-link>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- $pad: 0.75em;
|
|
|
- #search-block{
|
|
|
- position: relative;
|
|
|
+ // $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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // 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>
|