+1

src/views/components/shop/components/TabOne.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="tab-container">
+    <div class="tab-title">
+      <div class="title-line"></div>
+      <div class="tittle-text">主体工商信息</div>
+    </div>
+    <div class="tab-main">
+      <div class="cell-left">
+        <div class="main-cell">
+          <div class="cell-item">
+            <div class="item-icon"></div>
+            <div class="item-lable">主体名称：</div>
+            <div class="item-value">南京市百家湖片区XX杂食店</div>
+          </div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-item">
+            <div class="item-icon"></div>
+            <div class="item-lable">营业执照：</div>
+            <div class="item-value value-"></div>
+          </div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-item">
+            <div class="item-icon"></div>
+            <div class="item-lable">经营范围：</div>
+            <div class="item-value">预包装食品（不含冷藏冷冻食品）销售</div>
+          </div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-item">
+            <div class="item-icon"></div>
+            <div class="item-lable">注册资本：</div>
+            <div class="item-value">/</div>
+          </div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-item">
+            <div class="item-icon"></div>
+            <div class="item-lable">许可项目：</div>
+            <div class="item-value">/</div>
+          </div>
+        </div>
+      </div>
+      <div class="cell-right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.tab-title {
+  display: flex;
+  align-items: center;
+  .title-line {
+    width: 5px;
+    height: 12px;
+    background: #5ba1d2;
+    margin-right: 15px;
+  }
+  .tittle-text {
+    font-size: 14px;
+    font-weight: 500;
+    color: #e9f4ff;
+  }
+}
+.tab-main {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  & > div {
+    flex: 1;
+  }
+  .main-cell {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    .cell-item {
+      flex: 1;
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 20px;
+      .item-icon {
+        height: 30px;
+        width: 30px;
+        background: url("~@/assets/images/Rectangle.png");
+        background-size: 100% 100%;
+      }
+      .item-lable {
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #cccccc;
+      }
+      .item-value {
+        min-height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #e9f4ff;
+      }
+    }
+  }
+}
+</style>

src/views/components/shop/components/index.js

@@ -1,4 +1,4 @@
-export { default as tab1 } from "./tab1.vue";
+export { default as TabOne } from "./TabOne.vue";
 export { default as tab2 } from "./tab2.vue";
 export { default as tab3 } from "./tab3.vue";
 export { default as tab4 } from "./tab4.vue";

src/views/components/shop/components/tab1.vue

@@ -1,7 +0,0 @@
-<template></template>
-
-<script>
-export default {};
-</script>
-
-<style></style>

src/views/components/shop/index.vue

@@ -19,19 +19,15 @@
         {{ item.name }}
       </div>
     </div>
-    <div class="tab-page"></div>
+    <div class="tab-page">
+      <tab-one v-show="currentIndex == 0"></tab-one>
+    </div>
   </dia-log>
 </template>
 <script>
-import { tab1, tab2, tab3, tab4 } from "./components/index.js";
+import { TabOne, tab2, tab3, tab4 } from "./components/index.js";
 import diaLog from "../../components/dialog/index.vue";
 export default {
-  components: {
-    tab1,
-    tab2,
-    tab3,
-    tab4,
-  },
   props: {
     width: {
       type: String,
@@ -42,7 +38,7 @@ export default {
       default: "视频墙",
     },
   },
-  components: { diaLog },
+  components: { diaLog, TabOne, tab2, tab3, tab4 },
   data() {
     return {
       currentIndex: 0,