赋能场景按钮顺序

This commit is contained in:
a0049873 2023-01-06 16:40:16 +08:00
parent 508669b7c5
commit 88d84bbcb5
3 changed files with 96 additions and 139 deletions

View File

@ -88,9 +88,8 @@
</el-form> </el-form>
</div> </div>
<template slot="footer"> <template slot="footer">
<el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
<el-button @click="closeModal">{{ $t("cancel") }}</el-button> <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>

View File

@ -2,7 +2,6 @@
<div> <div>
<el-dialog custom-class="customClass" :visible.sync="areaVisibleCopy" :title="modalTypeText[modalType]" <el-dialog custom-class="customClass" :visible.sync="areaVisibleCopy" :title="modalTypeText[modalType]"
@close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false"> @close="closeModal" :close-on-click-modal="false" :close-on-press-escape="false">
<!-- 挂载和修改 --> <!-- 挂载和修改 -->
<div class="right"> <div class="right">
@ -10,7 +9,7 @@
:label-width="$i18n.locale === 'en-US' ? '120px' : '100px'"> :label-width="$i18n.locale === 'en-US' ? '120px' : '100px'">
<!-- 基本信息 --> <!-- 基本信息 -->
<div class="scrollBox" id="anchor1"> <div class="scrollBox" id="anchor1">
<div class="baseInner"> <div class="baseInner">
<el-form-item label="所属区市:" prop="unit"> <el-form-item label="所属区市:" prop="unit">
<el-select v-model="dataForm.area" placeholder="请选择"> <el-select v-model="dataForm.area" placeholder="请选择">
@ -52,18 +51,17 @@
</div> </div>
</div> </div>
</el-form> </el-form>
</div> </div>
<template slot="footer"> <template slot="footer">
<el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
<el-button @click="closeModal">{{ $t("cancel") }}</el-button> <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import qs from 'qs' import qs from 'qs'
@ -78,19 +76,19 @@ export const modalTypeText = {
export default { export default {
components: { components: {
upload upload
}, },
watch: { watch: {
dataForm: { dataForm: {
handler(newVal) { handler (newVal) {
this.dataForm = newVal this.dataForm = newVal
}, },
deep: true, deep: true,
immediate: true immediate: true
}, },
areaVisible: { areaVisible: {
handler(newVal) { handler (newVal) {
this.getSceneArea() this.getSceneArea()
this.getArea() this.getArea()
this.areaVisibleCopy = newVal this.areaVisibleCopy = newVal
@ -112,25 +110,25 @@ export default {
} }
}, },
data() { data () {
return { return {
areas:[],// areas: [], //
sceneAreas:[], sceneAreas: [],
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload', fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
dataForm: { dataForm: {
district: 1,//01 district: 1, // 01
area: '',// area: '', //
infrastructureCount: null, infrastructureCount: null,
dataSourceCount: null, dataSourceCount: null,
componentCount: null, componentCount: null,
name: '', name: '',
applicationArea: '',// applicationArea: '', //
description: '', description: '',
sceneUrl: '', sceneUrl: '',
fuseAttrList: [ fuseAttrList: [
{ {
attrType: '构建步骤', attrType: '构建步骤',
attrValue: [{ question: '', answer: [{ 'answer': '' }, { 'answer': '' }] }] attrValue: [{ question: '', answer: [{ answer: '' }, { answer: '' }] }]
}, },
{ {
attrType: '基础设施', attrType: '基础设施',
@ -156,7 +154,7 @@ export default {
attrType: '服务图片', attrType: '服务图片',
attrValue: '' attrValue: ''
} }
], ]
}, },
rules: { rules: {
@ -175,18 +173,18 @@ export default {
} }
] ]
}, },
areaVisibleCopy: this.areaVisible, areaVisibleCopy: this.areaVisible,
displayInfo: { displayInfo: {
name: '名称', name: '名称',
description: '描述' description: '描述'
}, },
modalTypeText: modalTypeText, modalTypeText: modalTypeText,
abilityListObj: {}, abilityListObj: {},
imgData: [], imgData: [],
// //
handleExceed() { handleExceed () {
this.$message({ type: 'error', message: '最多支持一张图片上传' }) this.$message({ type: 'error', message: '最多支持一张图片上传' })
}, },
imageUrl: '' imageUrl: ''
@ -194,8 +192,8 @@ export default {
}, },
methods: { methods: {
// //
getArea(){ getArea () {
const params = { const params = {
pid: '250000' pid: '250000'
} }
@ -207,8 +205,8 @@ export default {
this.areas = res.data.data this.areas = res.data.data
}) })
}, },
// //
getSceneArea() { getSceneArea () {
const params = { const params = {
topCategoryName: '应用资源' topCategoryName: '应用资源'
} }
@ -221,18 +219,16 @@ export default {
}) })
}, },
clearForm() { clearForm () {
this.$refs.dataForm && this.$refs.dataForm.resetFields() this.$refs.dataForm && this.$refs.dataForm.resetFields()
}, },
closeModal() { closeModal () {
this.$emit('closeModal') this.$emit('closeModal')
}, },
// //
dataFormSubmitHandle: debounce( dataFormSubmitHandle: debounce(
function () { function () {
this.$refs.dataForm.validate((valid) => { this.$refs.dataForm.validate((valid) => {
if (!valid) { if (!valid) {
this.$message.error('请检查表单是否填写完整') this.$message.error('请检查表单是否填写完整')
@ -251,15 +247,14 @@ export default {
const _obj = Object.assign({}, this.dataForm, { const _obj = Object.assign({}, this.dataForm, {
type: '赋能场景' type: '赋能场景'
}) })
this.dataForm.fuseAttrList.forEach(item => {
if(item.attrType!=='服务图片'){
item.attrValue = JSON.stringify(item.attrValue);
}
this.dataForm.fuseAttrList.forEach(item => {
if (item.attrType !== '服务图片') {
item.attrValue = JSON.stringify(item.attrValue)
}
}) })
this.$http this.$http
[methodsObj[this.modalType]]('/fuse', _obj) [methodsObj[this.modalType]]('/fuse', _obj)
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg)
@ -284,16 +279,16 @@ export default {
{ leading: true, trailing: false } { leading: true, trailing: false }
), ),
// //
getDetail(data) { getDetail (data) {
this.dataForm = data this.dataForm = data
}, },
handleAvatarSuccess(res, file) { handleAvatarSuccess (res, file) {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg)
} }
this.imageUrl = res.data this.imageUrl = res.data
}, },
beforeAvatarUpload(file) { beforeAvatarUpload (file) {
const isImage = const isImage =
file.type === 'image/jpeg' || file.type === 'image/jpeg' ||
file.type === 'image/jpg' || file.type === 'image/jpg' ||
@ -303,11 +298,11 @@ export default {
} }
return isImage return isImage
}, },
addUploadRemoveFile(file, fileList) { addUploadRemoveFile (file, fileList) {
this.$refs.addUpload.clearFiles() this.$refs.addUpload.clearFiles()
this.imageUrl = '' this.imageUrl = ''
}, },
editBeforeAvatarUpload(file) { editBeforeAvatarUpload (file) {
const isImage = const isImage =
file.type === 'image/jpeg' || file.type === 'image/jpeg' ||
file.type === 'image/jpg' || file.type === 'image/jpg' ||
@ -318,26 +313,25 @@ export default {
} }
return isImage return isImage
}, },
editUploadRemoveFile(file, fileList) { editUploadRemoveFile (file, fileList) {
this.$refs.editUpload.clearFiles() this.$refs.editUpload.clearFiles()
this.imageUrl = '' this.imageUrl = ''
}, },
eidtHandleAvatarSuccess(res, file) { eidtHandleAvatarSuccess (res, file) {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg)
} }
this.imageUrl = res.data this.imageUrl = res.data
} }
}, },
mounted() { mounted () {
}, },
beforeDestroy() { beforeDestroy () {
this.clearForm() this.clearForm()
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fixed { .fixed {
position: sticky; position: sticky;
@ -368,14 +362,11 @@ export default {
background-position-y: 22px; background-position-y: 22px;
} }
.right { .right {
width: 770px; width: 770px;
margin-left: 100px; margin-left: 100px;
margin-top: 24px; margin-top: 24px;
.info-inner { .info-inner {
margin-left: 10px; margin-left: 10px;
@ -392,7 +383,6 @@ export default {
border-radius: 2px; border-radius: 2px;
} }
.baseTitle { .baseTitle {
@ -404,7 +394,6 @@ export default {
background: url("~@/assets/img/biaoti.png") no-repeat; background: url("~@/assets/img/biaoti.png") no-repeat;
background-position-y: 2px; background-position-y: 2px;
} }
.baseInner { .baseInner {
@ -438,7 +427,6 @@ export default {
height: 580px; height: 580px;
overflow: auto; overflow: auto;
} }
.icon-input ::v-deep .el-input__inner { .icon-input ::v-deep .el-input__inner {
@ -468,7 +456,7 @@ export default {
border: 1px solid #dcdfe6 !important; border: 1px solid #dcdfe6 !important;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.mod-sys__menu { .mod-sys__menu {
@ -558,4 +546,3 @@ export default {
display: block; display: block;
} }
</style> </style>

View File

@ -22,7 +22,6 @@
</div> </div>
</div> </div>
<!-- 挂载和修改 --> <!-- 挂载和修改 -->
<div class="right"> <div class="right">
<el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" <el-form :model="dataForm" :rules="rules" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
@ -140,14 +139,14 @@
</el-form> </el-form>
</div> </div>
<template slot="footer"> <template slot="footer">
<el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
<el-button @click="closeModal">{{ $t("cancel") }}</el-button> <el-button @click="closeModal">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">提交</el-button>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import qs from 'qs' import qs from 'qs'
@ -160,7 +159,6 @@ import InfrastructureModal from './components/infrastructure-modal.vue'
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
import upload from '@/views/modules/components/upload' import upload from '@/views/modules/components/upload'
export const getDescJson = (text) => { export const getDescJson = (text) => {
return { return {
descObj: { descObj: {
@ -187,20 +185,20 @@ export default {
AbilityAdd AbilityAdd
}, },
watch: { watch: {
dataForm: { dataForm: {
handler(newVal) { handler (newVal) {
this.dataForm = newVal this.dataForm = newVal
}, },
deep: true, deep: true,
immediate: true immediate: true
}, },
cityVisible: { cityVisible: {
handler(newVal) { handler (newVal) {
this.getSceneArea() this.getSceneArea()
this.cityVisibleCopy = newVal this.cityVisibleCopy = newVal
if (this.modalType == 'add' && newVal) { if (this.modalType == 'add' && newVal) {
// localStorage.setItem('InfrastructureSearchData', JSON.stringify({})) // localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
this.getDetail(this.dataForm) this.getDetail(this.dataForm)
} }
}, },
@ -218,42 +216,42 @@ export default {
} }
}, },
data() { data () {
return { return {
domArr: [], domArr: [],
scrollTop: 0, scrollTop: 0,
selectNow: '', selectNow: '',
activeStepIndex: 0,// activeStepIndex: 0, //
activeStepIndexs: 0, activeStepIndexs: 0,
baseTypeList: [{ value: '视频资源', label: '视频资源' }, { value: '云资源', label: '云资源' }, { value: '其他', label: '其他' }], baseTypeList: [{ value: '视频资源', label: '视频资源' }, { value: '云资源', label: '云资源' }, { value: '其他', label: '其他' }],
componetTypeList: [{ value: '智能算法', label: '智能算法' }, { value: ' 图层服务', label: ' 图层服务' }, componetTypeList: [{ value: '智能算法', label: '智能算法' }, { value: ' 图层服务', label: ' 图层服务' },
{ value: '开发组件', label: '开发组件' }, { value: '业务组件', label: '业务组件' }], { value: '开发组件', label: '开发组件' }, { value: '业务组件', label: '业务组件' }],
dataTypeList: [{ value: '数据', label: '数据' }], dataTypeList: [{ value: '数据', label: '数据' }],
sceneAreas: [],// sceneAreas: [], //
steps: [{ 'name': '基本信息', 'id': "anchor1" }, steps: [{ name: '基本信息', id: 'anchor1' },
{ 'name': '场景痛点', 'id': "anchor2" }, { name: '场景痛点', id: 'anchor2' },
{ 'name': '解决方案', 'id': "anchor3" }, { name: '解决方案', id: 'anchor3' },
{ 'name': '使用能力', 'id': "anchor4" }, { name: '使用能力', id: 'anchor4' },
{ 'name': '构建步骤', 'id': "anchor5" }], { name: '构建步骤', id: 'anchor5' }],
fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload', fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
painKeyTextObj: getDescJson('痛点'), painKeyTextObj: getDescJson('痛点'),
solutionKeyTextObj: getDescJson('方案'), solutionKeyTextObj: getDescJson('方案'),
dataForm: { dataForm: {
district: 0,// district: 0, //
area: '',// area: '', //
infrastructureCount: null, infrastructureCount: null,
dataSourceCount: null, dataSourceCount: null,
componentCount: null, componentCount: null,
name: '', name: '',
applicationArea: '',// applicationArea: '', //
description: '', description: '',
sceneUrl: '', sceneUrl: '',
fuseAttrList: [ fuseAttrList: [
{ {
attrType: '构建步骤', attrType: '构建步骤',
attrValue: [{ question: '', answer: [{ 'answer': '' }, { 'answer': '' }] }] attrValue: [{ question: '', answer: [{ answer: '' }, { answer: '' }] }]
}, },
{ {
attrType: '基础设施', attrType: '基础设施',
@ -279,7 +277,7 @@ export default {
attrType: '服务图片', attrType: '服务图片',
attrValue: '' attrValue: ''
} }
], ]
}, },
rules: { rules: {
@ -318,7 +316,7 @@ export default {
abilityListObj: {}, abilityListObj: {},
imgData: [], imgData: [],
// //
handleExceed() { handleExceed () {
this.$message({ type: 'error', message: '最多支持一张图片上传' }) this.$message({ type: 'error', message: '最多支持一张图片上传' })
}, },
imageUrl: '' imageUrl: ''
@ -327,16 +325,14 @@ export default {
methods: { methods: {
handleStep (item, index) {
handleStep(item, index) {
this.activeStepIndex = index this.activeStepIndex = index
this.selectNow = item.id // this.selectNow = item.id //
let top = document.querySelector('#' + item.id).offsetTop - 100 const top = document.querySelector('#' + item.id).offsetTop - 100
document.querySelectorAll(".customClass .el-dialog__body")[0].scrollTop = top document.querySelectorAll('.customClass .el-dialog__body')[0].scrollTop = top
}, },
// //
getSceneArea() { getSceneArea () {
const params = { const params = {
topCategoryName: '应用资源' topCategoryName: '应用资源'
} }
@ -349,23 +345,22 @@ export default {
}) })
}, },
clearForm() { clearForm () {
this.$refs.dataForm && this.$refs.dataForm.resetFields() this.$refs.dataForm && this.$refs.dataForm.resetFields()
}, },
closeModal() { closeModal () {
this.$emit('closeModal') this.$emit('closeModal')
}, },
// //
updateDataForm(data) { updateDataForm (data) {
this.dataForm.fuseAttrList.map(v => { this.dataForm.fuseAttrList.map(v => {
if (v.attrType === data.title) { if (v.attrType === data.title) {
v.attrValue = data.list v.attrValue = data.list
} }
}) })
}, },
// //
updateCount(data) { updateCount (data) {
if (data.title === '基础设施') { if (data.title === '基础设施') {
this.dataForm.infrastructureCount = data.count this.dataForm.infrastructureCount = data.count
} }
@ -375,13 +370,11 @@ export default {
if (data.title === '数据资源') { if (data.title === '数据资源') {
this.dataForm.dataSourceCount = data.count this.dataForm.dataSourceCount = data.count
} }
}, },
// //
dataFormSubmitHandle: debounce( dataFormSubmitHandle: debounce(
function () { function () {
this.$refs.dataForm.validate((valid) => { this.$refs.dataForm.validate((valid) => {
if (!valid) { if (!valid) {
this.$message.error('请检查表单是否填写完整') this.$message.error('请检查表单是否填写完整')
@ -401,13 +394,12 @@ export default {
type: '赋能场景' type: '赋能场景'
}) })
this.dataForm.fuseAttrList.forEach(item => { this.dataForm.fuseAttrList.forEach(item => {
if(item.attrType!=='服务图片'){ if (item.attrType !== '服务图片') {
item.attrValue = JSON.stringify(item.attrValue); item.attrValue = JSON.stringify(item.attrValue)
} }
}) })
this.$http this.$http
[methodsObj[this.modalType]]('/fuse', _obj) [methodsObj[this.modalType]]('/fuse', _obj)
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg)
@ -432,7 +424,7 @@ export default {
{ leading: true, trailing: false } { leading: true, trailing: false }
), ),
// //
getDetail(data) { getDetail (data) {
this.dataForm = data this.dataForm = data
this.$nextTick(() => { this.$nextTick(() => {
for (const key in this.refsParseArray) { for (const key in this.refsParseArray) {
@ -440,19 +432,15 @@ export default {
} }
const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {} const _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {}
this.imageUrl = _imgObj.attrValue this.imageUrl = _imgObj.attrValue
}) })
}, },
handleAvatarSuccess(res, file) { handleAvatarSuccess (res, file) {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg)
} }
this.imageUrl = res.data this.imageUrl = res.data
}, },
beforeAvatarUpload(file) { beforeAvatarUpload (file) {
const isImage = const isImage =
file.type === 'image/jpeg' || file.type === 'image/jpeg' ||
file.type === 'image/jpg' || file.type === 'image/jpg' ||
@ -462,11 +450,11 @@ export default {
} }
return isImage return isImage
}, },
addUploadRemoveFile(file, fileList) { addUploadRemoveFile (file, fileList) {
this.$refs.addUpload.clearFiles() this.$refs.addUpload.clearFiles()
this.imageUrl = '' this.imageUrl = ''
}, },
editBeforeAvatarUpload(file) { editBeforeAvatarUpload (file) {
const isImage = const isImage =
file.type === 'image/jpeg' || file.type === 'image/jpeg' ||
file.type === 'image/jpg' || file.type === 'image/jpg' ||
@ -477,58 +465,49 @@ export default {
} }
return isImage return isImage
}, },
editUploadRemoveFile(file, fileList) { editUploadRemoveFile (file, fileList) {
this.$refs.editUpload.clearFiles() this.$refs.editUpload.clearFiles()
this.imageUrl = '' this.imageUrl = ''
}, },
eidtHandleAvatarSuccess(res, file) { eidtHandleAvatarSuccess (res, file) {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg) return this.$message.error(res.msg)
} }
this.imageUrl = res.data this.imageUrl = res.data
} }
}, },
mounted() { mounted () {
const that = this; const that = this
this.$nextTick(() => { this.$nextTick(() => {
document.querySelector(".el-dialog__body").onscroll = function () { document.querySelector('.el-dialog__body').onscroll = function () {
const top = document.querySelectorAll('.customClass .el-dialog__body')[0].scrollTop - 100
let top = document.querySelectorAll(".customClass .el-dialog__body")[0].scrollTop - 100
if (top < document.querySelector('#anchor1').offsetTop - 100) { if (top < document.querySelector('#anchor1').offsetTop - 100) {
that.activeStepIndexs = 0 that.activeStepIndexs = 0
} } else if (top < document.querySelector('#anchor2').offsetTop - 100) {
else if (top < document.querySelector('#anchor2').offsetTop - 100) {
that.activeStepIndexs = 1 that.activeStepIndexs = 1
} } else if (top < document.querySelector('#anchor3').offsetTop - 100) {
else if (top < document.querySelector('#anchor3').offsetTop - 100) {
that.activeStepIndexs = 2 that.activeStepIndexs = 2
} } else if (top < document.querySelector('#anchor4').offsetTop - 100) {
else if (top < document.querySelector('#anchor4').offsetTop - 100) {
that.activeStepIndexs = 3 that.activeStepIndexs = 3
} } else if (top < document.querySelector('#anchor5').offsetTop - 100) {
else if (top < document.querySelector('#anchor5').offsetTop - 100) {
that.activeStepIndexs = 4 that.activeStepIndexs = 4
} else { } else {
that.activeStepIndexs = 0 that.activeStepIndexs = 0
} }
if (that.activeStepIndex !== that.activeStepIndexs) { if (that.activeStepIndex !== that.activeStepIndexs) {
that.activeStepIndex = that.activeStepIndexs; that.activeStepIndex = that.activeStepIndexs
that.$forceUpdate(); that.$forceUpdate()
} }
} }
}) })
}, },
beforeDestroy() { beforeDestroy () {
this.clearForm() this.clearForm()
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fixed { .fixed {
position: sticky; position: sticky;
@ -632,9 +611,6 @@ export default {
border: 4px solid #1160e2; border: 4px solid #1160e2;
} }
.advice { .advice {
font-size: 10px; font-size: 10px;
color: #1160e2; color: #1160e2;
@ -653,7 +629,6 @@ export default {
margin-left: 157px; margin-left: 157px;
margin-top: -5px; margin-top: -5px;
.info-inner { .info-inner {
margin-left: 10px; margin-left: 10px;
@ -670,7 +645,6 @@ export default {
border-radius: 2px; border-radius: 2px;
} }
.baseTitle { .baseTitle {
@ -682,7 +656,6 @@ export default {
background: url("~@/assets/img/biaoti.png") no-repeat; background: url("~@/assets/img/biaoti.png") no-repeat;
background-position-y: 2px; background-position-y: 2px;
} }
.baseInner { .baseInner {
@ -716,7 +689,6 @@ export default {
height: 580px; height: 580px;
overflow: auto; overflow: auto;
} }
.icon-input ::v-deep .el-input__inner { .icon-input ::v-deep .el-input__inner {
@ -746,7 +718,7 @@ export default {
border: 1px solid #dcdfe6 !important; border: 1px solid #dcdfe6 !important;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.mod-sys__menu { .mod-sys__menu {
@ -836,4 +808,3 @@ export default {
display: block; display: block;
} }
</style> </style>