搜索框

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

 <template>
-  <div class="hello">
-    <div class="header">
-      <div class="search">
-        <input type="search" class="input" v-model="message" placeholder="请输入课程名称"/>
-        <img class="searchImg" src="../../images/Shape@2x.png">
-      </div>
-      <div class="white gxy">高血压</div>
-      <div>
-        <span class="white fs30 gxyStudy">287,387人学习</span>
-        <span class="white fs30">327,387人关注</span>
-      </div>
-      <Banner/>
+  <div class="space-between header">
+    <div class="search">
+      <input type="search" class="input" v-model="message" :placeholder="resourceData.placeholder"/>
+      <img class="searchImg" :src="resourceData.img">
+    </div>
+    <div class="headerRight">
+      <img class="info" :src="resourceData.img">
+      <img class="info-count" :src="resourceData.img">
     </div>
   </div>
 </template>
@@ -20,6 +16,17 @@ export default {
   name: 'header',
   components: {
   },
+  props: {
+      resourceData: {
+          type: Object,
+          default:()=>{
+              return {
+                placeholder: '请输入课程名称',
+                img: '../../images/Shape@2x.png'
+              }
+          }
+      }
+  },
   watch: {
     message(val){
       console.log('val',val);
@@ -42,98 +49,109 @@ export default {
 @import '../../style/mixin.scss';
 @import '../../style/global.scss';
 html,body{
-  width: 750px;
+  width: px2rem(375px);
   height: 100%;
   background-color: #F8F8F8;
 }
 .white{
   color: #fff;
 }
+.headerRight{
+  width: px2rem(30px);
+  height: px2rem(30px);
+}
 .fs30{
-  font-size: 30px;
+  font-size: px2rem(15px);
 }
 .gxyStudy{
-  margin-right: 38px;
+  margin-right: px2rem(19px);
 }
 .gxy{
-  font-size: 50px;
-  margin: 50px 0 22px 0;
+  font-size: px2rem(25px);
+  margin: px2rem(25px) 0 px2rem(11px) 0;
 }
 .header{
   width: 100%;
-  height: 416px;
-  background-image: url('http://pica-pro.oss-cn-shanghai.aliyuncs.com/teach/bg.png');
-  padding-top: 40px;
+  padding: 0 px2rem(25px) 0 px2rem(15px);
+  position: relative;
 }
 .search{
-  width: 580px;
-  height: 60px;
-  border-radius: 38px;
+  width: px2rem(290px);
+  height: px2rem(30px);
+  border-radius: px2rem(19px);
   background-color: #fff;
-  margin: 0 auto;
 }
 .input{
   outline: none;
   border: none;
   float: left;
-  font-size: 26px;
-  margin: 12px 0 12px 30px;
-  line-height: 36px;
+  font-size: px2rem(13px);
+  margin: px2rem(6px) 0 px2rem(6px) px2rem(15px);
+  line-height: px2rem(18px);
   width: 80%;
 }
 .searchImg{
-  width: 32px;
-  height: 32px;
-  margin: 16px 36px 16px 0;
+  width: px2rem(16px);
+  height: px2rem(16px);
+  margin: px2rem(8px) px2rem(18px) px2rem(8px) 0;
   float: right;
 }
+.info{
+  width: px2rem(20px);
+  height: px2rem(20px);
+}
+.info-count{
+  position:absolute;
+  top: px2rem(-10px);
+  right: px2rem(21px);
+}
 .hotTag{
   width: 100%;
-  height: 300px;
+  height: px2rem(150px);
 }
 .hotTagTitle{
-  font-size: 36px;
-  padding: 147px 30px;
+  font-size: px2rem(18px);
+  padding: px2rem(73px) px2rem(15px);
   float: left;
   background-color: #fff;
 }
 .cource{
   width: 100%;
-  height: 700px;
+  height: px2rem(350px);
 }
 .fontTitle{
-  font-size: 36px;
-  padding: 0 0 42px 30px;
+  font-size: px2rem(18px);
+  padding: 0 0 px2rem(21px) px2rem(15px);
   float: left;
   width: 100%;
   text-align: left;
 }
 .title{
-  font-size: 32px;
+  font-size: px2rem(16px);
 }
 .courceLeft{
   float: left;
-  padding-left: 30px;
+  padding-left: px2rem(15px);
 }
 .needLeft{
   float: left;
-  padding: 0 0 80px 30px;
+  padding: 0 0 px2rem(40px) px2rem(15px);
 }
 .courceTime{
   float: left;
 }
 .courceImg{
-  width: 340px;
-  height: 192px;
-  margin-bottom: 20px;
+  width: px2rem(170px);
+  height: px2rem(96px);
+  margin-bottom: px2rem(10px);
 }
 .courceMore{
-  font-size: 30px;
+  font-size: px2rem(15px);
   color: #999999;
 }
 .need{
   width: 100%;
-  height: 650px;
-  margin-top: 70px;
+  height: px2rem(325px);
+  margin-top: px2rem(35px);
 }
 </style>

src/views/home/home.vue

@@ -8,6 +8,7 @@
                 <mt-button icon="more" slot="right"></mt-button>
             </mt-header>
             <article style="width: 100%;text-align:center;">
+                <YqyHomeHeader/>
                 <img class="logo_img" src='../../images/header-bg-2.png' />
             </article>
         </section>
@@ -19,7 +20,7 @@
             <YqyHotTeacher/>
             <YqyTeacherList/>
             <YqyTeacherInfo/>
-            <!-- <YqyHomeHeader/> -->
+            
         </section>
         <section class="home-bottom">
             <!-- <yqyTest/> -->