mod: conflict resolution
kailong321200875
4 years ago
commit
47edf7b270
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,3 @@
|
||||
import ContentDetailWrap from './src/ContentDetailWrap.vue'
|
||||
|
||||
export { ContentDetailWrap }
|
||||
@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { ElCard, ElButton } from 'element-plus'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { useDesign } from '@/hooks/web/useDesign'
|
||||
import { ref, onMounted, defineEmits } from 'vue'
|
||||
import { Sticky } from '@/components/Sticky'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
const { getPrefixCls } = useDesign()
|
||||
|
||||
const prefixCls = getPrefixCls('content-detail-wrap')
|
||||
|
||||
defineProps({
|
||||
title: propTypes.string.def(''),
|
||||
message: propTypes.string.def('')
|
||||
})
|
||||
const emit = defineEmits(['back'])
|
||||
const offset = ref(85)
|
||||
const contentDetailWrap = ref()
|
||||
onMounted(() => {
|
||||
offset.value = contentDetailWrap.value.getBoundingClientRect().top
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="[`${prefixCls}-container`, 'relative bg-[#fff]']" ref="contentDetailWrap">
|
||||
<Sticky :offset="offset">
|
||||
<div
|
||||
: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')">
|
||||
<Icon icon="ep:arrow-left" class="mr-5px" />
|
||||
{{ t('common.back') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div :class="[`${prefixCls}-header__title`, 'flex flex-1 justify-center']">
|
||||
<slot name="title">
|
||||
<label class="text-16px font-700">{{ title }}</label>
|
||||
</slot>
|
||||
</div>
|
||||
<div :class="[`${prefixCls}-header__right`, 'flex pl-10px pr-10px']">
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</Sticky>
|
||||
<div style="padding: var(--app-content-padding)">
|
||||
<ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</ElCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,3 @@
|
||||
import Sticky from './src/Sticky.vue'
|
||||
|
||||
export { Sticky }
|
||||
@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { InputPassword } from '@/components/InputPassword'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const password = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap
|
||||
:title="t('inputPasswordDemo.title')"
|
||||
:message="t('inputPasswordDemo.inputPasswordDes')"
|
||||
>
|
||||
<InputPassword v-model="password" class="mb-20px" />
|
||||
<InputPassword v-model="password" strength />
|
||||
<InputPassword v-model="password" strength disabled class="mt-20px" />
|
||||
</ContentWrap>
|
||||
</template>
|
||||
@ -0,0 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { Sticky } from '@/components/Sticky'
|
||||
import { ElAffix } from 'element-plus'
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="t('stickyDemo.sticky')">
|
||||
<Sticky :offset="90">
|
||||
<div style="padding: 10px; background-color: lightblue"> Sticky 距离顶部90px </div>
|
||||
</Sticky>
|
||||
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
|
||||
<el-affix :offset="150">
|
||||
<div style="padding: 10px; background-color: lightblue">Affix 距离顶部150px </div>
|
||||
</el-affix>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
|
||||
<el-affix :offset="150" position="bottom">
|
||||
<div style="padding: 10px; background-color: lightblue">Affix 距离底部150px </div>
|
||||
</el-affix>
|
||||
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
|
||||
<Sticky :offset="90" position="bottom">
|
||||
<div style="padding: 10px; background-color: lightblue"> Sticky 距离底部90px </div>
|
||||
</Sticky>
|
||||
<p style="margin: 80px">Content</p>
|
||||
<p style="margin: 80px">Content</p>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
Loading…
Reference in New Issue