详情页bug自测

2022-07-06 11:58:13 +08:00 · 2022-07-06 11:58:13 +08:00 · 86580758f4
parent d96a0c440b
commit 86580758f4
8 changed files with 313 additions and 292 deletions
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/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) => {
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
+++ b/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;
-              -webkit-box-orient: vertical;
+              text-overflow: ellipsis;
+              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;
            }
          }
--- a/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
+++ b/front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
@ -6,11 +6,7 @@
        <div>
          <div class="title">图片识别</div>
          <div class="box">
-            <a-image
-              :width="510"
-              :height="340"
-              :src="responseUrl"
-            />
+            <a-image :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') {
-          console.log(info.file, info.fileList)
-        }
-        if (info.file.status === 'done') {
-          message.success(`${info.file.name} file uploaded successfully`)
-          responseUrl.value = info.file.response.data
-          checkImage()
-        } else if (info.file.status === 'error') {
-          message.error(`${info.file.name} file upload failed.`)
-        }
-      }
+    if (info.file.status !== 'uploading') {
+      console.log(info.file, info.fileList)
+    }
+    if (info.file.status === 'done') {
+      message.success(`${info.file.name} file uploaded successfully`)
+      responseUrl.value = info.file.response.data
+      checkImage()
+    } else if (info.file.status === 'error') {
+      message.error(`${info.file.name} file upload failed.`)
+    }
+  }
  const checkImage = () => {
    getUrlBase64(responseUrl.value, 'jpg', (base64) => {
      console.log('1111111', base64)
--- a/front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
+++ b/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
    }
--- a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
+++ b/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
        //   }
--- a/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
+++ b/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
            }
          })
        }
--- a/front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
+++ b/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;
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
+++ b/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 { pinyin } from 'pinyin-pro'
-import { ref, defineProps, watch } from 'vue'
-let dataFrom = ref({
-  link: '',
-  title: '使用方式',
-  englishTitle: 'USAGE',
-  content: [
-    {
-      title: '组件地址',
-      link: {
-        name: '接口地址：',
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { pinyin } from 'pinyin-pro'
+  import { ref, defineProps, watch } from 'vue'
+  let dataFrom = ref({
+    link: '',
+    title: '使用方式',
+    englishTitle: 'USAGE',
+    content: [
+      {
+        title: '组件地址',
+        link: {
+          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: '' },
-      phone: {
-        name: '联系人电话：',
-        value: '',
-      },
-      contact2: '服务商',
-      facilitator2: { name: '服务商：', value: '' },
-      people2: { name: '服务商联系人：', value: '' },
-      phone2: {
-        name: '联系人电话：',
-        value: '',
-      },
-    },
-  ],
-})
-//数据初始化
-const props = defineProps({
-  dataList: { type: Object, default: null },
-})
-const flag = ref(true)
-if (props.dataList.infoList) {
-  let obj = props.dataList.infoList.filter(
-    (item) =>
-      item.attrType === '技术文档' ||
-      item.attrType === '服务商' ||
-      item.attrType === '服务商联系人' ||
-      item.attrType === '使用手册' ||
-      item.attrType === '服务地址' ||
-      item.attrType === '样式服务地址' ||
-      item.attrType === '服务商联系电话'
-  )[0]
-  if (!obj) {
-    flag.value = false
-  } else {
-    // eslint-disable-next-line vue/no-setup-props-destructure
-    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 || '--'
-          }
-        })
-      }
+    ],
+  })
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) =>
+        item.attrType === '技术文档' ||
+        item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '使用手册' ||
+        item.attrType === '服务地址' ||
+        item.attrType === '样式服务地址' ||
+        item.attrType === '服务商联系电话'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      // eslint-disable-next-line vue/no-setup-props-destructure
+      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 || '--'
+        } else if (item.attrType === '样式服务地址') {
+          dataFrom.value.content[0].csslinkValue = item.attrValue || '--'
+        }
+      })
    }
  }
-)
-function technical() {
-  // 拼接路径
-  // 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')
-  // console.log('dataFrom.value.link', dataFrom.value.link)
-  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))
+  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 || '--'
+            } else if (item.attrType === '样式服务地址') {
+              dataFrom.value.content[0].csslinkValue = item.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))
-  )
-}
+  function technical() {
+    // 拼接路径
+    // 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')
+    // console.log('dataFrom.value.link', dataFrom.value.link)
+    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))
+    )
+  }
+  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 {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.8rem 0;
-
-  .content {
-    margin-top: 0.3rem;
+  .usage-mode {
    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.8rem 0;

-    .content-left {
-      height: 1.8rem;
-      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);
+    .content {
+      margin-top: 0.3rem;
      display: flex;
-      align-items: center;
-      padding: 0 0.35rem;

-      .left {
-        .content-left-title {
-          font-size: 0.26rem;
-          line-height: 0.26rem;
-          color: #212956;
-          margin-bottom: 0.2rem;
+      .content-left {
+        height: 1.8rem;
+        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;

-          span:first-child {
-            margin-right: 0.1rem;
+        .left {
+          .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;
-            -webkit-box-orient: vertical;
-            // margin-bottom: 0.1rem;
+            text-overflow: ellipsis;
+            white-space: nowrap;
            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 {
-            margin-top: 20px;
+          div:first-child {
+            margin-bottom: 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;
-        }
-
-        div:first-child {
-          margin-bottom: 0.2rem;
-        }
-      }
-    }
-
-    .content-right {
-      height: 1.8rem;
-      width: 6.2rem;
-      background: linear-gradient(to right,
+      .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));
-      border-radius: 0.1rem;
-      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
-      display: flex;
-      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 {
+          rgba(148, 163, 252, 0.4)
+        );
+        border-radius: 0.1rem;
+        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
        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;
-        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        padding: 0 0.3rem;

-        p {
-          // width: 1.60rem;
-          height: 0.2rem;
-          display: -webkit-box;
-          // overflow: hidden;
-          white-space: nowrap;
+        .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;
+          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 {
-            cursor: pointer;
-            font-size: 20px;
-            color: #212956;
-            opacity: 0.8;
+          p {
+            // width: 1.60rem;
+            height: 0.2rem;
+            display: -webkit-box;
+            // 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>