374 lines
11 KiB
Vue
374 lines
11 KiB
Vue
<template>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div
|
|
class="col-1 col-md-4 col-xl-3"
|
|
style="height: calc(100dvh - 4em)"
|
|
v-if="showListRight"
|
|
>
|
|
<div class="container-fluid border-start list-right">
|
|
<div class="row border-bottom" style="height: 3em">
|
|
<div
|
|
class="d-flex justify-content-between w-100 align-items-center"
|
|
>
|
|
<div class="d-flex me-3">
|
|
<div class="header-icon" @click="back()" title="بازگشت">
|
|
<svg class="icon icon-Component-71--1">
|
|
<use xlink:href="#icon-Component-71--1"></use>
|
|
</svg>
|
|
</div>
|
|
<div class="me-2">
|
|
<p style="font-size: 1.3rem; margin: auto">
|
|
{{ PageName?.label }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="button-hiden">
|
|
<button class="d-md-none" @click="showListRight = false">
|
|
<svg class="icon icon-Component-294--1">
|
|
<use xlink:href="#icon-Component-294--1"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="list-help">
|
|
<div
|
|
class="col-12"
|
|
style="cursor: pointer"
|
|
v-for="(item, index) in listHelp"
|
|
:key="item._id"
|
|
>
|
|
<p
|
|
:id="item._id"
|
|
:ref="item._id"
|
|
class="item_help"
|
|
:class="{ active: isActive(item) }"
|
|
@click.prevent="showItemHelp(item)"
|
|
>
|
|
{{ item._source?.meta?.title }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-md-8 col-xl-9" style="height: calc(100dvh - 4em)">
|
|
<div class="container-fluid">
|
|
<div class="information_help">
|
|
<div class="row">
|
|
<button
|
|
v-if="showListRight == false"
|
|
class="btn"
|
|
style="z-index: 9"
|
|
@click="showListRight = true"
|
|
>
|
|
<svg class="icon icon-Component-158--5">
|
|
<use xlink:href="#icon-Component-158--5"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="row">
|
|
<div class="d-flex">
|
|
<label style="color: #00a09c" for="">عنوان سوال : </label>
|
|
<p class="me-1">{{ itemHelp?._source?.meta?.title }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label style="color: #00a09c" for=""> توضیح کوتاه : </label>
|
|
<p>{{ itemHelp?._source?.meta?.description }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div>
|
|
<label style="color: #00a09c" for=""> توضیح مفصل : </label>
|
|
<p v-html="itemHelp?._source?.value"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions } from "pinia";
|
|
|
|
import helpApi from "~/apis/helpApi.js";
|
|
import { Value } from "../../../assets/common/vendors/pdfjs/pdf.worker";
|
|
|
|
export default {
|
|
beforeMount() {
|
|
this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
|
|
},
|
|
mounted() {
|
|
this.getRequestList();
|
|
this.HandlerPageName();
|
|
this.routeKey = this.$route.params?.key;
|
|
this.routeTitle = this.$route.params?.title;
|
|
this.routeId = this.$route.params?.id;
|
|
},
|
|
data() {
|
|
return {
|
|
searchResult: "",
|
|
httpService: undefined,
|
|
statusFavoriteMenu: false,
|
|
texts: ` لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به متن می‌باشد آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند تا مرحله طراحی و صفحه‌بندی را به پایان برند. `,
|
|
listHelp: [],
|
|
itemHelp: "",
|
|
itemId: "",
|
|
PageName: "",
|
|
routeKey: "",
|
|
routeTitle: "",
|
|
routeId: "",
|
|
latestId: "",
|
|
showListRight: true,
|
|
activeItem: null,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(useSearchStore, ["searchSchemaGetter"]),
|
|
},
|
|
methods: {
|
|
...mapActions(["checkPermissions"]),
|
|
// ...mapActions("search", ["searchSchemaSetter"]),
|
|
asyncFind() {},
|
|
forwardmessageUrl() {},
|
|
resetFoundUsers() {},
|
|
HandlerPageName() {
|
|
let list = this.searchSchemaGetter;
|
|
list.forEach((element) => {
|
|
if (element.key == this.$route.params.key) {
|
|
this.PageName = element;
|
|
}
|
|
});
|
|
},
|
|
back() {
|
|
this.$router.push({ name: "help" });
|
|
},
|
|
getRequestList() {
|
|
let url = helpApi.default.list;
|
|
url = url.replace("{{key_option}}", [this.$route.params.key]);
|
|
this.httpService
|
|
.getRequest(url)
|
|
.then((response) => {
|
|
// console.log("🚀 ~ .then ~ response:", response);
|
|
this.listHelp = response.hits.hits;
|
|
if (this.$route.params?.id) {
|
|
let id = this.$route.params?.id;
|
|
this.listHelp.forEach((element) => {
|
|
if (element._id == id) {
|
|
this.itemHelp = element;
|
|
}
|
|
});
|
|
} else {
|
|
this.itemHelp = response.hits.hits[0];
|
|
this.pushForRoter(this.itemHelp._id);
|
|
}
|
|
})
|
|
|
|
},
|
|
showItemHelp(item) {
|
|
this.itemHelp = item;
|
|
// this.itemId = item._id;
|
|
if (window?.innerWidth < 767.98) this.showListRight = false;
|
|
|
|
// if (this.latestId !== "") {
|
|
// let oldId = document.getElementById(this.latestId);
|
|
// oldId.classList.remove("active");
|
|
// let newId = document.getElementById(item._id);
|
|
// newId.classList.add("active");
|
|
// } else {
|
|
// const newId = document.getElementById(item._id);
|
|
// newId.classList.add("active");
|
|
// }
|
|
this.latestId = item._id;
|
|
|
|
this.pushForRoter(item._id);
|
|
},
|
|
isActive(item) {
|
|
return this.itemHelp === item;
|
|
},
|
|
pushForRoter(id) {
|
|
const routeData = this.$router.resolve({
|
|
name: "helpShow",
|
|
params: {
|
|
key: this.routeKey,
|
|
title: this.routeTitle,
|
|
id: id,
|
|
},
|
|
});
|
|
history.pushState({}, document.title, routeData.href);
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.active{
|
|
background-color: #d0cfcf !important;
|
|
}
|
|
.button-hiden {
|
|
button {
|
|
font-size: 10px;
|
|
background-color: #fff;
|
|
border-radius: 0px;
|
|
border: none;
|
|
}
|
|
}
|
|
.information_help {
|
|
height: calc(100dvh - 5em);
|
|
margin-top: 1em;
|
|
overflow: auto;
|
|
padding: 0 2em;
|
|
}
|
|
.header-icon {
|
|
cursor: pointer;
|
|
}
|
|
.list-help {
|
|
width: 100%;
|
|
height: calc(100dvh - 9em);
|
|
margin-top: 1em;
|
|
overflow: auto;
|
|
}
|
|
.item_help {
|
|
padding: 2px 6px;
|
|
margin-bottom: 0.4em;
|
|
font-weight: normal;
|
|
font-size: 15px;
|
|
text-align: right;
|
|
color: #24282b;
|
|
border: 1px solid rgba(0, 0, 0, 0);
|
|
text-decoration: none;
|
|
// max-width: 19em;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
background-color: #f6f6f6;
|
|
&:hover {
|
|
background-color: #d0cfcf;
|
|
}
|
|
}
|
|
// .Picture-help {
|
|
// border-radius: 0.5em;
|
|
// box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
// }
|
|
// #myImg {
|
|
// border-radius: 0.5em;
|
|
// cursor: pointer;
|
|
// transition: 0.3s;
|
|
// }
|
|
|
|
// #myImg:hover {
|
|
// opacity: 0.7;
|
|
// }
|
|
|
|
// /* The Modal (background) */
|
|
// .modal {
|
|
// display: none; /* Hidden by default */
|
|
// position: fixed; /* Stay in place */
|
|
// z-index: 1; /* Sit on top */
|
|
// padding-top: 100px; /* Location of the box */
|
|
// left: 0;
|
|
// top: 0;
|
|
// width: 100%; /* Full width */
|
|
// height: 100%; /* Full height */
|
|
|
|
// background-color: rgb(0, 0, 0); /* Fallback color */
|
|
// background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
|
|
// }
|
|
|
|
// /* Modal Content (image) */
|
|
// .modal-content {
|
|
// margin: auto;
|
|
// display: block;
|
|
// width: 93%;
|
|
// max-width: 1554px;
|
|
// border-radius: 0.5em !important;
|
|
// }
|
|
|
|
// /* Caption of Modal Image */
|
|
// #caption {
|
|
// margin: auto;
|
|
// display: block;
|
|
// width: 80%;
|
|
// max-width: 700px;
|
|
// text-align: center;
|
|
// color: #ccc;
|
|
// padding: 10px 0;
|
|
// height: 150px;
|
|
// }
|
|
|
|
// /* Add Animation */
|
|
// .modal-content,
|
|
// #caption {
|
|
// animation-name: zoom;
|
|
// animation-duration: 0.6s;
|
|
// }
|
|
|
|
// @keyframes zoom {
|
|
// from {
|
|
// transform: scale(0.1);
|
|
// }
|
|
// to {
|
|
// transform: scale(1);
|
|
// }
|
|
// }
|
|
|
|
// /* The Close Button */
|
|
// .close {
|
|
// position: absolute;
|
|
// top: 15px;
|
|
// right: 35px;
|
|
// color: #f1f1f1;
|
|
// font-size: 40px;
|
|
// font-weight: bold;
|
|
// transition: 0.3s;
|
|
// }
|
|
|
|
// .close:hover,
|
|
// .close:focus {
|
|
// color: #bbb;
|
|
// text-decoration: none;
|
|
// cursor: pointer;
|
|
// }
|
|
.favorit-main {
|
|
margin-right: 16em;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
@media (max-width: 575.98px) {
|
|
.list-right {
|
|
position: fixed;
|
|
z-index: 9;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
height: 100dvh;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
|
|
.list-right {
|
|
position: fixed;
|
|
z-index: 9;
|
|
width: 24em;
|
|
background-color: #fff;
|
|
height: 100dvh;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
|
}
|
|
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
|
|
}
|
|
@media (min-width: 1200px) {
|
|
}
|
|
</style>
|