永旺用户心声
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

72 lines
2.2 KiB

<template>
<div class="flex flex-wrap pt-6 pl-6 pr-[6px] space-x-8 relative w-[720px] rounded-xl bg-white shadow-[3px_3px_0_0_rgba(0,0,0,0.10)]">
<div class="flex-1 justify-between">
<div class="text-justify text-[#808080] text-12 font-normal leading-[18px] mb-2">
{{ formatDate(customer.addTime) }}
</div>
<ScrollView class="relative h-[356px]" scrollbar :list="[]">
<div class="text-justify text-[#C70082] text-16 font-normal leading-normal whitespace-normal pr-[14px]">
Q:{{ customer.suggestionContent }}
</div>
</ScrollView>
</div>
<div class="flex-1">
<div class="text-justify text-[#808080] text-12 font-normal leading-[18px] mb-2">
{{ formatDate(customer.updateTime) }}
</div>
<ScrollView class="relative h-[356px]" scrollbar observe-image :list="[]">
<div class="text-justify text-[##333333] text-16 font-normal leading-normal whitespace-normal pr-[14px]">
A:
<div>
{{ customer.replyContent }}
<template v-if="customer.fileList?.length">
<img
v-for="item of customer.fileList"
:key="item.fileName"
:src="config.smallUrl + item.filePath"
class="block w-full"
alt=""
/>
</template>
</div>
</div>
</ScrollView>
</div>
</div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue'
import { useRootStore } from '@/store/root'
import ScrollView from '@/base/ScrollView/ScrollView.vue'
type Props = {
customer: Customer
}
withDefaults(defineProps<Props>(), {
customer: () => ({} as Customer)
})
const store = useRootStore()
const { config } = toRefs(store)
function formatDate(date: string) {
return new Date(date).toLocaleString().replace(/\//g, '-').substring(0, 16)
}
</script>
<style>
.bscroll-vertical-scrollbar {
width: 4px !important;
height: 120px !important;
background-color: rgb(0 0 0 / 3%) !important;
opacity: 1 !important;
}
.bscroll-indicator {
width: 4px !important;
height: 60px !important;
background-color: rgb(0 0 0 / 6%) !important;
border: none !important;
}
</style>