yqy-home-keepon

src/components/business/yqy-home-keepon.vue

+<template>
+  <div class="header bgWhite">
+    <div v-show="isShow" class="border-bottom space-between">
+      <div>
+        <div class="gray keeponTitle">{{resourceData.message}}</div>
+        <div>
+          <span class="gray fs24 keeponRight">已学习:{{resourceData.week}} 周</span>
+          <span class="gray fs24 keeponRight">剩余:{{resourceData.Remaining}}%</span>
+          <span class="gray fs24 continueStudy" @click="continueStudy">继续学习></span>
+        </div>
+      </div>
+      <div>
+        <img @click="cancel" src="../../images/Shape@2x.png"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'YqyHomeKeepon',
+  components: {
+  },
+  props: {
+      resourceData: {
+          type: Object,
+          default:()=>{
+              return {
+                message: '动态',
+                week: 2,
+                Remaining: 2
+              }
+          }
+      }
+  },
+  watch: {
+  },
+  data () {
+    return {
+      isShow: true
+    }
+  },
+  mounted(){
+  },
+  methods: {
+    continueStudy(){
+      console.log('continueStudy');
+      this.$emit('continueStudy')
+    },
+    cancel(){
+      console.log('cancel');
+      this.isShow = false;
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import '../../style/mixin.scss';
+@import '../../style/global.scss';
+.header{
+  width: 100%;
+  padding: 0 px2rem(15px);
+  .border-bottom{
+    width: 100%;
+    border-bottom: 1px solid RGBA(231, 231, 231, 1);
+    padding-bottom: px2rem(10px);
+  }
+  .keeponTitle{
+    font-size: px2rem(14px);
+  }
+  .continueStudy{
+    color: RGBA(31, 121, 115, 1);
+  }
+  .keeponRight{
+    margin-right: px2rem(15px);
+  }
+}
+</style>
+15px
\ No newline at end of file

src/style/global.scss

@@ -39,6 +39,9 @@
 .fs11{
     font-size: px2rem(11px);
 }
+.fs13{
+    font-size: px2rem(13px);
+}
 .fs14{
     font-size: px2rem(14px);
 }
@@ -51,6 +54,9 @@
 .fs26{
     font-size: px2rem(13px);
 }
+.fs28{
+    font-size: px2rem(14px);
+}
 .fw{
     font-weight: 600;
 }

src/views/home/home.vue

@@ -18,6 +18,7 @@
             <span @click="toast('Hi, 你好，宾宾！')"> toast 3</span>
             <YqyHotLabel/>
             <YqyHomeBanner/>
+            <YqyHomeKeepon/>
             <YqyHomeAdv/>
             <YqyCategoryThree1/>
             <YqyFiveMinutes/>
@@ -44,6 +45,7 @@ import YqyHomeAdv from '../../components/business/yqy-home-adv';
 import YqyFiveMinutes from '../../components/business/yqy-five-minutes';
 import YqyCategoryThree1 from '../../components/business/yqy-category-three-1';
 import YqyHomeBanner from '../../components/business/yqy-home-banner';
+import YqyHomeKeepon from '../../components/business/yqy-home-keepon';
 export default {
     data(){
         return {
@@ -61,7 +63,8 @@ export default {
         YqyHomeAdv,
         YqyFiveMinutes,
         YqyCategoryThree1,
-        YqyHomeBanner
+        YqyHomeBanner,
+        YqyHomeKeepon
     },
 	mounted(){
         this.init()