'多端课堂图片'

pages/product/course.vue

@@ -11,7 +11,7 @@
             <div :class="['tabs-item', currentTabId === tab.id ? 'active' : '']"
               @click="changeTabgs(tab)"
               v-for="tab in tabsData" :key="tab.id">
-              <img class="cp" :src="currentTabId !== tab.id ? tab.imgUrl : tab.activeImgUrl" alt="">
+              <img class="cp" :src="currentTabId !== tab.id ? tab.imgUrl : tab.activeImgUrl" :srcset=" currentTabId !== tab.id ? `${tab.srcsetImg[0]} 1x, ${tab.srcsetImg[1]} 2x` : `${tab.srcsetActiveImg[0]} 1x, ${tab.srcsetActiveImg[1]} 2x`" alt="">
               <section class="cp" :style="{color: currentTabId === tab.id ? '#2169FA' : '#000'}">
                 {{tab.label}}
               </section>
@@ -48,6 +48,8 @@ const tabsData = Object.freeze([
     // activeImgUrl: 'http://res.training.luojigou.vip/FnzQdBDxbMr-Ek5HlcWCQ_Dk12zn?imageView2/0/q/50|imageslim',
     imgUrl: require('~/assets/images/products/tab_xcx_nor.png'),
     activeImgUrl: require('~/assets/images/products/tab_xcx_active.png'),
+    srcsetImg: [require('~/assets/images/products/tab_xcx_nor.png'), require('~/assets/images/products/tab_xcx_nor@2x.png')],
+    srcsetActiveImg: [require('~/assets/images/products/tab_xcx_active.png'),require('~/assets/images/products/tab_xcx_active@2x.png')],
     label: '小程序课堂'
   },
   {
@@ -56,6 +58,8 @@ const tabsData = Object.freeze([
     // activeImgUrl: 'http://res.training.luojigou.vip/FoRYr27YPRQ5dcZy6hjWkqCB3bUc?imageView2/0/q/50|imageslim',
     imgUrl: require('~/assets/images/products/tab_h5_nor.png'),
     activeImgUrl: require('~/assets/images/products/tab_h5_active.png'),
+    srcsetImg: [require('~/assets/images/products/tab_h5_nor.png'), require('~/assets/images/products/tab_h5_nor@2x.png')],
+    srcsetActiveImg: [require('~/assets/images/products/tab_h5_active.png'), require('~/assets/images/products/tab_h5_active@2x.png')],
     label: '微信H5课堂'
   },
   {
@@ -64,6 +68,8 @@ const tabsData = Object.freeze([
     // activeImgUrl: 'http://res.training.luojigou.vip/FhFDmhtts6iIWXD_Z16JOmMeqbh6?imageView2/0/q/50|imageslim',
     imgUrl: require('~/assets/images/products/tab_pc_nor.png'),
     activeImgUrl: require('~/assets/images/products/tab_pc_active.png'),
+    srcsetImg: [require('~/assets/images/products/tab_pc_nor.png'), require('~/assets/images/products/tab_pc_nor@2x.png')],
+    srcsetActiveImg: [require('~/assets/images/products/tab_pc_active.png'), require('~/assets/images/products/tab_pc_active@2x.png')],
     label: 'PC端独立课堂'
   },
   {
@@ -72,6 +78,8 @@ const tabsData = Object.freeze([
     // activeImgUrl: 'http://res.training.luojigou.vip/FqmqyLMeRxdvj__Z618fkgVHJV7J?imageView2/0/q/50|imageslim',
     imgUrl: require('~/assets/images/products/tab_parent_nor.png'),
     activeImgUrl: require('~/assets/images/products/tab_parent_active.png'),
+    srcsetImg: [require('~/assets/images/products/tab_pc_nor.png'), require('~/assets/images/products/tab_pc_nor@2x.png')],
+    srcsetActiveImg: [require('~/assets/images/products/tab_pc_active.png'), require('~/assets/images/products/tab_pc_active@2x.png')],
     label: '家长端APP'
   },
   {
@@ -80,6 +88,8 @@ const tabsData = Object.freeze([
     // activeImgUrl: 'http://res.training.luojigou.vip/Fgm-DUhf4ySZc6uEX2IZXzP-NdzS?imageView2/0/q/50|imageslim',
     imgUrl: require('~/assets/images/products/tab_teacher_nor.png'),
     activeImgUrl: require('~/assets/images/products/tab_teacher_active.png'),
+    srcsetImg: [require('~/assets/images/products/tab_teacher_nor.png'), require('~/assets/images/products/tab_teacher_nor@2x.png')],
+    srcsetActiveImg: [require('~/assets/images/products/tab_teacher_active.png'), require('~/assets/images/products/tab_teacher_active@2x.png')],
     label: '园长端APP'
   },
 ])