|
|
@ -15,19 +15,27 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
<script lang="ts"> |
|
|
import { computed, defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue'; |
|
|
|
|
|
|
|
|
import { computed, defineComponent, h, nextTick, onMounted, reactive, toRefs } from 'vue'; |
|
|
import { IObject } from '@/types/interface'; |
|
|
import { IObject } from '@/types/interface'; |
|
|
import utilService from '@/service/utilService'; |
|
|
import utilService from '@/service/utilService'; |
|
|
export default defineComponent({ |
|
|
export default defineComponent({ |
|
|
name: 'block', |
|
|
name: 'block', |
|
|
props: { item: { type: Object, default: () => ({}) }, dataForm: { type: Object, default: () => ({}) } }, |
|
|
|
|
|
|
|
|
props: { item: { type: Object, default: () => ({}) }, dataForm: { type: Object, default: () => ({}) }, width: { type: String, default: () => '484px' }, height: { type: String, default: () => '318px' } }, |
|
|
setup(props) { |
|
|
setup(props) { |
|
|
const state = reactive({ |
|
|
const state = reactive({ |
|
|
blockRef: null, |
|
|
blockRef: null, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const block = computed(() => { |
|
|
|
|
|
return { |
|
|
|
|
|
w: props.width, |
|
|
|
|
|
h: props.height, |
|
|
|
|
|
}; |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
return { |
|
|
return { |
|
|
...toRefs(state), |
|
|
...toRefs(state), |
|
|
|
|
|
block, |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
emits: ['change-code'], |
|
|
emits: ['change-code'], |
|
|
@ -36,8 +44,8 @@ export default defineComponent({ |
|
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
<style scoped lang="less"> |
|
|
.block { |
|
|
.block { |
|
|
width: 484px; |
|
|
|
|
|
height: 318px; |
|
|
|
|
|
|
|
|
width: v-bind('block.w'); |
|
|
|
|
|
height: v-bind('block.h'); |
|
|
background: url('@/assets/images/njhl/block.png') no-repeat center; |
|
|
background: url('@/assets/images/njhl/block.png') no-repeat center; |
|
|
background-size: 100% 100%; |
|
|
background-size: 100% 100%; |
|
|
display: flex; |
|
|
display: flex; |
|
|
@ -50,7 +58,7 @@ export default defineComponent({ |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
justify-content: space-between; |
|
|
padding: 10px 38px; |
|
|
padding: 10px 38px; |
|
|
color: #00e5ff; |
|
|
|
|
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
> span { |
|
|
> span { |
|
|
font-size: 20px; |
|
|
font-size: 20px; |
|
|
|