mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-07 01:18:54 +08:00
style(manager): 热区面板标题与 tab 同行展示
- 面板契约新增 hideDecorateTitle 标记,面板可自行接管标题行 - tab 分段控件改为自然宽度,右对齐
This commit is contained in:
@@ -1,14 +1,17 @@
|
||||
<template>
|
||||
<div class="panel-flex-one">
|
||||
<div class="panel-tabs">
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="panel-tab"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.title }}
|
||||
<div class="panel-header">
|
||||
<span class="panel-name">{{ res.name }}</span>
|
||||
<div class="panel-tabs">
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="panel-tab"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -104,6 +107,7 @@ const DEFAULTS = {
|
||||
|
||||
export default {
|
||||
name: "PanelFlexOne",
|
||||
hideDecorateTitle: true,
|
||||
components: { ColorField, SliderField, hotzone, ossManage },
|
||||
props: {
|
||||
res: { type: Object, required: true },
|
||||
@@ -164,16 +168,25 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.panel-tabs {
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
margin-bottom: 4px;
|
||||
.panel-name {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
.panel-tabs {
|
||||
display: inline-flex;
|
||||
background: #f4f4f5;
|
||||
border-radius: 8px;
|
||||
padding: 3px;
|
||||
margin-bottom: 14px;
|
||||
.panel-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 6px 0;
|
||||
padding: 5px 14px;
|
||||
font-size: 13px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="decorate">
|
||||
<div class="decorate-title">
|
||||
<div class="decorate-title" v-if="!hidePanelTitle">
|
||||
{{ res.name }}
|
||||
|
||||
<el-button
|
||||
@@ -591,6 +591,10 @@ export default {
|
||||
panelComponent() {
|
||||
return (this.res && panelMap[this.res.type]) || null;
|
||||
},
|
||||
// 面板声明 hideDecorateTitle 时,标题行由面板自己渲染
|
||||
hidePanelTitle() {
|
||||
return !!(this.panelComponent && this.panelComponent.hideDecorateTitle);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 选择分类(弹窗内暂存,确定后写回)
|
||||
|
||||
Reference in New Issue
Block a user