yqy-home-adv

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

+<template>
+    <div class="hotTeacher">
+        <div class="teacherItem" :key="index" v-for="(item,index) in hotTeachers">
+            <img class="teacherItemImg" src="item.img"/>
+            <span class="teacherItemName">{{item.name}}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'YqyHotTeacher',
+  components: {
+  },
+  watch: {
+  },
+  props: {
+        hotTeachers: {
+            type: Array,
+            default:()=>{
+                return [
+                    {
+                        img: '../../images/Shape@2x.png',
+                        name: '蒋立新'
+                    },
+                    {
+                        img: '../../images/Shape@2x.png',
+                        name: '蒋立新'
+                    },
+                    {
+                        img: '../../images/Shape@2x.png',
+                        name: '蒋立新'
+                    },
+                    {
+                        img: '../../images/Shape@2x.png',
+                        name: '蒋立新'
+                    }
+                ]
+            }
+        }
+    },
+  data () {
+    return {
+    }
+  },
+  mounted(){
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import '../../style/mixin.scss';
+.hotTeacher{
+    width: 100%;
+    background-color: #fff;
+    padding: 0 px2rem(15px) px2rem(26px);
+    .teacherItem{
+        font-size: px2rem(13pt);
+        margin: px2rem(10pt) px2rem(15pt) 0 0;
+        display: inline-block;
+        padding: px2rem(8px) px2rem(10px);
+        position: relative;
+        box-shadow: 0 px2rem(2px) px2rem(8px) RGBA(49, 127, 119, 0.1);
+        .teacherItemImg{
+            width: px2rem(22px);
+            height: px2rem(22px);
+            border-radius: 50%;
+            position: absolute;
+            top: 10px;
+        }
+        .teacherItemName{
+            color: RGBA(102, 102, 102, 1);
+            padding: px2rem(2px) px2rem(6px);
+            font-size: px2rem(14pt);
+            margin-left: px2rem(24px);
+        }
+    }
+}
+</style>

src/views/home/home.vue

@@ -17,6 +17,7 @@
             <span @click="goBack"> goBack 2</span>
             <span @click="toast('Hi, 你好，宾宾！')"> toast 3</span>
             <YqyHotLabel/>
+            <YqyHomeAdv/>
             <YqyHotTeacher/>
             <YqyTeacherList/>
             <YqyTeacherInfo/>
@@ -36,6 +37,7 @@ import YqyHotTeacher from '../../components/business/yqy-hot-teacher';
 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';
 export default {
     data(){
         return {
@@ -49,7 +51,8 @@ export default {
         YqyHotTeacher,
         YqyTeacherList,
         YqyTeacherInfo,
-        YqyHomeHeader
+        YqyHomeHeader,
+        YqyHomeAdv
     },
 	mounted(){
         this.init()