页面优化

pages/practice/laboratory/index.vue

@@ -14,7 +14,7 @@
     <div class="content_tab">
       <div class="tab_con">
         <div v-for="(item, index) in zyList" :key="index">
-          <div class="con_item">
+          <div class="con_item" :style="`background:url(${item.imgUrl}) no-repeat center`">
             <div class="item_tit">{{ item.tit }}</div>
             <div class="item_con">
               <nuxt-link class="subNav-li" :to="{ name: item.name }">
@@ -39,12 +39,14 @@ export default {
         {
           tit: '商业数据分析实验室',
           name: 'practice-laboratory-analysis',
-          url: 'https://bi.ezijing.com/bi/'
+          url: 'https://bi.ezijing.com/bi/',
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/practice/laboratory/tab11.png'
         },
         {
           tit: '数字营销实验室',
           name: 'practice-laboratory-marketing',
-          url: 'https://digitalmarketinglab.ezijing.com/login'
+          url: 'https://digitalmarketinglab.ezijing.com/login',
+          imgUrl: 'https://webapp-pub.ezijing.com/www/pc/practice/laboratory/tab22.png'
         }
       ]
     }
@@ -112,11 +114,8 @@ export default {
     }
     .con_item:nth-child(1) {
       margin-right: 20px;
-      background: url(https://webapp-pub.ezijing.com/www/pc/practice/laboratory/tab1.png);
-    }
-    .con_item:nth-child(2) {
-      background: url(https://webapp-pub.ezijing.com/www/pc/practice/laboratory/tab2.png);
     }
+
     .con_item {
       width: 590px;
       height: 420px;

pages/practice/talent.vue

@@ -8,7 +8,7 @@
         <p class="section-desc">
           打造人才和产业对接的“最后一公里”，搭载智慧人才库、人才测评、在线课堂、人才管理、资源共享、项目对接等六项服务，疏解企业人才“选、育、留”难题
         </p>
-        <div class="platform-list">
+        <!-- <div class="platform-list">
           <div class="platform-item" v-for="(item, index) in list" :key="item.image_url">
             <div class="platform-item__content">
               <div class="platform-item__header">
@@ -20,6 +20,17 @@
             </div>
             <div class="platform-item__pic"><img :src="item.image_url" /></div>
           </div>
+        </div> -->
+        <div class="section_con" v-for="(item, index) in list" :key="index">
+          <div class="con_left">
+            <div class="left_index">{{ '0' + (index + 1) }}</div>
+            <div class="left_tit">{{ item.title }}</div>
+            <div class="left_desc">{{ item.subtitle }}</div>
+            <div class="left_tips">
+              {{ item.desc }}
+            </div>
+          </div>
+          <img :src="item.image_url" alt="" />
         </div>
       </div>
     </section>
@@ -32,25 +43,25 @@ export default {
     return {
       list: [
         {
-          image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/1.jpg',
+          image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/img1.png',
           title: '数字金融',
           subtitle: '高质量就业',
           desc: '引入中国中小企业协会，拓展“国际软件外包交付基地”企业资源，提供充足的就业岗位，帮助人才高质量就业。'
         },
         {
-          image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/2.jpg',
+          image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/img2.png',
           title: '建设数字人才库',
           subtitle: '引才',
           desc: '通过产业学院、实践基地集聚人才，划分类型、精细入库，打造“一链六类多群”人才储备平台，为企业“引才”。'
         },
         {
-          image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/3.jpg',
+          image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/img3.png',
           title: '建设线上内训平台',
           subtitle: '育才',
           desc: '开发线上培训SaaS平台，融合多形态的资源建设“技能字典”，形成泛在学习网络，为企业“育才”。'
         },
         {
-          image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/4.jpg',
+          image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/img4.png',
           title: '建设“技能码”',
           subtitle: '留才',
           desc: '采集技能类型、技能等级、学习轨迹等数据生成“技能码”，开展人才需求研究，服务精准招聘，为企业“留才”。'
@@ -96,55 +107,49 @@ export default {
     max-width: 100%;
   }
 }
-.platform-list {
-  margin-top: 100px;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 30px;
-}
-.platform-item {
+.section_con {
+  margin-top: 92px;
   display: flex;
-  padding: 40px 20px;
-  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
-  border-radius: 6px;
-  overflow: hidden;
-}
+  justify-content: space-between;
 
-.platform-item__content {
-  margin-right: 14px;
-  h3 {
-    margin-top: 10px;
-    font-size: 16px;
-    font-family: Source Han Sans CN;
-    font-weight: 400;
-    line-height: 34px;
-    color: #aa1941;
+  .con_left {
+    margin-right: 73px;
+    .left_index {
+      font-size: 60px;
+      font-weight: normal;
+      color: #eaeaea;
+    }
+    .left_tit {
+      font-size: 22px;
+      font-weight: 500;
+      color: #424242;
+      margin-top: -47px;
+    }
+    .left_desc {
+      font-size: 24px;
+      font-weight: 500;
+      line-height: 42px;
+      color: #aa1941;
+      margin-top: 50px;
+    }
+    .left_tips {
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 30px;
+      color: #666666;
+      margin-top: 27px;
+    }
   }
-  p {
-    font-size: 14px;
-    font-family: Source Han Sans CN;
-    font-weight: 400;
-    line-height: 24px;
-    color: #666666;
+  img {
+    width: 581px;
+    height: 483px;
   }
 }
-.platform-item__header {
-  position: relative;
-  span {
-    font-size: 50px;
-    font-family: Helvetica Neue LT Pro;
-    font-weight: normal;
-    line-height: 24px;
-    color: #eaeaea;
-  }
-  h2 {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    font-size: 18px;
-    font-family: Source Han Sans CN;
-    font-weight: 500;
-    color: #333333;
+.section_con:nth-child(2n) {
+  flex-direction: row-reverse;
+  margin-top: 58px;
+  .con_left {
+    margin-left: 70px;
   }
 }
 </style>