115 lines
1.9 KiB
Vue
115 lines
1.9 KiB
Vue
<template>
|
|
<div class="aibar" :style="{ marginBottom }" :class="{'aibar-center':titlePosition === 'center',card}">
|
|
<div v-if="titlePosition === 'center'"/>
|
|
<div class="aibar-left" :class="[titlePosition === 'center' ? 'aibar-left__center' : '']">
|
|
<template v-if="!$slots.title">{{ title }}</template>
|
|
<slot name="title" v-else></slot>
|
|
</div>
|
|
<div class="aibar-right">
|
|
<slot v-if="$slots.right" name="right"/>
|
|
<slot v-else/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AiBar',
|
|
|
|
props: {
|
|
title: {
|
|
type: String
|
|
},
|
|
|
|
customCliker: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
|
|
marginBottom: {
|
|
type: String,
|
|
default: '16px'
|
|
},
|
|
|
|
titlePosition: {
|
|
type: String,
|
|
default: 'left'
|
|
},
|
|
card: Boolean
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.aibar {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 56px;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
|
|
|
|
&.card {
|
|
background: #fff;
|
|
box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
|
|
}
|
|
|
|
.aibar-left {
|
|
color: #222;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.aibar-left__center {
|
|
position: relative;
|
|
width: 556px;
|
|
text-align: center;
|
|
word-break: break-all;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.aibar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #5088FF;
|
|
font-size: 12px;
|
|
|
|
i {
|
|
line-height: 1;
|
|
color: #5088FF;
|
|
}
|
|
|
|
span {
|
|
font-size: 12px;
|
|
}
|
|
|
|
& > div, & > a {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.aibar-center {
|
|
height: auto;
|
|
padding: 10px 0;
|
|
|
|
h2 {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
p {
|
|
color: #888;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|