<script setup>

const gridData = {
   id: 1,
   name: "Mike Lee",
   phone: '0987564231',
   email: 'gfdsa33@asd.com',
   address: "台北市大安區天龍一路588巷66號",
   message: "測試測試測試測試測試測試測試測試測,試測試測試測試測試測試測試測試測試測試測試測試測,試測試測試測試測試測試測試測試測試測試測試測試測,試測試測試測試",
   date: '2023/12/7',
}
</script>

<template>
   <el-card :body-style="{ padding: '0px' }">
      <el-descriptions :column="1" border>
         <el-descriptions-item min-width="90px" label-align="right">
            <template #label><div class="cell-item">客戶姓名</div></template>
            {{gridData.name}}
         </el-descriptions-item>

         <el-descriptions-item min-width="90px" label-align="right">
            <template #label><div class="cell-item">聯絡電話</div></template>
            {{gridData.phone}}
         </el-descriptions-item>

         <el-descriptions-item min-width="90px" label-align="right">
            <template #label><div class="cell-item">聯絡地址</div></template>
            {{gridData.address}}
         </el-descriptions-item>

         <el-descriptions-item min-width="90px" label-align="right">
            <template #label><div class="cell-item">電子信箱</div></template>
            {{gridData.email}}
         </el-descriptions-item>

         <el-descriptions-item min-width="90px" label-align="right">
            <template #label><div class="cell-item">留言內容</div></template>
            {{gridData.message}}
         </el-descriptions-item>

         <el-descriptions-item min-width="90px" label-align="right">
            <template #label><div class="cell-item">留言時間</div></template>
            {{gridData.date}}
         </el-descriptions-item>
      </el-descriptions>
   </el-card>
   
</template>

<style scoped>
      
</style>