diff --git a/front/src/assets/detailsAll/yy_bg1.png b/front/src/assets/detailsAll/yy_bg1.png
new file mode 100644
index 00000000..f5316a86
Binary files /dev/null and b/front/src/assets/detailsAll/yy_bg1.png differ
diff --git a/front/src/assets/detailsAll/yy_dian.png b/front/src/assets/detailsAll/yy_dian.png
new file mode 100644
index 00000000..a6c079df
Binary files /dev/null and b/front/src/assets/detailsAll/yy_dian.png differ
diff --git a/front/src/views/detailsAll/AlgorithmDetails.vue b/front/src/views/detailsAll/AlgorithmDetails.vue
index d9d03b2e..edab53f7 100644
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@@ -166,6 +166,6 @@
     left: 0;
   }
   .fixed2 > div:nth-of-type(3) {
-    margin-top: 84px;
+    margin-top: 0.84rem;
   }
 </style>
diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
index 9eb31790..a9bcfe8f 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -62,6 +62,30 @@
       id="usage-mode"
       class="scrollBox"
     ></algorithm-usage-mode>
+    <!-- 功能介绍-->
+    <application-function-intorduction
+      :dataList="dataList.data"
+      id="subtool"
+      class="scrollBox"
+    ></application-function-intorduction>
+    <!-- 使用能力 -->
+    <application-ability-toise
+      :dataList="dataList.data"
+      id="ability-toise"
+      class="scrollBox"
+    ></application-ability-toise>
+    <!-- 部署与安全-->
+    <application-deployment-and-security
+      :dataList="dataList.data"
+      id="application-deployment-and-security"
+      class="scrollBox"
+    ></application-deployment-and-security>
+    <!-- 归属部门与服务商-->
+    <application-owning-department-and-service-provider
+      :dataList="dataList.data"
+      id="application-owning-department-and-service-provider"
+      class="scrollBox"
+    ></application-owning-department-and-service-provider>
     <!-- 常见问题-->
     <algorithm-common-problem
       :dataList="dataList.data"
@@ -71,6 +95,10 @@
   </div>
 </template>
 <script setup>
+  import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
+  import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
+  import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
+  import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
   import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
   import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
   import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
@@ -137,7 +165,7 @@
         console.log('初始化详情页=========================>', dataList.data)
         const arrList = ref([])
         arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-        if (arrList.value.indexOf(id) === -1) {
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
           arrList.value.push(id)
           updateVisits({
             id: res.data.data.id,
@@ -168,6 +196,6 @@
     left: 0;
   }
   .fixed2 > div:nth-of-type(3) {
-    margin-top: 84px;
+    margin-top: 0.84rem;
   }
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAbilityToise.vue b/front/src/views/detailsAll/components/Application/ApplicationAbilityToise.vue
new file mode 100644
index 00000000..b12ca549
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationAbilityToise.vue
@@ -0,0 +1,136 @@
+<!--使用能力-->
+<template>
+  <div class="application-ability-toise" v-if="flase">
+    <div class="title">
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
+    </div>
+    <div class="content">
+      <div v-for="(item, index) in dataFrom.content" :key="index" class="card">
+        <div class="card-title">{{ item.title }}</div>
+        <div class="card-content">
+          <div
+            v-for="(cardContentItem, cardContentIndex) in item.children"
+            :key="cardContentIndex"
+            class="card-content-bottom"
+          >
+            <span></span>
+            {{ cardContentItem }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  let dataFrom = ref({
+    title: '使用能力',
+    englishTitle: 'ABILITY',
+    content: [
+      {
+        title: '组件服务',
+        children: [
+          '能力名称一',
+          '能力名称二',
+          '能力名称三',
+          '能力名称四',
+          '能力名称一',
+          '能力名称一',
+          '能力名称一',
+          '能力名称八',
+        ],
+      },
+      {
+        title: '数据资源',
+        children: [
+          '能力名称一',
+          '能力名称二',
+          '能力名称三',
+          '能力名称四',
+          '能力名称一',
+          '能力名称一',
+          '能力名称一',
+          '能力名称八',
+        ],
+      },
+      {
+        title: '基础设施',
+        children: [
+          '能力名称一',
+          '能力名称二',
+          '能力名称三',
+          '能力名称四',
+          '能力名称一',
+          '能力名称一',
+          '能力名称一',
+          '能力名称八',
+        ],
+      },
+    ],
+  })
+</script>
+
+<style lang="less" scoped>
+  .application-ability-toise {
+    padding: 1.4rem 0 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #f7f8fa;
+    .title {
+      margin-bottom: 0.4rem;
+    }
+    .content {
+      display: flex;
+      width: 13rem;
+      .card {
+        display: flex;
+        flex-direction: column;
+        width: 4.2rem;
+        align-items: space-between;
+        padding: 0.3rem 0.35rem 0.3rem 0.35rem;
+        background: #ffffff;
+        margin-right: 0.2rem;
+        border: 0.01rem #e4e6f5 solid;
+        border-radius: 0.1rem;
+        .card-title {
+          margin: auto;
+          width: 1.3rem;
+          height: 0.45rem;
+          font-size: 0.22rem;
+          color: #917567;
+          background: url('~@/assets/detailsAll/yy_bg1.png') no-repeat;
+          background-size: 100%;
+          text-align: center;
+          line-height: 0.45rem;
+        }
+        .card-content {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          .card-content-bottom {
+            text-align: center;
+            margin-top: 0.3rem;
+            color: #666;
+            font-size: 0.18rem;
+            span {
+              display: inline-block;
+              width: 0.12rem;
+              height: 0.12rem;
+              margin-right: 0.1rem;
+              background: url('~@/assets/detailsAll/yy_dian.png') no-repeat;
+              background-size: 100%;
+            }
+          }
+        }
+      }
+      .card:nth-child(3n + 3) {
+        margin-right: 0;
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
new file mode 100644
index 00000000..5465dfbc
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
@@ -0,0 +1,141 @@
+<!--部署与安全-->
+<template>
+  <div class="application-deployment-and-security">
+    <div class="title">
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
+    </div>
+    <div class="content">
+      <div
+        v-for="(item, index) in dataFrom.content"
+        :key="index"
+        class="content-card"
+      >
+        <div class="card-title">{{ item.childrenTitle }}</div>
+        <div class="card-content">
+          <div v-for="carditem in item.childrenContent" :key="carditem">
+            <span>{{ carditem.attrType }}：</span>
+            <a-tooltip>
+              <template #title>{{ carditem.attrValue }}</template>
+              <span>{{ carditem.attrValue }}</span>
+            </a-tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+
+  let dataFrom = ref({
+    title: '部署与安全',
+    englishTitle: 'DEPLOY&SAFE',
+    content: [
+      {
+        childrenTitle: '部署',
+        childrenContent: [],
+      },
+      {
+        childrenTitle: '安全',
+        childrenContent: [],
+      },
+    ],
+  })
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    props.dataList.infoList.map((item) => {
+      if (item.attrType === '部署区域' || item.attrType === '是否统一登录') {
+        dataFrom.value.content[0].childrenContent.push(item)
+      } else if (
+        item.attrType === '是否等保备案' ||
+        item.attrType === '等保定级'
+      ) {
+        dataFrom.value.content[1].childrenContent.push(item)
+      }
+    })
+    let obj = {
+      attrType: '访问地址',
+      attrValue: props.dataList.link,
+    }
+    dataFrom.value.content[0].childrenContent.push(obj)
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        dataFrom.value.content[0].childrenContent = []
+        dataFrom.value.content[1].childrenContent = []
+        props.dataList.infoList.map((item) => {
+          if (
+            item.attrType === '部署区域' ||
+            item.attrType === '是否统一登录'
+          ) {
+            dataFrom.value.content[0].childrenContent.push(item)
+          } else if (
+            item.attrType === '是否等保备案' ||
+            item.attrType === '等保定级'
+          ) {
+            dataFrom.value.content[1].childrenContent.push(item)
+          }
+        })
+        let obj = {
+          attrType: '访问地址',
+          attrValue: props.dataList.link,
+        }
+        dataFrom.value.content[0].childrenContent.push(obj)
+      }
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-deployment-and-security {
+    padding: 0.8rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .title {
+      margin-bottom: 0.3rem;
+    }
+    .content {
+      display: flex;
+      width: 13rem;
+      justify-content: space-between;
+      .content-card {
+        height: 1.5rem;
+        width: 6.2rem;
+        border-radius: 0.2rem;
+        background: linear-gradient(
+          to right,
+          rgba(113, 132, 252, 0.4),
+          rgba(148, 163, 252, 0.4)
+        );
+        padding: 0 0.3rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .card-title {
+          font-size: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.2rem;
+        }
+        .card-content {
+          div {
+            display: inline-block;
+            margin-right: 0.7rem;
+            color: rgba(33, 41, 86, 0.8);
+            font-size: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue b/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
new file mode 100644
index 00000000..03d712d7
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
@@ -0,0 +1,253 @@
+<!--功能介绍-->
+<template>
+  <div class="function-intorduction" v-if="flag">
+    <div class="application-scenarios-and-case-son">
+      <!-- {{ dataFrom.attrType }} -->
+      <div class="title">
+        <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
+      </div>
+      <div class="tab">
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+          :key="itemSonTitle.name"
+          @click="tabSwitch(itemSonTitle.name)"
+          class="tab-son"
+          :class="
+            tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
+          "
+        >
+          <a-tooltip>
+            <template #title>{{ itemSonTitle.name }}</template>
+            <div
+              class="tab-top"
+              :class="
+                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+              "
+            >
+              {{ itemSonTitle.name }}
+            </div>
+          </a-tooltip>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize() == itemSonTitle.name"
+          ></div>
+        </div>
+      </div>
+      <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
+        <div class="content" v-if="tabindex == itemSonTitle.name">
+          <div class="content-left">
+            <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
+            <a-image
+              :width="635"
+              :height="340"
+              :src="itemSonTitle.img"
+              v-if="itemSonTitle.img"
+            ></a-image>
+          </div>
+          <div class="content-right">
+            <div class="content-right-scene">
+              <div class="content-top">{{ itemSonTitle.name }}</div>
+              <a-tooltip>
+                <template #title>{{ itemSonTitle.desc }}</template>
+                <div class="content-bottom">{{ itemSonTitle.desc }}</div>
+              </a-tooltip>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '功能介绍'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      dataFrom.value = obj
+      tabindex.value = dataFrom.value.attrValue[0].name
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          dataFrom.value = obj
+          tabindex.value = dataFrom.value.attrValue[0].name
+        }
+      }
+    }
+  )
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '功能介绍' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+  }
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize() {
+    return tabindex.value
+  }
+  //tab切换点击事件
+  function tabSwitch(name) {
+    tabindex.value = name
+    return tabindex.value
+  }
+</script>
+
+<style lang="less" scoped>
+  .function-intorduction {
+    width: 100%;
+    background: #f7f8fa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: unset;
+    .application-scenarios-and-case-son {
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
+      .tab {
+        max-width: 13rem;
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 0.01rem #e4e6f5 solid;
+        margin-top: 0.45rem;
+        margin-bottom: 0.4rem;
+        cursor: pointer;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 1rem;
+          .tab-top {
+            min-width: 1.2rem;
+            font-size: 0.24rem;
+            line-height: 0.24rem;
+            margin-bottom: 0.2rem;
+            max-width: 2rem;
+            height: 0.24rem;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+          }
+          .tab-top-down {
+            min-width: 1.2rem;
+            color: #526aff;
+            margin-bottom: 0.16rem;
+          }
+          .tab-bottom {
+            height: 0.04rem;
+            width: 0.6rem;
+            background: #526aff;
+          }
+        }
+        .tab-son-class {
+          margin-left: 4.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son-class-two {
+          margin-left: 2.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son:last-child {
+          margin-right: 0rem;
+        }
+      }
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 13rem;
+        height: 3.4rem;
+        .content-left {
+          position: absolute;
+          left: 0;
+          min-width: 6.2rem;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+          // text-align: center;
+          .content-top {
+            text-align: left;
+          }
+        }
+        .content-right {
+          width: 6.2rem;
+          height: 3.4rem;
+          position: absolute;
+          right: 0;
+          display: flex;
+          justify-content: center;
+        }
+        .content-right-scene,
+        .content-right-case {
+          width: 6.2rem;
+          height: 3.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .content-left-scene,
+        .content-left-case {
+          height: 3.4rem;
+          width: 6.35rem;
+          border-radius: 0.1rem;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 6.35rem 3.4rem;
+        }
+        .content-top {
+          font-size: 0.22rem;
+          line-height: 0.22rem;
+          color: #000000;
+          margin-bottom: 0.35rem;
+        }
+        .content-bottom {
+          font-size: 0.18rem;
+          color: #999999;
+          line-height: 0.26rem;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 6;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 1rem;
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue b/front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue
new file mode 100644
index 00000000..c575dafd
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue
@@ -0,0 +1,174 @@
+<!--归属部门与服务商-->
+<template>
+  <div class="application-deployment-and-security">
+    <div class="title">
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
+    </div>
+    <div class="content">
+      <div
+        v-for="(item, index) in dataFrom.content"
+        :key="index"
+        class="content-card"
+      >
+        <div class="card-title">{{ item.childrenTitle }}</div>
+        <div class="card-content">
+          <div v-for="carditem in item.childrenContent" :key="carditem">
+            <div>
+              <span>{{ carditem.attrType }}：</span>
+              <a-tooltip>
+                <template #title>{{ carditem.attrValue }}</template>
+                <span>{{ carditem.attrValue }}</span>
+              </a-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  let dataFrom = ref({
+    title: '归属部门与服务商',
+    englishTitle: 'DEPARTMENT&ERVICE',
+    content: [
+      {
+        childrenTitle: '归属部门信息',
+        childrenContent: [],
+      },
+      {
+        childrenTitle: '服务商信息',
+        childrenContent: [],
+      },
+    ],
+  })
+  console.log(dataFrom.value)
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = {
+      attrType: '部门名称',
+      attrValue: props.dataList.deptName,
+    }
+    dataFrom.value.content[0].childrenContent[0] = obj
+    let deptContacts = {
+      attrType: '部门联系人',
+      attrValue: props.dataList.deptContacts,
+    }
+    dataFrom.value.content[0].childrenContent[1] = deptContacts
+    let deptPhone = {
+      attrType: '部门联系人',
+      attrValue: props.dataList.deptPhone,
+    }
+    dataFrom.value.content[0].childrenContent[2] = deptPhone
+    props.dataList.infoList.map((item) => {
+      if (
+        item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '服务商联系电话'
+      ) {
+        dataFrom.value.content[1].childrenContent.push(item)
+      }
+    })
+    console.log('obj', dataFrom.value)
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        dataFrom.value.content[0].childrenContent = []
+        dataFrom.value.content[1].childrenContent = []
+        let obj = {
+          attrType: '部门名称',
+          attrValue: props.dataList.deptName,
+        }
+        dataFrom.value.content[0].childrenContent[0] = obj
+        let deptContacts = {
+          attrType: '部门联系人',
+          attrValue: props.dataList.deptContacts,
+        }
+        dataFrom.value.content[0].childrenContent[1] = deptContacts
+        let deptPhone = {
+          attrType: '部门联系人',
+          attrValue: props.dataList.deptPhone,
+        }
+        dataFrom.value.content[0].childrenContent[2] = deptPhone
+        props.dataList.infoList.map((item) => {
+          if (
+            item.attrType === '服务商' ||
+            item.attrType === '服务商联系人' ||
+            item.attrType === '服务商联系电话'
+          ) {
+            dataFrom.value.content[1].childrenContent.push(item)
+          }
+        })
+        console.log('obj', dataFrom.value)
+      }
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-deployment-and-security {
+    padding: 0.8rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .title {
+      margin-bottom: 0.3rem;
+    }
+    .content {
+      display: flex;
+      width: 13rem;
+      justify-content: space-between;
+      .content-card {
+        height: 1.5rem;
+        width: 6.2rem;
+        border-radius: 0.2rem;
+        background: linear-gradient(
+          to right,
+          rgba(113, 132, 252, 0.4),
+          rgba(148, 163, 252, 0.4)
+        );
+        padding: 0 0.3rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .card-title {
+          font-size: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.2rem;
+          line-height: 0.26rem;
+        }
+        .card-content {
+          white-space: nowrap;
+          div {
+            display: inline-block;
+            margin-right: 0.2rem;
+            color: rgba(33, 41, 86, 0.8);
+            font-size: 0.2rem;
+            max-width: 2.8rem;
+            div {
+              max-width: 2.8rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
+            }
+          }
+          div:first-child {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+</style>