kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: remove ContentDetailWrap style

This commit is contained in:
huanghong 2022-04-01 16:29:41 +08:00
parent 17c8fea938
commit 4ceaa9d781
1 changed files with 13 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/ContentDetailWrap/src/ContentDetailWrap.vue
View File

@ -9,7 +9,7 @@ const { t } = useI18n()
const { getPrefixCls } = useDesign() const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('content-wrap') const prefixCls = getPrefixCls('content-detail-wrap')
defineProps({ defineProps({
title: propTypes.string.def(''), title: propTypes.string.def(''),
@ -24,27 +24,32 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="content-detail-wrap-container" ref="contentDetailWrap"> <div :class="[`${prefixCls}-container`, 'relative']" ref="contentDetailWrap">
<Sticky :offset="offset"> <Sticky :offset="offset">
<div class="detail-wrap-header"> <div
<div class="header-left"> :class="[
`${prefixCls}-header`,
'flex border-bottom-1 h-50px items-center text-center bg-white pr-10px '
]"
>
<div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">
<el-button @click="emit('back')"> <el-button @click="emit('back')">
<Icon icon="ep:arrow-left" class="mr-5px" /> <Icon icon="ep:arrow-left" class="mr-5px" />
{{ t('common.back') }} {{ t('common.back') }}
</el-button> </el-button>
</div> </div>
<div class="header-center"> <div :class="[`${prefixCls}-header__title`, 'flex flex-1 justify-center']">
<slot name="title"> <slot name="title">
<label class="header-title">{{ title }}</label> <label class="text-16px font-700">{{ title }}</label>
</slot> </slot>
</div> </div>
<div class="header-right"> <div :class="[`${prefixCls}-header__right`, 'flex pl-10px pr-10px']">
<slot name="right"></slot> <slot name="right"></slot>
</div> </div>
</div> </div>
</Sticky> </Sticky>
<div style="padding: var(--app-content-padding)"> <div style="padding: var(--app-content-padding)">
<ElCard :class="[prefixCls, 'mb-20px']" shadow="never"> <ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
<div> <div>
<slot></slot> <slot></slot>
</div> </div>
@ -52,49 +57,3 @@ onMounted(() => {
</div> </div>
</div> </div>
</template> </template>
<style lang="less">
.content-detail-wrap-container {
position: relative;
.detail-wrap-header {
position: relative;
z-index: 999 !important;
display: flex;
width: 100%;
height: 50px;
padding-right: 20px;
line-height: 50px;
text-align: center;
background: #fff;
border-bottom: 1px solid #d0d0d0;
transition: position 0.6s ease;
.el-button {
margin: 10px 10px 0px 10px;
}
.header-center {
display: flex;
justify-content: center;
flex: 1;
.header-title {
font-weight: 700;
}
}
.header-left {
display: flex;
}
.header-right {
display: flex;
}
}
.readonly input {
background-color: #f6f6f6;
}
}
</style>