truck-shop/src/components/modals/commonModals/showText.vue

<template>
    <div 
      class="modal fade"
      id="showText"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">
              <i class="fas fa-clipboard-list"></i> توضیح کامل
            </h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <div class="subject-container">
              <textarea
                disabled
                class="subject-text"
                v-model="localDesc"
              ></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              بستن
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import "vue3-toastify/dist/index.css";
  import { watch, ref } from "vue";
  
  export default {
    props: {
      desc: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      const localDesc = ref();
  
      watch(
        () => props.desc,
        (newVal) => (localDesc.value = newVal)
      );
      return {
        localDesc,
      };
    },
  };
  </script>
  
  <style scoped>
  .modal-dialog {
    max-width: 600px; /* Larger size for better content visibility */
    margin-top: 10vh; /* Center vertically */
  }
  
  .modal-content {
    border-radius: 16px; /* More rounded corners */
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1); /* Larger shadow for more depth */
    background: linear-gradient(
      to bottom right,
      #f5f7fb,
      #e0e8ed
    ); /* Soft gradient background */
  }
  
  .modal-header {
    border-bottom: none; /* Remove default border */
  }
  
  .modal-title {
    color: #007bff;
    font-weight: 600;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
  }
  
  .modal-title i {
    margin-right: 12px;
    font-size: 1.75rem;
  }
  
  .btn-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: #007bff;
    transition: color 0.3s ease;
  }
  
  .btn-close:hover {
    color: #0056b3;
  }
  
  .modal-body {
    padding: 25px;
  }
  
  .subject-container {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
  }
  
  .subject-container i {
    color: #007bff;
    margin-right: 15px;
    font-size: 1.75rem;
  }
  
  .subject-text {
    color: #333;
    font-weight: 500;
    border: 2px solid #007bff;
    width: 100%;
    height: 180px;
    padding: 12px;
    border-radius: 10px;
    font-size: 1rem;
    background-color: #f9f9f9;
    box-sizing: border-box;
    resize: none;
    transition: border-color 0.3s;
  }
  
  .subject-text:focus {
    border-color: #0056b3; /* Highlight border on focus */
    outline: none;
  }
  
  .modal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
  }
  
  .btn-secondary {
    background-color: #6c757d;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    transition: background 0.3s;
    font-size: 1.1rem;
  }
  
  .btn-secondary:hover {
    background-color: #5a6268;
  }
  </style>