From edf1cb5af90c1ecf1cf088028b1ce19f7013b8f5 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Wed, 12 Oct 2022 11:52:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A5=BF=E6=B5=B7=E5=B2=B8=EF=BC=9A=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E9=A6=96=E9=A1=B5--=E8=83=BD=E5=8A=9B=E6=B1=87?=
 =?UTF-8?q?=E8=81=9A=E6=98=BE=E7=A4=BA=E9=94=99=E4=B9=B1bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CapabilityConvergence.vue      | 853 +++++++++---------
 1 file changed, 402 insertions(+), 451 deletions(-)

diff --git a/front/src/views/newHome/components/CapabilityConvergence.vue b/front/src/views/newHome/components/CapabilityConvergence.vue
index 57554491..494e4f02 100644
--- a/front/src/views/newHome/components/CapabilityConvergence.vue
+++ b/front/src/views/newHome/components/CapabilityConvergence.vue
@@ -8,65 +8,40 @@
       <div class="bottom">
         <div class="item">
           <div class="zj">组件服务</div>
-          <div
-            class="name"
-            v-for="(item, index) in zjList.slice(0, 5)"
-            :key="item.name"
-            :class="index == 4 ? 'name-last' : ''"
-            @click="selectOne1(item.name)"
-          >
+          <div class="name" v-for="(item, index) in zjList.slice(0, 5)" :key="item.name"
+            :class="index == 4 ? 'name-last' : ''" @click="selectOne1(item.name)">
             {{ item.name + '-' + item.num + '项' }}
           </div>
           <div class="btn" @click="jumpPage('组件服务')">查看更多</div>
         </div>
         <div class="item">
           <div class="yy">应用资源</div>
-        <div
-            class="name"
-            v-for="(item, index) in yyList.slice(0, 5)"
-            :key="item.name"
-            :class="index == 4 ? 'name-last' : ''"
-            @click="selectOne11(item.name)"
-          >
+          <div class="name" v-for="(item, index) in yyList.slice(0, 5)" :key="item.name"
+            :class="index == 4 ? 'name-last' : ''" @click="selectOne11(item.name)">
             {{ item.name + '-' + item.num + '项' }}
           </div>
           <div class="btn" @click="jumpPage('应用资源')">查看更多</div>
         </div>
         <div class="item">
           <div class="jc">基础设施</div>
-          <div
-            class="name"
-            v-for="(item, index) in jcList.slice(0, 5)"
-            :key="item.name"
-            :class="index == 2 ? 'name-last' : ''"
-            @click="selectOne2(item.name)"
-          >
+          <div class="name" v-for="(item, index) in jcList.slice(0, 5)" :key="item.name"
+            :class="index == 2 ? 'name-last' : ''" @click="selectOne2(item.name)">
             {{ item.name + '-' + item.num + '项' }}
           </div>
           <div class="btn" @click="jumpPage('基础设施')">查看更多</div>
         </div>
         <div class="item">
           <div class="sj">数据资源</div>
-          <div
-            class="name"
-            v-for="(item, index) in sjList"
-            :key="item.id"
-            :class="index == 4 ? 'name-last' : ''"
-            @click="selectOne3(item.name)"
-          >
+          <div class="name" v-for="(item, index) in sjList" :key="item.id" :class="index == 4 ? 'name-last' : ''"
+            @click="selectOne3(item.name)">
             {{ index + 1 }}-{{ item.name }}
           </div>
           <div class="btn" @click="jumpPage('数据资源')">查看更多</div>
         </div>
         <div class="item">
           <div class="zs">知识库</div>
-          <div
-            class="name"
-            v-for="(item, index) in zsList"
-            :key="item.id"
-            :class="index == 4 ? 'name-last' : ''"
-            @click="openHref(item)"
-          >
+          <div class="name" v-for="(item, index) in zsList" :key="item.id" :class="index == 4 ? 'name-last' : ''"
+            @click="openHref(item)">
             {{ index + 1 }}-{{ item.name }}
           </div>
           <div class="btn" @click="jumpPage('知识库')">查看更多</div>
@@ -76,448 +51,424 @@
   </div>
 </template>
 <script setup>
-  import {
-    pageWithAttrs,
-    getDataResource,
-    selectInfrastructureList,
-    selectCollectComponentList,
-    selectCollectResourceList
-  } from '@/api/home.js'
-  import { ref, reactive } from 'vue'
-  import { useRouter } from 'vue-router'
-  import { useStore } from 'vuex'
-  import { updateVisits, browsingInsert, getSoldierList } from '@/api/home'
-  import { message, Upload } from 'ant-design-vue'
-  import mybus from '@/myplugins/mybus'
-  const store = useStore()
-  const router = useRouter()
-  const zjList = ref([])
-  const jcList = ref([])
-  const sjList = ref([])
-  const yyList = ref([])
-  // 知识库模块数据
-  const zsList = ref([])
-  // const jcList = ref([])
-  const paramsGetResources = {
-    districtId: '',
-    pageNum: 1,
-    pageSize: 5,
-    type: '',
-    name: '',
-    infoList: [],
-    orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
-    orderType: 'DESC', // ASC 升序  DESC 降序
-  }
-  console.log('dataShowdev==========================>', whoShow)
-  // eslint-disable-next-line no-undef
-  const whoShow1 = ref(whoShow)
-  const interfaceSuccess = ref(0)
-  const object = reactive({
-    yyNum: '',
-    zjNum: '',
-    jcNum: '',
-    sjNum: '',
-    zsNum: '',
-  })
-  const getAppResources = (type, obj) => {
-    paramsGetResources.type = type
-    if (type === '数据资源' && !whoShow1.value.itShowBaoTou) {
-      getDataResource({
-        serviceName: paramsGetResources.name || '', //资源名称
-        orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', //排序字段
-        orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
-        pageNum: paramsGetResources.pageNum, //页码
-        pageSize: paramsGetResources.pageSize, //分页大小
-      }).then((res) => {
-        console.log('数据资源==================>', res.data.data)
-        if (whoShow1.value.itShowQingDao) {
-          res.data.data.data.forEach((val) => {
-            val.id = val.guid // id
-            val.name = val.zyname // 名字
-            val.sjlCount = val.sjcczl // 数据量
-            val.applyCount = val.syqk // 申请量
-            val.deptName = val.TGBM // 部门
-            val.createDate = val.fbrq // 发布时间
-            val.description = val.xgxt // 描述
-          })
-          obj.value = res.data.data.data || []
-          object.sjNum = res.data.data.rows
-        } else if (whoShow1.value.itShowXiHaiAn) {
-          res.data.data.list.forEach((val) => {
-            val.id = val.serviceId // id
-            val.name = val.serviceName // 名字
-            val.sjlCount = val.requestQuantity // 数据量
-            val.applyCount = val.requestCount // 申请量
-            val.deptName = val.departmentName // 部门
-            val.createTime = val.createTime.split('.')[0]
-            val.createDate = val.createTime // 发布时间
-          })
-          obj.value = res.data.data.list || []
-          object.sjNum = res.data.data.total
-        }
-      })
-    } else {
-      let type = paramsGetResources.type
-   
-      if (type == '基础设施') {
-        jcList.value = []
-        selectInfrastructureList().then((res) => {
-          console.log('基础设施==========>', res.data.data)
-          for (const key in res.data.data) {
-            if (whoShow1.value.itShowXiHaiAn) {
-              if (key === '视频资源') {
-                jcList.value.push({
-                  name: key,
-                  num: res.data.data[key],
-                })
-              }
-            } else {
+import {
+  pageWithAttrs,
+  getDataResource,
+  selectInfrastructureList,
+  selectCollectComponentList,
+  selectCollectResourceList
+} from '@/api/home.js'
+import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { updateVisits, browsingInsert, getSoldierList } from '@/api/home'
+import { message, Upload } from 'ant-design-vue'
+import mybus from '@/myplugins/mybus'
+const store = useStore()
+const router = useRouter()
+const zjList = ref([])
+const jcList = ref([])
+const sjList = ref([])
+const yyList = ref([])
+// 知识库模块数据
+const zsList = ref([])
+// const jcList = ref([])
+const paramsGetResources = {
+  districtId: '',
+  pageNum: 1,
+  pageSize: 5,
+  type: '',
+  name: '',
+  infoList: [],
+  orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
+  orderType: 'DESC', // ASC 升序  DESC 降序
+}
+console.log('dataShowdev==========================>', whoShow)
+// eslint-disable-next-line no-undef
+const whoShow1 = ref(whoShow)
+const interfaceSuccess = ref(0)
+const object = reactive({
+  yyNum: '',
+  zjNum: '',
+  jcNum: '',
+  sjNum: '',
+  zsNum: '',
+})
+const getAppResources = (type, obj) => {
+  paramsGetResources.type = type
+  if (type === '数据资源' && !whoShow1.value.itShowBaoTou) {
+    getDataResource({
+      serviceName: paramsGetResources.name || '', //资源名称
+      orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', //排序字段
+      orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
+      pageNum: paramsGetResources.pageNum, //页码
+      pageSize: paramsGetResources.pageSize, //分页大小
+    }).then((res) => {
+      console.log('数据资源==================>', res.data.data)
+      if (whoShow1.value.itShowQingDao) {
+        res.data.data.data.forEach((val) => {
+          val.id = val.guid // id
+          val.name = val.zyname // 名字
+          val.sjlCount = val.sjcczl // 数据量
+          val.applyCount = val.syqk // 申请量
+          val.deptName = val.TGBM // 部门
+          val.createDate = val.fbrq // 发布时间
+          val.description = val.xgxt // 描述
+        })
+        obj.value = res.data.data.data || []
+        object.sjNum = res.data.data.rows
+      } else if (whoShow1.value.itShowXiHaiAn) {
+        res.data.data.list.forEach((val) => {
+          val.id = val.serviceId // id
+          val.name = val.serviceName // 名字
+          val.sjlCount = val.requestQuantity // 数据量
+          val.applyCount = val.requestCount // 申请量
+          val.deptName = val.departmentName // 部门
+          val.createTime = val.createTime.split('.')[0]
+          val.createDate = val.createTime // 发布时间
+        })
+        obj.value = res.data.data.list || []
+        object.sjNum = res.data.data.total
+      }
+    })
+  } else {
+    let type = paramsGetResources.type
+
+    if (type == '基础设施') {
+      jcList.value = []
+      selectInfrastructureList().then((res) => {
+        console.log('基础设施------res------>', res);
+        for (const key in res.data.data) {
+          if (whoShow1.value.itShowXiHaiAn) {
+            if (key === '视频资源') {
               jcList.value.push({
                 name: key,
                 num: res.data.data[key],
               })
             }
+          } else {
+            jcList.value.push({
+              name: key,
+              num: res.data.data[key],
+            })
           }
-          // 西海岸-单兵设备、无人机 获取数量
-          if (whoShow1.value.itShowXiHaiAn) {
-            getSoldierData('无人机')
-              .then((res) => {
-                let { total = 0 } = res.data.data
-                jcList.value.push({
-                  name: '无人机',
-                  num: total,
-                })
+        }
+        // 西海岸-单兵设备、无人机 获取数量
+        if (whoShow1.value.itShowXiHaiAn) {
+          getSoldierData('无人机')
+            .then((res) => {
+              let { total = 0 } = res.data.data
+              jcList.value.push({
+                name: '无人机',
+                num: total,
               })
-              .catch((err) => {
-                console.log('err--无人机---------->', err)
+            })
+            .catch((err) => {
+              console.log('err--无人机---------->', err)
+            })
+          getSoldierData('单兵设备')
+            .then((res) => {
+              let { total = 0 } = res.data.data
+              jcList.value.push({
+                name: '单兵设备',
+                num: total,
               })
-            getSoldierData('单兵设备')
-              .then((res) => {
-                let { total = 0 } = res.data.data
-                jcList.value.push({
-                  name: '单兵设备',
-                  num: total,
-                })
-              })
-              .catch((err) => {
-                console.log('err--单兵设备---------->', err)
-              })
-          }
-        })
-      }   
-      else if (type == '组件服务') {
-        zjList.value = []
-        selectCollectComponentList().then((res) => {
-          for (const key in res.data.data) {
-            if (whoShow1.value.itShowXiHaiAn) {
-              if (key === '视频资源') {
-                zjList.value.push({
-                  name: key,
-                  num: res.data.data[key],
-                })
-              }
-            } else {
-              zjList.value.push({
-                name: key,
-                num: res.data.data[key],
-              })
-            }
-          }
-        })
-      }     
-      else if (type == '应用资源') {
-        yyList.value = []
-        selectCollectResourceList().then((res) => {
-          for (const key in res.data.data) {
-            if (whoShow1.value.itShowXiHaiAn) {
-              if (key === '视频资源') {
-                yyList.value.push({
-                  name: key,
-                  num: res.data.data[key],
-                })
-              }
-            } else {
-              yyList.value.push({
-                name: key,
-                num: res.data.data[key],
-              })
-            }
-          }
-        })
-      } 
-      else {
-        pageWithAttrs(paramsGetResources).then((res) => {
-          console.log('object个数======>', type)
-          obj.value = res.data.data.records
-          switch (type) {
-            case '组件服务':
-              assignmentMethod('zjNum', res)
-              break
-            case '应用资源':
-              assignmentMethod('yyNum', res)
-              break
-            case '基础设施':
-              assignmentMethod('jcNum', res)
-              break
-            case '知识库':
-              assignmentMethod('zsNum', res)
-              break
-          }
-        })
-      }
-    }
-  }
-
-  // todo 获取无人机、单兵设备
-  const getSoldierData = (name) => {
-    let _params = {
-      type: name,
-      page: 1,
-      limit: 10,
-    }
-    return new Promise((resolve, reject) => {
-      getSoldierList(_params)
-        .then((res) => {
-          resolve(res)
-          console.log('res---获取无人机、单兵设备--------->', res)
-          if (res.data.code !== 0) {
-            return message.error(res.data.msg)
-          }
-        })
-        .catch((err) => {
-          reject(err)
-        })
-    })
-  }
-
-  const openHref = (item) => {
-    console.log(item.id, 'wowowo')
-    console.log(item.visits, 'wowowo')
-    browsingInsert({ resourceId: item.id }).then((res) => {
-      // console.log(res)
-    })
-    const arrList = ref([])
-    arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-    if (arrList.value.indexOf(item.id) === -1) {
-      arrList.value.push(item.id)
-      updateVisits({
-        id: item.id,
-        visits: item.visits || '0',
-      }).then(() => {
-        window.sessionStorage.setItem('visits', JSON.stringify(arrList.value))
+            })
+            .catch((err) => {
+              console.log('err--单兵设备---------->', err)
+            })
+        }
+      })
+    }
+    else if (type == '组件服务') {
+      zjList.value = []
+      selectCollectComponentList().then((res) => {
+        console.log('组件服务----res-------->', res);
+        for (const key in res.data.data) {
+          console.log('key------------>', key);
+          zjList.value.push({
+            name: key,
+            num: res.data.data[key],
+          })
+        }
+        console.log('zjList------------>', zjList);
+      })
+    }
+    else if (type == '应用资源') {
+      yyList.value = []
+      selectCollectResourceList().then((res) => {
+        console.log('应用资源---res--------->', res);
+        for (const key in res.data.data) {
+          yyList.value.push({
+            name: key,
+            num: res.data.data[key],
+          })
+        }
+      })
+    }
+    else {
+      pageWithAttrs(paramsGetResources).then((res) => {
+        console.log('object个数======>', type)
+        obj.value = res.data.data.records
+        switch (type) {
+          case '组件服务':
+            assignmentMethod('zjNum', res)
+            break
+          case '应用资源':
+            assignmentMethod('yyNum', res)
+            break
+          case '基础设施':
+            assignmentMethod('jcNum', res)
+            break
+          case '知识库':
+            assignmentMethod('zsNum', res)
+            break
+        }
       })
     }
-    window.open(item.link)
-    // window.open(
-    //   window.SITE_CONFIG.previewUrl +
-    //     'hisense_office/onlinePreview?url=' +
-    //     btoa(encodeURI(item.fileHref))
-    // )
   }
-  const assignmentMethod = (type, res) => {
-    object[type] = res.data.data.total
-    // interfaceSuccess.value++
-    // console.log('object个数======>', object, interfaceSuccess.value, type)
-    // if (interfaceSuccess.value >= 4) {
-    //   mybus.emit('chagneNum', object)
-    // }
-  }
-  getAppResources('组件服务', zjList)
-  getAppResources('应用资源', yyList)
-  getAppResources('基础设施', jcList)
-  getAppResources('数据资源', sjList)
-  getAppResources('知识库', zsList)
+}
 
-  function jumpPage(type) {
-    // 点击内存入store
-    store.commit('home/selectCardsData', {
-      selectCardsnum: type,
-    })
-    console.log(
-      '选中===================>',
-      store.getters['home/selectCardsnum']
-    )
-    // router.push({ path: '/DetailsPageconetent' })
-    router.push({
-      path: '/DetailsPageconetent',
-      query: {
-        select: type,
-      },
-    })
-  }
-  const selectOne = (id) => {
-    console.log('点击===============》', id)
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
-  }
-  const selectOne1 = (name) => {
-    router.push({
-      path: '/DetailsPageconetent',
-      query: {
-        type: name,
-        select: '组件服务',
-      },
-    })
-  }
-  const selectOne11 = (name) => {
-    router.push({
-      path: '/DetailsPageconetent',
-      query: {
-        type: name,
-        select: '应用资源',
-      },
-    })
-  }
-  const selectOne2 = (name) => {
-    console.log('点击===============》', name)
-    router.push({
-      path: '/DetailsPageconetent',
-      query: {
-        type: name,
-        select: '基础设施',
-      },
-    })
-  }
-  const selectOne3 = (name) => {
-    console.log('点击===============》', name)
-    router.push({
-      path: '/DetailsPageconetent',
-      query: {
-        str: name,
-        select: '数据资源',
-      },
+// todo 获取无人机、单兵设备
+const getSoldierData = (name) => {
+  let _params = {
+    type: name,
+    page: 1,
+    limit: 10,
+  }
+  return new Promise((resolve, reject) => {
+    getSoldierList(_params)
+      .then((res) => {
+        resolve(res)
+        console.log('res---获取无人机、单兵设备--------->', res)
+        if (res.data.code !== 0) {
+          return message.error(res.data.msg)
+        }
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })
+}
+
+const openHref = (item) => {
+  console.log(item.id, 'wowowo')
+  console.log(item.visits, 'wowowo')
+  browsingInsert({ resourceId: item.id }).then((res) => {
+    // console.log(res)
+  })
+  const arrList = ref([])
+  arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+  if (arrList.value.indexOf(item.id) === -1) {
+    arrList.value.push(item.id)
+    updateVisits({
+      id: item.id,
+      visits: item.visits || '0',
+    }).then(() => {
+      window.sessionStorage.setItem('visits', JSON.stringify(arrList.value))
     })
   }
+  window.open(item.link)
+}
+const assignmentMethod = (type, res) => {
+  object[type] = res.data.data.total
+}
+getAppResources('组件服务', zjList)
+getAppResources('应用资源', yyList)
+getAppResources('基础设施', jcList)
+getAppResources('数据资源', sjList)
+getAppResources('知识库', zsList)
+
+function jumpPage(type) {
+  // 点击内存入store
+  store.commit('home/selectCardsData', {
+    selectCardsnum: type,
+  })
+  console.log(
+    '选中===================>',
+    store.getters['home/selectCardsnum']
+  )
+  // router.push({ path: '/DetailsPageconetent' })
+  router.push({
+    path: '/DetailsPageconetent',
+    query: {
+      select: type,
+    },
+  })
+}
+const selectOne = (id) => {
+  console.log('点击===============》', id)
+  router.push({
+    path: '/details',
+    query: {
+      id: id,
+    },
+  })
+}
+const selectOne1 = (name) => {
+  router.push({
+    path: '/DetailsPageconetent',
+    query: {
+      type: name,
+      select: '组件服务',
+    },
+  })
+}
+const selectOne11 = (name) => {
+  router.push({
+    path: '/DetailsPageconetent',
+    query: {
+      type: name,
+      select: '应用资源',
+    },
+  })
+}
+const selectOne2 = (name) => {
+  console.log('点击===============》', name)
+  router.push({
+    path: '/DetailsPageconetent',
+    query: {
+      type: name,
+      select: '基础设施',
+    },
+  })
+}
+const selectOne3 = (name) => {
+  console.log('点击===============》', name)
+  router.push({
+    path: '/DetailsPageconetent',
+    query: {
+      str: name,
+      select: '数据资源',
+    },
+  })
+}
 </script>
 <style lang="less" scoped>
-  .capability-convergence {
-    height: 7.2rem;
-    background: url('~@/assets/newHome/Convergence-bg.png') no-repeat;
-    background-size: 100%;
-    display: flex;
-    justify-content: center;
+.capability-convergence {
+  height: 7.2rem;
+  background: url('~@/assets/newHome/Convergence-bg.png') no-repeat;
+  background-size: 100%;
+  display: flex;
+  justify-content: center;
 
-    .main {
-      width: 13rem;
-      margin-top: 1.8rem;
+  .main {
+    width: 13rem;
+    margin-top: 1.8rem;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+
+    .top {
+      font-size: 0.3rem;
+      color: #212121;
+      text-align: center;
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
 
-      .top {
-        font-size: 0.3rem;
-        color: #212121;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
+      .line {
+        width: 0.34rem;
+        height: 0.03rem;
+        background-color: #0058e1;
+        margin-top: 0.08rem;
+      }
+    }
 
-        .line {
-          width: 0.34rem;
-          height: 0.03rem;
-          background-color: #0058e1;
-          margin-top: 0.08rem;
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 0.4rem;
+
+      .item {
+        width: 2.44rem;
+        height: 3.91rem;
+        font-size: 0.16rem;
+        background-color: #fff;
+        border-radius: 0.02rem;
+        box-shadow: 0 0.05rem 0.2rem #ccc;
+        position: relative;
+
+        div:nth-of-type(1) {
+          height: 1.02rem;
+          line-height: 1.02rem;
+          font-size: 0.2rem;
+          color: #fff;
+          padding-left: 0.15rem;
+          background-size: 100%;
+        }
+
+        .jc {
+          background: url('~@/assets/newHome/Convergence-jc.png') no-repeat;
+        }
+
+        .sj {
+          background: url('~@/assets/newHome/Convergence-sj.png') no-repeat;
+        }
+
+        .zj {
+          background: url('~@/assets/newHome/Convergence-zj.png') no-repeat;
+        }
+
+        .yy {
+          background: url('~@/assets/newHome/Convergence-yy.png') no-repeat;
+        }
+
+        .zs {
+          background: url('~@/assets/newHome/Convergence-zs.png') no-repeat;
+        }
+
+        .name {
+          height: 0.47rem;
+          line-height: 0.47rem;
+          margin: 0 0.16rem;
+          border-bottom: 0.01rem solid #e9e9e9;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+        }
+
+        .name:hover {
+          color: #0058e1;
+          cursor: pointer;
+        }
+
+        .name-last {
+          border-bottom: none;
+        }
+
+        .btn {
+          cursor: pointer;
+          width: 0.8rem;
+          height: 0.24rem;
+          border: 0.01rem solid #0058e1;
+          font-size: 0.14rem;
+          color: #0058e1;
+          border-radius: 0.02rem;
+          text-align: center;
+          margin-top: 0.1rem;
+          margin-left: 0.85rem;
+          position: absolute;
+          bottom: 0.2rem;
+        }
+
+        .btn:hover {
+          background: rgba(0, 88, 225, 0.3);
+          color: #000;
         }
       }
 
-      .bottom {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 0.4rem;
-
-        .item {
-          width: 2.44rem;
-          height: 3.91rem;
-          font-size: 0.16rem;
-          background-color: #fff;
-          border-radius: 0.02rem;
-          box-shadow: 0 0.05rem 0.2rem #ccc;
-          position: relative;
-
-          div:nth-of-type(1) {
-            height: 1.02rem;
-            line-height: 1.02rem;
-            font-size: 0.2rem;
-            color: #fff;
-            padding-left: 0.15rem;
-            background-size: 100%;
-          }
-
-          .jc {
-            background: url('~@/assets/newHome/Convergence-jc.png') no-repeat;
-          }
-
-          .sj {
-            background: url('~@/assets/newHome/Convergence-sj.png') no-repeat;
-          }
-
-          .zj {
-            background: url('~@/assets/newHome/Convergence-zj.png') no-repeat;
-          }
-
-          .yy {
-            background: url('~@/assets/newHome/Convergence-yy.png') no-repeat;
-          }
-
-          .zs {
-            background: url('~@/assets/newHome/Convergence-zs.png') no-repeat;
-          }
-
-          .name {
-            height: 0.47rem;
-            line-height: 0.47rem;
-            margin: 0 0.16rem;
-            border-bottom: 0.01rem solid #e9e9e9;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            word-break: break-all;
-          }
-
-          .name:hover {
-            color: #0058e1;
-            cursor: pointer;
-          }
-
-          .name-last {
-            border-bottom: none;
-          }
-
-          .btn {
-            cursor: pointer;
-            width: 0.8rem;
-            height: 0.24rem;
-            border: 0.01rem solid #0058e1;
-            font-size: 0.14rem;
-            color: #0058e1;
-            border-radius: 0.02rem;
-            text-align: center;
-            margin-top: 0.1rem;
-            margin-left: 0.85rem;
-            position: absolute;
-            bottom: 0.2rem;
-          }
-
-          .btn:hover {
-            background: rgba(0, 88, 225, 0.3);
-            color: #000;
-          }
-        }
-
-        .item:hover {
-          border-radius: 0.02rem;
-          border: 0.01rem solid #0058e1;
-          box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
-        }
+      .item:hover {
+        border-radius: 0.02rem;
+        border: 0.01rem solid #0058e1;
+        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
       }
     }
   }
+}
 </style>