yqy-category-three-1

src/components/business/yqy-category-three-1.vue

+<template>
+    <div class="hotTeacher">
+        <div :style="{'text-align': resourceData.direction}" class="hotTagTitle">{{resourceData.title}}</div>
+        <div class="teacherItem space-between">
+            <div :style="{'background-color':resourceData.item.pic1.bg}" class="category-left">
+                <div class="img1-title fs14 center fw">{{resourceData.item.pic1.title}}</div>
+                <div class="fs14 fw gray">{{resourceData.item.pic1.time}}</div>
+                <img class="category-img-tag" :src="resourceData.item.pic1.left"/>
+                <img class="category-img1" :src="right"/>
+            </div>
+            <div class="category-right">
+                <div class="relative category-img2">
+                    <div class="category-img2-title fs14">{{resourceData.item.pic2.title}}</div>
+                    <img class="category-img-tag" :src="resourceData.item.pic2.left"/>
+                    <img class="category-img" :src="resourceData.item.pic2.bg"/>
+                </div>
+                <div class="category-img3">
+                    <div class="category-img2-title fs14">{{resourceData.item.pic3.title}}</div>
+                    <img class="category-img-tag" :src="resourceData.item.pic3.left"/>
+                    <img class="category-img" :src="resourceData.item.pic3.bg"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'YqyHotTeacher',
+  components: {
+  },
+  watch: {
+  },
+  props: {
+        resourceData: {
+            type: Object,
+            default:()=>{
+                return {
+                    title: '专题分类',
+                    direction: 'left',
+                    item: {
+                        pic1:{
+                            bg: 'RGBA(230, 243, 243, 1)',
+                            title: '用医学知识 赢百万现金',
+                            time: '每周四20:00开赛',
+                            left: '../../images/Shape@2x.png',
+                            right: '../../images/Shape@2x.png'
+                        },
+                        pic2:{
+                            bg: '../../images/Shape@2x.png',
+                            title: '心血管病高危人群早期筛查与综合干预',
+                            left: '../../images/Shape@2x.png'
+                        },
+                        pic3:{
+                            bg: '../../images/Shape@2x.png',
+                            title: '心血管病高危人群早期筛查与综合干预',
+                            left: '../../images/Shape@2x.png'
+                        }
+                    }
+                }
+            }
+        }
+    },
+  data () {
+    return {
+    }
+  },
+  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';
+.hotTagTitle{
+    font-size: px2rem(18px);
+    font-weight: bold;
+    margin-bottom: px2rem(15px);
+}
+.hotTeacher{
+    width: 100%;
+    background-color: #fff;
+    padding: 0 px2rem(15px) px2rem(26px);
+    .teacherItem{
+        width: 100%;
+        height: px2rem(190px);
+        .category-left{
+            width: px2rem(168px);
+            height: px2rem(190px);
+            position: relative;
+            padding: px2rem(10px);
+            .category-img{
+                width: 100%;
+                height: 100%;
+            }
+            .category-img1{
+                width: px2rem(101px);
+                height: px2rem(120px);
+                position:absolute;
+                bottom: 0;
+                right: 0;
+            }
+            .category-img-tag{
+                width: px2rem(55px);
+                height: px2rem(17px);
+                position:absolute;
+                bottom: px2rem(10px);
+                left: px2rem(10px);
+            }
+            .img1-title{
+                color: RGBA(49, 125, 121, 1);
+                margin: px2rem(5px) 0 px2rem(3px) 0;
+            }
+        }
+        .category-right{
+            width: px2rem(168px);
+            height: px2rem(190px);
+            position: relative;
+            .category-img2-title{
+                color: RGBA(74, 85, 102, 1);
+            }
+            .category-img{
+                width: 100%;
+                height: 100%;
+            }
+            .category-img-tag{
+                width: px2rem(55px);
+                height: px2rem(17px);
+                position:absolute;
+                bottom: px2rem(10px);
+                left: px2rem(10px);
+            }
+            .category-img3{
+                width: px2rem(168px);
+                height: px2rem(90px);
+                margin-top: px2rem(10px);
+            }
+            .category-img2{
+                width: px2rem(168px);
+                height: px2rem(90px);
+            }
+            .category-img2-title{
+                position:absolute;
+                color: RGBA(74, 85, 102, 1);
+                margin: px2rem(10px);
+            }
+        }
+        .teacherItemImg{
+            width: px2rem(23px);
+            height: px2rem(23px);
+            border-radius: 50%;
+            position: absolute;
+            top: 10px;
+        }
+    }
+}
+</style>

src/style/global.scss

 @import './common.scss';
+//定位
+.relative{
+    position: relative;
+}
 .flex{
     display: flex;
 }
@@ -43,6 +47,9 @@
 .fs26{
     font-size: px2rem(13px);
 }
+.fw{
+    font-weight: 600;
+}
 .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/>
+            <YqyCategoryThree1/>
             <YqyFiveMinutes/>
             <YqyHotTeacher/>
             <YqyTeacherList/>
@@ -40,6 +41,7 @@ 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';
+import YqyCategoryThree1 from '../../components/business/yqy-category-three-1';
 export default {
     data(){
         return {
@@ -55,7 +57,8 @@ export default {
         YqyTeacherInfo,
         YqyHomeHeader,
         YqyHomeAdv,
-        YqyFiveMinutes
+        YqyFiveMinutes,
+        YqyCategoryThree1
     },
 	mounted(){
         this.init()