From f76cb3ced0374bfe153055166726ebb41c5ec170 Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Mon, 31 Jul 2023 16:59:16 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E6=88=BF=E6=BA=90?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=86=85=E5=AE=B9=E6=8D=A2=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../biserialListItem/biserialListItem.vue     |  86 +++++----
 src/components/detail/breadcrumb.vue          |   1 +
 src/views/HomeView.vue                        |  30 +--
 src/views/detail.vue                          | 180 +++++++++---------
 4 files changed, 157 insertions(+), 140 deletions(-)

diff --git a/src/components/biserialListItem/biserialListItem.vue b/src/components/biserialListItem/biserialListItem.vue
index 3c0add4..d738ff7 100644
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/src/components/biserialListItem/biserialListItem.vue
@@ -1,7 +1,8 @@
 <template>
-    <div class="item" ref="list" @click="watchInfo" :class="{'s-w-100':detailShow}">
-        <img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow&&pageType==1" alt="">
-        <img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow&&pageType==2" alt="">
+    <div class="item" ref="list" @click="watchInfo" :class="{ 's-w-100': detailShow }">
+        <img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow && pageType == 1" alt="">
+        <img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow && pageType == 2"
+            alt="">
         <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
             <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
             <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
@@ -19,7 +20,7 @@
                         </div>
                         <div class="tab-item mg-l-8"
                             v-if="listData.data && listData.data.type[data && data.data && data.data.type]">
-                            {{  listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
+                            {{ listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
                         </div>
                         <div class="tab-item mg-l-8"
                             v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
@@ -39,33 +40,42 @@
                             }}
                         </div>
                     </div>
-                    <div class="address-text dis-f al-item" v-if="data && data.data && data.data.location">
+                    <div class="address-text dis-f al-item"
+                        v-if="data && data.data && data.data.location && !Array.isArray(data.data.location)">
                         <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
-                        <span v-if="!Array.isArray(data.data.location)">{{
+                        <span>{{
                             location && location.data && location.data[1] ? `${location && location.data &&
                             location.data[data && data.data && data.data.location && data.data.location.substring(0, 1)]} >
                                                     ${location &&
                         location.data[data && data.data && data.data.location]}` : ''
                         }}</span>
-                        <span v-if="Array.isArray(data.data.location)">{{
-                            location && location.data && location.data[data && data.data &&
-                                data.data.location && data.data.location[0].substring(0, 1)]
-                        }}>
-                            <span v-for="(item, i) in data.data.location">
-                                {{ location &&
-                                    location.data[item] }}
-                            </span>
-                        </span>
                     </div>
+                    <div class="dis-f" style="flex-wrap: wrap;"
+                        v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
+                        <div class="address-text dis-f al-item mg-r-15" v-if="data && data.data && data.data.location"
+                            v-for="(item, i) in data.data.location" :key="i">
+                            <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
+                            <span>{{
+                                location && location.data && location.data[1] ? `${location && location.data &&
+                                location.data[item.substring(0,
+                                    1)]} >
+                                                            ${location &&
+                            location.data[item]}` : ''
+                            }}</span>
+                        </div>
+                    </div>
+
                     <div class="price-text dis-f" style="align-items: end;">
                         <span class="unit">HK$</span>
                         <span class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
                             && data.data.rent }}</span>
-                        <span class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data &&
+                        <span class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
+                            &&
                             data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</span>
-                        <span>/{{data && data.data && data.data.rentalperiod}}</span>
-                        <span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ listData.data.rentalduration[data.data && data.data.rentalduration] 
-                             }}]</span>
+                        <span>/{{ data && data.data && data.data.rentalperiod }}</span>
+                        <span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{
+                            listData.data.rentalduration[data.data && data.data.rentalduration]
+                        }}]</span>
                     </div>
                 </div>
                 <div class="img">
@@ -84,7 +94,7 @@
             <img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
                 alt="">
         </div>
-        <div class="btm-box dis-f al-item" :class="{'jus-bet':detailShow}">
+        <div class="btm-box dis-f al-item" :class="{ 'jus-bet': detailShow }">
             <div class="dis-f al-item">
                 <img :src="data && data.data && data.data.avatar" class="user-img" alt="">
                 <span class="user-name">{{ data && data.data && data.data.author }}</span>
@@ -97,7 +107,7 @@
                     data.data.intermediary_text
                 }}</div>
                 <img src="../../assets/homeImage/intermediaryTabImg.png"
-                v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
+                    v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
             </div>
             <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
                 v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
@@ -156,17 +166,17 @@ location.data = store.state.indexData && store.state.indexData.config && store.s
 
 //数据包
 let listData = reactive({ data: {} })
-listData.data = store.state.indexData && store.state.indexData.config||{}
+listData.data = store.state.indexData && store.state.indexData.config || {}
 
-let pageType=ref('')
+let pageType = ref('')
 
 //跳转
 let router = useRouter()
 let watchInfo = () => {
-    let seachData=router.currentRoute.value.query
-    if(pageType.value===4){
-        for(let key in data){
-            store.state.seachSelect['seachPage'][key]=seachData[key]
+    let seachData = router.currentRoute.value.query
+    if (pageType.value === 4) {
+        for (let key in data) {
+            store.state.seachSelect['seachPage'][key] = seachData[key]
         }
     }
     router.push({
@@ -179,7 +189,7 @@ let watchInfo = () => {
 
 onMounted(() => {
     imgRef = getCurrentInstance()
-    pageType.value=data.data.intermediary===1?2:data.data.intermediary===6?3:1 
+    pageType.value = data.data.intermediary === 1 ? 2 : data.data.intermediary === 6 ? 3 : 1
 })
 
 </script>
@@ -257,13 +267,13 @@ img {
     margin-bottom: 20px;
     cursor: pointer;
 
-    .detail-tab{
-        width:32px;
-        height:32px;
+    .detail-tab {
+        width: 32px;
+        height: 32px;
         position: absolute;
-        top:0;
-        right:0;
-        z-index:66;
+        top: 0;
+        right: 0;
+        z-index: 66;
     }
 
     .mg-t-20 {
@@ -311,6 +321,7 @@ img {
             font-size: 18px;
             color: #000000;
             text-align: left;
+            word-wrap: break-word;
         }
 
         .mg-l-8 {
@@ -318,7 +329,7 @@ img {
         }
 
         .tab-item {
-            padding:2px 5px;
+            padding: 2px 5px;
             background: inherit;
             background-color: rgba(242, 242, 242, 1);
             border: none;
@@ -334,6 +345,10 @@ img {
             text-align: center;
         }
 
+        .mg-r-15 {
+            margin-right: 15px;
+        }
+
         .address-text {
             font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
             font-weight: 400;
@@ -342,6 +357,7 @@ img {
             color: #555555;
             margin-top: 20px;
 
+
             .img {
                 width: 18px;
                 height: 18px;
diff --git a/src/components/detail/breadcrumb.vue b/src/components/detail/breadcrumb.vue
index c58291e..959d33d 100644
--- a/src/components/detail/breadcrumb.vue
+++ b/src/components/detail/breadcrumb.vue
@@ -260,6 +260,7 @@ img {
             color: #000000;
             line-height: 35px;
             width: 820px;
+            word-wrap:break-word;
         }
 
         .tool-btn-box {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c61012c..0e0334a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -115,14 +115,14 @@
         <div class="waterfall-box s-w-100" ref="list" v-show="waterfallList.length > 0">
           <div class="waterfall-first-box item dis-f al-item jus-x" style="flex-wrap: wrap;">
             <div v-for="(item, i) in indexData.data.tabs" :key="i" class="info-box dis-f al-item jus-x"
-            :class="[i==0?'first':i==1?'second':i==2?'third':'']"
-              style="flex-wrap: wrap;" @click="housingPage(item.path)">
+              :class="[i == 0 ? 'first' : i == 1 ? 'second' : i == 2 ? 'third' : '']" style="flex-wrap: wrap;"
+              @click="housingPage(item.path)">
               <div>
                 <div class="img-box dis-f jus-x al-item">
-                  <img src="../assets/homeImage/person.png" alt="" v-if="i==0" class="img">
-                  <img src="../assets/homeImage/intermediary.png" alt="" v-if="i==1" class="img">
-                  <img src="../assets/homeImage/brand.png" alt="" v-if="i==2" class="img">
-                  <img src="../assets/homeImage/seek.png" alt="" v-if="i==3" class="img">
+                  <img src="../assets/homeImage/person.png" alt="" v-if="i == 0" class="img">
+                  <img src="../assets/homeImage/intermediary.png" alt="" v-if="i == 1" class="img">
+                  <img src="../assets/homeImage/brand.png" alt="" v-if="i == 2" class="img">
+                  <img src="../assets/homeImage/seek.png" alt="" v-if="i == 3" class="img">
                 </div>
                 <div class="text-center s-w-100">
                   {{ item.name }}
@@ -187,13 +187,13 @@ watchEffect(() => {
   ListSelectBtn.data = store.state.ListSelectBtn
   if (indexData.data.tabs.length) {
     indexData.data.tabs.map(res => {
-      if (res.url==='/pages/personList/personList') {
+      if (res.url === '/pages/personList/personList') {
         res.path = '/personHousing'
-      } else if (res.url==='/pages/personList/personList?intermediary=1') {
+      } else if (res.url === '/pages/personList/personList?intermediary=1') {
         res.path = '/intermediaryHousing'
-      } else if (res.url==="/pages/restOfWorld/restOfWorld") {
+      } else if (res.url === "/pages/restOfWorld/restOfWorld") {
         res.path = '/needHousing'
-      } else if (res.url==='/pages/irentList/irentList') {
+      } else if (res.url === '/pages/irentList/irentList') {
         res.path = '/apartment'
       }
     })
@@ -247,6 +247,7 @@ let getRecommendList = () => {
         waterfallList.value = waterfallList.value.concat(res.data.data)
         pagevalue.value = res.data.pagevalue
       }
+      console.log(waterfallList.value)
       if (res.data.data.length >= 30) {
         loadMore.value = true
         loadText.value = '下拉加载更多'
@@ -255,8 +256,11 @@ let getRecommendList = () => {
         loadText.value = '到底了'
       }
       nextTick(() => {
-        listMasonryInstance.reloadItems();
-        listMasonryInstance.layout();
+        setTimeout(() => {
+          listMasonryInstance.reloadItems();
+          listMasonryInstance.layout();
+        })
+
       })
     } else {
       ElMessage({
@@ -321,7 +325,7 @@ let personHouseingInfo = (type, data, areaItem) => {
 }
 
 //跳转房源页
-let housingPage=(path)=>{
+let housingPage = (path) => {
   router.push({
     path: path,
   })
diff --git a/src/views/detail.vue b/src/views/detail.vue
index 07c3209..6e8e92f 100644
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -4,86 +4,86 @@
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
                 <breadcrumb :data="housingInfo['data']" :operation='setOperation'></breadcrumb>
-                <el-affix :offset="0" @change="changeTitleType" z-index="666">
-                    <div class="top-bar-box dis-f jus-x" v-if="titleType">
-                        <div class="top-bar dis-f al-item jus-bet">
-                            <div class="dis-f al-item">
-                                <img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing"
-                                    v-if="pageType == 1 &&
-                                        housingInfo['data'] &&
-                                        housingInfo['data'].info.verified" alt="">
-                                <img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo"
-                                    style="margin-right:10px;" v-if="pageType == 2 &&
-                                        housingInfo['data'] &&
-                                        housingInfo['data'].isintermediary == 1" alt="">
-                                <div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified
-                                    || pageType == 2 &&
-                                    housingInfo['data'] &&
-                                    housingInfo['data'].isintermediary == 1"></div>
-                                <span class="need-houing-type" v-if="pageType == 3">预算</span>
-                                <span class="unit">HK$</span>
-                                <span class="rent" v-if="pageType != 3">{{ housingInfo['data'] &&
-                                    housingInfo['data'].info.rent }}</span>
-                                <span class="rent" v-if="pageType == 3">
-                                    {{
-                                        housingInfo['data'] && housingInfo['data'].info.rent[0]
-                                    }}~
-                                    {{
-                                        housingInfo['data'] && housingInfo['data'].info.rent[1]
-                                    }}
-                                </span>
-                                <span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
-                                <div class="line"></div>
-                                <div class="dis-f al-item">
-                                    {{ indexData['data'] &&
-                                        indexData['data']['config'] &&
-                                        indexData['data']['config']['type'][housingInfo['data'] &&
-                                        housingInfo['data'].info.type.substring(0, 1)]
-                                    }}
-                                    <img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="">
-                                    {{ indexData['data'] &&
-                                        indexData['data']['config'] &&
-                                        indexData['data']['config']['type'][housingInfo['data'] &&
-                                            housingInfo['data'].info.type]
-                                    }}
-                                </div>
-                            </div>
-                            <div class="dis-f al-item">
-                                <div class="tool-btn dis-f al-item jus-x">
-                                    <div class="dis-f al-item" @click="setOperation">
-                                        <img src="../assets/img/detail/collect.png"
-                                            v-show="housingInfo['data'] && !housingInfo['data'].isfav" class="tool-icon"
-                                            alt="">
-                                        <img src="../assets/img/detail/collectT.png"
-                                            v-show="housingInfo['data'] && housingInfo['data'].isfav" class="tool-icon"
-                                            alt="">
-                                        <span>
-                                            {{ housingInfo['data'] && housingInfo['data'].isfav ?
-                                                housingInfo['data'] && housingInfo['data']['info'].count_fav : '收藏' }}
-                                        </span>
-                                    </div>
-                                    <div class="line" style="margin:0 20px;"></div>
-                                    <div class="dis-f al-item" style="position: relative;">
-                                        <img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
-                                        <span>
-                                            转发
-                                        </span>
-                                        <transmit-btn v-if="housingInfo.data" :qrcode="housingInfo.data['qrcode']"
-                                            :title="housingInfo.data.info['subject']"></transmit-btn>
-                                    </div>
-                                </div>
-                                <div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
-                                    <div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;"
-                                        @click="getConcatData">
-                                        联系方式
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </el-affix>
                 <div class="dis-f jus-bet" style="margin-top: -15px;">
                     <div class="info-box">
+                        <el-affix :offset="0" @change="changeTitleType" z-index="666">
+                            <div class="top-bar-box dis-f jus-x" v-if="titleType">
+                                <div class="top-bar dis-f al-item jus-bet">
+                                    <div class="dis-f al-item">
+                                        <img src="../assets/img/detail/authenticationHousing.png"
+                                            class="authentication-housing" v-if="pageType == 1 &&
+                                                housingInfo['data'] &&
+                                                housingInfo['data'].info.verified" alt="">
+                                        <img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo"
+                                            style="margin-right:10px;" v-if="pageType == 2 &&
+                                                housingInfo['data'] &&
+                                                housingInfo['data'].isintermediary == 1" alt="">
+                                        <div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified
+                                            || pageType == 2 &&
+                                            housingInfo['data'] &&
+                                            housingInfo['data'].isintermediary == 1"></div>
+                                        <span class="need-houing-type" v-if="pageType == 3">预算</span>
+                                        <span class="unit">HK$</span>
+                                        <span class="rent" v-if="pageType != 3">{{ housingInfo['data'] &&
+                                            housingInfo['data'].info.rent }}</span>
+                                        <span class="rent" v-if="pageType == 3">
+                                            {{
+                                                housingInfo['data'] && housingInfo['data'].info.rent[0]
+                                            }}~
+                                            {{
+                                                housingInfo['data'] && housingInfo['data'].info.rent[1]
+                                            }}
+                                        </span>
+                                        <span>/{{ housingInfo['data'] && housingInfo['data'].info.rentalperiod }}</span>
+                                        <div class="line"></div>
+                                        <div class="dis-f al-item">
+                                            {{ indexData['data'] &&
+                                                indexData['data']['config'] &&
+                                                indexData['data']['config']['type'][housingInfo['data'] &&
+                                                housingInfo['data'].info.type.substring(0, 1)]
+                                            }}
+                                            <img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="">
+                                            {{ indexData['data'] &&
+                                                indexData['data']['config'] &&
+                                                indexData['data']['config']['type'][housingInfo['data'] &&
+                                                    housingInfo['data'].info.type]
+                                            }}
+                                        </div>
+                                    </div>
+                                    <div class="dis-f al-item">
+                                        <div class="tool-btn dis-f al-item jus-x">
+                                            <div class="dis-f al-item" @click="setOperation">
+                                                <img src="../assets/img/detail/collect.png"
+                                                    v-show="housingInfo['data'] && !housingInfo['data'].isfav"
+                                                    class="tool-icon" alt="">
+                                                <img src="../assets/img/detail/collectT.png"
+                                                    v-show="housingInfo['data'] && housingInfo['data'].isfav"
+                                                    class="tool-icon" alt="">
+                                                <span>
+                                                    {{ housingInfo['data'] && housingInfo['data'].isfav ?
+                                                        housingInfo['data'] && housingInfo['data']['info'].count_fav : '收藏' }}
+                                                </span>
+                                            </div>
+                                            <div class="line" style="margin:0 20px;"></div>
+                                            <div class="dis-f al-item" style="position: relative;">
+                                                <img src="../assets/img/detail/forward.png" class="tool-icon" alt="">
+                                                <span>
+                                                    转发
+                                                </span>
+                                                <transmit-btn v-if="housingInfo.data" :qrcode="housingInfo.data['qrcode']"
+                                                    :title="housingInfo.data.info['subject']"></transmit-btn>
+                                            </div>
+                                        </div>
+                                        <div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
+                                            <div class="contact-btn top-contact-btn" style="margin:0 0 0 10px;"
+                                                @click="getConcatData">
+                                                联系方式
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </el-affix>
                         <div class="detail-price-box">
                             <span class="need-houing-type" v-if="pageType == 3">预算</span>
                             <span class="unit" :style="{ 'font-size': pageType === 3 ? '20px' : '' }">HK$</span><span
@@ -205,7 +205,7 @@
                             <div class="title dis-f al-item">
                                 <img src="../assets/img/detail/infoIcon.png" class="img" alt="">
                                 <span>
-                                    {{pageType != 3?'基本信息':'基本要求'}}
+                                    {{ pageType != 3 ? '基本信息' : '基本要求' }}
                                 </span>
                             </div>
                             <!--  -->
@@ -435,7 +435,7 @@
                                     </div>
                                     <span>
                                         {{
-                                            location && location[item]
+                                            item.length == 1 ? '不限' : location && location[item]
                                         }}
                                     </span>
                                 </div>
@@ -465,7 +465,8 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="dis-f jus-x" v-if="distanceList[0] && distanceList[0].name && pageType != 3">
+                        <div class="dis-f jus-x"
+                            v-if="distanceList[0] && distanceList[0].name && pageType != 3 && distanceList.length > 1">
                             <div class="distance-box dis-f jus-bet">
                                 <div class="distance-info-box pos-r" :class="{ 'show-distance-info-box': showDistance }"
                                     :style="{ 'height': showDistance ? `${70 + 42 + 82 * distanceList.length - 1}px` : '0px' }">
@@ -1348,7 +1349,7 @@ let pagevalue = ref(0)
 let loadText = ref('下拉加载更多')
 //获取瀑布流数据
 let recommendList = () => {
-    loadText.value='加载中.....'
+    loadText.value = '加载中.....'
     api.recommendList({
         page: pages.value,
         limit: 30,
@@ -1360,7 +1361,7 @@ let recommendList = () => {
         if (res.code === 200) {
             if (res.data.data && res.data.data.length >= 30) {
                 loadMore.value = true
-                loadText.value='下拉加载更多'
+                loadText.value = '下拉加载更多'
             } else {
                 loadMore.value = false
                 loadText.value = '到底了'
@@ -1425,16 +1426,10 @@ watch(route, () => {
     let { id } = router.currentRoute.value.query
     uniqid.value = id
     pageType.value = housingInfo['data']['info'].intermediary === 1 ? 2 : housingInfo['data']['info'].intermediary === 6 ? 3 : 1  //1个人  2中介  3求房源
-    console.log('pageType',pageType.value)
+    console.log('pageType', pageType.value)
     publisherList.value = []
     recommendListData.value = []
     getHousingInfo()
-    if (pageType.value != 3) {
-        setTimeout(() => {
-            window.addEventListener('scroll', onPageSrcoll, true);
-            document.body.scrollTop = 0
-        }, 1000)
-    }
 })
 
 onMounted(() => {
@@ -1447,14 +1442,14 @@ onMounted(() => {
     });
     if (pageType.value != 3) {
         setTimeout(() => {
-            window.addEventListener('scroll', onPageSrcoll, true);
+            window.addEventListener('scroll', onPageSrcoll);
             document.body.scrollTop = 0
         }, 1000)
     }
 })
 
 onBeforeUnmount(() => {
-    window.removeEventListener('scroll', onPageSrcoll, true);
+    window.removeEventListener('scroll', onPageSrcoll);
 })
 
 </script>
@@ -2582,6 +2577,7 @@ img {
             font-size: 16px;
             color: #333;
             margin-top: 20px;
+            word-wrap: break-word;
         }
 
         .title-box {