应用详情tab组件

src/assets/css/index.css

@@ -202,6 +202,9 @@ div{
   color: #8890a7;
   line-height: 24px!important;
 }
+.el-tabs__nav-scroll .el-tabs__item {
+  line-height: 40px!important;
+}
 .el-tabs__item:hover {
   color: #687087;
 

src/components/commodity.vue

@@ -119,7 +119,9 @@ export default {
   }),
   computed: {},
   watch: {},
-  methods: {},
+  methods: {
+    handleChange() {}
+  },
   mounted() {}
 };
 </script>

src/components/servive-step.vue

+<template>
+  <div class="service_step">
+    <div class="step_bg"></div>
+    <ul class="step_items">
+      <li class="step_item">
+        <div class="step_icon">
+            <span>1</span>
+        </div>
+        <p class="step_title">服务申请</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>2</span>
+        </div>
+        <p class="step_title">审核确认</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>3</span>
+        </div>
+        <p class="step_title">费用支付</p>
+      </li>
+      <li class="step_item">
+        <div class="step_icon">
+            <span>4</span>
+        </div>
+        <p class="step_title">服务获取</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.service_step {
+  position: relative;
+  min-height: 48px;
+}
+.service_step > .step_bg {
+  position: absolute;
+  top: 23px;
+  right: 24px;
+  left: 24px;
+  border: 1px solid #1abc9c;
+}
+.service_step > .step_items {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  text-align: center;
+}
+.service_step .step_item > .step_icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #1abc9c;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+}
+.service_step .step_item > .step_title {
+  font-size: 12px;
+  line-height: 24px;
+  color: #1abc9c;
+}
+</style>

src/pages/example_commodity.vue

@@ -2,7 +2,10 @@
   <div class="com_ex">
     <block-radius>
       <h3>按原型大致做了一下，调优等后续</h3>
+
       <Commodity :datas="datas" />
+  
+      <servive-info></servive-info>
     </block-radius>
   </div>
 </template>
@@ -11,10 +14,12 @@
 // @ is an alias to /src
 import Commodity from "@/components/commodity.vue";
 import BlockRadius from "@/components/block-radius";
+import serviveInfo from "@/components/servive-info";
 export default {
   components: {
     Commodity,
-    BlockRadius
+    BlockRadius,
+    serviveInfo,
   },
   data: () => ({
     datas: {
@@ -24,22 +29,21 @@ export default {
       updated: "2020-03-12 18:31:12",
       dataField: "经济建设",
       serviceType: "综合应用服务",
-      resourceSummary:
-        "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
+      resourceSummary: "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
       openLevel: "共享",
       views: "99999",
       numberOfAcquisitions: "99999",
-      specifications:
-        "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问"
-    }
+      specifications: "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问",
+    },
   }),
   mounted() {},
-  methods: {}
+  methods: {},
 };
 </script>
+
 <style scoped>
 .com_ex {
   margin-top: 100px;
   padding: 20px;
 }
-</style>
\ No newline at end of file
+</style>