From 2b88dde6d6841450dd20ca749f0672bccd9cd85a Mon Sep 17 00:00:00 2001
From: yuyongdong <yuyongdong@kingsome.cn>
Date: Mon, 26 Aug 2024 16:45:47 +0800
Subject: [PATCH] =?UTF-8?q?cec=20claim=20=E5=85=AC=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/footer.vue   |   2 +-
 src/components/notice/anomaly.vue  |  52 ++++++++++++
 src/components/notice/cecClaim.vue | 128 +++++++++++++++++++++++++++++
 src/views/NoticeView.vue           |  85 +++++++++++--------
 4 files changed, 232 insertions(+), 35 deletions(-)
 create mode 100644 src/components/notice/anomaly.vue
 create mode 100644 src/components/notice/cecClaim.vue

diff --git a/src/components/common/footer.vue b/src/components/common/footer.vue
index c6271ed..9d66619 100644
--- a/src/components/common/footer.vue
+++ b/src/components/common/footer.vue
@@ -88,7 +88,7 @@ const backTop = () => {
 .follow-container {
   font-family: "Arial", sans-serif;
   width: 100%;
-  height: 100%;
+  // height: 100%;
   background: #0e0e0e;
 }
 .follow-content {
diff --git a/src/components/notice/anomaly.vue b/src/components/notice/anomaly.vue
new file mode 100644
index 0000000..c886847
--- /dev/null
+++ b/src/components/notice/anomaly.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="anomaly">
+    <div class="anomaly-content">
+      <!-- <div class="notice-content-title">
+        <h2>Announcement on Handling the Ticket Anomaly Incident</h2>
+      </div> -->
+      <div class="anomaly-content-text">
+        <div>
+          <img src="@/assets/img/notice/Announcement01.jpg" alt="">
+        </div>
+      </div>
+      <div class="anomaly-content-table">
+        <div>
+          <img src="@/assets/img/notice/Announcement02.jpg" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.anomaly {
+  .anomaly-content {
+    width: 1920px;
+    margin: 0 auto;
+    .anomaly-content-text {
+      div {
+        height: 1230px;
+        margin: 0 auto;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .notice-content-table {
+      div {
+        height: 3708px;
+        margin: 0 auto;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/notice/cecClaim.vue b/src/components/notice/cecClaim.vue
new file mode 100644
index 0000000..9c642e8
--- /dev/null
+++ b/src/components/notice/cecClaim.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="claim">
+    <div class="content">
+      <div class="claim-title">
+        <h1>Request for $CEC New Listing on CoinMarketCap</h1>
+        <span>2024-08-25</span>
+      </div>
+      <div class="claim-line"></div>
+      <div class="claim-content">
+        <h3>Dear CoinMarketCap Team,</h3>
+        <div>
+          <p>We are writing to request the listing of our cryptocurrency, $CEC, on CoinMarketCap.</p>
+          <p>We believe that listing $CEC will provide our community with greater visibility and access to our project’s information.</p>
+        </div>
+        <h4>Request Details and Proof of Authenticity:</h4>
+        <div>
+          <p>We kindly request that $CEC be listed on CoinMarketCap with the following details:</p>
+        </div>
+        <div class="flex">
+          <h5>•	Token Name:</h5> <p>&nbsp;CEC</p>
+        </div>
+        <div class="flex">
+          <h5>•	Official Website:</h5> <p>&nbsp;counterfire.games</p>
+        </div>
+        <div class="flex">
+          <h5>•	Twitter:</h5> <p>&nbsp;x.com/playCounterFire</p>
+        </div>
+        <div class="flex">
+          <h5>•	Discord:</h5> <p>&nbsp;discord.gg/counterfire</p>
+        </div>
+        <div>
+          <br>
+        </div>
+        <div>
+          <p>We appreciate your consideration of this request and look forward to having $CEC listed on CoinMarketCap.</p>
+          <p>If you require any further information or clarification, please feel free to reach out to us.</p>
+        </div>
+        <div>
+          <p>Thank you for your support and collaboration.</p>
+          <br>
+        </div>
+        <div>
+          <h5>Best regards,</h5>
+        </div>
+        <div>
+          <p>CounterFire Team</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.claim {
+  color: #fff;
+  overflow: hidden;
+  padding-bottom: 160px;
+  .content {
+    width: 1199px;
+    margin: 0 auto;
+    margin-top: 80px;
+    .claim-title {
+      position: relative;
+      h1 {
+        text-align: center;
+        font-family: 'Anton';
+        font-weight: 400;
+        font-size: 36px;
+      }
+      span {
+        display: inline-block;
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        font-family: 'Poppins';
+        font-weight: 600;
+        font-size: 18px;
+        color: #F3F0FF;
+      }
+    }
+    .claim-line {
+      width: 100%;
+      height: 4px;
+      margin: 20px 0;
+      background: url('src/assets/img/notice/Announcement line.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .claim-content {
+      width: 1199px;
+      margin: 0 auto;
+      color: #F3F0FF;
+      h3 {
+        font-family: 'Poppins';
+        font-weight: 700;
+        font-size: 26px;
+        margin: 20px 0;
+      }
+      h4 {
+        font-family: 'Poppins';
+        font-weight: 700;
+        font-size: 22px;
+        margin: 20px 0;
+      }
+      div {
+        margin: 5px 0;
+        p {
+          font-family: 'Poppins-Regular';
+          font-weight: 400;
+          font-size: 18px;
+        }
+        h5 {
+          font-family: 'Poppins';
+          font-weight: 700;
+          font-size: 18px;
+        }
+      }
+      .flex {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/NoticeView.vue b/src/views/NoticeView.vue
index 58f8881..904f137 100644
--- a/src/views/NoticeView.vue
+++ b/src/views/NoticeView.vue
@@ -1,50 +1,67 @@
 <template>
   <div class="notice">
-    <div class="notice-content">
-      <div class="notice-content-text">
-        <div>
-          <img src="@/assets/img/notice/Announcement01.jpg" alt="">
-        </div>
-      </div>
-      <div class="notice-content-table">
-        <div>
-          <img src="@/assets/img/notice/Announcement02.jpg" alt="">
-        </div>
-      </div>
-    </div>
+    <CecClaim />
     <Footer />
   </div>
 </template>
 
 <script setup>
+import { ref } from "vue"
+
+import Anomaly from "@/components/notice/anomaly.vue"
+import CecClaim from "@/components/notice/cecClaim.vue"
 import Footer from "@/components/common/footer.vue"
+
+const noticeList = ref([
+  {}
+])
+
 </script>
 
 <style lang="scss" scoped>
 .notice {
-  .notice-content {
-    width: 1920px;
-    margin: 0 auto;
-    .notice-content-text {
-      div {
-        height: 1230px;
-        margin: 0 auto;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .notice-content-table {
-      div {
-        height: 3708px;
-        margin: 0 auto;
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
+  padding-top: 70px;
+  width: 100%;
+  height: 100%;
+  background: url('src/assets/img/notice/Announcement bg.png') no-repeat;
+  // background-size: 100% 100%;
+  .notice-table {
+    position: absolute;
+    top: 168px;
+    left: 171px;
+    color: #fff;
+    z-index: 999;
+    li {
+      width: 269px;
+      height: 130px;
+      background: url('@/assets/img/notice/Announcement button02.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
+  // padding-top: 84px;
+  // .notice-content {
+  //   width: 1920px;
+  //   margin: 0 auto;
+  //   .notice-content-text {
+  //     div {
+  //       height: 1230px;
+  //       margin: 0 auto;
+  //       img {
+  //         width: 100%;
+  //         height: 100%;
+  //       }
+  //     }
+  //   }
+  //   .notice-content-table {
+  //     div {
+  //       height: 3708px;
+  //       margin: 0 auto;
+  //       img {
+  //         width: 100%;
+  //         height: 100%;
+  //       }
+  //     }
+  //   }
+  // }
 }
 </style>
\ No newline at end of file