Kaynağa Gözat

fix: 【公共】详情页样式修改

hanxiaohui 7 ay önce
ebeveyn
işleme
ac898bdf5c

+ 5 - 4
src/components/business/page-detail-layout/index.vue

@@ -16,17 +16,17 @@
     <div class="header-flow">占位</div>
 
     <div class="header-tabs">
-      <tabs :tabs="tabs" :tab-active-key="tabActiveKey" @change="handleChangeTabActiveKey">
+      <bs-tabs :tabs="tabs" :tab-active-key="tabActiveKey" @change="handleChangeTabActiveKey">
         <template v-for="tab in tabs" #[tab.slotName]>
           <slot :name="tab.slotName"></slot>
         </template>
-      </tabs>
+      </bs-tabs>
     </div>
   </div>
 </template>
 
 <script setup>
-  import Tabs from './tabs/index.vue';
+  import { BsTabs } from '/@/components/BsUi/index.js';
   const props = defineProps({
     sceneType: {
       required: false,
@@ -88,7 +88,8 @@
       border-radius: 8px;
       background: #fff;
       :deep(.ant-tabs-nav-wrap) {
-        padding: 0 20px;
+        height: 40px;
+        padding: 0 30px;
       }
       :deep(.ant-tabs-nav) {
         margin: 0 0 10px 0;

+ 0 - 54
src/components/business/page-detail-layout/tabs/index.vue

@@ -1,54 +0,0 @@
-<template>
-  <a-tabs v-model:activeKey="activeKey">
-    <a-tab-pane :key="tab.key" v-for="tab in tabs">
-      <template #tab>
-        <div class="tab-title">
-          <span>
-            <img :src="tab.key === activeKey ? tab.selectedIcon : tab.unSelectedIcon" alt="" />
-          </span>
-
-          <span>{{ tab.title }}</span>
-        </div>
-      </template>
-      <div class="tabs-content">
-        <slot :name="tab.slotName" v-if="tab.key === activeKey"></slot>
-      </div>
-    </a-tab-pane>
-  </a-tabs>
-</template>
-<script setup>
-  import { ref, watch } from 'vue';
-  import { isEmpty } from 'lodash';
-  const emits = defineEmits(['update:tabActiveKey', 'change']);
-  const props = defineProps({
-    tabs: {
-      required: true,
-      default: [],
-    },
-    tabActiveKey: {
-      required: false,
-      default: '',
-    },
-  });
-
-  const activeKey = ref(isEmpty(props.tabActiveKey) ? props.tabs[0].key : props.tabActiveKey);
-
-  watch(
-    activeKey,
-    (val) => {
-      emits('change', val);
-    },
-    { immediate: true }
-  );
-</script>
-
-<style lang="scss" scoped>
-  .tab-title {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-  .tabs-content {
-    padding: 0 10px 10px 10px;
-  }
-</style>