水印

src/views/etaChart/components/ChartDetailPop.vue

@@ -19,6 +19,7 @@ const props=defineProps({
 const chartInfo = ref(null)
 const calendarType = ref('')
 const loading = ref(false)
+const WaterMark=ref(null)
 
 async function getChartDetail() {
   loading.value = true
@@ -30,6 +31,7 @@ async function getChartDetail() {
   if (res.Ret === 200) {
     chartInfo.value = res.Data.ChartInfo
     calendarType.value = res.Data.ChartInfo.Calendar
+    WaterMark.value=res.Data.WaterMark
     //初始化上下限
     isUseSelfLimit.value = true
     setLimitData(res.Data)
@@ -119,6 +121,8 @@ async function handleCancelCollect(){
           >来源:{{ JSON.parse(chartInfo.SourcesFrom).text }}</span
         >
       </div>
+      <!-- 图表水印 -->
+      <div class="chart-water-mark" :style="{backgroundImage:`url(${WaterMark})`}"></div>
     </div>
   </t-dialog>
 
@@ -159,8 +163,21 @@ async function handleCancelCollect(){
     padding: 34px 16px;
     display: flex;
     flex-direction: column;
+    position: relative;
+    .chart-water-mark{
+      position: absolute;
+      left: 10%;
+      top: 10%;
+      width: 80%;
+      height: 80%;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
     .chart-box{
       flex: 1;
+      position: relative;
+      z-index: 10;
     }
   }
 }

src/views/etaChart/components/ChartWrap.vue

@@ -63,6 +63,7 @@ const intro = ref('')
 const chartInfo = ref(null)
 const calendarType = ref('')
 const loading = ref(false)
+const WaterMark=ref(null)
 async function getChartDetail() {
   loading.value = true
   const res = await apiETAChart.chartDetail({
@@ -75,6 +76,7 @@ async function getChartDetail() {
     intro.value = res.Data.ChartInfo.Description
     chartInfo.value = res.Data.ChartInfo
     calendarType.value = res.Data.ChartInfo.Calendar
+    WaterMark.value=res.Data.WaterMark
     //初始化上下限
     isUseSelfLimit.value = true
     setLimitData(res.Data)
@@ -143,6 +145,8 @@ function handleGoEdbSource(data) {
           >来源:{{ JSON.parse(chartInfo.SourcesFrom).text }}</span
         >
       </div>
+      <!-- 图表水印 -->
+      <div class="chart-water-mark" :style="{backgroundImage:`url(${WaterMark})`}"></div>
     </div>
     <div class="table-wrap">
       <t-table
@@ -194,8 +198,21 @@ function handleGoEdbSource(data) {
   overflow: auto;
   .chart-render-wrap {
     margin-bottom: 20px;
+    position: relative;
+    .chart-water-mark{
+      position: absolute;
+      left: 10%;
+      top: 10%;
+      width: 80%;
+      height: 80%;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
     .chart-box {
       height: 600px;
+      position: relative;
+      z-index: 10
     }
   }
   .instructions-wrap {

src/views/etaChart/components/chartList/ChartBox.vue

@@ -23,6 +23,7 @@ const props=defineProps({
 const chartInfo = ref(null)
 const calendarType = ref('')
 const loading = ref(false)
+const WaterMark=ref(null)
 
 async function getChartDetail() {
   loading.value = true
@@ -34,6 +35,7 @@ async function getChartDetail() {
   if (res.Ret === 200) {
     chartInfo.value = res.Data.ChartInfo
     calendarType.value = res.Data.ChartInfo.Calendar
+    WaterMark.value=res.Data.WaterMark
     //初始化上下限
     isUseSelfLimit.value = true
     setLimitData(res.Data)
@@ -141,6 +143,8 @@ async function handleCancelCollect(){
           >来源:{{ JSON.parse(chartInfo.SourcesFrom).text }}</span
         >
       </div>
+      <!-- 图表水印 -->
+      <div class="chart-water-mark" :style="{backgroundImage:`url(${WaterMark})`}"></div>
     </div>
   </div>
 
@@ -172,8 +176,21 @@ async function handleCancelCollect(){
     padding: 10px 14px;
     display: flex;
     flex-direction: column;
+    position: relative;
+    .chart-water-mark{
+      position: absolute;
+      left: 10%;
+      top: 10%;
+      width: 80%;
+      height: 80%;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
     .chart-box{
       flex: 1;
+      position: relative;
+      z-index: 10;
     }
   }
 }

src/views/user/favorite/components/CollectChart.vue

@@ -54,9 +54,9 @@ async function handleSave(){
       closeBtn:false,
       confirmBtn:'知道了'
     });
-    return
+  }else{
+    MessagePlugin.success('收藏成功')
   }
-  MessagePlugin.success('收藏成功')
   emits('success')
 }