yqy-home-porter

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

+<template>
+    <div class="hotTeacher">
+        <div class="space-between">
+            <img class="img" src="../../images/Shape@2x.png"/>
+        </div>
+        <div class="teacherItem space-between">
+            <div class="teacherItemImg">
+                <img :src="resourceData.img"/>
+            </div>
+            <div class="fiveText">
+                <div class="teacherItemName fw fs30">{{resourceData.name}}</div>
+                <div class="five-tag fs28 gray">{{resourceData.motto}}</div>
+                <div @click="btn" class="porterBtn white fs22">查看</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'YqyFiveMinutes',
+  components: {
+  },
+  watch: {
+  },
+  props: {
+        resourceData: {
+            type: Object,
+            default:()=>{
+                return{
+                        img: '../../images/Shape@2x.png',
+                        name: '原来高血压',
+                        motto: '北京大学人民医院'
+                    }
+            }
+        }
+    },
+  data () {
+    return {
+    }
+  },
+  mounted(){
+  },
+  methods: {
+      fiveMinutesMore(){
+          console.log('fiveMinutesMore');
+          this.$emit('fiveMinutesMore')
+      },
+      btn(){
+          console.log('btn');
+          this.$emit('btn')
+      }
+  }
+}
+</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(56px);
+            height: px2rem(63px);
+            border-radius: px2rem(3px);
+        }
+        .fiveText{
+            width: px2rem(280px);
+            height: px2rem(38px);
+        }
+        .teacherItemName{
+            color: RGBA(102, 102, 102, 1);
+            margin: px2rem(10px) 0 px2rem(6px);
+        }
+        .five-tag{
+            width: px2rem(235px);
+            height: px2rem(14px);
+        }
+        .porterBtn{
+            width: px2rem(42px);
+            height: px2rem(20px);
+            background: linear-gradient(to bottom, RGBA(143, 193, 230, 1), RGBA(88, 144, 221, 1));
+            border-radius: px2rem(14px);
+            text-align: center;
+            line-height: px2rem(20px);
+            position:absolute;
+            right: 0;
+            top: px2rem(18px);
+        }
+    }
+}
+</style>

src/style/global.scss

@@ -57,6 +57,9 @@
 .fs28{
     font-size: px2rem(14px);
 }
+.fs30{
+    font-size: px2rem(15px);
+}
 .fw{
     font-weight: 600;
 }

src/views/home/home.vue

@@ -17,6 +17,7 @@
             <span @click="goBack"> goBack 2</span>
             <span @click="toast('Hi, 你好，宾宾！')"> toast 3</span>
             <YqyHotLabel/>
+            <YqyHomePorter/>
             <YqyHomeBanner/>
             <YqyHomeKeepon/>
             <YqyHomeAdv/>
@@ -46,6 +47,7 @@ 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';
+import YqyHomePorter from '../../components/business/yqy-home-porter';
 export default {
     data(){
         return {
@@ -64,7 +66,8 @@ export default {
         YqyFiveMinutes,
         YqyCategoryThree1,
         YqyHomeBanner,
-        YqyHomeKeepon
+        YqyHomeKeepon,
+        YqyHomePorter
     },
 	mounted(){
         this.init()