zhangqi
/
acupuncture_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

admin_version1.0_2025_06_26
zq 3 weeks ago
parent
f8b34dee9e
commit
357a2ef094
5 changed files with 105 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/App.vue
  2. 25
      src/components/Breadcrumb.vue
  3. 4
      src/components/GuipSwitch.vue
  4. 8
      src/views/HomeView.vue
  5. 118
      src/views/HosInformation.vue

5
src/App.vue
View File

@ -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
},

25
src/components/Breadcrumb.vue
View File

@ -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;
}

4
src/components/GuipSwitch.vue
View File

@ -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: {

8
src/views/HomeView.vue
View File

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

118
src/views/HosInformation.vue
View File

@ -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="非医保定点"
inactiveText="非医保定点">
<GuipSwitch :modelValue="form.is_fixed" @change="onSwitchChange" activeText="非医保定点"
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="['tab-item ', projectSearchId == item.id ? 'active' : '']" @click="selectTag(item)"
v-for="item in projectTagData" :key="item.name">{{ item.name }}</div>
<div class="tabProject scroll-container">
<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"
prop="company_name" placeholder="请输入">
<img src="@/assets/input_search_ic.svg" slot="suffix" @click="handleClear" />
<GuipInput ref="GuipInput" class="special-input" column="column" width="280px" v-model="projectSearchName"
prop="company_name" placeholder="请输入" @blur="getFilterProject">
<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 {
gap: 12px;
width: calc(100% - 380px);
overflow-x: auto;
.overTab{
display: flex;
gap: 12px;
flex-wrap: nowrap; /* 禁止换行 */
}
.tab-item {
/* 自动布局子元素 */
height: 28px;
min-width: 74px;
/* 自动布局 */
display: flex;
// min-width: 74px;
display: inline-flex; /* 关键修改：从 flex 改为 inline-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;
}
}

Write Preview
Loading…
Cancel
Save