1

src/components/common/CollectionBox.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="col" :class="showT ? 'tuck' : 'cancel'">
+    <div v-if="showT"><img src="@/assets/col.png" alt="" />收藏</div>
+    <div v-else><img src="@/assets/cancelcol.png" alt="" />取消收藏</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    showT: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.col {
+  display: flex;
+  justify-content: center;
+  div {
+    height: 30px;
+    border-radius: 4px 4px 4px 4px;
+    line-height: 30px;
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+  }
+  img {
+    margin-right: 4px;
+  }
+}
+.tuck {
+  width: 68px;
+  border: 1px solid #3f8dfd;
+  color: #3f8dfd;
+}
+.cancel {
+  width: 86px;
+  color: #ffffff;
+  background: #f9c03c;
+}
+</style>

src/pages/subject/collect-bank.vue

@@ -906,6 +906,7 @@
                     </div>
                   </div>
                 </div>
+                <Collection-box></Collection-box>
               </div>
               <div class="right-box">
                 <div class="right-box__header">
@@ -983,6 +984,7 @@
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
+import CollectionBox from "@/components/common/CollectionBox.vue";
 import { mapMutations } from "vuex";
 export default {
   name: "BankExplain",
@@ -990,6 +992,7 @@ export default {
     Footer,
     Header,
     ToolBar,
+    CollectionBox,
   },
   data() {
     return {