yqy-five-minutes

src/components/business/yqy-five-minutes.vue

+<template>
+    <div class="hotTeacher">
+        <div class="space-between">
+            <img class="img" src="../../images/Shape@2x.png"/>
+            <div @click="fiveMinutesMore" class="five-more gray fs11">更多></div>
+        </div>
+        <div class="teacherItem space-between" :key="index" v-for="(item,index) in hotTeachers">
+            <div class="teacherItemImg">
+                <img src="item.img"/>
+            </div>
+            <div class="fiveText">
+                <div class="teacherItemName fs14">{{item.name}}</div>
+                <div class="five-tag fs11">#心动时刻</div>
+                <img @click="video(index)" class="five-radio" src="../../images/Shape@2x.png"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'YqyFiveMinutes',
+  components: {
+  },
+  watch: {
+  },
+  props: {
+        hotTeachers: {
+            type: Array,
+            default:()=>{
+                return [
+                    {
+                        img: '../../images/Shape@2x.png',
+                        name: '原来高血压还能这么预防最有效！赶快来看看',
+                        hospital: '北京大学人民医院'
+                    },
+                    {
+                        img: '../../images/Shape@2x.png',
+                        name: '蒋立新',
+                        hospital: '医院'
+                    },
+                    {
+                        img: '../../images/Shape@2x.png',
+                        name: '蒋立新',
+                        hospital: '医院'
+                    },
+                    {
+                        img: '../../images/Shape@2x.png',
+                        name: '蒋立新',
+                        hospital: '医院'
+                    }
+                ]
+            }
+        }
+    },
+  data () {
+    return {
+    }
+  },
+  mounted(){
+  },
+  methods: {
+      fiveMinutesMore(){
+          console.log('fiveMinutesMore');
+          this.$emit('fiveMinutesMore')
+      },
+      video(val){
+          console.log('video',val);
+          this.$emit('video')
+      }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import '../../style/mixin.scss';
+@import '../../style/global.scss';
+.hotTeacher{
+    width: 100%;
+    background-color: #fff;
+    padding: 0 px2rem(15px) px2rem(26px);
+    .img{
+        width: px2rem(109px);
+        height: px2rem(22px);
+    }
+    .five-more{
+        border: 1px solid RGBA(169, 174, 183, 1);
+        border-radius: px2rem(9px);
+        width: px2rem(40px);
+        height: px2rem(16px);
+        text-align: center;
+        line-height: px2rem(15px);
+    }
+    .teacherItem{
+        width: 100%;
+        height: px2rem(85px);
+        position: relative;
+        margin-top: px2rem(20px);
+        &:not(:last-child){
+            border-bottom: 1px solid RGBA(240, 240, 240, 1);
+        }
+        .teacherItemImg{
+            width: px2rem(65px);
+            height: px2rem(65px);
+            border-radius: px2rem(3px);
+        }
+        .fiveText{
+            width: px2rem(260px);
+            height: px2rem(38px);
+        }
+        .teacherItemName{
+            color: RGBA(102, 102, 102, 1);
+            margin-bottom: px2rem(13px);
+        }
+        .five-tag{
+            width: px2rem(61px);
+            height: px2rem(17px);
+            border-radius: 0 px2rem(3px) px2rem(3px) px2rem(3px);
+            color: RGBA(191, 158, 21, 1);
+            background-color: RGBA(250, 229, 175, 1);
+        }
+        .five-radio{
+            width: px2rem(25px);
+            height: px2rem(25px);
+            border-radius: 50%;
+            position:absolute;
+            right: 0;
+            top: px2rem(46px);
+        }
+    }
+}
+</style>

src/style/global.scss

@@ -25,6 +25,15 @@
 .marginLR40{
     margin: 0 px2rem(20px);
 }
+.fs10{
+    font-size: px2rem(10px);
+}
+.fs11{
+    font-size: px2rem(11px);
+}
+.fs14{
+    font-size: px2rem(14px);
+}
 .fs22{
     font-size: px2rem(11px);
 }
@@ -34,9 +43,6 @@
 .fs26{
     font-size: px2rem(13px);
 }
-.fs10{
-    font-size: px2rem(10px);
-}
 .gray{
     color: RGBA(177, 181, 184, 1);
 }

src/views/home/home.vue

@@ -18,6 +18,7 @@
             <span @click="toast('Hi, 你好，宾宾！')"> toast 3</span>
             <YqyHotLabel/>
             <YqyHomeAdv/>
+            <YqyFiveMinutes/>
             <YqyHotTeacher/>
             <YqyTeacherList/>
             <YqyTeacherInfo/>
@@ -38,6 +39,7 @@ import YqyTeacherList from '../../components/business/yqy-teacher-list';
 import YqyTeacherInfo from '../../components/business/yqy-teacher-info';
 import YqyHomeHeader from '../../components/business/yqy-home-header';
 import YqyHomeAdv from '../../components/business/yqy-home-adv';
+import YqyFiveMinutes from '../../components/business/yqy-five-minutes';
 export default {
     data(){
         return {
@@ -52,7 +54,8 @@ export default {
         YqyTeacherList,
         YqyTeacherInfo,
         YqyHomeHeader,
-        YqyHomeAdv
+        YqyHomeAdv,
+        YqyFiveMinutes
     },
 	mounted(){
         this.init()