style(refund-detail-dialog): format template code for improved readability

- Adjusted indentation and spacing in the refund detail dialog component to enhance code clarity.
- Ensured consistent formatting across template sections for better maintainability.

src/views/mallOrder/refund/components/refund-detail-dialog.vue

@@ -63,16 +63,16 @@
                             <template v-if="isRefundOnly">
                                 <el-step :title="`买家申请${getRefundTypeText(form.refundType)}`" />
                                 <el-step :title="String(form.status) === '11'
-                                        ? '退款已撤销'
-                                        : '卖家处理退款申请'
+                                    ? '退款已撤销'
+                                    : '卖家处理退款申请'
                                     " />
                                 <el-step title="退款完毕" />
                             </template>
                             <template v-else>
                                 <el-step title="买家申请退货退款" />
                                 <el-step :title="String(form.status) === '11'
-                                        ? '退款已撤销'
-                                        : '卖家处理退货申请'
+                                    ? '退款已撤销'
+                                    : '卖家处理退货申请'
                                     " />
                                 <el-step title="买家退货" />
                                 <el-step title="退款完毕" />
@@ -103,13 +103,13 @@
                         <span class="label">要求：</span>
                         <span class="value">{{
                             getRefundTypeText(form.refundType)
-                            }}</span>
+                        }}</span>
                     </div>
                     <div class="info-item">
                         <span class="label">货物状态：</span>
                         <span class="value">{{
                             getShopStatusText(form.shopStatus)
-                            }}</span>
+                        }}</span>
                     </div>
                     <div class="info-item">
                         <span class="label">买家留言：</span>
@@ -146,8 +146,8 @@ activity, index
                                             <div>
                                                 <div style="margin-bottom: 5px" v-if="activity.status">
                                                     <el-tag size="small" :type="index === 0
-                                                            ? 'success'
-                                                            : 'info'
+                                                        ? 'success'
+                                                        : 'info'
                                                         ">{{ activity.status }}</el-tag>
                                                 </div>
                                                 <div style="
@@ -179,7 +179,7 @@ activity, index
                                 <div class="text-sm font-bold truncate-2-lines">{{ prod.bookName }}</div>
                                 <div class="text-xs text-gray-500 mt-1">{{
                                     prod.isbn
-                                    }}</div>
+                                }}</div>
                                 <div class="text-xs text-gray-500 mt-1">{{ prod.payPrice }} × {{ prod.num }}</div>
                             </div>
                         </div>
@@ -212,7 +212,7 @@ activity, index
                         <span class="label">订单编号：</span>
                         <span class="value text-blue-500">{{
                             form.originOrderId
-                            }}</span>
+                        }}</span>
                         <el-icon class="copy-icon" @click="handleCopy(form.originOrderId)">
                             <CopyDocument />
                         </el-icon>
@@ -254,8 +254,8 @@ activity, index
                                                 <div>
                                                     <div style="margin-bottom: 5px" v-if="activity.status">
                                                         <el-tag size="small" :type="index === 0
-                                                                ? 'success'
-                                                                : 'info'
+                                                            ? 'success'
+                                                            : 'info'
                                                             ">{{ activity.status }}</el-tag>
                                                     </div>
                                                     <div style="
@@ -307,14 +307,14 @@ activity, index
                                     }}</span>
                                     <span class="time text-xs text-gray-400">{{
                                         activity.createTime
-                                        }}</span>
+                                    }}</span>
                                 </div>
                                 <div class="main-content text-sm text-gray-600">
                                     <div v-if="activity.title" class="font-bold mb-1 text-gray-900">{{ activity.title }}
                                     </div>
                                     <div class="whitespace-pre-wrap mb-2">{{
                                         activity.content
-                                        }}</div>
+                                    }}</div>
 
                                     <div v-if="
                                         activity.imgList &&
@@ -351,10 +351,10 @@ activity, index
                 <el-button @click="handleRemark">备注</el-button>
                 <el-button @click="handleRefuse">{{
                     isRefundOnly ? '拒绝退款申请' : '拒绝退货申请'
-                    }}</el-button>
+                }}</el-button>
                 <el-button @click="handleAgree">{{
                     isRefundOnly ? '同意退款' : '同意退货'
-                    }}</el-button>
+                }}</el-button>
                 <el-button v-if="isPlatformConfirmReceipt" type="primary"
                     @click="handleConfirmReceiptRefund">确认收货，同意退款</el-button>
                 <el-button v-if="isRefundOnly" type="primary" @click="handleExpressIntercept"
@@ -378,374 +378,374 @@ activity, index
 </template>
 
 <script setup>
-    import { ref, computed } from 'vue';
-    import { EleMessage } from 'ele-admin-plus/es';
-    import { ElMessageBox } from 'element-plus';
-    import { CopyDocument } from '@element-plus/icons-vue';
-    import { useClipboard } from '@vueuse/core';
-    import request from '@/utils/request';
-    import NegotiationApplyDialog from './negotiation-apply-dialog.vue';
-    import RefuseDialog from './refuse-dialog.vue';
-    import AgreeDialog from './agree-dialog.vue';
-    import ConfirmRefundDialog from './confirm-refund-dialog.vue';
-    import NegotiateReturnDialog from './negotiate-return-dialog.vue';
-    import LeaveMessageDialog from './leave-message-dialog.vue';
-    import RefundRemarks from './refund-remarks.vue';
-
-    const visible = defineModel({ type: Boolean });
-    const emit = defineEmits(['refresh']);
-    const loading = ref(false);
-    const form = ref({});
-    const historyList = ref([]);
-    const { copy } = useClipboard();
-    const negotiationDialogVisible = ref(false);
-    const refuseDialogRef = ref(null);
-    const agreeDialogRef = ref(null);
-    const confirmRefundDialogRef = ref(null);
-    const negotiateReturnDialogRef = ref(null);
-    const leaveMessageDialogRef = ref(null);
-    const remarkRef = ref(null);
-
-    const deadline = ref(0);
-
-    const isRefundOnly = computed(() =>
-        ['0', '2', '3'].includes(String(form.value.refundType))
-    );
-
-    // 进度条状态
-    const processStatus = computed(() => {
-        const status = Number(form.value.status);
-        if ([5, 6, 11].includes(status)) {
-            return 'error';
-        }
-        return 'process';
-    });
-
-    // 当前步骤
-    const currentStep = computed(() => {
-        const status = Number(form.value.status);
-        if (isRefundOnly.value) {
-            // 1:申请, 2,3:协商中, 5:驳回, 6:超时关闭 -> 停在第2步(卖家处理)
-            if ([1, 2, 3, 5, 6].includes(status)) return 1;
-            // 4:审核通过, 7:买家已发货, 8:商家已签收, 9:确认收货 -> 停在第3步(退款完毕前)
-            if ([4, 7, 8, 9].includes(status)) return 2;
-            // 10:退款成功 -> 全绿(第3步完成)
-            if (status === 10) return 3;
-            // 11:退款已撤销 -> 停在第2步
-            if (status === 11) return 1;
-            return 1;
-        }
+import { ref, computed } from 'vue';
+import { EleMessage } from 'ele-admin-plus/es';
+import { ElMessageBox } from 'element-plus';
+import { CopyDocument } from '@element-plus/icons-vue';
+import { useClipboard } from '@vueuse/core';
+import request from '@/utils/request';
+import NegotiationApplyDialog from './negotiation-apply-dialog.vue';
+import RefuseDialog from './refuse-dialog.vue';
+import AgreeDialog from './agree-dialog.vue';
+import ConfirmRefundDialog from './confirm-refund-dialog.vue';
+import NegotiateReturnDialog from './negotiate-return-dialog.vue';
+import LeaveMessageDialog from './leave-message-dialog.vue';
+import RefundRemarks from './refund-remarks.vue';
+
+const visible = defineModel({ type: Boolean });
+const emit = defineEmits(['refresh']);
+const loading = ref(false);
+const form = ref({});
+const historyList = ref([]);
+const { copy } = useClipboard();
+const negotiationDialogVisible = ref(false);
+const refuseDialogRef = ref(null);
+const agreeDialogRef = ref(null);
+const confirmRefundDialogRef = ref(null);
+const negotiateReturnDialogRef = ref(null);
+const leaveMessageDialogRef = ref(null);
+const remarkRef = ref(null);
+
+const deadline = ref(0);
+
+const isRefundOnly = computed(() =>
+    ['0', "1", '2', '3','4'].includes(String(form.value.refundType))
+);
+
+// 进度条状态
+const processStatus = computed(() => {
+    const status = Number(form.value.status);
+    if ([5, 6, 11].includes(status)) {
+        return 'error';
+    }
+    return 'process';
+});
 
-        // 退货退款
+// 当前步骤
+const currentStep = computed(() => {
+    const status = Number(form.value.status);
+    if (isRefundOnly.value) {
         // 1:申请, 2,3:协商中, 5:驳回, 6:超时关闭 -> 停在第2步(卖家处理)
         if ([1, 2, 3, 5, 6].includes(status)) return 1;
-        // 4:审核通过(商家同意退货，等待买家退货) -> 停在第3步(买家退货)
-        if (status === 4) return 2;
-        // 7:买家已发货, 8:商家已签收, 9:确认收货 -> 停在第4步(退款完毕前)
-        if ([7, 8, 9].includes(status)) return 3;
-        // 10:退款成功 -> 全绿(第4步完成)
-        if (status === 10) return 4;
+        // 4:审核通过, 7:买家已发货, 8:商家已签收, 9:确认收货 -> 停在第3步(退款完毕前)
+        if ([4, 7, 8, 9].includes(status)) return 2;
+        // 10:退款成功 -> 全绿(第3步完成)
+        if (status === 10) return 3;
         // 11:退款已撤销 -> 停在第2步
         if (status === 11) return 1;
         return 1;
-    });
+    }
+
+    // 退货退款
+    // 1:申请, 2,3:协商中, 5:驳回, 6:超时关闭 -> 停在第2步(卖家处理)
+    if ([1, 2, 3, 5, 6].includes(status)) return 1;
+    // 4:审核通过(商家同意退货，等待买家退货) -> 停在第3步(买家退货)
+    if (status === 4) return 2;
+    // 7:买家已发货, 8:商家已签收, 9:确认收货 -> 停在第4步(退款完毕前)
+    if ([7, 8, 9].includes(status)) return 3;
+    // 10:退款成功 -> 全绿(第4步完成)
+    if (status === 10) return 4;
+    // 11:退款已撤销 -> 停在第2步
+    if (status === 11) return 1;
+    return 1;
+});
+
+// 是否可操作主流程（拒绝、同意）
+const canOperate = computed(() => {
+    return ['1', '3'].includes(String(form.value.status));
+});
+
+const isPlatformConfirmReceipt = computed(() => {
+    return String(form.value.status) === '7';
+});
+
+const returnLatestTrack = computed(() => {
+    if (form.value.trackingVoList && form.value.trackingVoList.length > 0) {
+        return form.value.trackingVoList[0];
+    }
+    return null;
+});
+
+const handleOpen = (row) => {
+    if (row && row.refundOrderId) {
+        visible.value = true;
+        loading.value = true;
+
+        request
+            .get(`/shop/shopOrder/getRefundInfo/${row.refundOrderId}`)
+            .then((res) => {
+                if (res.data.code === 200) {
+                    const data = res.data.data || {};
+                    form.value = data;
+                    if (!form.value.orderTime) {
+                        form.value.orderTime = form.value.createTime;
+                    }
+                    if (data.restSecond) {
+                        deadline.value =
+                            Date.now() + data.restSecond * 1000;
+                    } else {
+                        deadline.value = 0;
+                    }
+                    // 处理协商历史数据
+                    if (
+                        data.complaintsLogList &&
+                        data.complaintsLogList.length
+                    ) {
+                        historyList.value = data.complaintsLogList;
+                    } else {
+                        historyList.value = [];
+                    }
+                } else {
+                    EleMessage.error(res.data.msg || '获取详情失败');
+                    fallbackToRow(row);
+                }
+            })
+            .catch((e) => {
+                console.error(e);
+                EleMessage.error('获取详情失败');
+                fallbackToRow(row);
+            })
+            .finally(() => {
+                loading.value = false;
+            });
+    } else if (row) {
+        visible.value = true;
+        fallbackToRow(row);
+    }
+};
 
-    // 是否可操作主流程（拒绝、同意）
-    const canOperate = computed(() => {
-        return ['1', '3'].includes(String(form.value.status));
-    });
+const fallbackToRow = (row) => {
+    form.value = JSON.parse(JSON.stringify(row));
+    if (!form.value.orderTime) {
+        form.value.orderTime = form.value.createTime;
+    }
+    if (form.value.restSecond) {
+        deadline.value = Date.now() + form.value.restSecond * 1000;
+    } else {
+        deadline.value = 0;
+    }
+    historyList.value = [];
+
+    // Fallback时也添加初始申请记录
+    const startEvent = {
+        createTime: form.value.createTime,
+        userName: form.value.userNick,
+        userType: '1',
+        imgPath: form.value.avatar || '',
+        title: '发起了退款申请',
+        content: `货物状态：${getShopStatusText(form.value.shopStatus)}\n原因：${form.value.refundReason}\n金额：¥${form.value.refundMoney}\n说明：${form.value.description || '无'}`,
+        imgList: []
+    };
+    historyList.value.push(startEvent);
+};
+
+const handleCopy = async (text) => {
+    try {
+        await copy(text);
+        EleMessage.success('复制成功');
+    } catch (e) {
+        EleMessage.error('复制失败');
+    }
+};
+
+const getRefundTypeText = (type) => {
+    const map = {
+        0: '极速退款',
+        1: '退货退款',
+        2: '仅退款',
+        3: '缺货退款'
+    };
+    return map[type] || type;
+};
+
+const getStatusText = (status) => {
+    const key = String(status);
+    const map = {
+        1: '申请退款',
+        2: '协商中待用户确认',
+        3: '协商中待商家确认',
+        4: '审核通过',
+        5: '审核驳回',
+        6: '超时关闭',
+        7: '买家已发货',
+        8: '商家已签收',
+        9: '确认收货',
+        10: '退款成功',
+        11: '退款已撤销'
+    };
+    return map[key] || status;
+};
 
-    const isPlatformConfirmReceipt = computed(() => {
-        return String(form.value.status) === '7';
-    });
+const getShopStatusText = (status) => {
+    const map = { 1: '未收到货', 2: '已收到货' };
+    return map[status] || '-';
+};
 
-    const returnLatestTrack = computed(() => {
-        if (form.value.trackingVoList && form.value.trackingVoList.length > 0) {
-            return form.value.trackingVoList[0];
-        }
-        return null;
-    });
+const handleNegotiate = () => {
+    negotiationDialogVisible.value = true;
+};
 
-    const handleOpen = (row) => {
-        if (row && row.refundOrderId) {
-            visible.value = true;
+const handleNegotiateReturn = () => {
+    if (negotiateReturnDialogRef.value) {
+        negotiateReturnDialogRef.value.open(form.value);
+    }
+};
+
+const handleNegotiationSuccess = () => {
+    handleOpen(form.value);
+};
+
+const handleExpressIntercept = () => {
+    ElMessageBox.confirm('确定要拦截该快递吗？', '提示', {
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+    })
+        .then(() => {
             loading.value = true;
-
             request
-                .get(`/shop/shopOrder/getRefundInfo/${row.refundOrderId}`)
+                .post(
+                    `/shop/shopOrder/refundExpressIntercept/${form.value.refundOrderId}`
+                )
                 .then((res) => {
                     if (res.data.code === 200) {
-                        const data = res.data.data || {};
-                        form.value = data;
-                        if (!form.value.orderTime) {
-                            form.value.orderTime = form.value.createTime;
-                        }
-                        if (data.restSecond) {
-                            deadline.value =
-                                Date.now() + data.restSecond * 1000;
-                        } else {
-                            deadline.value = 0;
-                        }
-                        // 处理协商历史数据
-                        if (
-                            data.complaintsLogList &&
-                            data.complaintsLogList.length
-                        ) {
-                            historyList.value = data.complaintsLogList;
-                        } else {
-                            historyList.value = [];
-                        }
+                        EleMessage.success('快递拦截成功');
+                        handleOpen(form.value);
                     } else {
-                        EleMessage.error(res.data.msg || '获取详情失败');
-                        fallbackToRow(row);
+                        EleMessage.error(res.data.msg || '快递拦截失败');
                     }
                 })
                 .catch((e) => {
                     console.error(e);
-                    EleMessage.error('获取详情失败');
-                    fallbackToRow(row);
+                    EleMessage.error('网络错误');
                 })
                 .finally(() => {
                     loading.value = false;
                 });
-        } else if (row) {
-            visible.value = true;
-            fallbackToRow(row);
-        }
-    };
-
-    const fallbackToRow = (row) => {
-        form.value = JSON.parse(JSON.stringify(row));
-        if (!form.value.orderTime) {
-            form.value.orderTime = form.value.createTime;
-        }
-        if (form.value.restSecond) {
-            deadline.value = Date.now() + form.value.restSecond * 1000;
-        } else {
-            deadline.value = 0;
-        }
-        historyList.value = [];
-
-        // Fallback时也添加初始申请记录
-        const startEvent = {
-            createTime: form.value.createTime,
-            userName: form.value.userNick,
-            userType: '1',
-            imgPath: form.value.avatar || '',
-            title: '发起了退款申请',
-            content: `货物状态：${getShopStatusText(form.value.shopStatus)}\n原因：${form.value.refundReason}\n金额：¥${form.value.refundMoney}\n说明：${form.value.description || '无'}`,
-            imgList: []
-        };
-        historyList.value.push(startEvent);
-    };
-
-    const handleCopy = async (text) => {
-        try {
-            await copy(text);
-            EleMessage.success('复制成功');
-        } catch (e) {
-            EleMessage.error('复制失败');
-        }
-    };
-
-    const getRefundTypeText = (type) => {
-        const map = {
-            0: '极速退款',
-            1: '退货退款',
-            2: '仅退款',
-            3: '缺货退款'
-        };
-        return map[type] || type;
-    };
-
-    const getStatusText = (status) => {
-        const key = String(status);
-        const map = {
-            1: '申请退款',
-            2: '协商中待用户确认',
-            3: '协商中待商家确认',
-            4: '审核通过',
-            5: '审核驳回',
-            6: '超时关闭',
-            7: '买家已发货',
-            8: '商家已签收',
-            9: '确认收货',
-            10: '退款成功',
-            11: '退款已撤销'
-        };
-        return map[key] || status;
-    };
-
-    const getShopStatusText = (status) => {
-        const map = { 1: '未收到货', 2: '已收到货' };
-        return map[status] || '-';
-    };
-
-    const handleNegotiate = () => {
-        negotiationDialogVisible.value = true;
-    };
-
-    const handleNegotiateReturn = () => {
-        if (negotiateReturnDialogRef.value) {
-            negotiateReturnDialogRef.value.open(form.value);
-        }
-    };
-
-    const handleNegotiationSuccess = () => {
-        handleOpen(form.value);
-    };
-
-    const handleExpressIntercept = () => {
-        ElMessageBox.confirm('确定要拦截该快递吗？', '提示', {
-            type: 'warning',
-            confirmButtonText: '确定',
-            cancelButtonText: '取消'
         })
-            .then(() => {
-                loading.value = true;
-                request
-                    .post(
-                        `/shop/shopOrder/refundExpressIntercept/${form.value.refundOrderId}`
-                    )
-                    .then((res) => {
-                        if (res.data.code === 200) {
-                            EleMessage.success('快递拦截成功');
-                            handleOpen(form.value);
-                        } else {
-                            EleMessage.error(res.data.msg || '快递拦截失败');
-                        }
-                    })
-                    .catch((e) => {
-                        console.error(e);
-                        EleMessage.error('网络错误');
-                    })
-                    .finally(() => {
-                        loading.value = false;
-                    });
-            })
-            .catch(() => { });
-    };
+        .catch(() => { });
+};
 
-    const handleRefuse = () => {
-        if (refuseDialogRef.value) {
-            refuseDialogRef.value.open(
-                form.value.refundOrderId,
-                Number(form.value.refundType)
-            );
-        }
-    };
-
-    const handleAgree = () => {
-        if (isRefundOnly.value) {
-            confirmRefundDialogRef.value?.open(
-                form.value.refundOrderId,
-                form.value.refundMoneyFinal || form.value.refundMoney
-            );
-            return;
-        }
-        agreeDialogRef.value?.open(form.value.refundOrderId);
-    };
+const handleRefuse = () => {
+    if (refuseDialogRef.value) {
+        refuseDialogRef.value.open(
+            form.value.refundOrderId,
+            Number(form.value.refundType)
+        );
+    }
+};
 
-    const handleConfirmReceiptRefund = () => {
+const handleAgree = () => {
+    if (isRefundOnly.value) {
         confirmRefundDialogRef.value?.open(
             form.value.refundOrderId,
             form.value.refundMoneyFinal || form.value.refundMoney
         );
-    };
+        return;
+    }
+    agreeDialogRef.value?.open(form.value.refundOrderId);
+};
 
-    const handleLeaveMessage = () => {
-        if (leaveMessageDialogRef.value) {
-            leaveMessageDialogRef.value.open(form.value.refundOrderId);
-        }
-    };
+const handleConfirmReceiptRefund = () => {
+    confirmRefundDialogRef.value?.open(
+        form.value.refundOrderId,
+        form.value.refundMoneyFinal || form.value.refundMoney
+    );
+};
 
-    const handleRemark = () => {
-        remarkRef.value?.open(form.value.refundOrderId);
-    };
+const handleLeaveMessage = () => {
+    if (leaveMessageDialogRef.value) {
+        leaveMessageDialogRef.value.open(form.value.refundOrderId);
+    }
+};
 
-    const handleRemarkRefresh = () => {
-        emit('refresh');
-    };
+const handleRemark = () => {
+    remarkRef.value?.open(form.value.refundOrderId);
+};
+
+const handleRemarkRefresh = () => {
+    emit('refresh');
+};
 
-    defineExpose({
-        handleOpen
-    });
+defineExpose({
+    handleOpen
+});
 </script>
 
 <style scoped lang="scss">
-    .status-bar {
-        background: #fff;
-        padding: 15px;
-        border-bottom: 1px solid #eee;
-    }
-
-    .detail-container {
-        gap: 20px;
+.status-bar {
+    background: #fff;
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+}
 
-        .section {
-            background: #fff;
+.detail-container {
+    gap: 20px;
 
-            .section-title {
-                font-size: 16px;
-                font-weight: bold;
-                margin-bottom: 15px;
-                color: #333;
-                padding-left: 10px;
-                border-left: 3px solid #409eff;
-                line-height: 1;
-            }
-
-            .info-item {
-                margin-bottom: 10px;
-                font-size: 13px;
-                display: flex;
+    .section {
+        background: #fff;
 
-                .label {
-                    color: #999;
-                    width: 70px;
-                    flex-shrink: 0;
-                }
+        .section-title {
+            font-size: 16px;
+            font-weight: bold;
+            margin-bottom: 15px;
+            color: #333;
+            padding-left: 10px;
+            border-left: 3px solid #409eff;
+            line-height: 1;
+        }
 
-                .value {
-                    color: #333;
-                    flex: 1;
-                    word-break: break-all;
-                }
+        .info-item {
+            margin-bottom: 10px;
+            font-size: 13px;
+            display: flex;
 
-                .copy-icon {
-                    cursor: pointer;
-                    color: #409eff;
-                    margin-left: 5px;
-                    font-size: 14px;
-                }
+            .label {
+                color: #999;
+                width: 70px;
+                flex-shrink: 0;
             }
-        }
 
-        .transaction-info {
-            padding: 0 10px;
-            border-left: 1px solid #eee;
-            border-right: 1px solid #eee;
-        }
+            .value {
+                color: #333;
+                flex: 1;
+                word-break: break-all;
+            }
 
-        .history-info {
-            padding-left: 10px;
+            .copy-icon {
+                cursor: pointer;
+                color: #409eff;
+                margin-left: 5px;
+                font-size: 14px;
+            }
         }
     }
 
-    .history-card {
-        background: #f9f9f9;
-        padding: 10px;
-        border-radius: 4px;
+    .transaction-info {
+        padding: 0 10px;
+        border-left: 1px solid #eee;
+        border-right: 1px solid #eee;
+    }
 
-        .detail-rows {
-            line-height: 1.6;
-        }
+    .history-info {
+        padding-left: 10px;
     }
+}
+
+.history-card {
+    background: #f9f9f9;
+    padding: 10px;
+    border-radius: 4px;
 
-    .truncate-2-lines {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
+    .detail-rows {
+        line-height: 1.6;
     }
+}
+
+.truncate-2-lines {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
 </style>