refactor(customers-voice): 优化买家之声详情页面

- 调整了详情页面的整体布局结构以及部分组件的属性和样式
- 优化了标题卡片的样式, 增加了粘性效果, 改进了数据展示区域的样式

src/views/customers-voice/components/show-detail/components/DataDisplay.vue

@@ -29,6 +29,7 @@ function createGridOptions() {
 	return reactive({
 		size: 'mini',
 		border: true,
+    round: true,
 		// stripe: true,
 		showHeader: false,
 		height: 500,
@@ -103,7 +104,7 @@ onMounted(() => {
 </script>
 
 <template>
-	<div class="mt-5" style="height: 600px">
+	<div class="mt-5" style="height: 550px">
 		<el-row>
 			<!-- 退货评论 -->
 			<el-col :span="8">

src/views/customers-voice/components/show-detail/components/LineChart.vue

@@ -156,7 +156,7 @@ function removeResize() {
 </script>
 
 <template>
-	<el-card v-loading="loading" class="border-none mt-5">
+	<el-card v-loading="loading" class="border-none mt-5" shadow="hover">
 		<!--<div class=" flex items-center">-->
 			<span class="font-semibold italic mr-2">时间范围:</span>
 			<el-select v-model="week" style="width: 100px" @change="initLine">

src/views/customers-voice/components/show-detail/components/TitleCard.vue

@@ -4,129 +4,177 @@
  * @Description: 买家之声详情-标题卡片
  * @Author: xinyan
  */
-import { useCountryInfoStore } from '/@/stores/countryInfo';
-import dayjs from 'dayjs';
+import { useCountryInfoStore } from '/@/stores/countryInfo'
+import dayjs from 'dayjs'
+
 
 const props: any = defineProps({
-	rowData: Object,
-});
-const { rowData } = props;
+  rowData: Object
+})
+const { rowData } = props
 
-const countryInfoStore = useCountryInfoStore();
-const endpoints = countryInfoStore.endpoints.find((c) => c.code == rowData.country_code);
-const endpoint = endpoints ? endpoints.endpoint : null;
+const countryInfoStore = useCountryInfoStore()
+const endpoints = countryInfoStore.endpoints.find((c) => c.code == rowData.country_code)
+const endpoint = endpoints ? endpoints.endpoint : null
 const url = computed(() => {
-	return `https://${endpoint}/dp/${rowData.asin}`;
-});
+  return `https://${ endpoint }/dp/${ rowData.asin }`
+})
 
 const ncx_rate = computed(() => {
-	if (rowData.ncx_count != null && rowData.order_count != null && rowData.order_count > 0) {
-		return ((rowData.ncx_count / rowData.order_count) * 100).toFixed(2);
-	}
-});
+  if (rowData.ncx_count != null && rowData.order_count != null && rowData.order_count > 0) {
+    return ((rowData.ncx_count / rowData.order_count) * 100).toFixed(2)
+  }
+})
 </script>
 
 <template>
-	<el-card  class="border-none top-5 z-10 mt-5">
-		<el-row :gutter="20">
-			<el-col :span="2">
-			<el-image
-				:src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${rowData.img}.jpg`"
-				class="mr-5"
-				fit="fill"
-				lazy
-				style="min-width: 120px; height: 120px"
-			>
-				<template #error>
-					<div class="flex justify-center items-center h-full w-full text-2xl" style="background: var(--el-fill-color-light)">
-						<el-icon>
-							<icon-picture />
-						</el-icon>
-					</div>
-				</template>
-			</el-image>
-			</el-col>
-			<el-col :span="20">
-			<div class="flex flex-col justify-between">
-				<el-row>
-					<el-col :span="24">
-						<el-link
-							:disabled="!rowData.product_name"
-							:href="url"
-							:underline="false"
-							style="font-size: 18px; justify-content: left !important"
-							target="_blank"
-							type="primary"
-						>
-							<span class="line-clamp-2 text-ellipsis whitespace-normal">{{ rowData.product_name || '--' }}</span>
-						</el-link>
-					</el-col>
-				</el-row>
-				<div class="mt-3" >
-					<el-row >
-						<el-col :span="6">
-							<div class="font-semibold italic">ASIN : {{ rowData.asin || '-' }}</div>
-						</el-col>
-						<el-col :span="6">
-							<div class="font-semibold italic">SKU : {{ rowData.sku || '-' }}</div>
-						</el-col>
-					</el-row>
-					<el-divider style="margin-top: 10px; margin-bottom: 8px" />
-					<el-row class="d-flex align-items-center">
-						<el-col :span="3">
-							<div class="font-semibold italic">总订单数 : {{ rowData.order_count || '-' }}</div>
-						</el-col>
-						<el-col :span="3">
-							<div class="font-semibold italic">NCX订单 : {{ rowData.ncx_count || '-' }}</div>
-						</el-col>
-						<el-col :span="3">
-							<div class="font-semibold italic">NCX率 : {{ ncx_rate ? ncx_rate + '%' : '-' }}</div>
-						</el-col>
-						<el-col :span="3">
-							<div class="font-semibold italic">退货率 : {{ (rowData.return_record_rate * 100).toFixed(2) + '%' || '-' }}</div>
-						</el-col>
-						<el-col :span="4">
-							<div class="font-semibold italic">
-								最近更新 :
-								{{ dayjs(rowData.last_updated_date).format('YYYY-MM-DD') || '-' }}
-							</div>
-						</el-col>
-						<el-col :span="6">
-							<div class="flex">
-								<el-tooltip v-if="rowData.all_score > 0" :content="rowData.all_score" effect="dark" placement="top" show-after="350">
-									<div class="flex items-center">
-										<div class="font-semibold italic">星级 :</div>
-										<el-rate
-											v-if="rowData.all_score > 0"
-											v-model="rowData.all_score"
-											:colors="['#FF0000', '#FF9900', '#67C23A']"
-											disabled
-											text-color="#1e293b"
-										/>
-									</div>
-								</el-tooltip>
-								<span v-else>{{ rowData.all_score }}</span>
-								<div v-else>
-									<span>-</span>
-								</div>
-							</div>
-						</el-col>
-					</el-row>
-				</div>
-			</div>
-				</el-col>
-		</el-row>
+  <el-card class="sticky border-none top-2 z-20">
+    <el-row :gutter="20">
+      <el-col :span="2">
+        <el-image
+            :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${rowData.img}.jpg`"
+            class="mr-5"
+            fit="fill"
+            lazy
+            style="min-width: 120px; height: 120px"
+        >
+          <template #error>
+            <div class="flex justify-center items-center h-full w-full text-2xl" style="background: var(--el-fill-color-light)">
+              <el-icon>
+                <icon-picture />
+              </el-icon>
+            </div>
+          </template>
+        </el-image>
+      </el-col>
+      <el-col :span="20">
+        <div class="flex flex-col justify-between">
+          <el-row>
+            <el-col :span="24">
+              <el-link
+                  :disabled="!rowData.product_name"
+                  :href="url"
+                  :underline="false"
+                  style="font-size: 18px; justify-content: left !important"
+                  target="_blank"
+                  type="primary"
+              >
+                <span class="line-clamp-2 text-ellipsis whitespace-normal">{{ rowData.product_name || '--' }}</span>
+              </el-link>
+            </el-col>
+          </el-row>
+          <div class="mt-3">
+            <el-row>
+              <el-col :span="6">
+                <div class="font-semibold">
+                <span style="color: #727478">
+                  ASIN :
+                </span>
+                  <span class="italic">
+                  {{ rowData.asin || '-' }}
+                </span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="font-semibold">
+                <span style="color: #727478">
+                  SKU : 
+                </span>
+                  <span class="italic">
+                  {{ rowData.sku || '-' }}
+                </span>
+                </div>
+              </el-col>
+            </el-row>
+            <el-divider style="margin-top: 10px; margin-bottom: 8px" />
+            <el-row class="d-flex align-items-center">
+              <el-col :span="3">
+                <div class="font-semibold">
+                <span style="color: #727478">
+                  总订单数 : 
+                </span>
+                  <span class="italic">
+                  {{ rowData.order_count || '-' }}
+                </span>
+                </div>
+              </el-col>
+              <el-col :span="3">
+                <div class="font-semibold">
+                <span style="color: #727478">
+                  NCX订单 : 
+                </span>
+                  <span class="italic">
+                  {{ rowData.ncx_count || '-' }}
+                </span>
+                </div>
+              </el-col>
+              <el-col :span="3">
+                <div class="font-semibold">
+                <span style="color: #727478">
+                  NCX率 : 
+                </span>
+                  <span class="italic">
+                  {{ ncx_rate ? ncx_rate + '%' : '-' }}
+                </span>
+                </div>
+              </el-col>
+              <el-col :span="3">
+                <div class="font-semibold">
+                <span style="color: #727478">
+                  退货率 : 
+                </span>
+                  <span class="italic">
+                  {{ (rowData.return_record_rate * 100).toFixed(2) + '%' || '-' }}
+                </span>
+                </div>
+              </el-col>
+              <el-col :span="4">
+                <div class="font-semibold">
+                <span style="color: #727478">
+                  最近更新 :
+                </span>
+                  <span class="italic">
+                  {{ dayjs(rowData.last_updated_date).format('YYYY-MM-DD') || '-' }}
+                </span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="flex">
+                  <el-tooltip v-if="rowData.all_score > 0" :content="rowData.all_score" effect="dark" placement="top"
+                              show-after="350">
+                    <div class="flex items-center">
+                      <div class="font-semibold mr-1" style="color: #727478">星级 :</div>
+                      <el-rate
+                          v-if="rowData.all_score > 0"
+                          v-model="rowData.all_score"
+                          :colors="['#FF0000', '#FF9900', '#67C23A']"
+                          disabled
+                          text-color="#1e293b"
+                      />
+                    </div>
+                  </el-tooltip>
+                  <span v-else>{{ rowData.all_score }}</span>
+                  <div v-else>
+                    <span>-</span>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
 
-		<!--<el-button :icon="Back" plain round type="info" @click="handleBack">返 回</el-button>-->
-	</el-card>
+    <!--<el-button :icon="Back" plain round type="info" @click="handleBack">返 回</el-button>-->
+  </el-card>
 </template>
 
 <style scoped>
 .d-flex {
-	display: flex;
+  display: flex;
 }
 
 .align-items-center {
-	align-items: center; /* 垂直居中对齐 */
+  align-items: center; /* 垂直居中对齐 */
 }
 </style>

src/views/customers-voice/components/show-detail/index.vue

@@ -4,51 +4,56 @@
  * @Description: 买家之声-详情页
  * @Author: xinyan
  */
-import TitleCard from '/@/views/customers-voice/components/show-detail/components/TitleCard.vue';
-import LineChart from '/@/views/customers-voice/components/show-detail/components/LineChart.vue';
-import DataDisplay from '/@/views/customers-voice/components/show-detail/components/DataDisplay.vue';
+import TitleCard from '/@/views/customers-voice/components/show-detail/components/TitleCard.vue'
+import LineChart from '/@/views/customers-voice/components/show-detail/components/LineChart.vue'
+import DataDisplay from '/@/views/customers-voice/components/show-detail/components/DataDisplay.vue'
+
 
 interface Parameter {
-	asin: string;
-	date: Array<string>;
+  asin: string;
+  date: Array<string>;
 }
 
-const queryParameter: Parameter | undefined = inject('query-parameter');
+const queryParameter: Parameter | undefined = inject('query-parameter')
 
-const showOpen = defineModel({ default: false });
+const showOpen = defineModel({ default: false })
 
-const showDrawer = <Ref>useTemplateRef('showDrawer');
+const showDrawer = <Ref>useTemplateRef('showDrawer')
 
 const props: any = defineProps({
-	rowData: Object,
-});
-const { rowData } = props;
+  rowData: Object
+})
+const { rowData } = props
 
-const emit = defineEmits(['refresh']);
+const emit = defineEmits([ 'refresh' ])
 </script>
 
 <template>
-	<div class="drawer-container">
-		<el-drawer
-			ref="showDrawer"
-			v-model="showOpen"
-
-			:close-on-click-modal="false"
-			:close-on-press-escape="false"
-			direction="btt"
-			size="90%"
-		>
-			<div class="px-5">
-				<TitleCard :rowData="rowData"></TitleCard>
-				<LineChart :queryParameter="queryParameter" :rowData="rowData"></LineChart>
-				<el-card class="border-none mt-5">
-					<DataDisplay :queryParameter="queryParameter" :rowData="rowData"></DataDisplay>
-				</el-card>
-			</div>
-		</el-drawer>
-	</div>
+  <div class="drawer-container">
+    <el-drawer
+        ref="showDrawer"
+        v-model="showOpen"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        direction="btt"
+        size="90%"
+        style="background-color: #F3F4FB !important;"
+    >
+      <div class="sticky top-0" style="background-color:#F3F4FB; min-height: 8px; z-index: 2"></div>
+      <div class="px-5 mb-5">
+        <TitleCard :rowData="rowData"></TitleCard>
+        <LineChart :queryParameter="queryParameter" :rowData="rowData"></LineChart>
+        <el-card class="border-none mt-5" shadow="hover">
+          <DataDisplay :queryParameter="queryParameter" :rowData="rowData"></DataDisplay>
+        </el-card>
+      </div>
+    </el-drawer>
+  </div>
 </template>
 
 <style scoped>
-
-</style>
+.drawer-container :deep(.el-drawer__header) {
+  border-bottom: none;
+  font-weight: 500;
+}
+</style>

src/views/product-manage/historical-detail/component/ChangeValue.vue

@@ -59,7 +59,7 @@ const formatedVal = computed(() => {
         </li>
       </ul>
     </template>
-    <span v-else>{{ formatedVal }}</span>
+    <span v-else>{{ formatedVal || '-' }}</span>
   </div>
 </template>