'八大优势'

pages/cooperate/index.vue

@@ -111,6 +111,10 @@
         >
           <img :src="item.imgUrl" alt="">
           <section>{{item.label}}</section>
+          <!-- <div class="exprience-info" v-if="condition">
+            <div class="num" :class="[item.id % 2 === 0 ? 'red' : 'blue']">{{ item.num }}</div>
+            <div class="item-text" v-for="(ele, index) in item.infoList" :key="index">{{ele}}</div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -235,60 +239,75 @@ const advantageImg = Object.freeze([
 const exprienceImg = Object.freeze([
   {
     id: 0,
-    
+    num: '01',
     // imgUrl:
     //   "http://res.training.luojigou.vip/FoHy9wMCaPPpgzaDmwQvFwRdM1Za?imageView2/0/q/50|imageslim",
     imgUrl:  require('~/assets/images/cooperate/exprience_01.png'),
     label: "招聘驱动",
+    infoList: ['人员素质模型', '绩效评级体系', '招聘广告模板']
   },
   {
     id: 1,
+    num: '02',
     // imgUrl:
     //   "http://res.training.luojigou.vip/FiumJtB1GJfyCphjUdlYrLTXYB6J?imageView2/0/q/50|imageslim",
     imgUrl:  require('~/assets/images/cooperate/exprience_02.png'),
     label: "课程驱动",
+    infoList: ['能力测评体系', '国际课程引进', '独立自主研发']
   },
   {
     id: 2,
+    num: '03',
     // imgUrl:
     //   "http://res.training.luojigou.vip/FlhyrFbDqh4rUzE39K3O8tJ0RjdP?imageView2/0/q/50|imageslim",
     imgUrl:  require('~/assets/images/cooperate/exprience_03.png'),
     label: "督导驱动",
+    infoList: ['三维过程把握', '到点指导落地', '专家持续绑定']
   },
   {
     id: 3,
+    num: '04',
     // imgUrl:
     //   "http://res.training.luojigou.vip/FgDk_mDwKmS97_IIzdGl0fNVTE4k?imageView2/0/q/50|imageslim",
     imgUrl:  require('~/assets/images/cooperate/exprience_04.png'),
     label: "开店驱动",
+    infoList: ['分析地理位置', '视觉识别系统', '标准装修方案']
   },
   {
     id: 4,
+    num: '05',
     // imgUrl:
     //   "http://res.training.luojigou.vip/Fm3NVf5OAfxaV3KUwoh25hSC0gim?imageView2/0/q/50|imageslim",
     imgUrl:  require('~/assets/images/cooperate/exprience_05.png'),
     label: "品牌驱动",
+    infoList: ['品牌认证标识', '市场宣传套装', '制定区域保护', '中华品牌领袖联盟企业']
   },
   {
     id: 5,
+    num: '06',
     // imgUrl:
     //   "http://res.training.luojigou.vip/Fqhl44i_bmz2fslvMe-UcnhgPMFJ?imageView2/0/q/50|imageslim",
     imgUrl:  require('~/assets/images/cooperate/exprience_06.png'),
     label: "招生驱动",
+    infoList: ['市场推广方案', '招生方法指导', '节日活动方案'],
   },
   {
     id: 6,
+    num: '07',
     // imgUrl:
     //   "http://res.training.luojigou.vip/Fg9yIinUo_5yOjaqpRspcotcB92f?imageView2/0/q/50|imageslim",
     imgUrl:  require('~/assets/images/cooperate/exprience_07.png'),
     label: "培训驱动",
+    infoList: ['管理流程梳理', '教育教学培训', '线上直播培训'],
   },
   {
     id: 7,
+    num: '08',
     // imgUrl:
     //   "http://res.training.luojigou.vip/Fixkl6HyDOOPy-1ZU1WN7wSTIXTl?imageView2/0/q/50|imageslim",
     imgUrl:  require('~/assets/images/cooperate/exprience_08.png'),
     label: "体系驱动",
+    infoList: ['能力级别评测体系', '线上运营系统APP', 'CRM客户管理系统'],
   },
 ]);
 
@@ -776,6 +795,32 @@ export default {
           text-align: center;
           letter-spacing: 0.5px;
         }
+        .exprience-info {
+          position: absolute;
+          top: 15px;
+          left: 5px;
+          padding: 10px 0 0 20px;
+          width: 225px;
+          height: 155px;
+          background: rgba(0, 0, 0, 0.65);
+          border-radius: 10px;
+          .num {
+            font-size: 18px;
+            font-family: Nunito-Black, Nunito;
+            &.blue {
+              color: #408CFF;
+            }
+            &.red {
+              color: #FF6321;
+            }
+          }
+          .item-text {
+            font-size: 16px;
+            font-family: PingFangSC-Regular, sans-serif;
+            color: #B4B4B4;
+            line-height: 26px;
+          }
+        }
       }
     }
   }

pages/index.vue

@@ -580,7 +580,7 @@
                   </nuxt-link>
                 </div>
               </div>
-              <div class="article-content-info">
+              <div class="article-content-info" v-if="articleList1 && articleList1.length > 0">
                 <nuxt-link :to="{ name: 'news-newsView-id', params: { id: articleList1[0].id }, query: { cateId: articleList1[0].typeId } }">
                   <img :src="articleList1[0].articleImg" alt="" srcset="">
                 </nuxt-link>
@@ -588,6 +588,11 @@
                   <p class="info-title">{{ articleList1[0].articleTitle }}</p>
                 </nuxt-link>
               </div>
+              <div class="article-content-info" v-else>
+                <a href="javascript:void(0)">
+                  <p>暂无数据</p>
+                </a>
+              </div>
             </div>
             <div class="article-content-top-right">
               <div class="article-type-header">
@@ -598,7 +603,7 @@
                   </nuxt-link>
                 </div>
               </div>
-              <div class="article-content-info">
+              <div class="article-content-info" v-if="articleList2 && articleList2.length > 0">
                 <template v-for="(item, index) in articleList2">
                   <div v-if="index < 4" class="article-item-right" :key="index">
                     <nuxt-link :to="{ name: 'news-newsView-id', params: { id: item.id }, query: { cateId: item.typeId } }">
@@ -610,6 +615,11 @@
                   </div>
                 </template>
               </div>
+              <div class="article-content-info" v-else>
+                <a href="javascript:void(0)">
+                  <p>暂无数据</p>
+                </a>
+              </div>
             </div>
           </div>
           <div class="article-content-bottom">
@@ -621,7 +631,7 @@
                 </nuxt-link>
               </div>
             </div>
-            <div class="article-content-bottom-info">
+            <div class="article-content-bottom-info" v-if="articleList3 && articleList3.length > 0">
               <div class="article-content-bottom-left">
                 <nuxt-link :to="{ name: 'news-newsView-id', params: { id: articleList3[0].id }, query: { cateId: articleList3[0].typeId } }">
                   <img :src="articleList3[0].articleImg" alt="">
@@ -637,6 +647,9 @@
                 <p class="time">{{ articleList3[0].createTime }}</p>
               </div>
             </div>
+            <div class="article-content-bottom-info">
+              <p class="desc">暂无数据</p>
+            </div>
           </div>
         </div>
       </div>