同步面包屑样式、修改滚动样式

src/App.vue

@@ -17,9 +17,6 @@
                 <router-view />
               </global-loading>
             </el-main>
-          <!-- <el-footer v-if="showFooter">
-            <Footer></Footer>
-          </el-footer> -->
 
         </el-container>
       </el-container>
@@ -28,7 +25,6 @@
 </template>
 <script>
 import SliderMenu from '@/components/SliderMenu.vue';
-// import Footer from '@/components/Footer.vue';
 import { mapState } from 'vuex';
 import Header from './components/Header.vue';
 import Breadcrumb from './components/Breadcrumb.vue';
@@ -43,7 +39,6 @@ export default {
   components: {
     GlobalLoading,
     SliderMenu,
-    // Footer,
     Header,
     Breadcrumb
   },

src/components/Breadcrumb.vue

@@ -61,17 +61,22 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 /* 保持之前的样式不变 */
 .breadcrumb-container {
   padding: 16px 12px;
   background-color: #f5f5f5;
   border-radius: 4px;
 }
-
+.home-icon{
+  width: 16px;
+  height: 16px;
+}
 .breadcrumb {
   display: flex;
   flex-wrap: wrap;
+  height: 22px;
+  align-items: center;
   padding: 0;
   margin: 0;
   list-style: none;
@@ -80,21 +85,29 @@ export default {
 .breadcrumb-item {
   display: flex;
   align-items: center;
+  height: 100%;
+  cursor: pointer;
+}
+.router-link-active{
+  height: 100%;
+    display: flex;
+    align-items: center;
 }
-
 .breadcrumb-item a {
   color: #626573;
   text-decoration: none;
+  &:hover{
+    color: #006AFF;
+  }
 }
 
 .breadcrumb-item.active span {
-  color: #1E2226;;
+  color: #1E2226;
+  ;
 
 }
 
 .separator {
-  /* margin: 0 5px;
-  color: #6c757d;; */
   width: 12px;
   height: 12px;
 }

src/components/GuipSwitch.vue

@@ -20,7 +20,7 @@
 <!-- 他这个描述文案不太符合当前使用暂且不用 -->
 <!-- :active-text="activeText" 
 :inactive-text="inactiveText"  -->
-
+<!-- 设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。 -->
 <script>
 
 export default {
@@ -35,7 +35,7 @@ export default {
             default: '',
         },
         modelValue: {
-            type: Boolean,
+            type: [Boolean,String,Number],
             default: false,
         },
         activeColor: {

src/views/HomeView.vue

@@ -514,10 +514,8 @@ export default {
         gap: 12px;
     }
 
-    .el-form-item {
-        margin-bottom: 0;
 }
-
+::v-deep .el-form-item {
-
+    margin-bottom: 0 !important;
 }
 </style>

src/views/HosInformation.vue

@@ -41,8 +41,8 @@
                         <GuipFormItem column="column" class="mb24">
                             <div slot="formLeft" class="form-top-icon">医保定点</div>
                             <div class="flex" slot="formDom" style="padding: 9px 0px;">
-                                <GuipSwitch :modelValue="Boolean(form.is_fixed)" @change="onSwitchChange" activeText="非医保定点"
+                                <GuipSwitch :modelValue="form.is_fixed" @change="onSwitchChange" activeText="非医保定点"
-                                    inactiveText="非医保定点">
+                                    inactiveText="非医保定点"  active-value="1" inactive-value="0">
                                 </GuipSwitch>
                             </div>
                         </GuipFormItem>
@@ -153,23 +153,25 @@
                         </div>
                         <span class="totalCount">共{{ projectList.length }}条，已选{{ selectedCount }}条</span>
                         <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }"
-                            @click="batchOperate('1')">批量禁用</GuipButton>
+                            @click="batchOperate('1','project')">批量禁用</GuipButton>
                         <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
-                            @click="batchOperate('2')">
+                            @click="batchOperate('2','project')">
                             批量启用</GuipButton>
                     </div>
 
                 </div>
                 <div class="flex-between mb32 mt32">
-                    <div class="tabProject flex">
+                    <div class="tabProject scroll-container">
-                        <div :class="['tab-item ', projectSearchId == item.id ? 'active' : '']" @click="selectTag(item)"
+                        <div class="overTab scroll-list">
+                            <div :class="['tab-item point', projectSearchId == item.id ? 'active' : '']" @click="selectTag(item)"
                                 v-for="item in projectTagData" :key="item.name">{{ item.name }}</div>
                             </div>
+                    </div>
                     <div class="right flex">
                         <span style="margin-right: 16px;">搜索项目</span>
-                        <GuipInput ref="GuipInput" column="column" width="280px" v-model="projectSearchName"
+                        <GuipInput ref="GuipInput" class="special-input" column="column" width="280px" v-model="projectSearchName"
-                            prop="company_name" placeholder="请输入">
+                            prop="company_name" placeholder="请输入" @blur="getFilterProject">
-                            <img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" />
+                            <img src="@/assets/input_search_ic.svg" slot="suffix"  />
                         </GuipInput>
                     </div>
                 </div>
@@ -216,9 +218,9 @@
                         </div>
                         <span class="totalCount">共{{ courseList.length }}条，已选{{ selectedCount }}条</span>
                         <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px', margin: '0 26px' }"
-                            @click="batchOperate('1')">批量禁用</GuipButton>
+                            @click="batchOperate('1','group')">批量禁用</GuipButton>
                         <GuipButton type="ignore" :btnstyle="{ width: '99px', height: '32px' }"
-                            @click="batchOperate('2')">
+                            @click="batchOperate('2','group')">
                             批量启用</GuipButton>
                     </div>
 
@@ -279,8 +281,6 @@ import GuipSelect from '@/components/GuipSelect.vue';
 import GuipSwitch from '@/components/GuipSwitch.vue';
 import GuipTable from '@/components/GuipTable.vue';
 import GuipDialog from '@/components/GuipDialog.vue';
-// import GuipRadio from '@/components/GuipRadio.vue';
-// import HoverButton from '@/components/HoverButton.vue';
 import { mapState } from 'vuex';
 
 export default {
@@ -293,15 +293,12 @@ export default {
         BatchProject,
         GuipButton,
         GuipDialog,
-        // GuipRadio,
         GuipInput,
         GuipTable,
         GuipSwitch,
         GuipSelect,
         GuipTextarea,
         GroupFormBtns,
-        // HoverButton
-
     },
     data() {
         return {
@@ -326,7 +323,6 @@ export default {
             isIndeterminate1: false,
             projectSearchId: '',
             projectSearchName: '',
-
             projectList: [
                 {
                     name: '针灸',
@@ -375,19 +371,19 @@ export default {
                     id: '13'
                 },
                 {
-                    name: '针灸1',
+                    name: '针灸12',
                     id: '21'
                 },
                 {
-                    name: '针灸2',
+                    name: '针灸22',
                     id: '211'
                 },
                 {
-                    name: '针灸3',
+                    name: '针灸32',
                     id: '212'
                 },
                 {
-                    name: '针灸4',
+                    name: '针灸42',
                     id: '213'
                 },
             ],
@@ -514,7 +510,7 @@ export default {
                 h_name:"武丽娜中医针灸",
                 h_pos:"37.850249,112.53111",
                 hid:"1",
-                is_fixed:"1",
+                is_fixed:'1',
                 morning_worktime:"8:00-11:00",
                 notice:"周六上午门诊最后一轮扎针到10点50分，11点后到患者的，只开药，不扎针。\r\n初诊患者请先将挂号条交给医助、在门外静坐等待叫号\r\n为了节约大家排号时间，请全部挂号，按挂号顺序治疗\r\n针灸治疗单缴费完毕后请交还医助\r\n药费缴费完毕后交方给药房等待拿药（可办理快递）\r\n请准备一次性医用床单（可现场购买）和户外保温毯（推荐），户外保温毯购买链接：<a href=\"https://m.tb.cn/h.UJglv3C?tk=5KMnd9XFr3D\" target=\"_blank\">https://m.tb.cn/h.UJglv3C?tk=5KMnd9XFr3D</a>",
                 time_unit:"15",
@@ -591,7 +587,24 @@ export default {
             }
         },
         selectTag(item) {
-            this.projectSearchId = item.id
+            this.projectSearchId = item.id;
+            // 筛选逻辑
+            this.getFilterProject()
+
+        },
+        getFilterProject(){
+            // 接口需要更改
+            this.$http('POST', '/supernew/ajax_get_type_batch_list', {
+                // 项目筛选
+                projectid:this.projectSearchId,
+                // 项目名称搜索
+                projectSearchName:this.projectSearchName
+            }).then(response => {
+                this.projectTagData = response.data
+
+            }).catch(error => {
+                console.error(error, 'error')
+            })
         },
         getProTagData() {
             this.$http('POST', '/supernew/ajax_get_type_batch_list', {
@@ -721,12 +734,22 @@ export default {
             this.isIndeterminate1 = !noneSelected && !allSelected;
         },
         // 批量操作
-        batchOperate(type) {
+        batchOperate(type,name) {
             if (type == '1') {
                 // 禁用
+                if(name == 'project'){
+                    // 修改项目列表
+                }else{
+                    // 修改疗程套餐
+                }
 
             } else {
                 // 启用
+                if(name == 'project'){
+                    // 修改项目列表
+                }else{
+                    // 修改疗程套餐
+                }
 
             }
         },
@@ -844,10 +867,31 @@ export default {
     grid-template-columns: repeat(2, 1fr);
 
 }
+#siteMessage4 ::v-deep .el-form-item {
+    margin-bottom: 0 !important;
+}
 .pageTitle{
     // padding: 12px 0;
 }
+.scroll-container {
+  width: calc(100% - 380px);
+  overflow-x: auto; /* 关键：启用横向滚动 */
+}
+.special-input {
+    margin-bottom: 0 !important;
+}
+.scroll-list {
+  display: flex;       /* Flex 布局 */
+  flex-wrap: nowrap;   /* 禁止换行 */
+  gap: 10px;          /* 子项间距 */
+}
 
+.scroll-item {
+  flex: 0 0 auto;     /* 不伸缩、不收缩 */
+  width: 200px;       /* 固定子项宽度 */
+  height: 100px;
+  background: #eee;
+}
 .totalCount {
     font-size: 12px;
     font-weight: normal;
@@ -858,39 +902,39 @@ export default {
 }
 
 .tabProject {
+    width: calc(100% - 380px); 
+    overflow-x: auto;
+
+    .overTab{
+        display: flex;
         gap: 12px;
+        flex-wrap: nowrap; /* 禁止换行 */
+    }
 
     .tab-item {
-        /* 自动布局子元素 */
         height: 28px;
-        min-width: 74px;
+        // min-width: 74px;
-        /* 自动布局 */
+        display: inline-flex; /* 关键修改：从 flex 改为 inline-flex */
-        display: flex;
         justify-content: center;
         align-items: center;
         box-sizing: border-box;
         padding: 4px 12px;
         gap: 4px;
-        align-self: stretch;
         z-index: 2;
         border-radius: 14px;
         background: #FFFFFF;
-        box-sizing: border-box;
-        /* middle/middle_line_1 */
         border: 1px solid #DFE2E6;
-        /* body/body 2_regular */
         font-family: Microsoft YaHei UI;
         font-size: 14px;
         text-align: justify;
-        /* 浏览器可能不支持 */
         letter-spacing: 0.08em;
-        /* text/text_4 */
         color: #8A9099;
+        white-space: nowrap; /* 防止文字换行 */
     }
 
     .active {
         color: #006AFF;
-        border: none;
+        border-color: transparent;
         background: #F2F3F5;
     }
 }