详情页bug自测

front/src/views/detailsAll/DeveloperComponents.vue

@@ -134,7 +134,6 @@
       }
       queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
         associatedComponents.value[0].dataList = res.data.data
-        debugger
         loading.value = false
       })
       selectOne(id).then((res) => {

front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue

@@ -17,7 +17,10 @@
           <div class="content-left-content">
             <p>
               <span>{{ item.link.name }}</span>
-              <span>{{ item.link.value }}</span>
+              <a-tooltip>
+                <template #title>{{ item.link.value }}</template>
+                <span>{{ item.link.value }}</span>
+              </a-tooltip>
             </p>
             <p>
               <span>{{ item.postMethod.name }}</span>
@@ -72,7 +75,7 @@
         title: '技术对接',
         titleSon: '调用接口',
         link: {
-          name: '接口地址：',
+          name: '服务接口：',
           value: '',
         },
         postMethod: {
@@ -225,10 +228,9 @@
             color: rgba(33, 41, 86, 0.8);
             line-height: 20px;
             p {
-              display: -webkit-box;
               overflow: hidden;
-              -webkit-line-clamp: 1;
+              text-overflow: ellipsis;
-              -webkit-box-orient: vertical;
+              white-space: nowrap;
               margin-bottom: 10px;
             }
           }
@@ -283,13 +285,16 @@
           p {
             // width: 160px;
             height: 20px;
-            display: -webkit-box;
+            overflow: hidden;
-            // overflow: hidden;
+            text-overflow: ellipsis;
             white-space: nowrap;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
             margin-right: 15px;
             span {
+              display: inline-block;
+              max-width: 1.2rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
               cursor: pointer;
             }
           }

front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue

@@ -6,11 +6,7 @@
         <div>
           <div class="title">图片识别</div>
           <div class="box">
-            <a-image
+            <a-image :width="510" :height="340" :src="responseUrl" />
-              :width="510"
-              :height="340"
-              :src="responseUrl"
-            />
             <a-upload
               v-model:file-list="fileList"
               name="file"
@@ -88,18 +84,17 @@
   const menuOpenKeys2 = ref(['全文还原'])
   let responseUrl = ref('static/image/test.jpg')
   const handleChange = (info) => {
-    debugger;
+    if (info.file.status !== 'uploading') {
-        if (info.file.status !== 'uploading') {
+      console.log(info.file, info.fileList)
-          console.log(info.file, info.fileList)
+    }
-        }
+    if (info.file.status === 'done') {
-        if (info.file.status === 'done') {
+      message.success(`${info.file.name} file uploaded successfully`)
-          message.success(`${info.file.name} file uploaded successfully`)
+      responseUrl.value = info.file.response.data
-          responseUrl.value = info.file.response.data
+      checkImage()
-          checkImage()
+    } else if (info.file.status === 'error') {
-        } else if (info.file.status === 'error') {
+      message.error(`${info.file.name} file upload failed.`)
-          message.error(`${info.file.name} file upload failed.`)
+    }
-        }
+  }
-      }
   const checkImage = () => {
     getUrlBase64(responseUrl.value, 'jpg', (base64) => {
       console.log('1111111', base64)

front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue

@@ -71,7 +71,6 @@
     dataList: { type: Object, default: null },
   })
   if (props.dataList.infoList) {
-    debugger
     let obj = props.dataList.infoList.filter(
       (item) => item.attrType === '应用场景'
     )[0]
@@ -79,7 +78,6 @@
       flag.value = false
     } else {
       obj.attrValue = JSON.parse(obj.attrValue)
-      debugger
       dataFrom.value = obj
       tabindex.value = dataFrom.value.attrValue[0].name
     }

front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue

@@ -103,7 +103,6 @@
       console.log(item)
       if (list.value.indexOf(item.name) > -1) {
         // if (item.name == '关联应用') {
-        //   debugger
         //   if (props.associatedComponents[0].dataList.length != 0) {
         //     item.show = true
         //   }

front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue

@@ -57,6 +57,10 @@
       {
         childrenTitle: '归属部门',
         childrenContent: [
+          {
+            attrType: '归属部门名称',
+            attrValue: '------',
+          },
           {
             attrType: '部门联系人',
             attrValue: '------',
@@ -65,15 +69,15 @@
             attrType: '联系人电话',
             attrValue: '------',
           },
-          {
-            attrType: '归属部门名称',
-            attrValue: '------',
-          },
         ],
       },
       {
         childrenTitle: '服务商信息',
         childrenContent: [
+          {
+            attrType: '服务商名称',
+            attrValue: '------',
+          },
           {
             attrType: '服务商联系人',
             attrValue: '------',
@@ -82,10 +86,6 @@
             attrType: '联系人电话',
             attrValue: '------',
           },
-          {
-            attrType: '服务商名称',
-            attrValue: '------',
-          },
         ],
       },
     ],
@@ -117,6 +117,9 @@
         } else if (item.attrType == '服务商联系电话') {
           dataFrom.value.content[1].childrenContent[1].attrValue =
             item.attrValue
+        } else if (item.attrType == '服务商' || item.attrType == '服务商名') {
+          dataFrom.value.content[1].childrenContent[2].attrValue =
+            item.attrValue
         }
       })
     }
@@ -176,6 +179,12 @@
             } else if (item.attrType == '服务商联系电话') {
               dataFrom.value.content[1].childrenContent[1].attrValue =
                 item.attrValue
+            } else if (
+              item.attrType == '服务商' ||
+              item.attrType == '服务商名'
+            ) {
+              dataFrom.value.content[1].childrenContent[2].attrValue =
+                item.attrValue
             }
           })
         }

front/src/views/detailsAll/components/Developer/DeveloperTrial.vue

@@ -130,6 +130,13 @@
         border-right: 0.01rem #ffffff solid;
         padding-left: 0.7rem;
         padding-right: 1rem;
+        & > p {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
       }
       .main-center {
         padding-left: 1rem;

front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue

@@ -2,21 +2,28 @@
   <!-- 使用方式 -->
   <div class="usage-mode" v-if="flag">
     <div class="tltle">
-      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
     </div>
     <div class="content" v-for="item in dataFrom.content" :key="item.title">
       <div class="content-left">
         <div class="left">
-          <div class="content-left-content">
+          <a-tooltip>
+            <template #title>{{ item.linkValue }}</template>
             <p>
-              <span>服务地址：</span>
+              服务地址：
-              <span>{{ item.linkValue }}</span>
+              {{ item.linkValue }}
             </p>
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ item.csslinkValue }}</template>
             <p>
-              <span>样式服务地址：</span>
+              样式服务地址：
-              <span>{{ item.csslnkValue }}</span>
+              {{ item.csslinkValue }}
             </p>
-          </div>
+          </a-tooltip>
         </div>
         <div class="right">
           <div @click="technical()">接口文档</div>
@@ -82,286 +89,288 @@
 </template>
 
 <script setup>
-import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-import { pinyin } from 'pinyin-pro'
+  import { pinyin } from 'pinyin-pro'
-import { ref, defineProps, watch } from 'vue'
+  import { ref, defineProps, watch } from 'vue'
-let dataFrom = ref({
+  let dataFrom = ref({
-  link: '',
+    link: '',
-  title: '使用方式',
+    title: '使用方式',
-  englishTitle: 'USAGE',
+    englishTitle: 'USAGE',
-  content: [
+    content: [
-    {
+      {
-      title: '组件地址',
+        title: '组件地址',
-      link: {
+        link: {
-        name: '接口地址：',
+          name: '接口地址：',
+        },
+        linkValue: '',
+        csslinkValue: '',
+        contact: '归属部门',
+        facilitator: { name: '归属部门：', value: '' },
+        people: { name: '部门联系人：', value: '' },
+        phone: {
+          name: '联系人电话：',
+          value: '',
+        },
+        contact2: '服务商',
+        facilitator2: { name: '服务商：', value: '' },
+        people2: { name: '服务商联系人：', value: '' },
+        phone2: {
+          name: '联系人电话：',
+          value: '',
+        },
       },
-      linkValue: '',
+    ],
-      contact: '归属部门',
+  })
-      facilitator: { name: '归属部门：', value: '' },
+  //数据初始化
-      people: { name: '部门联系人：', value: '' },
+  const props = defineProps({
-      phone: {
+    dataList: { type: Object, default: null },
-        name: '联系人电话：',
+  })
-        value: '',
+  const flag = ref(true)
-      },
+  if (props.dataList.infoList) {
-      contact2: '服务商',
+    let obj = props.dataList.infoList.filter(
-      facilitator2: { name: '服务商：', value: '' },
+      (item) =>
-      people2: { name: '服务商联系人：', value: '' },
+        item.attrType === '技术文档' ||
-      phone2: {
+        item.attrType === '服务商' ||
-        name: '联系人电话：',
+        item.attrType === '服务商联系人' ||
-        value: '',
+        item.attrType === '使用手册' ||
-      },
+        item.attrType === '服务地址' ||
-    },
+        item.attrType === '样式服务地址' ||
-  ],
+        item.attrType === '服务商联系电话'
-})
+    )[0]
-//数据初始化
+    if (!obj) {
-const props = defineProps({
+      flag.value = false
-  dataList: { type: Object, default: null },
+    } else {
-})
+      // eslint-disable-next-line vue/no-setup-props-destructure
-const flag = ref(true)
+      dataFrom.value.content[0].link.value = props.dataList.apiUrl
-if (props.dataList.infoList) {
+      dataFrom.value.content[0].facilitator.value = props.dataList.deptName
-  let obj = props.dataList.infoList.filter(
+      dataFrom.value.content[0].people.value = props.dataList.deptContacts
-    (item) =>
+      dataFrom.value.content[0].phone.value = props.dataList.deptPhone
-      item.attrType === '技术文档' ||
+      console.log('dataList', props.dataList)
-      item.attrType === '服务商' ||
+      props.dataList.infoList.map((item) => {
-      item.attrType === '服务商联系人' ||
+        if (item.attrType === '服务地址') {
-      item.attrType === '使用手册' ||
+          dataFrom.value.content[0].linkValue = item.attrValue || '--'
-      item.attrType === '服务地址' ||
+        } else if (item.attrType === '服务商') {
-      item.attrType === '样式服务地址' ||
+          dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
-      item.attrType === '服务商联系电话'
+        } else if (item.attrType === '服务商联系人') {
-  )[0]
+          dataFrom.value.content[0].people2.value = item.attrValue || '--'
-  if (!obj) {
+        } else if (item.attrType === '服务商联系电话') {
-    flag.value = false
+          dataFrom.value.content[0].phone2.value = item.attrValue || '--'
-  } else {
+        } else if (item.attrType === '样式服务地址') {
-    // eslint-disable-next-line vue/no-setup-props-destructure
+          dataFrom.value.content[0].csslinkValue = item.attrValue || '--'
-    dataFrom.value.content[0].link.value = props.dataList.apiUrl
+        }
-    dataFrom.value.content[0].facilitator.value = props.dataList.deptName
+      })
-    dataFrom.value.content[0].people.value = props.dataList.deptContacts
-    dataFrom.value.content[0].phone.value = props.dataList.deptPhone
-    console.log('dataList', props.dataList)
-    props.dataList.infoList.map((item) => {
-      if (item.attrType === '组件地址') {
-        dataFrom.value.content[0].linkValue = item.attrValue || '--'
-      } else if (item.attrType === '服务商') {
-        dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
-      } else if (item.attrType === '服务商联系人') {
-        dataFrom.value.content[0].people2.value = item.attrValue || '--'
-      } else if (item.attrType === '服务商联系电话') {
-        dataFrom.value.content[0].phone2.value = item.attrValue || '--'
-      }
-    })
-  }
-}
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      let obj = val.infoList.filter(
-        (item) =>
-          item.attrType === '技术文档' ||
-          item.attrType === '服务商' ||
-          item.attrType === '服务商联系人' ||
-          item.attrType === '使用手册' ||
-          item.attrType === '服务地址' ||
-          item.attrType === '样式服务地址' ||
-          item.attrType === '服务商联系电话'
-      )[0]
-      if (!obj) {
-        flag.value = false
-      } else {
-        dataFrom.value.content[0].link.value = val.apiUrl
-        dataFrom.value.content[0].facilitator.value = val.deptName
-        dataFrom.value.content[0].people.value = val.deptContacts
-        dataFrom.value.content[0].phone.value = val.deptPhone
-        console.log('dataList', val)
-        val.infoList.map((item) => {
-          if (item.attrType === '组件地址') {
-            dataFrom.value.content[0].linkValue = item.attrValue || '--'
-          } else if (item.attrType === '服务商') {
-            dataFrom.value.content[0].facilitator2.value =
-              item.attrValue || '--'
-          } else if (item.attrType === '服务商联系人') {
-            dataFrom.value.content[0].people2.value = item.attrValue || '--'
-          } else if (item.attrType === '服务商联系电话') {
-            dataFrom.value.content[0].phone2.value = item.attrValue || '--'
-          }
-        })
-      }
     }
   }
-)
+  watch(
-function technical() {
+    () => props.dataList,
-  // 拼接路径
+    (val) => {
-  // const type = pinyin(props.dataList.type, {
+      if (val) {
-  //   pattern: 'initial',
+        let obj = val.infoList.filter(
-  // }).replace(/\s*/g, '')
+          (item) =>
-  // // 打开文档
+            item.attrType === '技术文档' ||
-  // const id = props.dataList.id
+            item.attrType === '服务商' ||
-  // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+            item.attrType === '服务商联系人' ||
-  // console.log('dataFrom.value.link', dataFrom.value.link)
+            item.attrType === '使用手册' ||
-  let obj = props.dataList.infoList.filter(
+            item.attrType === '服务地址' ||
-    (item) => item.attrType === '技术文档'
+            item.attrType === '样式服务地址' ||
-  )[0]
+            item.attrType === '服务商联系电话'
-  console.log('dataFrom.value.link', obj.attrValue)
+        )[0]
-  window.open(
+        if (!obj) {
-    window.SITE_CONFIG.previewUrl +
+          flag.value = false
-    'hisense_office/onlinePreview?url=' +
+        } else {
-    btoa(encodeURI(obj.attrValue))
+          dataFrom.value.content[0].link.value = val.apiUrl
+          dataFrom.value.content[0].facilitator.value = val.deptName
+          dataFrom.value.content[0].people.value = val.deptContacts
+          dataFrom.value.content[0].phone.value = val.deptPhone
+          console.log('dataList', val)
+          val.infoList.map((item) => {
+            if (item.attrType === '服务地址') {
+              dataFrom.value.content[0].linkValue = item.attrValue || '--'
+            } else if (item.attrType === '服务商') {
+              dataFrom.value.content[0].facilitator2.value =
+                item.attrValue || '--'
+            } else if (item.attrType === '服务商联系人') {
+              dataFrom.value.content[0].people2.value = item.attrValue || '--'
+            } else if (item.attrType === '服务商联系电话') {
+              dataFrom.value.content[0].phone2.value = item.attrValue || '--'
+            } else if (item.attrType === '样式服务地址') {
+              dataFrom.value.content[0].csslinkValue = item.attrValue || '--'
+            }
+          })
+        }
+      }
+    }
   )
-}
+  function technical() {
-function technicalNew() {
+    // 拼接路径
-  // 拼接路径
+    // const type = pinyin(props.dataList.type, {
-  // const type = pinyin(props.dataList.type, {
+    //   pattern: 'initial',
-  //   pattern: 'initial',
+    // }).replace(/\s*/g, '')
-  // }).replace(/\s*/g, '')
+    // // 打开文档
-  // // 打开文档
+    // const id = props.dataList.id
-  // const id = props.dataList.id
+    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
-  // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    // console.log('dataFrom.value.link', dataFrom.value.link)
-  let obj = props.dataList.infoList.filter(
+    let obj = props.dataList.infoList.filter(
-    (item) => item.attrType === '使用手册'
+      (item) => item.attrType === '技术文档'
-  )[0]
+    )[0]
-  console.log('dataFrom.value.link', obj.attrValue)
+    console.log('dataFrom.value.link', obj.attrValue)
-  window.open(
+    window.open(
-    window.SITE_CONFIG.previewUrl +
+      window.SITE_CONFIG.previewUrl +
-    'hisense_office/onlinePreview?url=' +
+        'hisense_office/onlinePreview?url=' +
-    btoa(encodeURI(obj.attrValue))
+        btoa(encodeURI(obj.attrValue))
-  )
+    )
-}
+  }
+  function technicalNew() {
+    // 拼接路径
+    // const type = pinyin(props.dataList.type, {
+    //   pattern: 'initial',
+    // }).replace(/\s*/g, '')
+    // // 打开文档
+    // const id = props.dataList.id
+    // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '使用手册'
+    )[0]
+    console.log('dataFrom.value.link', obj.attrValue)
+    window.open(
+      window.SITE_CONFIG.previewUrl +
+        'hisense_office/onlinePreview?url=' +
+        btoa(encodeURI(obj.attrValue))
+    )
+  }
 </script>
 
 <style lang="less" scoped>
-.usage-mode {
+  .usage-mode {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.8rem 0;
-
-  .content {
-    margin-top: 0.3rem;
     display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.8rem 0;
 
-    .content-left {
+    .content {
-      height: 1.8rem;
+      margin-top: 0.3rem;
-      width: 6.2rem;
-      background: linear-gradient(to right,
-          rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 252, 0.4));
-      border-radius: 0.1rem;
-      margin-right: 0.6rem;
-      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
       display: flex;
-      align-items: center;
-      padding: 0 0.35rem;
 
-      .left {
+      .content-left {
-        .content-left-title {
+        height: 1.8rem;
-          font-size: 0.26rem;
+        width: 6.2rem;
-          line-height: 0.26rem;
+        background: linear-gradient(
-          color: #212956;
+          to right,
-          margin-bottom: 0.2rem;
+          rgba(113, 132, 252, 0.4),
+          rgba(148, 163, 252, 0.4)
+        );
+        border-radius: 0.1rem;
+        margin-right: 0.6rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        display: flex;
+        align-items: center;
+        padding: 0 0.35rem;
 
-          span:first-child {
+        .left {
-            margin-right: 0.1rem;
+          .content-left-title {
+            font-size: 0.26rem;
+            line-height: 0.26rem;
+            color: #212956;
+            margin-bottom: 0.2rem;
+
+            span:first-child {
+              margin-right: 0.1rem;
+            }
           }
-        }
-
-        .content-left-content {
-          width: 4.2rem;
-          font-size: 0.2rem;
-          color: rgba(33, 41, 86, 0.8);
-          line-height: 0.2rem;
-
           p {
-            display: -webkit-box;
+            display: block;
+            color: rgba(33, 41, 86, 0.8);
+            width: 4.2rem;
             overflow: hidden;
-            -webkit-line-clamp: 1;
+            text-overflow: ellipsis;
-            -webkit-box-orient: vertical;
+            white-space: nowrap;
-            // margin-bottom: 0.1rem;
             font-size: 20px;
             color: #212956;
             line-height: 26px;
+            margin-top: 0.3rem;
+          }
+          p:first-child {
+            margin-top: 0.2rem;
+          }
+        }
+
+        .right {
+          div {
+            height: 0.4rem;
+            width: 1.3rem;
+            background: #ffffff;
+            border-radius: 0.2rem;
+            color: #526aff;
+            font-size: 0.2rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
           }
 
-          p:last-of-type {
+          div:first-child {
-            margin-top: 20px;
+            margin-bottom: 0.2rem;
           }
         }
       }
 
-      .right {
+      .content-right {
-        div {
+        height: 1.8rem;
-          height: 0.4rem;
+        width: 6.2rem;
-          width: 1.3rem;
+        background: linear-gradient(
-          background: #ffffff;
+          to right,
-          border-radius: 0.2rem;
-          color: #526aff;
-          font-size: 0.2rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-        }
-
-        div:first-child {
-          margin-bottom: 0.2rem;
-        }
-      }
-    }
-
-    .content-right {
-      height: 1.8rem;
-      width: 6.2rem;
-      background: linear-gradient(to right,
           rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 252, 0.4));
+          rgba(148, 163, 252, 0.4)
-      border-radius: 0.1rem;
+        );
-      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
+        border-radius: 0.1rem;
-      display: flex;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
-      justify-content: space-around;
-      align-items: center;
-      padding: 0 0.3rem;
-
-      .content-right-left {
-        // border-right: 0.01rem solid #b0b9f1;
-        padding-right: 0.1rem;
-        margin-right: 0.1rem;
-      }
-
-      .content-right-title {
-        font-size: 0.26rem;
-        line-height: 0.26rem;
-        color: #212956;
-        margin-bottom: 0.15rem;
-      }
-
-      .content-right-content {
         display: flex;
-        font-size: 0.16rem;
+        justify-content: space-around;
-        color: rgba(33, 41, 86, 0.8);
+        align-items: center;
-        line-height: 0.2rem;
+        padding: 0 0.3rem;
-        overflow: hidden;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        flex-direction: column;
 
-        p {
+        .content-right-left {
-          // width: 1.60rem;
+          // border-right: 0.01rem solid #b0b9f1;
-          height: 0.2rem;
+          padding-right: 0.1rem;
-          display: -webkit-box;
+          margin-right: 0.1rem;
-          // overflow: hidden;
+        }
-          white-space: nowrap;
+
+        .content-right-title {
+          font-size: 0.26rem;
+          line-height: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.15rem;
+        }
+
+        .content-right-content {
+          display: flex;
+          font-size: 0.16rem;
+          color: rgba(33, 41, 86, 0.8);
+          line-height: 0.2rem;
+          overflow: hidden;
           -webkit-line-clamp: 1;
           -webkit-box-orient: vertical;
-          margin-right: 0.15rem;
+          flex-direction: column;
 
-          span {
+          p {
-            cursor: pointer;
+            // width: 1.60rem;
-            font-size: 20px;
+            height: 0.2rem;
-            color: #212956;
+            display: -webkit-box;
-            opacity: 0.8;
+            // overflow: hidden;
+            white-space: nowrap;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            margin-right: 0.15rem;
+
+            span {
+              cursor: pointer;
+              font-size: 20px;
+              color: #212956;
+              opacity: 0.8;
+            }
           }
         }
       }
     }
   }
-}
 </style>