From f91eedd4959c75306f7dcd05ff1c6426fdc96eaf Mon Sep 17 00:00:00 2001
From: barrystone <barrystone3181@gmail.com>
Date: Fri, 5 Mar 2021 00:58:45 +0800
Subject: [PATCH] [Add] add second button on header in cfp

---
 src/assets/scss/CFP/header.scss | 25 ++++++++++++++++++-------
 src/components/CFP/Header.vue   | 21 +++++++++++++++------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/assets/scss/CFP/header.scss b/src/assets/scss/CFP/header.scss
index ce9b4c2..6d025e5 100644
--- a/src/assets/scss/CFP/header.scss
+++ b/src/assets/scss/CFP/header.scss
@@ -1,4 +1,4 @@
-@import '../hyperpoint.scss';
+@import "../hyperpoint.scss";
 
 $width-svg-sitcon2021: 341px;
 $width-svg-sitcon: 244px;
@@ -66,9 +66,20 @@ $width-svg-news: 259px;
       .btn-news-wrapper {
         margin: -48px;
       }
-
-      &:hover {
-        bottom: 6px;
+      .cfp-news__btn {
+        position: relative;
+        &--1 {
+          transform: translate(50%, -75%);
+          &:hover {
+            transform: translate(50%, -90%);
+          }
+        }
+        &--2 {
+          transform: translate(-50%, 75%);
+          &:hover {
+            transform: translate(-50%, 50%);
+          }
+        }
       }
     }
   }
@@ -132,7 +143,7 @@ $width-svg-news: 259px;
     .info-box {
       .cfp-title {
         margin-bottom: 56px;
-        left: calc(#{$width-svg-cfp} * 0.06)
+        left: calc(#{$width-svg-cfp} * 0.06);
       }
       .date-location {
         .date-wrapper {
@@ -184,7 +195,7 @@ $width-svg-news: 259px;
     .info-box {
       .cfp-title {
         margin-bottom: 56px;
-        left: calc(#{$width-svg-cfp} * 0.05)
+        left: calc(#{$width-svg-cfp} * 0.05);
       }
       .date-location {
         .date-wrapper {
@@ -237,7 +248,7 @@ $width-svg-news: 259px;
     .info-box {
       .cfp-title {
         margin-bottom: 32px;
-        left: calc(#{$width-svg-cfp} * 0.033)
+        left: calc(#{$width-svg-cfp} * 0.033);
       }
       .date-location {
         .date-wrapper {
diff --git a/src/components/CFP/Header.vue b/src/components/CFP/Header.vue
index 964a84c..a5783a5 100644
--- a/src/components/CFP/Header.vue
+++ b/src/components/CFP/Header.vue
@@ -55,18 +55,27 @@
         </div>
       </div>
       <div class="cfp-news">
-        <a href="/2021/cfp/ocfp-news" rel="noopener">
-          <div class="btn-news-wrapper">
-            <img src="~@/assets/images/burnfont/btn-news.svg" id="svg-news" />
-          </div>
-        </a>
+        <div class="cfp-news__btn cfp-news__btn--1">
+          <a href="/2021/cfp/ocfp-news" rel="noopener">
+            <div class="btn-news-wrapper">
+              <img src="~@/assets/images/burnfont/btn-news.svg" id="svg-news" />
+            </div>
+          </a>
+        </div>
+        <div class="cfp-news__btn cfp-news__btn--2">
+          <a href="/2021/cfp/ocfp-news" rel="noopener">
+            <div class="btn-news-wrapper">
+              <img src="~@/assets/images/burnfont/btn-news.svg" id="svg-news" />
+            </div>
+          </a>
+        </div>
       </div>
     </div>
   </header>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class CfpHeader extends Vue {}