添加下册

src/assets/course.json

@@ -52,7 +52,46 @@
                 }
             ],
             "xia": [
-                
+                {
+                    "id": "10ef1db0-138a-11f1-bcd9-005056924926",
+                    "title": "【三年级】下册 第1课 春节的“新”与“旧”",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E4%B8%89%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC1%E8%AF%BE%20%E6%98%A5%E8%8A%82%E7%9A%84%E2%80%9C%E6%96%B0%E2%80%9D%E4%B8%8E%E2%80%9C%E6%97%A7%E2%80%9D%EF%BC%88%E8%AF%BE%E4%BB%B6%EF%BC%891772161080356.png",
+                    "dataId": "new1",
+                    "dataList": [
+                       
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "6d917472-138d-11f1-bcd9-005056924926",
+                    "title": "【三年级】下册 第2课 介绍我的智能小屋",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E4%B8%89%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC2%E8%AF%BE%20%E4%BB%8B%E7%BB%8D%E6%88%91%E7%9A%84%E6%99%BA%E8%83%BD%E5%B0%8F%E5%B1%8B%EF%BC%88%E8%AF%BE%E4%BB%B6%EF%BC%891772162353907.png",
+                    "dataId": "new2",
+                    "dataList": [
+                       
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "28147161-1394-11f1-bcd9-005056924926",
+                    "title": "【三年级】下册 第3课 设计我的智能小屋",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E4%B8%89%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC3%E8%AF%BE%20%E8%AE%BE%E8%AE%A1%E6%88%91%E7%9A%84%E6%99%BA%E8%83%BD%E5%B0%8F%E5%B1%8B%EF%BC%88%E8%AF%BE%E4%BB%B6%EF%BC%891772165806072.png",
+                    "dataId": "new3",
+                    "dataList": [
+                      
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "30ed5bd4-1397-11f1-bcd9-005056924926",
+                    "title": "【三年级】下册 第4课 能让AI随时“看着”家吗？",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E4%B8%89%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC4%E8%AF%BE%20%E8%83%BD%E8%AE%A9AI%E9%9A%8F%E6%97%B6%E2%80%9C%E7%9C%8B%E7%9D%80%E2%80%9D%E5%AE%B6%E5%90%97%EF%BC%9F%EF%BC%88%E8%AF%BE%E4%BB%B6%EF%BC%891772166327416.png",
+                    "dataId": "new4",
+                    "dataList": [
+                       
+                    ],
+                    "courseType": "2"
+                }
             ]
         },
         "四年级":{
@@ -103,7 +142,46 @@
                 }
             ],
             "xia": [
-                
+                {
+                    "id": "e959aef2-ed46-11f0-9b8a-005056924926",
+                    "title": "【四年级下册】第1课 图书馆里藏数据",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E7%AC%AC1%E8%AF%BE%20%E5%9B%BE%E4%B9%A6%E9%A6%86%E9%87%8C%E8%97%8F%E6%95%B0%E6%8D%AE%E5%B0%81%E9%9D%A2%201772091262318.png",
+                    "dataId": "new1",
+                    "dataList": [
+
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "eceff6d7-1220-11f1-bcd9-005056924926",
+                    "title": "【四年级下册】第2课 AI馆员的读心术",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E7%AC%AC2%E8%AF%BE%20AI%E9%A6%86%E9%95%BF%E7%9A%84%E2%80%9C%E8%AF%BB%E5%BF%83%E6%9C%AF%E2%80%9D_%E5%B0%81%E9%9D%A21772006277183.png",
+                    "dataId": "new2",
+                    "dataList": [
+
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "61a53cf9-1228-11f1-bcd9-005056924926",
+                    "title": "【四年级下册】第3课 借阅数据小管家",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%B9%BB%E7%81%AF%E7%89%8711772009355105.PNG",
+                    "dataId": "new3",
+                    "dataList": [
+
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "5fe5fd70-12ea-11f1-bcd9-005056924926",
+                    "title": "【四年级下册】第4课 图书馆员的真假话",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%B9%BB%E7%81%AF%E7%89%8711772093239803.PNG",
+                    "dataId": "new4",
+                    "dataList": [
+
+                    ],
+                    "courseType": "2"
+                }
             ]
         },
         "五年级": {
@@ -170,7 +248,56 @@
                 }
             ],
             "xia": [
-                
+                {
+                    "id": "553cd378-1622-11f1-bcd9-005056924926",
+                    "title": "【五年级】下册 第1课 AI守护道路安全",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%B9%BB%E7%81%AF%E7%89%8711772452067431.png",
+                    "dataId": "new1",
+                    "dataList": [
+
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "94f919ae-1625-11f1-bcd9-005056924926",
+                    "title": "【五年级】下册 第2课 拥堵路段预测",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%B9%BB%E7%81%AF%E7%89%8711772447964221.png",
+                    "dataId": "new2",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "b86a0ff2-162c-11f1-bcd9-005056924926",
+                    "title": "【五年级】下册 第3课 智能路线规划",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%B9%BB%E7%81%AF%E7%89%8711772451449063.png",
+                    "dataId": "new3",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "e089a91f-162d-11f1-bcd9-005056924926",
+                    "title": "【五年级】下册 第4课 AIGC设计未来交通",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%B9%BB%E7%81%AF%E7%89%8711772452302122.png",
+                    "dataId": "new4",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id":"0e0ab6fc-162e-11f1-bcd9-005056924926" ,
+                    "title": "【五年级】下册 第5课 [未来交通]公民行动",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%B9%BB%E7%81%AF%E7%89%8711772452507587.png",
+                    "dataId": "new5",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                }
             ]
         },
         "六年级": {
@@ -237,7 +364,46 @@
                 }
             ],
             "xia": [
-                
+                {
+                    "id": "2f5569ab-12c6-11f1-bcd9-005056924926",
+                    "title": "【六年级】下册 第1课 环境变化与生物行为监测",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E5%85%AD%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC1%E8%AF%BE%20%E7%8E%AF%E5%A2%83%E5%8F%98%E5%8C%96%E4%B8%8E%E7%94%9F%E7%89%A9%E8%A1%8C%E4%B8%BA%E7%9B%91%E6%B5%8B1772076462646.jpg",
+                    "dataId": "new1",
+                    "dataList": [
+
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "199e61a2-12dc-11f1-bcd9-005056924926",
+                    "title": "【六年级】下册 第2课 物种多样性保护",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E5%85%AD%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC2%E8%AF%BE%20%E7%89%A9%E7%A7%8D%E5%A4%9A%E6%A0%B7%E6%80%A7%E4%BF%9D%E6%8A%A41772086143934.jpg",
+                    "dataId": "new2",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "b7eaaa5f-12de-11f1-bcd9-005056924926",
+                    "title": "【六年级】下册 第3课 珊瑚家族分类师",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E5%85%AD%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC3%E8%AF%BE%20%E7%8F%8A%E7%91%9A%E5%AE%B6%E6%97%8F%E5%88%86%E7%B1%BB%E5%B8%881772087564267.jpg",
+                    "dataId": "new3",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "ffcbe796-12e2-11f1-bcd9-005056924926",
+                    "title": "【六年级】下册 第4课 智慧生态方案设计",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E5%85%AD%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC4%E8%AF%BE%20%E6%99%BA%E6%85%A7%E7%94%9F%E6%80%81%E6%96%B9%E6%A1%88%E8%AE%BE%E8%AE%A1%20-%20%E5%8E%BB%E8%A7%86%E9%A2%911772089075950.jpg",
+                    "dataId": "new4",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                }
             ]
         },
         "七年级": {
@@ -304,7 +470,56 @@
                 }
             ],
             "xia": [
-                
+                {
+                    "id": "d73478cd-12e2-11f1-bcd9-005056924926",
+                    "title": "【七年级】下册 第1课 智能旅游的新时代",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E4%B8%83%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC1%E8%AF%BE%20%E6%99%BA%E8%83%BD%E6%97%85%E6%B8%B8%E7%9A%84%E6%96%B0%E6%97%B6%E4%BB%A31772089549415.png",
+                    "dataId": "new1",
+                    "dataList": [
+
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id":"e6661005-12e5-11f1-bcd9-005056924926" ,
+                    "title":"【七年级】下册 第2课 旅游助手的智能感知" ,
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E4%B8%83%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC2%E8%AF%BE%20%E6%97%85%E6%B8%B8%E5%8A%A9%E6%89%8B%E7%9A%84%E6%99%BA%E8%83%BD%E6%84%9F%E7%9F%A5%E2%80%94%E2%80%94%E5%8E%8B%E7%BC%A9%E7%89%881772090754951.png",
+                    "dataId": "new2",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "d12b7c29-12e9-11f1-bcd9-005056924926",
+                    "title": "【七年级】下册 第3课 智能推荐的算法奥秘",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E4%B8%83%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC3%E8%AF%BE%20%E6%99%BA%E8%83%BD%E6%8E%A8%E8%8D%90%E7%9A%84%E7%AE%97%E6%B3%95%E5%A5%A5%E7%A7%981772092599227.png",
+                    "dataId": "new3",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id":"16ac0a93-12eb-11f1-bcd9-005056924926" ,
+                    "title":"【七年级】下册 第4课 打造我的智能旅游助手" ,
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E4%B8%83%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC4%E8%AF%BE%20%E6%89%93%E9%80%A0%E6%88%91%E7%9A%84%E6%99%BA%E8%83%BD%E6%97%85%E6%B8%B8%E5%8A%A9%E6%89%8B%E2%80%94%E2%80%94%E5%8E%8B%E7%BC%A9%E7%89%881772093192302.png",
+                    "dataId": "new4",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "30fd91c2-12ec-11f1-bcd9-005056924926",
+                    "title": "【七年级】下册 第5课 智能旅游的责任与未来",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E3%80%90%E4%B8%83%E5%B9%B4%E7%BA%A7%E3%80%91%E4%B8%8B%E5%86%8C%20%E7%AC%AC5%E8%AF%BE%20%E6%99%BA%E8%83%BD%E6%97%85%E6%B8%B8%E7%9A%84%E8%B4%A3%E4%BB%BB%E4%B8%8E%E6%9C%AA%E6%9D%A5-%E5%8E%8B%E7%BC%A9%E7%89%881772093706649.png",
+                    "dataId": "new5",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                }
             ]
         },
         "八年级": {
@@ -371,7 +586,56 @@
                 }
             ],
             "xia": [
-                
+                {
+                    "id": "8c7fd7d3-1484-11f1-bcd9-005056924926",
+                    "title": "【八年级下册】第1课 初探AI+农业",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/de8aea0971119cff28b3828aa146cb61772269438298.png",
+                    "dataId": "new1",
+                    "dataList": [
+
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "1d0f6b8b-1485-11f1-bcd9-005056924926",
+                    "title": "【八年级下册】第2课 AI如何成为农业专家",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/55760b0bcd1a35806bd1a2a8d00dbe51772269546849.png",
+                    "dataId": "new2",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "9de5e3ba-1485-11f1-bcd9-005056924926",
+                    "title": "【八年级下册】第3课 我是智慧农业工程师",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/4443c619fc24e885c8a9d23ff00d6561772269775359.png",
+                    "dataId": "new3",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "2b95469e-1486-11f1-bcd9-005056924926",
+                    "title": "【八年级下册】第4课 我的方案落地之旅",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/f985fd9e6c8da7c609e5b84c16e8fc51772270040253.png",
+                    "dataId": "new4",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                },
+                {
+                    "id": "30dc556c-1487-11f1-bcd9-005056924926",
+                    "title": "【八年级下册】第5课 人工智能的未来与我们的责任",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/789aa1cbbd460c5bde46df1c0a6af171772270220304.png",
+                    "dataId": "new5",
+                    "dataList": [
+                        
+                    ],
+                    "courseType": "2"
+                }
             ]
         },
         "九年级": {
@@ -418,7 +682,46 @@
                 }
             ],
             "xia": [
-                
+                {
+                    "id": "cb2c2542-f029-11f0-9b8a-005056924926",
+                    "title": "【九年级】下册 第1课 机器学习初探（上）",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/11768293969412.png",
+                    "dataId": "new1",
+                    "dataList": [],
+                    "courseType": "2"
+                },
+                {
+                    "id": "ad149890-f02c-11f0-9b8a-005056924926",
+                    "title": "【九年级】下册 第2课 机器学习初探（下）",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/21768294056963.png",
+                    "dataId": "new2",
+                    "dataList": [],
+                    "courseType": "2"
+                },
+                {
+                    "id": "482b6e20-f02e-11f0-9b8a-005056924926",
+                    "title": "【九年级】下册 第3课 条件概率和贝叶斯定理",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/31768293928238.png",
+                    "dataId": "new3",
+                    "dataList": [],
+                    "courseType": "2"
+                },
+                {
+                    "id": "fc550012-f030-11f0-9b8a-005056924926",
+                    "title": "【九年级】下册 第4课 朴素贝叶斯分类",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/41768293892933.png",
+                    "dataId": "new4",
+                    "dataList": [],
+                    "courseType": "2"
+                },
+                {
+                    "id": "85ddc1a4-f032-11f0-9b8a-005056924926",
+                    "title": "【九年级】下册 第5课 分类问题",
+                    "url": "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/51768293864079.png",
+                    "dataId": "new5",
+                    "dataList": [],
+                    "courseType": "2"
+                }
             ]
         }
     },

src/components/main/courseSelect.vue

@@ -23,7 +23,7 @@
   </div>
   <div class="course_select">
     <el-button :class="volumes ? 'el_button_active' : ''" @click="volumes = true">上册</el-button>
-    <el-button v-if="!courseTypeShow" :class="!volumes ? 'el_button_active' : ''"
+    <el-button :class="!volumes ? 'el_button_active' : ''"
       @click="volumes = false">下册</el-button>
 
 
@@ -36,7 +36,12 @@
             <div class="course_content">
               <div class="div_title">
                 <span>上册</span>
-                {{ item.title }}
+                <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
+                   <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
+                  <div class="div_title_text">{{ item.title }}</div>
+                </el-tooltip>
+                </el-tooltip>
+                
                 <!-- v-if="isupdateCourse" -->
                 <!-- v-if="isupdateCourse && item.courseType == '1'" -->
                 <el-popover v-if="isupdateCourse" placement="bottom" :width="210"
@@ -101,12 +106,16 @@
             <div class="course_content">
               <div class="div_title" style="">
                 <span>下册</span>
-                {{ item.title }}
+                 <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
+                  <div class="div_title_text">{{ item.title }}</div>
+                </el-tooltip>
+
                 <!-- v-if="isupdateCourse" -->
-                <el-popover v-if="isupdateCourse && item.courseType == '1'" placement="bottom" :width="210"
+                <el-popover v-if="isupdateCourse" placement="bottom" :width="210"
                   trigger="click" show-after="500" @hide="checked1 = false">
                   <template #reference>
-                    <img :src="DownloadImg" alt="" @click="getDate(item.dataId)">
+                    <img :src="DownloadImg" v-if="item.courseType == '2'" alt="">
+                    <img :src="DownloadImg" v-else alt="" @click="getDate(item.dataId)">
                   </template>
                   <div>
                     <div>
@@ -136,7 +145,7 @@
               </div>
             </div>
             <div class="class_button" v-if="isupdateCourse">
-              <el-popover v-if="item.courseType == '1'" placement="bottom" trigger="hover">
+              <!-- <el-popover v-if="item.courseType == '1'" placement="bottom" trigger="hover">
                 <template #reference>
                   <el-button
                     style="width: 50%;background: rgba(255, 255, 245, 1);color: rgba(0, 0, 0, 0.6);">备课</el-button>
@@ -146,8 +155,12 @@
                   <li @click="updateCourse(item.id, item)">修改</li>
                   <li @click="ReductionCourse(item.id)">还原</li>
                 </ul>
-              </el-popover>
-              <el-button :style="item.courseType == '1' ? 'width: 50%;' : 'width: 100%;'" class="el_button_active"
+              </el-popover> -->
+              <el-button
+                @click="getCourseid(item.id)"
+                  style="width: 50%;background: rgba(255, 255, 245, 1);color: rgba(0, 0, 0, 0.6);">
+                  备课</el-button>
+              <el-button style="width: 50%;" class="el_button_active"
                 @click="openCourseDetail(item.id, item)">上课</el-button>
             </div>
           </div>
@@ -185,7 +198,9 @@
             <img :src="getImageUrl(item.url)" alt="">
             <div class="course_content">
               <div class="div_title">
-                {{ item.title }}
+                 <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
+                  <div class="div_title_text">{{ item.title }}</div>
+                </el-tooltip>
               </div>
             </div>
             <div class="class_button" v-if="isupdateCourse">
@@ -205,7 +220,9 @@
             <img :src="getImageUrl(item.url)" alt="">
             <div class="course_content">
               <div class="div_title">
-                {{ item.title }}
+                 <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
+                  <div class="div_title_text">{{ item.title }}</div>
+                </el-tooltip>
               </div>
             </div>
             <div class="class_button" v-if="isupdateCourse">
@@ -225,7 +242,10 @@
             <img :src="getImageUrl(item.url)" alt="">
             <div class="course_content">
               <div class="div_title">
-                {{ item.title }}
+                 <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
+                  <div class="div_title_text">{{ item.title }}</div>
+                </el-tooltip>
+
               </div>
             </div>
             <div class="class_button" v-if="isupdateCourse">
@@ -280,7 +300,7 @@ const props = defineProps({
     default: true
   }
 })
-const volumes = ref(true)
+const volumes = ref(false)
 const user = userInfoStore()
 const CurrentRole = userCurrentRole()
 const Current = userCurrent()
@@ -725,9 +745,19 @@ watchEffect(() => {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-
+        display: flex;
+        gap: 5px;
+        justify-content: space-between;
+        align-items: center;
+        .div_title_text{
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
         span {
           // display: inline-block;
+          flex-shrink: 0;
           padding: 2px 8px;
           background: rgba(224, 234, 251, 1);
           border-radius: 5px;