<template> <div class="search-section mt-5"> <div class="hamfahmi-title mt-3"> <img :src="logo" alt="هم فهمی" class="img-img" /> <h2>هم فهمی - زیست بوم پژوهشگران</h2> </div> <form class="ms-search-form px-3" role="search"> <div class="input-group mb-5" dir="ltr"> <div class="input-group-prepend"> <button @click.prevent="searchNavigateList" dir="rtl" class="btn btn-primary" type="button" id="button-addon2" > جستجو <span class="tavasi tavasi-Component-198--1"></span> </button> </div> <input v-focus class="form-control" ref="search-input" dir="rtl" v-model.trim="searchText" type="search" id="search-query" placeholder="جستجو در متن، قوانین و مقررات ..." name="search-query" size="60" @keyup.enter="searchNavigateList" /> </div> </form> </div> </template> <script> import { mapState, mapActions } from "pinia"; import { useCommonStore } from "~/stores/commonStore"; import { useStorage } from "@vueuse/core"; export default { beforeMount() { // this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL); }, mounted() { let localStoageSearchSchema = useStorage("searchSchema",undefined).value; if (localStoageSearchSchema) { let searchSchema = JSON.parse(localStoageSearchSchema); this.schemasSetter(searchSchema); this.searchType = this.schemasGetter[0]; } // else this.getSchemas(); // this.logo = logoPhoto(); // logoPhoto().then((img) => { // this.logo = img; // }); }, data() { return { searchText: "", searchType: "", logo:'' }; }, computed: { ...mapState(useCommonStore, [ "getPanelStatus", "getRefreshForm", "organNameGetter", "activeSchemaGetter", "schemasGetter", "isSidebarCollapsed", ]), }, methods: { ...mapActions(useCommonStore, ["schemasSetter", "SELECTED_LISTS"]), searchNavigateList() { // if (this.searchText == undefined || this.searchText == "") return; this.$router.push({ name: "search", query: { q: this.searchText ?? undefined, key: this.searchType.key, }, }); }, }, }; </script> <style lang="scss" scoped> .hamfahmi-title { text-align: center; } .ms-search-form { .input-group { background-color: #fff; margin-top: 3em; margin-bottom: 3.5em; overflow: hidden; // border-radius: 5px; border-radius: 0.35em; box-shadow: 0 0.4688rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.4063rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.5313rem rgba(4, 9, 20, 0.03), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03); &-prepend { align-items: center; padding: 0 0.5em; } } .form-control { height: 4.3em; height: 4em; // border-radius: 5px; border-radius: 0.35em; border: 0; &::-webkit-input-placeholder { color: #b7b7b7; // font-family: var(--font-family); // font-size: 14px; font-size: 1rem; font-weight: 400; // line-height: 22px; line-height: 1.57; letter-spacing: 0em; } &:-ms-input-placeholder { color: #b7b7b7; // font-family: var(--font-family); // font-size: 14px; font-size: 1rem; font-weight: 400; // line-height: 22px; line-height: 1.57; letter-spacing: 0em; } &::-ms-input-placeholder { color: #b7b7b7; // font-family: var(--font-family); // font-size: 14px; font-size: 1rem; font-weight: 400; // line-height: 22px; line-height: 1.57; letter-spacing: 0em; } &::placeholder { color: #b7b7b7; // font-family: var(--font-family); // font-size: 14px; font-size: 1rem; font-weight: 400; // line-height: 22px; line-height: 1.57; letter-spacing: 0em; } } .btn { display: flex; align-items: center; // background: linear-gradient(180deg, #199C9C 0%, #106262 100%); // width: 106px; // height: 45px; height: 3.21em; // border-radius: 5px; border-radius: 0.35em; // font-family: var(--font-family); // font-size: 14px; font-size: 1rem; font-weight: 700; // line-height: 22px; line-height: 1.57; letter-spacing: 0em; // color: #000000; text-align: center; .tavasi { margin-right: 1em; // width: 20.04px; // width: 1.42em; // height: 20px; // height: 1.42em; color: inherit; } } } </style>