广场

front/src/views/capacitySquare/index.vue

@@ -1,16 +1,26 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-08-09 11:32:47
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-08-09 14:36:28
+ * @Description: 告诉大家这是什么
+-->
 <template>
-  <!-- <home-header></home-header> -->
-  <div class="box">
-    <algorithm v-if="show === 'algorithm'"></algorithm>
-    <layer v-else-if="show === 'layer'"></layer>
-    <application v-else-if="show === 'application'"></application>
+  <div class="capacitySquare">
+    <div class="header">
+      <div class="left">城市云脑通用能力服务平台(UCS)</div>
+      应用广场
+    </div>
+    <div class="light"></div>
+    <div class="box">
+      <algorithm v-if="show === 'algorithm'"></algorithm>
+      <layer v-else-if="show === 'layer'"></layer>
+      <application v-else-if="show === 'application'"></application>
+    </div>
   </div>
-  <!-- <home-footer></home-footer> -->
 </template>
 <script setup>
   import { ref } from 'vue'
-  // import HomeHeader from '@/views/home/components/header'
-  // import HomeFooter from '@/views/newHome/components/Footer'
   import algorithm from './components/algorithm.vue'
   import layer from './components/layer.vue'
   import application from './components/application.vue'
@@ -29,7 +39,50 @@
   }
 </script>
 <style lang="less" scoped>
-  .box {
-    // padding-top: 0.64rem;
+  @font-face {
+    font-family: 'webfont';
+    src: url('~@/assets/capacitySquare/webfont.ttf');
+  }
+  .capacitySquare {
+    width: 100%;
+    height: 100%;
+    background: url('~@/assets/capacitySquare/bg.png') no-repeat;
+    background-size: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .header {
+      width: 100%;
+      height: 0.8rem;
+      background: url('~@/assets/capacitySquare/header-bg.png') no-repeat;
+      background-size: 100%;
+      color: #fff;
+      text-align: center;
+      font-family: webfont;
+      font-size: 0.5rem;
+      font-weight: 600;
+      .left {
+        position: absolute;
+        top: 0.05rem;
+        left: 1.5rem;
+        font-size: 0.18rem;
+        font-weight: 500;
+      }
+    }
+    .light {
+      position: absolute;
+      top: 0.25rem;
+      left: 6.25rem;
+      z-index: 10;
+      width: 6.64rem;
+      height: 1.64rem;
+      background: url('~@/assets/capacitySquare/header-light.png') no-repeat;
+      background-size: 100%;
+      background-position: center;
+    }
+    .box {
+      flex: 1;
+      // padding: 0.5rem 0;
+    }
   }
 </style>