feat:渠道列表新增3个渠道，并设置为不可点击

src/views/Publish/accurate/channel/ChannleList.vue

@@ -5,9 +5,11 @@
     </sub-title>
     <ul>
       <li
-        :class="{'active_channel':channel.appId === active}"
+       v-for="(channel,index) in channelList"
+        :class="{'active_channel':channel.appId === active,
+        'disabled': isDisabled(channel.appCategory)}"
         class="flex"
-        v-for="(channel,index) in channelList"
+       
         :key="index"
         @click="selectChannel(channel,index)">
         <div>
@@ -38,38 +40,7 @@ const props = defineProps({
 const emit = defineEmits(['selectChannel']);
 const active = ref('');
 // const channelList = ref([]);
-const channelList = ref([
+const channelList = ref([])
-  {
-    icon:'',
-    appCategory:'品牌会员小程序',
-    appMessage:'填写投放需求并审批通过后，可在小程序资源位投放'
-  },
-  {
-    icon:'',
-    appCategory:'品牌会员小程序',
-    appMessage:'填写投放需求并审批通过后，可在小程序资源位投放'
-  },
-  {
-    icon:'',
-    appCategory:'品牌会员小程序',
-    appMessage:'填写投放需求并审批通过后，可在小程序资源位投放'
-  },
-  {
-    icon:'',
-    appCategory:'品牌会员小程序',
-    appMessage:'填写投放需求并审批通过后，可在小程序资源位投放'
-  },
-  {
-    icon:'',
-    appCategory:'品牌会员小程序',
-    appMessage:'填写投放需求并审批通过后，可在小程序资源位投放'
-  },
-  {
-    icon:'',
-    appCategory:'品牌会员小程序',
-    appMessage:'填写投放需求并审批通过后，可在小程序资源位投放'
-  }
-])
 
 // 监听activeChannel prop的变化
 watch(() => props.activeChannel, (newVal) => {
@@ -78,6 +49,10 @@ watch(() => props.activeChannel, (newVal) => {
   }
 }, { immediate: true }); // immediate: true 确保组件初始化时也执行一次
 
+const isDisabled = (category) => {
+  const disabledCategories = ['REPRESENTATIVE', 'INTERNAL_EMPLOYEES', 'PRIVATE_DOMAIN_CONSUMERS'];
+  return disabledCategories.includes(category);
+};
 // 获取渠道列表数据
 const getChannelList = async () => {
   try {
@@ -107,18 +82,27 @@ onMounted(() => {
     padding: 0;
   }
   ul{
-    display: flex;
+    display: -webkit-box;
-    justify-content: space-between;
+    //justify-content: space-between;
-    text-align: center;
+    //text-align: center;
     margin-top: 20px;
+    //border: 1px solid red;
+    //width: 1000px;
+    overflow-x: auto;
     li{
       list-style-type: none;
       padding: 20px 12px 10px;
       margin-right: 15px;
-      width: 16%;
+      width: 240px;
       align-items: flex-start;
       border: 1px solid #d9d9d9;
       border-radius: 8px;
+      &.disabled {
+      cursor: not-allowed;
+      color: #999;
+      background-color: #f5f5f5;
+      opacity: 0.7;
+    }
       .channel_list_intro{
         text-align: left;
         margin-left: 15px;