feat: 更换首页图片

src/pages/index/index.vue

@@ -10,13 +10,13 @@
         <video v-if="videoInfo.videourl" style="width: 100%;height: 418rpx;" :src="videoInfo.videourl" :poster="videoInfo.videoCover" 	object-fit="fill"></video>
         <section-title-vue title="舒城荣誉"></section-title-vue>
         <div class="flex honor-group">
-          <div class="flex honor-item" v-for="item in honorList" :key="item.name">
-            <img class="honor-icon" :src="item.icon" alt="">
+          <div class="flex honor-item" v-for="item in honorList" :key="item.name" :style="{'backgroundImage': 'url('+ item.bg +')'}">
             <div class="flex align-center" style="width: 130px">
               <p>{{item.name}}</p>
             </div>
+            <img class="honor-icon" :class="item.iconClass" :src="item.icon" alt="">
           </div>
-          <div class="honor-item flex flex-column align-center" style="width: 100%;text-align: center;padding-top: 14rpx;">
+          <div class="honor-item flex flex-column align-center" style="width: 100%;text-align: center;padding-top: 14rpx;background-image: url(/static/img/home/bg10.png)">
             <img src="/static/img/home/icon-home10.png" style="width: 49rpx;height: 45rpx;margin-bottom: 10rpx;flex-shrink: 0;" alt="">
             <p>国家生态文明建设示范区</p>
           </div>
@@ -80,39 +80,51 @@ export default{
       honorList: [
         {
           icon: '/static/img/home/icon-home1.png',
+          bg: '/static/img/home/bg1.png',
           name: '全国环境百强县'
         },
         {
           icon: '/static/img/home/icon-home2.png',
+          bg: '/static/img/home/bg2.png',
           name: '安徽省制造业发展增速十快县'
         },
         {
           icon: '/static/img/home/icon-home3.png',
+          bg: '/static/img/home/bg3.png',
           name: '安徽省民营经济发展先进县'
         },
         {
           icon: '/static/img/home/icon-home4.png',
+          bg: '/static/img/home/bg4.png',
           name: '国家卫生县城'
         },
         {
           icon: '/static/img/home/icon-home5.png',
+          bg: '/static/img/home/bg5.png',
           name: '中国未来投资热点百佳县'
         },
         {
           icon: '/static/img/home/icon-home6.png',
+          bg: '/static/img/home/bg6.png',
           name: '全国科技进步先进县'
         },
         {
-          icon: '/static/img/home/icon-home7.png',
-          name: '全国交通运输一体化创建示范县'
+          icon: '/static/img/home/icon-home10.png',
+          bg: '/static/img/home/bg7.png',
+          name: '全国交通运输一体化创建示范县',
+          iconClass: 'w49'
         },
         {
           icon: '/static/img/home/icon-home8.png',
-          name: '全国电子商务进农村综合示范县'
+          bg: '/static/img/home/bg8.png',
+          name: '全国电子商务进农村综合示范县',
+          iconClass: 'w49'
         },
         {
           icon: '/static/img/home/icon-home9.png',
-          name: '安徽省质量认证示范县'
+          bg: '/static/img/home/bg9.png',
+          name: '安徽省质量认证示范县',
+          iconClass: 'w49'
         },
       ],
       numList: [],
@@ -175,22 +187,29 @@ export default{
   justify-content: space-between;
 }
 .honor-item {
-  background: #F2F6FF;
+  // background: #F2F6FF;
   border-radius: 4rpx;
-  width: 225rpx;
-  height: 100rpx;
+  width: 227rpx;
+  height: 103rpx;
   padding: 23rpx 17rpx;
   box-sizing: border-box;
   margin-bottom: 15rpx;
   font-size: 18rpx;
   line-height: 26rpx;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   color: #606266;
   .honor-icon {
-    width: 52rpx;
-    height: 52rpx;
-    margin-right: 10rpx;
+    width: 48rpx;
+    height: 56rpx;
+    margin-left: 15rpx;
     flex-shrink: 0;
   }
+  .w49 {
+    width: 49rpx;
+    height: 45rpx;
+  }
 }
 .num-data {
   background: #4374EF;
@@ -229,4 +248,5 @@ export default{
   align-items: center;
   background: #E6EDFF;
 }
+
 </style>>