From 21917a3de7202bdc9dff315ca70940d5705a8311 Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Sat, 23 Nov 2024 13:35:59 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=B7=A5=E5=8D=95?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E7=8A=B6=E6=80=81=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../task-management/components/WorkDialog.vue | 668 +++++++++---------
 1 file changed, 337 insertions(+), 331 deletions(-)

diff --git a/src/views/task-management/components/WorkDialog.vue b/src/views/task-management/components/WorkDialog.vue
index d4753b0..04f6e3f 100644
--- a/src/views/task-management/components/WorkDialog.vue
+++ b/src/views/task-management/components/WorkDialog.vue
@@ -1,17 +1,17 @@
 <script setup>
-import { nextTick, onMounted, reactive, ref, watch } from "vue";
-import { ElMessageBox } from "element-plus";
-import { MoreFilled, Check, Download, VideoPlay } from "@element-plus/icons-vue";
-import { time } from "echarts";
-import { defineExpose } from "vue";
-import { defineProps } from "vue";
-import { orderGetDetails } from "@/api/order/order.js"
+import {nextTick, onMounted, reactive, ref, watch} from "vue";
+import {ElMessageBox} from "element-plus";
+import {MoreFilled, Check, Download, VideoPlay} from "@element-plus/icons-vue";
+import {time} from "echarts";
+import {defineExpose} from "vue";
+import {defineProps} from "vue";
+import {orderGetDetails} from "@/api/order/order.js"
 import Voice from '@/components/voice/index.vue'
 //控制显示隐藏
 const dialogVisible = ref(false);
 
 const props = defineProps({
-    rowData: Object
+  rowData: Object
 })
 
 let opsCallList = ref([]);
@@ -20,428 +20,434 @@ let orderContent = ref([]);
 const voiceRef = ref()
 const rowUrl = ref()
 const open = (row) => {
-    dialogVisible.value = true;
+  dialogVisible.value = true;
 };
 
 const getData = async () => {
-    // console.log(123);
-    const data = await orderGetDetails({
-      orderNumber:props.rowData.orderNumber,
-      alarmObject :props.rowData.alarmObject,
-      alarmUnit :props.rowData.alarmUnit
-    })
-    // console.log("111", data);
-    return data
+  // console.log(123);
+  const data = await orderGetDetails({
+    orderNumber: props.rowData.orderNumber,
+    alarmObject: props.rowData.alarmObject,
+    alarmUnit: props.rowData.alarmUnit
+  })
+  // console.log("111", data);
+  return data
 
 }
 let contentState0 = [
-    {
-        content: "待处理",
-        timestamp: "orderData.value",
-        icon: Check,
-        color: "#0bbd87",
-        size: "large",
-    },
-    {
-        content: "已处理",
-        timestamp: "--",
-        type: "primary",
-        icon: MoreFilled,
-        size: "large",
-    },
-    {
-        content: "结单",
-        timestamp: "--",
-        size: "large",
-        // icon: Check,
-        // color: "#0bbd87",
-    },
+  {
+    content: "待处理",
+    timestamp: "orderData.value",
+    icon: Check,
+    color: "#0bbd87",
+    size: "large",
+  },
+  {
+    content: "已处理",
+    timestamp: "--",
+    type: "primary",
+    icon: MoreFilled,
+    size: "large",
+  },
+  {
+    content: "结单",
+    timestamp: "--",
+    size: "large",
+    // icon: Check,
+    // color: "#0bbd87",
+  },
 ];
 let contentState1 = [
-    {
-        content: "待处理",
-        timestamp: "orderData.value",
-        icon: Check,
-        color: "#0bbd87",
-        size: "large",
-    },
-    {
-        content: "已处理",
-        timestamp: "2022-07-20 20:00:00",
-        icon: Check,
-        color: "#0bbd87",
-        size: "large",
-    },
-    {
-        content: "结单",
-        timestamp: "--",
-        size: "large",
-        type: "primary",
-        icon: MoreFilled,
-    },
+  {
+    content: "待处理",
+    timestamp: "orderData.value",
+    icon: Check,
+    color: "#0bbd87",
+    size: "large",
+  },
+  {
+    content: "已处理",
+    timestamp: "2022-07-20 20:00:00",
+    icon: Check,
+    color: "#0bbd87",
+    size: "large",
+  },
+  {
+    content: "结单",
+    timestamp: "--",
+    size: "large",
+    type: "primary",
+    icon: MoreFilled,
+  },
 ];
 let contentState2 = [
-    {
-        content: "待处理",
-        timestamp: "orderData.value",
-        icon: Check,
-        color: "#0bbd87",
-        size: "large",
-    },
-    {
-        content: "已处理",
-        timestamp: "2022-07-20 20:00:00",
-        icon: Check,
-        color: "#0bbd87",
-        size: "large",
-    },
-    {
-        content: "结单",
-        timestamp: "2022-07-20 20:00:00",
-        size: "large",
-        icon: Check,
-        color: "#0bbd87",
-    },
+  {
+    content: "待处理",
+    timestamp: "orderData.value",
+    icon: Check,
+    color: "#0bbd87",
+    size: "large",
+  },
+  {
+    content: "已处理",
+    timestamp: "2022-07-20 20:00:00",
+    icon: Check,
+    color: "#0bbd87",
+    size: "large",
+  },
+  {
+    content: "结单",
+    timestamp: "2022-07-20 20:00:00",
+    size: "large",
+    icon: Check,
+    color: "#0bbd87",
+  },
 ];
 
 watch(() => props.rowData, (newRowData) => {
-    if (newRowData) {
-        // console.log(getData(newRowData));
-        getData(newRowData).then((data) => {
-            opsCallList.value = []
-            orderData.value = data.data
+  if (newRowData) {
+    // console.log(getData(newRowData));
+    getData(newRowData).then((data) => {
+      opsCallList.value = []
+      orderData.value = data.data
 
-            //电话拨打记录
-            const dataDetails = data.data.opsCallList
-            // console.log(dataDetails);
-            const theData = [{ createTime: '', data: [] }]
-
-            dataDetails.forEach(for1data => {
-                // console.log(for1data.createTime, '--------');
-                for (let i = 0; i < theData.length; i++) {
-                    // console.log(theData[i]);
-                    if (theData[i].createTime === for1data.createTime) {
-                        theData[i].data.push(for1data)
-                        break;
-                    } else if (theData[i].createTime === '') {
-                        theData[i].createTime = for1data.createTime
-                        theData[i].data.push(for1data)
-                    } else {
-                        theData.push({ createTime: '', data: [] })
-                    }
-                }
-            });
-            // theData.pop()
-            // theData[0].data.sort((a, b) => b.answer_time- a.answer_time)
-            // console.log(theData);
-            theData.forEach(item => {
-                item.data.forEach(info => {
-                    if (info.answeredTime !== null) {
-                        // console.log(info.answeredTime);
-                        let startIndex = info.answeredTime.indexOf(' ') + 1;
-                        let timeOnly = info.answeredTime.slice(startIndex, startIndex + 8);
-                        info.answeredTime = timeOnly.replace(/:/g, ':')
-                        // info.answeredTime = timeOnly
-                    }
-                })
-                // item.data.sort((a, b) => a.answeredTime - b.answeredTime)
-                opsCallList.value.push(item)
-            })
-
-            //工单时间线
-            orderContent.value = []
-            // console.log(orderData.value);
-            // orderData.value.orderState='2'
-            if (orderData.value.orderState === '0') {
-                inputOrderContent(contentState0)
-            }
-            else if (orderData.value.orderState === '1') {
-                inputOrderContent(contentState1)
-            }
-            else if (orderData.value.orderState === '2') {
-                inputOrderContent(contentState2)
-            }
-            // console.log(orderContent.value);
+      //电话拨打记录
+      const dataDetails = data.data.opsCallList
+      // console.log(dataDetails);
+      const theData = [{createTime: '', data: []}]
 
+      dataDetails?.forEach(for1data => {
+        // console.log(for1data.createTime, '--------');
+        for (let i = 0; i < theData.length; i++) {
+          // console.log(theData[i]);
+          if (theData[i].createTime === for1data.createTime) {
+            theData[i].data.push(for1data)
+            break;
+          } else if (theData[i].createTime === '') {
+            theData[i].createTime = for1data.createTime
+            theData[i].data.push(for1data)
+          } else {
+            theData.push({createTime: '', data: []})
+          }
+        }
+      });
+      // theData.pop()
+      // theData[0].data.sort((a, b) => b.answer_time- a.answer_time)
+      // console.log(theData);
+      theData.forEach(item => {
+        item.data.forEach(info => {
+          if (info.answeredTime !== null) {
+            // console.log(info.answeredTime);
+            let startIndex = info.answeredTime.indexOf(' ') + 1;
+            let timeOnly = info.answeredTime.slice(startIndex, startIndex + 8);
+            info.answeredTime = timeOnly.replace(/:/g, ':')
+            // info.answeredTime = timeOnly
+          }
         })
-    }
+        // item.data.sort((a, b) => a.answeredTime - b.answeredTime)
+        opsCallList.value.push(item)
+      })
+
+      //工单时间线
+      orderContent.value = []
+      console.log(orderData.value);
+      // orderData.value.orderState='2'
+      if (orderData.value.orderState === '0') {
+        inputOrderContent(contentState0)
+      } else if (orderData.value.orderState === '1') {
+        inputOrderContent(contentState1)
+      } else if (orderData.value.orderState === '2') {
+        inputOrderContent(contentState2)
+      }
+      // console.log(orderContent.value);
+
+    })
+  }
 }, {
-    immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
+  immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
 });
 const inputOrderTime = (item, index) => {
-    {
-        if (index === 0) {
-            item.timestamp = orderData.value.operationTime || '--'
-        } else if (index === 1) {
-            // item.timestamp = orderData.value.processedTime || '--'
-        } else {
-            // item.timestamp = orderData.value.completionTime || '--'
-        }
+  {
+    if (index === 0) {
+      item.timestamp = orderData.value.operationTime || '--'
+    } else if (index === 1) {
+      // item.timestamp = orderData.value.processedTime || '--'
+    } else {
+      // item.timestamp = orderData.value.completionTime || '--'
     }
+  }
 }
 
 const inputOrderContent = (contentState) => {
-    contentState.map((item, index) => {
-        inputOrderTime(item, index)
-    })
-    contentState.forEach(item => {
-        orderContent.value.push(item)
-    })
+  contentState.map((item, index) => {
+    inputOrderTime(item, index)
+  })
+  contentState.forEach(item => {
+    orderContent.value.push(item)
+  })
 }
 
 const openRecord = () => {
-    if ( props.rowData.recordUrl !== null) {
-        voiceRef.value.open(true)
-        rowUrl.value =  props.rowData.recordUrl
-    } else {
-        ElMessage({
-            message: '暂无语音',
-            type: 'warning',
-        })
-    }
+  if (props.rowData.recordUrl !== null) {
+    voiceRef.value.open(true)
+    rowUrl.value = props.rowData.recordUrl
+  } else {
+    ElMessage({
+      message: '暂无语音',
+      type: 'warning',
+    })
+  }
 
 }
 
 const downloadRecord = () => {
-    if(props.rowData.recordUrl === null){
-        ElMessage({
-            message: '暂无语音',
-            type: 'warning',
-        })
-    }
+  if (props.rowData.recordUrl === null) {
+    ElMessage({
+      message: '暂无语音',
+      type: 'warning',
+    })
+  }
 }
 defineExpose({
-    open,
+  open,
 });
 
 
-
 </script>
 
 <template>
-    <el-dialog v-model="dialogVisible" :show-close=true title="工单详情" width="80%">
-        <div class="common-layout">
-            <el-container>
-                <el-header class="header"><span>工单号：</span>
-                    <span>{{ rowData.orderNumber || '--' }}</span>
-                </el-header>
-                <el-container class="main-container">
-                    <el-aside width="200px" :style="{ position: 'static' }">
-                        <div class="aside-content">
-                            <el-timeline style="max-width: 600px">
-                                <el-timeline-item v-for="(activity, index) in orderContent" :key="index"
-                                    :icon="activity.icon" :type="activity.type" :color="activity.color"
-                                    :size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp">
-                                    <p style="font-size: 17px;"> {{ activity.content }}</p>
-                                </el-timeline-item>
-                            </el-timeline>
-                        </div>
-                    </el-aside>
-                    <el-main :style="{ position: 'static' }" class="main-content">
-                        <div class="top">
-                            <div class="info">
-                                <!-- <span>创始人：{{ rowData.createBy }}</span> -->
-                                <span>处理人：{{ rowData.operationUser || '--' }}</span>
-                            </div>
-                            <div class="info">
-                                <span>工单名称：{{ rowData.orderName || '--' }}</span>
-                                <span>关单人：{{ rowData.knotter || '--' }}</span>
-                            </div>
-                        </div>
-                        <div class="body">
-                            <div>
-                                <div>工单内容：</div>
-                                <div class="textBox">
-                                    <el-scrollbar>
-                                        <div class="text">{{ rowData.orderContent || '暂无工单内容' }}</div>
-                                    </el-scrollbar>
-                                </div>
-                            </div>
-<!--                            <div>-->
-<!--                                <div>通话记录：</div>-->
-<!--                                <div class="textBox">-->
-<!--                                    <el-scrollbar>-->
-<!--                                        <div class="text">{{ rowData.processedContent || '暂无通话记录' }}</div>-->
-<!--                                    </el-scrollbar>-->
-<!--                                </div>-->
+  <el-dialog v-model="dialogVisible" :show-close=true title="工单详情" width="80%">
+    <div class="common-layout">
+      <el-container>
+        <el-header class="header"><span>工单号：</span>
+          <span>{{ rowData.orderNumber || '--' }}</span>
+        </el-header>
+        <el-container class="main-container">
+          <el-aside width="200px" :style="{ position: 'static' }">
+            <div class="aside-content">
+              <el-timeline style="max-width: 600px">
+                <el-timeline-item v-for="(activity, index) in orderContent" :key="index"
+                                  :icon="activity.icon" :type="activity.type" :color="activity.color"
+                                  :size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp">
+                  <p style="font-size: 17px;"> {{ activity.content }}</p>
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </el-aside>
+          <el-main :style="{ position: 'static' }" class="main-content">
+            <div class="top">
+              <div class="info">
+                <!-- <span>创始人：{{ rowData.createBy }}</span> -->
+                <span>处理人：{{ rowData.operationUser || '--' }}</span>
+              </div>
+              <div class="info">
+                <span>工单名称：{{ rowData.orderName || '--' }}</span>
+                <span>关单人：{{ rowData.knotter || '--' }}</span>
+              </div>
+            </div>
+            <div class="body">
+              <div>
+                <div>工单内容：</div>
+                <div class="textBox">
+                  <el-scrollbar>
+                    <div class="text">{{ rowData.orderContent || '暂无工单内容' }}</div>
+                  </el-scrollbar>
+                </div>
+              </div>
+              <!--                            <div>-->
+              <!--                                <div>通话记录：</div>-->
+              <!--                                <div class="textBox">-->
+              <!--                                    <el-scrollbar>-->
+              <!--                                        <div class="text">{{ rowData.processedContent || '暂无通话记录' }}</div>-->
+              <!--                                    </el-scrollbar>-->
+              <!--                                </div>-->
 
-<!--                            </div>-->
-                            <div>
-                                <div>录音信息：</div>
-                                <div class="textBox—record">
+              <!--                            </div>-->
+              <div>
+                <div>录音信息：</div>
+                <div class="textBox—record">
 
-                                    <el-button @click="openRecord" type="primary" :icon="VideoPlay"
-                                        style="margin-right: 10px ;">播放录音
-                                    </el-button>
-                                    <voice ref="voiceRef" title="录音详情" :rowUrl="rowUrl" />
-                                    <a :href=rowData.recordUrl download>
-                                        <el-button type="primary" :icon="Download"
-                                            @click="downloadRecord">下载录音</el-button>
-                                    </a>
-                                    <!-- <el-scrollbar> -->
-                                    <!-- <div class="text">{{ rowData.recordUrl }}</div> -->
-                                    <!-- </el-scrollbar> -->
-                                </div>
+                  <el-button @click="openRecord" type="primary" :icon="VideoPlay"
+                             style="margin-right: 10px ;">播放录音
+                  </el-button>
+                  <voice ref="voiceRef" title="录音详情" :rowUrl="rowUrl"/>
+                  <a :href=rowData.recordUrl download>
+                    <el-button type="primary" :icon="Download"
+                               @click="downloadRecord">下载录音
+                    </el-button>
+                  </a>
+                  <!-- <el-scrollbar> -->
+                  <!-- <div class="text">{{ rowData.recordUrl }}</div> -->
+                  <!-- </el-scrollbar> -->
+                </div>
 
+              </div>
+            </div>
+            <div class="footer">
+              <div>电话拨打记录：</div>
+              <div class="timebox">
+                <div>
+                  <el-scrollbar height="20vh">
+                    <p v-if="opsCallList.length === 0">暂无电话拨打记录</p>
+                    <el-timeline style="max-width: 99%" class="timeline">
+                      <el-timeline-item v-for="(activity, index) in opsCallList" :key="index"
+                                        icon="MoreFilled" type="primary" size="large">
+                        <div class="custom-card">
+                          <div style="font-weight: bold">{{ activity.createTime }}</div>
+                          <template v-if="activity.data&&activity.data.length>0">
+                            <div v-for="(info, index) in activity.data" :key="index">
+                              <div class="timeline-row">
+                                                            <span :style="{ color: '#a8abb2' }">{{
+                                                                info.callIdNumber
+                                                              }}</span>
+                                <PointTag dictType="call_status" :value="info.callState"
+                                          class="tag"/>
+                                <!-- <span :style="{
+                                    color: info.callState === '通话中' ? '#6cc23a' : '#409eff'
+                                }">{{ info.callState }}</span> -->
+                                <span class="span-3th" :style="{ color: '#a8abb2' }">{{
+                                    info.answeredTime || '00:00:00'
+                                  }}</span>
+                              </div>
                             </div>
-                        </div>
-                        <div class="footer">
-                            <div>电话拨打记录：</div>
-                            <div class="timebox">
-                                <div>
-                                    <el-scrollbar height="20vh">
-                                        <p v-if="opsCallList.length === 0">暂无电话拨打记录</p>
-                                        <el-timeline style="max-width: 99%" class="timeline">
-                                            <el-timeline-item v-for="(activity, index) in opsCallList" :key="index"
-                                                icon="MoreFilled" type="primary" size="large">
-                                                <div class="custom-card">
-                                                    <div style="font-weight: bold">{{ activity.createTime }}</div>
-                                                    <div v-for="(info, index) in activity.data" :key="index">
-                                                        <div class="timeline-row">
-                                                            <span :style="{ color: '#a8abb2' }">{{ info.callIdNumber
-                                                                }}</span>
-                                                            <PointTag dictType="call_status" :value="info.callState"
-                                                                class="tag" />
-                                                            <!-- <span :style="{
-                                                                color: info.callState === '通话中' ? '#6cc23a' : '#409eff'
-                                                            }">{{ info.callState }}</span> -->
-                                                            <span class="span-3th" :style="{ color: '#a8abb2' }">{{
-                                                                info.answeredTime || '00:00:00' }}</span>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </el-timeline-item>
-                                        </el-timeline>
-                                    </el-scrollbar>
-                                </div>
-                            </div>
-                        </div>
+                          </template>
+                          <template v-else>
+                            <p>暂无电话拨打记录</p>
+                          </template>
 
-                    </el-main>
-                </el-container>
-            </el-container>
-        </div>
-    </el-dialog>
+                        </div>
+                      </el-timeline-item>
+                    </el-timeline>
+                  </el-scrollbar>
+                </div>
+              </div>
+            </div>
+
+          </el-main>
+        </el-container>
+      </el-container>
+    </div>
+  </el-dialog>
 </template>
 
 <style lang="scss" scoped>
 .header {
-    font-size: 27px;
-    color: black;
+  font-size: 27px;
+  color: black;
 }
 
 .aside-content {
-    position: relative;
-    left: 3px;
+  position: relative;
+  left: 3px;
 }
 
 .main-content {
-    background-color: white;
+  background-color: white;
 
 }
 
 .main-content span {
-    padding-bottom: 5px;
-    color: black;
-    display: inline-block;
-    width: 50%;
-    align-items: center;
-    justify-content: space-between;
+  padding-bottom: 5px;
+  color: black;
+  display: inline-block;
+  width: 50%;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .main-content .info {
-    border-bottom: 1.5px solid #e4e7ed;
-    margin-bottom: 50px;
-    font-size: 17px;
+  border-bottom: 1.5px solid #e4e7ed;
+  margin-bottom: 50px;
+  font-size: 17px;
 }
 
 .main-content .body {
-    font-size: 17px;
-    color: black
+  font-size: 17px;
+  color: black
 }
 
 .main-content .body .textBox {
-    width: 100%;
-    min-height: 10vh;
-    max-height: 15vh;
-    border: 1.5px solid #e4e7ed;
-    box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
-    margin-bottom: 20px;
-    padding: 15px;
+  width: 100%;
+  min-height: 10vh;
+  max-height: 15vh;
+  border: 1.5px solid #e4e7ed;
+  box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
+  margin-bottom: 20px;
+  padding: 15px;
 }
 
 .main-content .body .textBox—record {
-    width: 100%;
-    min-height: 10vh;
-    // max-height: 15vh;
-    // border: 1.5px solid #e4e7ed;
-    // box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
-    // margin-bottom: 20px;
-    padding: 15px;
+  width: 100%;
+  min-height: 10vh;
+  // max-height: 15vh;
+  // border: 1.5px solid #e4e7ed;
+  // box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
+  // margin-bottom: 20px;
+  padding: 15px;
 }
 
 .main-content .body .text {
-    resize: none;
-    // overflow-y: auto;
-    font-size: 16px;
-    line-height: 25px
+  resize: none;
+  // overflow-y: auto;
+  font-size: 16px;
+  line-height: 25px
 }
 
 .main-content .footer {
-    color: black;
-    font-size: 17px;
+  color: black;
+  font-size: 17px;
 }
 
 .main-content .timebox {
-    width: 100%;
-    height: 25vh;
-    border: 1.5px solid #e4e7ed;
-    padding-left: 20px;
-    padding-top: 20px;
-    box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
-    // overflow-x: hidden;
+  width: 100%;
+  height: 25vh;
+  border: 1.5px solid #e4e7ed;
+  padding-left: 20px;
+  padding-top: 20px;
+  box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
+  // overflow-x: hidden;
 }
 
 .main-content .timeline {
-    // width: 100%;
-    position: relative;
-    left: 3px;
-    // background-color: red;
+  // width: 100%;
+  position: relative;
+  left: 3px;
+  // background-color: red;
 
 }
 
 .main-content .timeline-row {
-    // border: 1px solid #000;
-    display: flex;
-    // justify-content: space-between;
-    // border: 1px solid #000;
+  // border: 1px solid #000;
+  display: flex;
+  // justify-content: space-between;
+  // border: 1px solid #000;
 
 }
 
 .main-content .tag {
-    align-items: center;
-    // background-color: red;
-    margin-left: 30px;
+  align-items: center;
+  // background-color: red;
+  margin-left: 30px;
 }
 
 .main-content .span-3th {
-    // flex-grow: 1;
-    // margin-right:;
-    flex: 1;
-    text-align: right;
-    margin-right: 100px;
+  // flex-grow: 1;
+  // margin-right:;
+  flex: 1;
+  text-align: right;
+  margin-right: 100px;
 
 }
 
 .custom-card {
-    width: 100%;
-    font-size: 16px;
+  width: 100%;
+  font-size: 16px;
 }
 
 .custom-card span {
-    padding-top: 10px;
-    width: 20%;
-    margin: 2px;
+  padding-top: 10px;
+  width: 20%;
+  margin: 2px;
 
 }
 </style>