yqy-home-header

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

@@ -6,7 +6,7 @@
     </div>
     <div class="headerRight">
       <img class="info" :src="resourceData.img">
-      <img class="info-count" :src="resourceData.img">
+      <div :class="resourceData.isTransparent?'transparent':'notTransparent'" class="info-count fs10">{{resourceData.count}}</div>
     </div>
   </div>
 </template>
@@ -21,8 +21,10 @@ export default {
           type: Object,
           default:()=>{
               return {
+                isTransparent: true,
                 placeholder: '请输入课程名称',
-                img: '../../images/Shape@2x.png'
+                img: '../../images/Shape@2x.png',
+                count: 0
               }
           }
       }
@@ -102,8 +104,21 @@ html,body{
 }
 .info-count{
   position:absolute;
-  top: px2rem(-10px);
+  top: 0;
   right: px2rem(21px);
+  width: px2rem(15px);
+  height: px2rem(15px);
+  border-radius: 50%;
+  text-align: center;
+  line-height: 15px;
+}
+.transparent{
+  background-color: #fff;
+  color: RGBA(53, 134, 126, 1);
+}
+.notTransparent{
+  background-color: RGBA(251, 91, 82, 1);
+  color: #fff;
 }
 .hotTag{
   width: 100%;

src/style/global.scss

@@ -34,6 +34,9 @@
 .fs26{
     font-size: px2rem(13px);
 }
+.fs10{
+    font-size: px2rem(10px);
+}
 .gray{
     color: RGBA(177, 181, 184, 1);
 }