Merge branch 'ch/ht_3.1' into debug_ht

src/views/chart/Detail.vue

@@ -91,8 +91,9 @@ const isShowMZSM = ref(false)
 </script>
 <template>
   <div class="chart-detail-page" v-if="chartInfo">
-    <div class="chart-title">{{chartInfo.ChartName}}</div>
-    <div class="mz-tips" @click="isShowMZSM = true">免责声明</div>
+    <div class="chart-title">{{chartInfo.ChartName}}</div> 
+    <div class="collect-icon" @click="handleCollect" >{{chartInfo.IsCollect?'取消收藏':'收藏'}}</div>
+    <!-- <div class="mz-tips" @click="isShowMZSM = true">免责声明</div> -->
     <!-- 图表渲染盒子 -->
     <div class="chart-render-wrap">
       <iframe :src="chartRenderUrl"></iframe>
@@ -100,11 +101,17 @@ const isShowMZSM = ref(false)
     <div v-if="chartInfo.SourcesFrom&&JSON.parse(chartInfo.SourcesFrom).text"><span>来源：{{chartInfo.SourcesFrom?JSON.parse(chartInfo.SourcesFrom).text:''}}</span></div>
 
     <div class="change-btns-box" v-if="changeChartList.length>1">
-      <div class="btn" @click="handleChangeChart('pre')">上一张</div>
-      <div class="btn" @click="handleChangeChart('next')">下一张</div>
+      <div class="btn bottom" @click="handleChangeChart('pre')">
+        <div class="triangle-left"></div>
+        <div>上一张</div>
+      </div>
+      <div class="btn" @click="handleChangeChart('next')">
+        <div class="triangle-right"></div>
+        <div>下一张</div>
+      </div>
     </div>
     <!-- 收藏 -->
-    <svg-icon @click="handleCollect" class="collect-icon" :name="chartInfo.IsCollect?'collected':'collect'" />
+    <!-- <svg-icon @click="handleCollect" class="collect-icon" :name="chartInfo.IsCollect?'collected':'collect'" /> -->
   </div>
   <!-- 免责声明 -->
   <disclaimers-wrap v-model:show="isShowMZSM" />
@@ -127,7 +134,7 @@ const isShowMZSM = ref(false)
   }
   .chart-render-wrap {
     margin-top: 50px;
-    height: 800px;
+    height: 850px;
     margin-bottom: 40px;
     iframe {
       width: 100%;
@@ -137,28 +144,44 @@ const isShowMZSM = ref(false)
   }
   .change-btns-box {
     position: fixed;
-    left: var(--page-padding);
-    right: var(--page-padding);
-    bottom: 69px;
-    display: flex;
-    justify-content: space-between;
+    z-index: 99;
+    right: 34px;
+    bottom: 150px;
     .btn {
-      width: 48%;
-      height: 68px;
-      text-align: center;
-      border-radius: 68px;
-      line-height: 68px;
+      width: 100%;
+      height: 120px;
       background-color: #f3f5f9;
+      display: flex;
+      flex-direction: column; /* 垂直方向排列子元素 */
+      justify-content: center; /* 水平居中（对于列布局，这将使整列居中） */
+      .triangle-left {
+        margin: 0 auto;
+        width: 0;
+        height: 0;
+        border-top: 20px solid transparent;
+        border-right: 40px solid #fff;
+        border-bottom: 20px solid transparent;
+        border-left: none;
+        margin-bottom: 10px;
+      }
+      .triangle-right {
+        margin: 0 auto;
+        width: 0;
+        height: 0;
+        border-top: 20px solid transparent;
+        border-left: 40px solid #fff;
+        border-bottom: 20px solid transparent;
+        border-right: none;
+        margin-bottom: 10px;
+      }
+    }
+    .bottom {
+      border-bottom: #666666 1px solid;
     }
   }
 }
 .collect-icon {
-  position: fixed;
-  z-index: 99;
-  right: 34px;
-  bottom: 150px;
-  width: 100px;
-  height: 100px;
+  color: #666666;
 }
 
 @media (min-width: 600px) {
@@ -186,10 +209,7 @@ const isShowMZSM = ref(false)
     }
   }
   .collect-icon{
-    right: 17px;
-    bottom: 75px;
-    width: 50px;
-    height: 50px;
+    color: #666666;
   }
 }
 </style>