yqy-home-header

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

 <template>
   <div class="space-between header">
-    <div class="search">
-      <input type="search" class="input" v-model="message" :placeholder="resourceData.placeholder"/>
+    <div :class="resourceData.isTransparent?'searchTransparent':'bgWhite'" class="search">
+      <input type="search" :class="resourceData.isTransparent?'searchTransparent':''" class="input" v-model="message" :placeholder="resourceData.placeholder"/>
       <img class="searchImg" :src="resourceData.img">
     </div>
     <div class="headerRight">
@@ -55,6 +55,14 @@ html,body{
   height: 100%;
   background-color: #F8F8F8;
 }
+.searchTransparent{
+  background: transparent;
+  border: 1px solid #fff;
+  color: #fff;
+}
+.searchTransparent::-webkit-input-placeholder{ 
+    color:    #fff;
+}
 .white{
   color: #fff;
 }
@@ -81,7 +89,6 @@ html,body{
   width: px2rem(290px);
   height: px2rem(30px);
   border-radius: px2rem(19px);
-  background-color: #fff;
 }
 .input{
   outline: none;

src/style/global.scss

@@ -50,6 +50,11 @@
 .fw{
     font-weight: 600;
 }
+//背景颜色
+.bgWhite{
+    background-color: #fff;
+}
+//字体颜色
 .gray{
     color: RGBA(177, 181, 184, 1);
 }