yqy-teacher-info

src/components/business/yqy-teacher-info.vue

+<template>
+  <div class="hello">
+    <div class="banner">
+      <img class="bannerLogo" src="../../images/Shape@2x.png"/>
+      <div class="fs28 center infoName">蒋立新</div>
+      <div class="fs28 line center">
+        <span class="gray">阜外医院</span>
+        <span class="gray">教授</span>
+        <span class="gray">主任医师</span>>
+      </div>
+      <div class="studyCount">
+        <div class="fs28">
+          <div class="fs28">8969</div>
+          <div class="fs24 gray">学习人数</div>
+        </div>
+        <div class="fs28">
+          <div class="fs28">8969</div>
+          <div class="fs24 gray">关注人数</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'banner',
+  watch: {
+  },
+  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';
+html,body{
+  width: px2rem(375px);
+  height: 100%;
+  background-color: #F8F8F8;
+}
+.banner{
+  width: px2rem(335px);
+  height: px2rem(139px);
+  background-color: #fff;
+  position: absolute;
+  top: px2rem(165px);
+  left: px2rem(17px);
+  padding: px2rem(15px) px2rem(22px);
+  box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
+  border-radius: px2rem(3px);
+}
+.infoName{
+  margin-top: px2rem(15px);
+}
+.line{
+  margin-top: px2rem(4px);
+}
+.fs28{
+  font-size: px2rem(14px);
+}
+.fs24{
+  font-size: px2rem(12px);
+}
+.gray{
+  color: RGBA(102, 102, 102, 1);
+  margin-top: px2rem(5px);
+}
+.bannerLogo{
+  width: px2rem(45px);
+  height: px2rem(45px);
+  border-radius: 50%;
+  margin: 0 px2rem(122px);
+  position: absolute;
+  top: px2rem(-20px);
+}
+.studyCount{
+  display: flex;
+  justify-content: space-between;
+  padding: 0 px2rem(33px);
+  margin-top: px2rem(15px);
+}
+</style>

src/style/global.scss

@@ -13,6 +13,9 @@
 .textLeft{
     float: left;
 }
+.center{
+    text-align: center;
+}
 .line20{
     margin-top: px2rem(10px);
 }

src/views/home/home.vue

@@ -18,6 +18,7 @@
             <YqyHotLabel/>
             <YqyHotTeacher/>
             <YqyTeacherList/>
+            <YqyTeacherInfo/>
         </section>
         <section class="home-bottom">
             <!-- <yqyTest/> -->
@@ -31,6 +32,7 @@ import { Header } from 'mint-ui';
 import YqyHotLabel from '../../components/business/yqy-hot-label';
 import YqyHotTeacher from '../../components/business/yqy-hot-teacher';
 import YqyTeacherList from '../../components/business/yqy-teacher-list';
+import YqyTeacherInfo from '../../components/business/yqy-teacher-info';
 export default {
     data(){
         return {
@@ -42,7 +44,8 @@ export default {
         // yqyTest
         YqyHotLabel,
         YqyHotTeacher,
-        YqyTeacherList
+        YqyTeacherList,
+        YqyTeacherInfo
     },
 	mounted(){
         this.init()