首次进入活动任务弹框静态样式

components/first-enter-dialog/index.vue

+<template>
+  <section class="first-enter-wrap">
+    <div class="first-enter-container">
+      <div class="bg-content">
+        <div class="know-btn">我知道了</div>
+      </div>
+      <img class="cancel" src="~/assets/icon-dialog-cancel.png" alt="">
+    </div>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: "index"
+  }
+</script>
+
+<style scoped lang="less">
+.first-enter-wrap {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background:rgba(0,0,0,0.5);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .first-enter-container {
+    .bg-content {
+      width: 250px;
+      height: 275px;
+      background: url("../../assets/first-enter/first-enter-bg.png") no-repeat;
+      background-size: cover;
+      display: flex;
+      flex-flow: column;
+      .know-btn {
+        width: 200px;
+        height: 44px;
+        background: linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
+        border-radius: 25.5px;
+        text-align: center;
+        line-height: 44px;
+        color: #fff;
+        font-size: 18px;
+        font-weight: 700;
+        margin: auto auto 30px auto;
+
+      }
+    }
+    .cancel {
+      display: block;
+      width: 30px;
+      height: 30px;
+      margin: 20px auto 0 auto;
+    }
+  }
+}
+</style>
\ No newline at end of file

pages/index.vue

@@ -77,6 +77,10 @@
     <carve-up v-if="showCarveUp">
     </carve-up>
     <!--瓜分云鹊豆模块 ————end-->
+    <!--首次进入活动任务弹框———start-->
+    <first-enter-dialog>
+    </first-enter-dialog>
+    <!--首次进入活动任务弹框———end-->
   </div>
 </template>
 
@@ -85,7 +89,8 @@ import TaskActivity from '../components/task-activity';
 import Header from '../components/header/index';
 import Step from '../components/step';
 import StatusBar from '../components/bussiness/status-bar';
-import CarveUp from '../components/carve-up'
+import CarveUp from '../components/carve-up';
+import FirstEnterDialog from '../components/first-enter-dialog';
 import { 
   checkToken, 
   selectAppModuleParam,
@@ -100,7 +105,8 @@ export default {
     Header,
     Step,
     StatusBar,
-    CarveUp
+    CarveUp,
+    FirstEnterDialog
   },
   data() {
     return {