签到组件

app/src/components/signIn/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="mod-sign">
+        <header>签到有礼</header>
+        <section>
+            <div class="row-fl">
+                <p class="date">4-22</p>
+                <p class="day">周一</p>
+            </div>
+            <div class="row-fr">
+                <div class="btn-sign" v-if="true">
+                    <i class="icon-day">
+                        <span></span>
+                        <ul>
+                            <li></li>
+                            <li></li>
+                        </ul>
+                    </i>
+                    签到
+                    <em></em>
+                </div>
+                <div class="btn-signed" v-else>
+                    <i class="icon-checked"><em></em></i>
+                    已签到
+                </div>
+                <p class="msg">已签到<i> 0 </i>天</p>
+            </div>
+        </section>
+    </div>
+</template>
+<script>
+export default {
+}
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+</style>

app/src/components/signIn/style.scss

@@ -0,0 +1,163 @@
+.mod-sign {
+    position: absolute;
+    cursor: pointer;
+    width: 140px;
+    height: 85px;
+    border-radius: 5px;
+    border: 1px solid $main-active-color;
+    top: 20px;
+    left: -160px;
+    background: #f1f1f1;
+    &:after,&:before {
+        content: "";
+        background: $main-active-color;
+        border: 1px solid #fff;
+        border-radius: 3px;
+        height: 11px;
+        width: 4px;
+        position: absolute;
+        top: -6px;
+    }
+    &:after {
+        left: 20px;
+    }
+    &:before {
+        right: 20px;
+    }
+    header {
+        height: 21px;
+        line-height: 21px;
+        background: $main-active-color;
+        color: #fff;
+        font-size: 14px;
+        text-align: center;
+    }
+    section {
+        padding: 10px 8px 0 8px;
+        display: flex;
+        justify-content: space-between;
+    }
+    .row-fl {
+        text-align: center;
+        width: 45px;
+        height: 45px;
+        background: #fff;
+        box-shadow: 0px 0px 26px 2px#ebebeb;
+        .date {
+            font-size: 12px;
+            color: #999;
+            line-height: 12px;
+            padding: 3px 0;
+        }
+        .day {
+            color: #666;
+            font-size: 14px;
+            line-height: 22px;
+        }
+    }
+    .row-fr {
+        width: 72px;
+        // height: 22px;
+        .btn-signed {
+            width: 72px;
+            height: 22px;
+            background: #ccc;
+            line-height: 22px;
+            text-align: center;
+            color: #fff;
+            font-size: 14px;
+        }
+        .btn-sign {
+            width: 72px;
+            height: 22px;
+            background: #ffa200;
+            border-radius: 3px;
+            line-height: 22px;
+            text-align: center;
+            color: #fff;
+            font-size: 14px;
+            position: relative;
+            em {
+                position: absolute;
+                width: 9px;
+                height: 9px;
+                background: $main-active-color;
+                border-radius: 50%;
+                top: -4px;
+                right: -4px;
+            }
+        }
+        .msg {
+            text-align: center;
+            color: #666;
+            font-size: 12px;
+            line-height: 24px;
+            i {
+                color: $main-active-color;
+            }
+        }
+
+    }
+}
+.icon-day {
+    display: inline-block;
+    width: 13px;
+    height: 12px;
+    border: 1px solid #fff;
+    border-radius: 3px;
+    margin-right: 1px;
+    vertical-align: -2px;
+    position: relative;
+    &:after,&:before {
+        content: "";
+        background: #fff;
+        height: 3px;
+        width: 1px;
+        position: absolute;
+        top: -2px;
+    }
+    &:after {
+        left: 4px;
+    }
+    &:before {
+        right: 4px;
+    }
+    span {
+        position: absolute;
+        left: 0;
+        top: 3px;
+        height: 1px;
+        width: 100%;
+        background: #fff;
+    }
+    li {
+        width: 8px;
+        height: 1px;
+        margin: 2px auto;
+        background: #fff;
+    }
+    ul {
+        padding-top: 4px;
+    }
+}
+
+.icon-checked {
+    display: inline-block;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    border: 1px solid #fff;
+    vertical-align: -1px;
+    line-height: 13px;
+    text-align: center;
+    em {
+        display: inline-block;
+        width: 8px;
+        height: 4px;
+        border-left: 1px solid #fff;
+        border-bottom: 1px solid #fff;
+        vertical-align: 5px;
+        transform-origin: 50%;
+        transform: rotate(-45deg);
+    }
+}

app/src/page/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="o-wrap">
     <div class="page-index">
+      <sign-in></sign-in>
       <div class="mod-row">
         <my-game></my-game>
         <banner></banner>
@@ -27,6 +28,7 @@ import hotGameToday from "@/components/hotGameToday";
 import rank from "@/components/rank";
 import boutiqueGame from "@/components/boutiqueGame";
 import hotGame from "@/components/hotGame";
+import signIn from "@/components/signIn";
 
 export default {
   components: {
@@ -36,12 +38,14 @@ export default {
     hotGameToday,
     rank,
     boutiqueGame,
-    hotGame
+    hotGame,
+    signIn
   }
 };
 </script>
 <style lang="scss" scoped>
 .page-index {
   padding-bottom: 65px;
+  position: relative;
 }
 </style>