完成行业应用详情静态页面

src/layout/user-layout.vue

@@ -11,8 +11,8 @@
         <div class="menu">
         <div class="menu">
           <el-menu
           <el-menu
               :default-active="activeIndex"
               :default-active="activeIndex"
-              class="el-menu-demo"
-              mode="horizontal">
+              mode="horizontal"
+              style="--el-menu-horizontal-height:48px">
             <el-sub-menu index="1">
             <el-sub-menu index="1">
               <template #title>计算资源</template>
               <template #title>计算资源</template>
               <el-sub-menu index="1-1">
               <el-sub-menu index="1-1">
@@ -76,6 +76,7 @@ const activeIndex = ref('1')
 
 
   .logo {
   .logo {
     cursor: pointer;
     cursor: pointer;
+
     .nscc {
     .nscc {
       height: 46px;
       height: 46px;
     }
     }

src/router/index.js

@@ -103,6 +103,18 @@ export const constantRoutes = [
     ]
     ]
   },
   },
   {
   {
+    path: '/industryApplications',
+    component: UserLayout,
+    children: [
+      {
+        path: 'detail',
+        component: () => import('@/views/industryApplications/detail.vue'),
+        name: 'Detail',
+        meta: {title: '行业应用'}
+      },
+    ]
+  },
+  {
     path: '/user',
     path: '/user',
     component: Layout,
     component: Layout,
     hidden: true,
     hidden: true,

src/views/industryApplications/detail.vue

+<template>
+  <div class="breadcrumb">
+    <div class="flex-justify-end">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>首页</el-breadcrumb-item>
+        <el-breadcrumb-item>行业应用</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+  </div>
+
+  <div class="app-container">
+
+    <div class="block-title">行业概述</div>
+    <div class="content">图文内容</div>
+
+    <div class="block-title">解决方案</div>
+    <div class="content">图文内容</div>
+
+
+    <div class="block-title">资讯流程</div>
+
+    <div class="flex flex-justify-center information-process">
+      <div class="item">
+        <div class="index">1</div>
+        <img class="icon" src="@/assets/images/Information-process-1.png" alt="">
+        <div class="title">需求咨询</div>
+        <div class="desc">描述业务需求，提交需求咨询</div>
+        <el-button>立即资讯
+          <el-icon>
+            <ArrowRight/>
+          </el-icon>
+        </el-button>
+      </div>
+      <div class="item">
+        <div class="index">2</div>
+        <img class="icon" src="@/assets/images/Information-process-2.png" alt="">
+        <div class="title">初步沟通</div>
+        <div class="desc">需求答疑，对齐核心诉求，确定合作意向</div>
+        <el-button>立即资讯
+          <el-icon>
+            <ArrowRight/>
+          </el-icon>
+        </el-button>
+      </div>
+      <div class="item">
+        <div class="index">3</div>
+        <img class="icon" src="@/assets/images/Information-process-3.png" alt="">
+        <div class="title">方案交流</div>
+        <div class="desc">针对相关方案进行线上或线下的交流探讨</div>
+        <el-button>立即资讯
+          <el-icon>
+            <ArrowRight/>
+          </el-icon>
+        </el-button>
+      </div>
+      <div class="item">
+        <div class="index">4</div>
+        <img class="icon" src="@/assets/images/Information-process-4.png" alt="">
+        <div class="title">商业流程</div>
+        <div class="desc">方案确定后，开始执行商务流程</div>
+        <el-button>立即资讯
+          <el-icon>
+            <ArrowRight/>
+          </el-icon>
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding-top: 0;
+}
+
+.breadcrumb {
+  background-color: #FFFFFF;
+  border-bottom: 1px solid #EBEDED;
+  padding-top: 12px;
+  padding-bottom: 12px;
+
+  > div {
+    width: 1280px;
+    margin: 0 auto;
+  }
+
+  :deep(.el-breadcrumb__item) {
+    &:last-child .el-breadcrumb__inner {
+      color: #222222;
+    }
+  }
+}
+
+.block-title {
+  font-weight: 500;
+  font-size: 28px;
+  text-align: center;
+  margin-top: 30px;
+  margin-bottom: 20px;
+}
+
+.content {
+  text-align: center;
+}
+
+.information-process {
+  .item {
+    margin: 0 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .index {
+      width: 32px;
+      height: 32px;
+      border-radius: 32px 32px 32px 32px;
+      border: 1px solid #2E77E3;
+      text-align: center;
+      line-height: 31px;
+      font-weight: 400;
+      font-size: 16px;
+      color: #2E77E3;
+    }
+
+    img {
+      width: 97px;
+      height: 97px;
+    }
+
+    .title {
+      font-weight: bold;
+      font-size: 24px;
+      color: #303233;
+      margin-bottom: 6px;
+    }
+
+    .desc {
+      font-weight: 400;
+      font-size: 16px;
+      color: #626566;
+      margin-bottom: 22px;
+    }
+    .el-button{
+      border-radius: 2px;
+    }
+  }
+}
+</style>