股票卡片加缩略分时图

components/IndexCard.vue

@@ -18,9 +18,8 @@
     </view>
 
     <view class="chart-container">
-      <view class="mini-chart" :style="{ backgroundColor: chartBgColor }">
-        <!-- 这里可以放置实际的图表组件，目前用简单的波浪线表示 -->
-        <view class="chart-line" :style="{ borderColor: priceColor }"></view>
+      <view class="mini-chart" >
+        <image class="time-chart" :src="timeChart" mode="aspectFit"></image>
       </view>
     </view>
   </view>
@@ -97,10 +96,14 @@ const priceColor = computed(() => {
   return props.isRising ? "#00C853" : "#FF1744";
 });
 
-// 计算图表背景色
-const chartBgColor = computed(() => {
-  return props.isRising ? "#E8F5E8" : "#FFEBEE";
+const timeChart = computed(() => {
+  return props.isRising ? "/static/marketSituation-image/upTimeChart.png" : "/static/marketSituation-image/downTimeChart.png";
 });
+
+// 计算图表背景色
+// const chartBgColor = computed(() => {
+//   return props.isRising ? "#E8F5E8" : "#FFEBEE";
+// });
 </script>
 
 <style scoped>
@@ -182,40 +185,8 @@ const chartBgColor = computed(() => {
   border-radius: 8rpx;
 }
 
-.chart-line {
-  position: absolute;
-  bottom: 20rpx;
-  left: 10rpx;
-  right: 10rpx;
-  height: 2rpx;
-  border-top: 2rpx solid;
-  border-style: solid;
-}
-
-/* 添加一些波浪效果 */
-.chart-line::before {
-  content: "";
-  position: absolute;
-  top: -10rpx;
-  left: 20%;
-  width: 20rpx;
-  height: 20rpx;
-  border: 2rpx solid;
-  border-color: inherit;
-  border-radius: 50%;
-  background: transparent;
-}
-
-.chart-line::after {
-  content: "";
-  position: absolute;
-  top: -6rpx;
-  right: 30%;
-  width: 12rpx;
-  height: 12rpx;
-  border: 2rpx solid;
-  border-color: inherit;
-  border-radius: 50%;
-  background: transparent;
+.time-chart {
+  width: 100%;
+  height: 100%;
 }
 </style>