yqy-home-banner

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

+<template>
+  <div class="hello">
+    <div class="banner">
+      <div class="bannerItem" :key="index" v-for="(item,index) in bannerData">
+        <!-- <img class="bannerImg" :src="item.img"/> -->
+        <img class="bannerImg" src="../../images/Shape@2x.png"/>
+        <span class="bannerText">{{item.name}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'YqyHomeBanner',
+  watch: {
+  },
+  data () {
+    return {
+      bannerData: [
+        {img: '../../images/Shape@2x.png',
+        name: '微专业'},
+        {img: '../../images/Shape@2x.png',
+        name: '名师讲堂'},
+        {img: '../../images/Shape@2x.png',
+        name: '患者教育'},
+        {img: '../../images/Shape@2x.png',
+        name: '专项合作'},
+        {img: '../../images/Shape@2x.png',
+        name: '活动掠影'}
+      ]
+    }
+  },
+  mounted(){
+  },
+  methods: {
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import '../../style/mixin.scss';
+@import '../../style/global.scss';
+html,body{
+  width: px2rem(375px);
+  height: px2rem(100%);
+  background-color: #F8F8F8;
+}
+.banner{
+  width: px2rem(345px);
+  height: px2rem(74px);
+  background-color: #fff;
+  position: absolute;
+  top: px2rem(165px);
+  left: px2rem(17px);
+  padding: px2rem(15px) px2rem(10px);
+  box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
+}
+.bannerItem{
+  width: px2rem(50px);
+  display: inline;
+  position: relative;
+  margin-right: px2rem(18px);
+}
+.bannerImg{
+  min-width: px2rem(22px);
+  max-height: px2rem(20px);
+  margin: 0 10px;
+}
+.bannerText{
+  position: absolute;
+  top: px2rem(30px);
+  width: px2rem(50px);
+  left: 0;
+  font-size: px2rem(12px);
+  text-align: center;
+}
+</style>

src/views/home/home.vue

@@ -17,12 +17,13 @@
             <span @click="goBack"> goBack 2</span>
             <span @click="toast('Hi, 你好，宾宾！')"> toast 3</span>
             <YqyHotLabel/>
+            <YqyHomeBanner/>
             <YqyHomeAdv/>
             <YqyCategoryThree1/>
             <YqyFiveMinutes/>
             <YqyHotTeacher/>
             <YqyTeacherList/>
-            <YqyTeacherInfo/>
+            <!-- <YqyTeacherInfo/> -->
             
         </section>
         <section class="home-bottom">
@@ -42,6 +43,7 @@ import YqyHomeHeader from '../../components/business/yqy-home-header';
 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';
 export default {
     data(){
         return {
@@ -58,7 +60,8 @@ export default {
         YqyHomeHeader,
         YqyHomeAdv,
         YqyFiveMinutes,
-        YqyCategoryThree1
+        YqyCategoryThree1,
+        YqyHomeBanner
     },
 	mounted(){
         this.init()