入口在能力集市

front/src/views/home/DetailsPageconetent.vue

@@ -225,6 +225,19 @@
         <i></i>
       </a-tooltip>
     </div>
+    <div @click="showAbilitySquare" class="abilitySquare">
+      <p></p>
+      <p>能力广场</p>
+      <ul v-show="visibleAbilitySquare">
+        <li
+          v-for="item in abilitySquare"
+          :key="item"
+          @click="abilitySquareFunction(item)"
+        >
+          {{ item }}
+        </li>
+      </ul>
+    </div>
   </div>
   <!-- 西海岸 -->
   <div
@@ -1359,6 +1372,40 @@
         location.reload()
         console.log('URL发生变化了')
       })
+      // 能力广场
+      const visibleAbilitySquare = ref(false)
+      let abilitySquare = ref(['应用广场', '算法广场', 'GIS广场'])
+      const showAbilitySquareNum = ref(0)
+      const showAbilitySquare = () => {
+        if (showAbilitySquareNum.value === 0) {
+          showAbilitySquareNum.value = 1
+          visibleAbilitySquare.value = true
+        } else if (showAbilitySquareNum.value === 1) {
+          showAbilitySquareNum.value = 0
+          visibleAbilitySquare.value = false
+        }
+      }
+      let abilitySquareFunctionData = ref('智能算法')
+      const abilitySquareFunction = (e) => {
+        let snumSquare = ref({})
+        if (e === '应用广场') {
+          abilitySquareFunctionData.value = '应用资源'
+        } else if (e === '算法广场') {
+          abilitySquareFunctionData.value = '智能算法'
+        } else if (e === 'GIS广场') {
+          abilitySquareFunctionData.value = '图层服务'
+        }
+        snumSquare.value = {
+          abilityToType: abilitySquareFunctionData.value,
+        }
+        const applypage = router.resolve({
+          path: '/capacitySquare', // 跳转的页面路由
+          query: snumSquare.value,
+        })
+        window.open(applypage.href, '_blank')
+        visibleAbilitySquare.value = false
+        abilitySquareFunctionData.value = '智能算法'
+      }
       return {
         listKey,
         ListContent,
@@ -1399,6 +1446,12 @@
         getShoppingCartList,
         whoShow1,
         applyAll,
+        abilitySquare,
+        visibleAbilitySquare,
+        showAbilitySquare,
+        abilitySquareFunction,
+        abilitySquareFunctionData,
+        showAbilitySquareNum,
       }
     },
     components: {
@@ -1427,6 +1480,10 @@
   })
 </script>
 <style lang="less" scoped>
+  @font-face {
+    font-family: 'webfont';
+    src: url('~@/assets/capacitySquare/webfont.ttf');
+  }
   .resultListSearchInput-father {
     background: #f3f5f9;
     padding: 0.2rem;
@@ -1852,6 +1909,95 @@
       background-size: cover;
     }
   }
+  .abilitySquare {
+    width: 0.7rem;
+    height: 0.7rem;
+    border-radius: 0.04rem;
+    border: 0.01rem #94aac9 solid;
+    display: flex;
+    flex-direction: column;
+    // justify-content: center;
+    align-items: center;
+    padding-top: 0.05rem;
+    position: fixed;
+    z-index: 10;
+    bottom: 1.56rem;
+    right: 0.1rem;
+    cursor: pointer;
+    background: #e3edfc;
+    p {
+      margin: 0;
+    }
+    p:nth-child(1) {
+      height: 0.35rem;
+      width: 0.36rem;
+      background: url('~@/assets/home/abilitysquare.png') no-repeat;
+      background-size: 100% 100%;
+      background-position: center;
+    }
+    ul {
+      background: #ffffff;
+      font-family: webfont;
+      width: 1.35rem;
+      height: 1rem;
+      border-radius: 0.03rem;
+      border: 0.01rem solid #dfd9d9;
+      position: absolute;
+      bottom: 0.9rem;
+      left: -0.62rem;
+      padding: 0;
+      margin: 0;
+      li {
+        list-style: none;
+        color: #0061ec;
+        font-size: 0.18rem;
+        padding: 0.02rem;
+        padding-left: 0.4rem;
+        border-bottom: 0.01rem solid #dfd9d9;
+      }
+      li:nth-of-type(1) {
+        background: url('~@/assets/home/appIcon.png') no-repeat;
+        background-position: 0.18rem center;
+      }
+      li:nth-of-type(2) {
+        background: url('~@/assets/home/AiIcon.png') no-repeat;
+        background-position: 0.18rem center;
+      }
+      li:nth-of-type(3) {
+        border-bottom: none;
+        background: url('~@/assets/home/GisIcon.png') no-repeat;
+        background-position: 0.18rem center;
+      }
+    }
+    ul::after {
+      content: '';
+      position: absolute;
+      top: 0.98rem;
+      right: 0.12rem;
+      width: 0;
+      height: 0;
+      border: 0.13rem solid;
+      border-color: #fff transparent transparent transparent;
+    }
+    ul::before {
+      content: '';
+      position: absolute;
+      top: 0.99rem;
+      right: 0.12rem;
+      width: 0;
+      height: 0;
+      border: 0.13rem solid;
+      border-color: #dfd9d9 transparent transparent transparent;
+    }
+    @keyframes ulShowTime {
+      0% {
+        transform: scale(0);
+      }
+      100% {
+        transform: scale(0);
+      }
+    }
+  }
 
   .top-content-father {
     width: 10.87rem;

front/src/views/newHome/components/WorkDynamics.vue

@@ -113,7 +113,7 @@
           </div>
         </a-modal>
       </div>
-      <div @click="showAbilitySquare">
+      <!-- <div @click="showAbilitySquare">
         <p></p>
         <p>能力广场</p>
         <a-modal
@@ -143,7 +143,7 @@
             </div>
           </div>
         </a-modal>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -579,7 +579,7 @@
   }
 
   .fixedmount {
-    height: 2.3rem;
+    height: 1.5rem;
     display: flex;
     position: fixed;
     bottom: 2.56rem;