Compare commits

...

2 Commits

11 changed files with 681 additions and 441 deletions

View File

@ -21,7 +21,7 @@
<el-form-item label="赋能领域:" prop="unit"> <el-form-item label="赋能领域:" prop="unit">
<el-select v-model="dataForm.applicationArea" placeholder="请选择"> <el-select v-model="dataForm.applicationArea" placeholder="请选择">
<el-option v-for="item in sceneAreas" :key="item.data" :label="item.dict_label" <el-option v-for="item in sceneAreas" :key="item.data" :label="item.dict_label"
:value="item.dict_value"></el-option> :value="item.dict_label"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="场景名称:" prop="name"> <el-form-item label="场景名称:" prop="name">

View File

@ -36,7 +36,7 @@
<el-form-item label="赋能领域:" prop="unit"> <el-form-item label="赋能领域:" prop="unit">
<el-select v-model="dataForm.applicationArea" placeholder="请选择"> <el-select v-model="dataForm.applicationArea" placeholder="请选择">
<el-option v-for="item in sceneAreas" :key="item.data" :label="item.dict_label" <el-option v-for="item in sceneAreas" :key="item.data" :label="item.dict_label"
:value="item.dict_value"></el-option> :value="item.dict_label"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="场景名称:" prop="name"> <el-form-item label="场景名称:" prop="name">

View File

@ -588,3 +588,11 @@ export function sysnoticemanagement(params) {
params, params,
}) })
} }
//
export function getRegion(params) {
return request({
url: '/sys/region/list/',
method: 'get',
params,
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -667,12 +667,23 @@
</script> </script>
<style> <style>
.ant-modal-footer { .ant-modal-footer {
display: block; display: block;
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
:deep(.ant-table-tbody > tr.ant-table-row-selected > td){
background: #e6eefb;
}
:deep(.ant-checkbox-checked .ant-checkbox-inner){
background-color: #0058e1;
}
:deep(.ant-checkbox-indeterminate .ant-checkbox-inner::after){
background-color: #0058e1;
}
.bg { .bg {
background: #fff; background: #fff;
height: 100vh; height: 100vh;
@ -884,6 +895,7 @@
.modal-box { .modal-box {
height: 650px; height: 650px;
width: 800px; width: 800px;
} }
.add-img { .add-img {

View File

@ -84,9 +84,9 @@ watch(
.caseBox { .caseBox {
width: 3.5rem; width: 3.5rem;
height: 3rem; height: 3rem;
box-shadow: 1px 1px 5px 5px rgba(222, 222, 222, 0.152); border: 1px solid #ebecef;
box-shadow: 1px 1px 5px 5px rgb(222 222 222 / 15%);
background: #ffffff; background: #ffffff;
border-radius: 0.05rem;
padding: 0.2rem; padding: 0.2rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
cursor: pointer; cursor: pointer;

View File

@ -189,6 +189,9 @@
}else if(newValue=='/demandDetails'){ }else if(newValue=='/demandDetails'){
select.value='demandCenter' select.value='demandCenter'
} }
else if(newValue=='/integrationServicesDetails'){
select.value='integrationServices'
}
}, },
{ immediate: true } { immediate: true }

View File

@ -969,6 +969,7 @@
// margin: 11px 0 20px; // margin: 11px 0 20px;
// background: #e5f2ff; // background: #e5f2ff;
// padding-left: 20px; // padding-left: 20px;
padding-top:10px;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;

View File

@ -408,18 +408,23 @@
:wrapper-col="{ span: 14, offset: 4 }" :wrapper-col="{ span: 14, offset: 4 }"
style="text-align: center; margin-top: 0.4rem" style="text-align: center; margin-top: 0.4rem"
> >
<a-button @click="appointmentRoom = false" type="primary" danger>
取消
</a-button>
<a-button <a-button
style="margin-left: 10px" class="tijiao"
type="primary"
@click="onSubmit" @click="onSubmit"
> >
提交 提交
</a-button> </a-button>
<a-button class="quxiao" @click="appointmentRoom = false" >
取消
</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-modal> </a-modal>
</div> </div>
<div v-if="room"> <div v-if="room">
@ -1210,7 +1215,7 @@
if (item && item.status != 1) { if (item && item.status != 1) {
return return
// return message.warning('线, ') // return message.warning('线, ')
} }handleChose
console.log('打开视频', id) console.log('打开视频', id)
const param = { const param = {
key: id, key: id,
@ -2515,6 +2520,38 @@
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.quxiao{
margin-right:12px;
cursor: pointer;
width: 90px;
height: 32px;
background: #ffffff;
color:#0058e1;
border-radius: 2px;
border: 1px #0058e1 solid;
}
.quxiao:hover{
background: #fff;
color: #0558e1;
opacity: 0.8;
}
.tijiao{
margin-right:12px;
cursor: pointer;
width: 90px;
height: 32px;
background: #0058e1;
color:#ffffff;
border-radius: 2px;
border: 1px #0058e1 solid;
margin-left:20px;
}
.tijiao:hover{
background: #0558e1;
color: #fff;
opacity: 0.8;
}
.queding { .queding {
margin-left: 16px; margin-left: 16px;
cursor: pointer; cursor: pointer;
@ -2862,10 +2899,20 @@
// } // }
} }
:deep(.ant-table-thead > tr > th) { :deep(.ant-table-thead > tr > th) {
color: #5580f7 !important; color: #0058e1 !important;
font-size: 16px !important; font-size: 16px !important;
font-weight: 600 !important; font-weight: 600 !important;
} }
:deep(.ant-table-tbody > tr.ant-table-row-selected > td){
background: #e6eefb;
}
:deep(.ant-checkbox-checked .ant-checkbox-inner){
background-color: #0058e1;
}
:deep(.ant-checkbox-indeterminate .ant-checkbox-inner::after){
background-color: #0058e1;
}
</style> </style>
<style lang="less"> <style lang="less">
.eia-dropdown-class { .eia-dropdown-class {
@ -2897,16 +2944,19 @@
.appModal { .appModal {
.ant-modal-body { .ant-modal-body {
height: 4.8rem !important; height: 3.8rem !important;
overflow-y: scroll !important; overflow-y: scroll !important;
} }
.ant-modal-title { .ant-modal-title {
font-weight: 600; font-weight: 600;
color:#fff;
} }
.ant-modal-content { .ant-modal-content {
.ant-modal-header { .ant-modal-header {
background: #0058e1;
margin-bottom: 16px;
border-bottom: 0 !important; border-bottom: 0 !important;
} }
} }

View File

@ -1,90 +1,92 @@
<template> <template>
<!-- 青岛 --> <!-- 青岛 -->
<div class="details-pageconetent">
<home-header></home-header>
<div class="top">
<div class="top-title"> <div class="top-title">
全部
<div <div v-for="item in titleName" :key="item.index" class="tabAll" @click="changeCards(item.index)"
v-for="item in titleName" :class="{ sel: item.index === number }">
:key="item.index"
class="tabAll"
@click="changeCards(item.index)"
:class="{ sel: item.index === number }"
>
<span> <span>
{{ item.name === '赋能场景' ? '典型赋能场景' : '打包模式' }} {{ item.name === '赋能场景' ? '典型赋能场景' : '打包模式' }}
</span> </span>
</div> </div>
</div> </div>
<div class="resultListSearchInput-father" v-if="number === 0"> <div class="details-pageconetent">
<div class="resultListSearchInput-son"> <home-header></home-header>
模糊搜索 <div class="top">
<a-input-search
v-model:value="searchValue"
placeholder="请输入关键词"
enter-button="搜索"
size="large"
@search="getIntegrationList"
@change="onSearch"
class="resultListSearchInput"
/>
<i class="searchImg" aria-hidden="true"></i>
<button class="button-reset" @click="resetAction()">重置</button>
<div class="hengxian"></div> <div class="resultListSearchInput-father" v-if="number === 0">
<div class="second-title">
<div :class="[cityOrArea === 0 ? 'departmentStyle' : 'departmentStyle1']" @click="handleChose(0)">
<img src="~@/assets/home/city.png" /> 市级领域场景
<div :class="cityOrArea === 0 ? 'sanjiao' : ''"></div>
</div>
<div :class="[cityOrArea === 1 ? 'departmentStyle' : 'departmentStyle1']" @click="handleChose(1)">
<img src="~@/assets/home/area.png" /> 基层场景
<div :class="cityOrArea === 1 ? 'sanjiao' : ''"></div>
</div>
</div>
<div class="resultListSearchInput-son">
<div class="son-input">
<a-input-search v-model:value="searchValue" placeholder="请输入关键字" enter-button="搜索" size="large"
@search="getIntegrationList" @change="onSearch" class="resultListSearchInput" />
<i class="searchImg" aria-hidden="true"></i>
<!-- <button class="button-reset" @click="resetAction()">重置</button> -->
</div>
<div>
<div class="all">全部</div>
<div class="choose-tab" v-if="cityOrArea === 0">
<span v-for="item in senses" :key="item.data" @click="tabSensesClick(item.dict_label)" :class="
clickSensesList.indexOf(item.dict_label) != -1
? 'down'
: ''
">
{{ item.dict_label }}
</span>
</div>
<div v-else class="choose-tab">
<span v-for="item in areas" :key="item.data" @click="tabAreasClick(item.name)" :class="
clickAreasList.indexOf(item.name) != -1
? 'down'
: ''
">
{{ item.name }}
</span>
</div> </div>
</div> </div>
<div v-if="number === 0" class="checkResult">检测结果: <span>{{resourceTotal}}</span></div> </div>
</div>
<div style="background:#fff;margin-left:16px;margin-right:16px;">
<div v-if="number === 0" class="checkResult">检测结果: <span>{{ resourceTotal }}</span></div>
<div v-loading="loadingData"> <div v-loading="loadingData">
<searchResultList <searchResultList v-if="number === 1" v-show="resourceList.data && resourceList.data.length > 0"
v-if="number === 1" :resourceList="resourceList" :resourceTotal="resourceTotal" @saveSearchCodition="saveSearchCodition"
v-show="resourceList.data && resourceList.data.length > 0" ref="searchResultListDom" :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
:resourceList="resourceList" <CanAssignCase v-else v-show="resourceList.data && resourceList.data.length > 0" :resourceList="resourceList"
:resourceTotal="resourceTotal" @saveSearchCodition="saveSearchCodition" :resourceTotal="resourceTotal"
@saveSearchCodition="saveSearchCodition" :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
ref="searchResultListDom"
:selectCardsname="number == 0 ? '融合服务' : '赋能场景'"
/>
<CanAssignCase
v-else
v-show="resourceList.data && resourceList.data.length > 0"
:resourceList="resourceList"
@saveSearchCodition="saveSearchCodition"
:resourceTotal="resourceTotal"
:selectCardsname="number == 0 ? '融合服务' : '赋能场景'"
/>
<div class="pagination"> <div class="pagination">
<a-pagination <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
v-if="resourceList.data && resourceList.data.length > 0" v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper
v-model:current="currentPage" :total="resourceTotal" :page-size-options="pageSizeOptions" @change="pageChange"
v-model:pageSize="currentPageSize" @showSizeChange="onShowSizeChange" />
show-size-changer
show-less-items
show-quick-jumper
:total="resourceTotal"
:page-size-options="pageSizeOptions"
@change="pageChange"
@showSizeChange="onShowSizeChange"
/>
</div> </div>
<div <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
v-if="resourceList.data && resourceList.data.length <= 0"
style="margin-top: 2rem"
>
<a-empty /> <a-empty />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<home-footer></home-footer> <home-footer></home-footer>
</template> </template>
<script> <script>
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import qs from 'qs'
import { import {
defineComponent, defineComponent,
reactive, reactive,
@ -93,14 +95,14 @@
onMounted, onMounted,
nextTick, nextTick,
} from 'vue' } from 'vue'
import { getIntegrationServicesList } from '@/api/home.js' import { getIntegrationServicesList, getRegion, selectDicStoreAll } from '@/api/home.js'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import searchResultList from '@/views/home/components/searchResultList.vue' import searchResultList from '@/views/home/components/searchResultList.vue'
import CanAssignCase from '@/views/home/components/CanAssignCase.vue' import CanAssignCase from '@/views/home/components/CanAssignCase.vue'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
export default defineComponent({ export default defineComponent({
beforeRouteLeave(to, from, next) { beforeRouteLeave(to, from, next) {
console.log('to---integrationServices--beforeRouteLeave------->', to) console.log('to---integrationServices--beforeRouteLeave------->', to)
console.log('from---integrationServices--beforeRouteLeave------->', from) console.log('from---integrationServices--beforeRouteLeave------->', from)
@ -147,7 +149,15 @@
name: searchValue.value, name: searchValue.value,
orderField: 'create_date', orderField: 'create_date',
orderType: 'DESC', // ASC DESC orderType: 'DESC', // ASC DESC
areas:[],
senses:[],
district: 1,//01
} }
let cityOrArea = ref(0)//0 1
let senses = ref([])//
let areas = ref([])//
let clickSensesList = ref([])//
let clickAreasList = ref([])//
const searchResultListDom = ref(null) const searchResultListDom = ref(null)
const storageSearchInfo = JSON.parse( const storageSearchInfo = JSON.parse(
localStorage.getItem('integrationServices') localStorage.getItem('integrationServices')
@ -180,12 +190,34 @@
} }
const changeCards = (val) => { const changeCards = (val) => {
//
number.value = val number.value = val
paramsGetResources.type = titleName.value[number.value].name paramsGetResources.type = titleName.value[number.value].name
resetAction() resetAction()
} }
//
const handleChose = (index) => {
cityOrArea.value = index;
getIntegrationList()
}
//
const tabAreasClick = (name) => {
if (clickAreasList.value.indexOf(name) == -1) {
clickAreasList.value.push(name);
} else {
clickAreasList.value.splice(clickAreasList.value.indexOf(name), 1)
}
getIntegrationList()
}
//
const tabSensesClick = (name) => {
if (clickSensesList.value.indexOf(name) == -1) {
clickSensesList.value.push(name);
} else {
clickSensesList.value.splice(clickSensesList.value.indexOf(name), 1)
}
getIntegrationList()
}
// //
const onSearch = () => { const onSearch = () => {
currentPage.value = 1 currentPage.value = 1
@ -203,21 +235,48 @@
paramsGetResources.limit = 10 paramsGetResources.limit = 10
paramsGetResources.orderField = 'create_date' paramsGetResources.orderField = 'create_date'
paramsGetResources.orderType = 'DESC' paramsGetResources.orderType = 'DESC'
mybus.emit('resetAction', { mybus.emit('resetAction', {
type: titleName.value[number.value].name, type: titleName.value[number.value].name,
}) })
getIntegrationList() getIntegrationList()
} }
//
const searchAreas = () => {
const params = {
topCategoryName: '应用资源'
}
selectDicStoreAll(params).then(
(res) => {
senses.value = res.data.data[0].typeList
console.log("==================== senses.value", senses.value)
})
const params1 = {
pid: '250000'
}
getRegion(params1).then(
(res) => {
areas.value = res.data.data
})
}
// //
const getIntegrationList = () => { const getIntegrationList = () => {
loadingData.value = true loadingData.value = true
paramsGetResources.name = searchValue.value paramsGetResources.name = searchValue.value
console.log( if(number.value==1){
'paramsGetResources------参数下发------>', paramsGetResources.district=''
paramsGetResources }else{
) if(cityOrArea.value==0){//
paramsGetResources.district=0
paramsGetResources.areas=[]
paramsGetResources.senses=JSON.stringify(clickSensesList.value)
}else{//
paramsGetResources.district=1
paramsGetResources.senses=[]
paramsGetResources.areas=JSON.stringify(clickAreasList.value)
}
}
getIntegrationServicesList(paramsGetResources).then( getIntegrationServicesList(paramsGetResources).then(
(res) => { (res) => {
loadingData.value = false loadingData.value = false
@ -291,17 +350,20 @@
} }
onMounted(() => { onMounted(() => {
if(returnType=='典型赋能场景'){ searchAreas()
if (returnType == '典型赋能场景') {
changeCards(0) changeCards(0)
}else if(returnType=='打包模式'){
} else if (returnType == '打包模式') {
changeCards(1) changeCards(1)
}else{ } else {
if (storageSearchInfo) { if (storageSearchInfo) {
handleSetSearchData() handleSetSearchData()
} else { } else {
getIntegrationList() getIntegrationList()
} }
} }
// if (storageSearchInfo) { // if (storageSearchInfo) {
// handleSetSearchData() // handleSetSearchData()
// } else { // } else {
@ -310,6 +372,9 @@
}) })
return { return {
tabSensesClick,
tabAreasClick,
searchValue, searchValue,
currentPage, currentPage,
resourceList, resourceList,
@ -327,9 +392,16 @@
returnType, returnType,
number, number,
loadingData, loadingData,
cityOrArea,
onShowSizeChange, onShowSizeChange,
saveSearchCodition, saveSearchCodition,
handleChose,
searchAreas,
senses,
areas,
searchResultListDom, searchResultListDom,
clickSensesList,
clickAreasList,
} }
}, },
components: { components: {
@ -344,29 +416,142 @@
mybus.off('refresh') mybus.off('refresh')
mybus.off('changePage') mybus.off('changePage')
}, },
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.checkResult{ .top-title {
margin-left: 0.2rem;
font-size: 14px; display: flex;
font-weight: 500; font-size: 20px;
margin-top: 65px;
background: #e5eefc;
opacity: 0.8;
height: 72px;
.tabAll {
color: #212121; color: #212121;
margin-top: 10px; margin-right: 35px;
cursor: pointer;
margin-top: 24px;
text-align: center;
width: 240px;
padding-top: 8px;
}
.tabAll:nth-child(1) {
margin-left: 720px;
}
.sel {
border-top: 2px solid #0058e1;
height: 48px;
background: #fff;
width: 240px;
span { span {
font-size: 18px; font-weight: bold;
color: #0087ff; }
} }
} }
.resultListSearchInput-father {
.checkResult {
margin-left: 16px;
font-size: 14px;
font-weight: 500;
color: #212121;
margin-top: 16px;
margin-bottom: 16px;
span {
font-size: 18px;
color: #0058e1;
}
}
.resultListSearchInput-father {
background: #f3f5f9; background: #f3f5f9;
padding: 0rem 0.2rem; margin-bottom:24px;
.sanjiao {
background: url('~@/assets/home/sanjiao.png');
background-repeat: no-repeat;
height: 10px;
width: 10px;
margin-left: 80px;
position: absolute;
}
.second-title {
padding-top: 16px;
margin-bottom: 16px;
font-size: 18px;
cursor: pointer;
text-align: center;
vertical-align: bottom;
background: #fff;
height: 53px;
border-bottom: 1px solid #d9d9d9;
}
.departmentStyle {
float: left;
width: 180px;
// color: #0058e1;
background-color: #fff;
border-bottom: 3px solid #0058e1;
}
.departmentStyle1 {
float: left;
width: 180px;
}
.resultListSearchInput-son { .resultListSearchInput-son {
background: #fff; .son-input {
padding: 0.2rem 0.2rem 0rem 0.3rem; margin: 24px 0px 12px 340px;
}
// background: #fff;
//padding: 0.2rem 0.2rem 0rem 0.3rem;
.all {
float: left;
display: inline;
width: 42px;
margin-top: 12px;
margin-left: 100px;
font-size: 14px;
font-weight: bold;
}
.choose-tab {
float: left;
display: inline;
width: 940px;
span {
display: inline-block;
height: 28px;
font-size: 14px;
width: 90px;
line-height: 28px;
border-radius: 1px;
margin-left: 14px;
text-align: center;
color: #212121;
background: #e8e9eb;
cursor: pointer;
margin-top: 12px;
}
.down {
background: #0058e1;
color: #ffffff;
}
}
.hengxian { .hengxian {
width: 100%; width: 100%;
@ -374,29 +559,30 @@
background: rgba(150, 144, 144, 0.3); background: rgba(150, 144, 144, 0.3);
margin-top: 0.2rem; margin-top: 0.2rem;
} }
.searchImg{
.searchImg {
width: 17px; width: 17px;
height: 17px; height: 17px;
background: url('~@/assets/home/searchInner.png'); background: url('~@/assets/home/searchInner.png');
position: absolute; position: absolute;
top: 119px; top: 85px;
left: 500px; left: 668px;
}
} }
} }
}
.resultListSearchInput { .resultListSearchInput {
margin-left: 0.1rem; margin-left: 0.1rem;
:deep(.ant-input) { :deep(.ant-input) {
width: 4rem; width: 340px;
height: 0.32rem; height: 0.32rem;
background: #fff; background: #fff;
border-radius: 0.02rem; border-radius: 0.02rem;
} }
:deep(.ant-input-search-button) { :deep(.ant-input-search-button) {
width: 0.8rem; // width: 56px;
height: 0.32rem; height: 0.32rem;
background: #0558e1; background: #0558e1;
border-radius: 0.02rem !important; border-radius: 0.02rem !important;
@ -410,12 +596,12 @@
:deep(.ant-input-group-addon) { :deep(.ant-input-group-addon) {
left: 0 !important; left: 0 !important;
} }
} }
.button-reset { .button-reset {
border: 0; border: 0;
outline: none; outline: none;
width: 0.8rem; width: 56px;
height: 0.32rem; height: 0.32rem;
//background: #e1edfa; //background: #e1edfa;
background: #0558e1; background: #0558e1;
@ -427,15 +613,15 @@
line-height: 0.32rem; line-height: 0.32rem;
margin-left: 2.5rem; margin-left: 2.5rem;
cursor: pointer; cursor: pointer;
} }
.details-pageconetent { .details-pageconetent {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 0.67rem; //margin-top: 0.67rem;
position: relative; position: relative;
background: rgba(245, 243, 243, 0.3); background: rgba(245, 243, 243, 0.3);
@ -454,7 +640,7 @@
position: relative; position: relative;
width: 11.5rem; width: 11.5rem;
display: flex; display: flex;
padding-top: 0.2rem; // padding-top: 0.2rem;
flex-direction: column; flex-direction: column;
font-size: 0.16rem; font-size: 0.16rem;
justify-content: left; justify-content: left;
@ -462,39 +648,19 @@
.pagination { .pagination {
background: #f3f5f9; background: #f3f5f9;
padding-bottom: 0.6rem; padding-top: 10px;
padding-bottom: 23px;
} }
.top-title {
padding: 0.2rem;
display: flex;
font-size: 18px;
.tabAll {
font-size: 18px;
color: #000000;
margin-right: 35px;
cursor: pointer;
} }
}
.tabAll:nth-child(1) { :deep(.ant-card-grid) {
margin-left: 20px;
}
.sel {
font-weight: 600;
color: #0087ff;
border-bottom: 0.02rem solid #0087ff;
}
}
}
}
:deep(.ant-card-grid) {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
word-break: break-all; word-break: break-all;
} }
</style> </style>