From 0fd2a830431d9485479a2cf039067cb675e22880 Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Tue, 25 Jul 2023 14:14:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E6=88=BF=E6=BA=90=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../biserialListItem/biserialListItem.vue     |  13 +-
 src/components/detail/breadcrumb.vue          |  12 +-
 src/components/detail/imageWatch.vue          |  48 ++---
 src/utils/api.js                              |   6 +
 src/views/detail.vue                          | 178 +++++++++++++-----
 5 files changed, 181 insertions(+), 76 deletions(-)

diff --git a/src/components/biserialListItem/biserialListItem.vue b/src/components/biserialListItem/biserialListItem.vue
index 22731bf..7de46c6 100644
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/src/components/biserialListItem/biserialListItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="list-item" ref="list">
+    <div class="list-item" ref="list" @click="watchInfo">
         <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1">
             <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
             <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
@@ -136,6 +136,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
 
+//跳转
+let router=useRouter()
+let watchInfo = ()=>{
+    router.push({
+        path:'/detail',
+        query:{
+            id:data.data.uniqid
+        }
+    })
+}
+
 onMounted(() => {
     imgRef = getCurrentInstance()
 })
diff --git a/src/components/detail/breadcrumb.vue b/src/components/detail/breadcrumb.vue
index ff69ab5..fa8eebd 100644
--- a/src/components/detail/breadcrumb.vue
+++ b/src/components/detail/breadcrumb.vue
@@ -14,11 +14,11 @@
                 {{ data['data']['info']&&data['data']['info'].subject }}
             </div>
             <div class="tool-btn-box dis-f al-item">
-                <div class="btn-s dis-f al-item jus-x">
-                    <img src="../../assets/img/detail/collect.png" class="img" alt="">
-                    <img src="../../assets/img/detail/collectT.png" v-show="false" class="img" alt="">
+                <div class="btn-s dis-f al-item jus-x" @click="operation">
+                    <img src="../../assets/img/detail/collect.png" v-show="!data.data.isfav" class="img" alt="">
+                    <img src="../../assets/img/detail/collectT.png" v-show="data.data.isfav" class="img" alt="">
                     <span class="mg-l-5">
-                        {{'收藏'}}
+                        {{data.data.isfav?data['data']['info'].count_fav:'收藏'}}
                     </span>
                 </div>
                 <div class="line">
@@ -46,9 +46,13 @@ const props=defineProps({
         default: function () {
             return {}
         }
+    },
+    operation:{
+        type:Function
     }
 })
 let data=reactive({})
+let operation=props.operation
 
 //导航数据
 let storeData = store.state.routeList
diff --git a/src/components/detail/imageWatch.vue b/src/components/detail/imageWatch.vue
index 642703a..ce8d3e8 100644
--- a/src/components/detail/imageWatch.vue
+++ b/src/components/detail/imageWatch.vue
@@ -5,8 +5,7 @@
                 <el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel">
                     <el-carousel-item v-for="(item, i) in list" :key="i">
                         <div class="dis-f jus-x al-item" v-if="item">
-                            <div class="img-box">
-                                {{ item }}
+                            <div class="img-box dis-f jus-x">
                                 <img :src="item&&item.url" class="img" alt="">
                             </div>
                         </div>
@@ -20,14 +19,16 @@
             {{ `${imageTab + 1}/${list.length}` }}
         </div>
         <div class="dis-f jus-x al-item">
-            <div class="list-img-box dis-f al-item">
+            <div class="list-img-box dis-f al-item jus-x">
                 <div v-for="(item, i) in list" :key="i">
-                    <div class="voide" :class="{ 'select-box': imageTab === i }">
+                    <!-- <div class="voide" :class="{ 'select-box': imageTab === i }">
                         <div class="icon-box dis-f jus-x al-item">
                             <img src="" class="icon" alt="">
                         </div>
+                    </div> -->
+                    <div class="img-box-s dis-f jus-x" :class="{ 'select-box': imageTab === i }">
+                        <img :src="item.thumbnail" alt="" class="img-s">
                     </div>
-                    <!-- <div class="img" :class="{ 'select-box': imageTab === i }"></div> -->
                 </div>
             </div>
         </div>
@@ -39,10 +40,12 @@
 import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
 
 const props = defineProps({
+    //url:展示图   thumbnail:缩略图
+    // list:[{url:'',thumbnail:''}]
     list: {
         type: Array,
         default: function () {
-            return [1, 2, 3, 4, 5]
+            return []
         }
     },
     close:{
@@ -55,17 +58,16 @@ const props = defineProps({
 })
 
 let show=props.show
-let list = props.list
+let list =ref([])
 let close=props.close
 
 let carousel = ref(null)
 let imageTab = ref(0)
 //上一张
 let prev = () => {
-    if (imageTab.value === list.length) return
+    if (imageTab.value === list.value.length-1) return
     imageTab.value++
     carousel.value.prev()
-    console.log(imageTab.value)
 }
 
 //下一张
@@ -73,13 +75,13 @@ let next = () => {
     if (imageTab.value <= 0) return
     imageTab.value--
     carousel.value.next()
-    console.log(imageTab.value)
 }
 
 watchEffect(()=>{
     show=props.show
-    list = props.list
-    console.log('url',list)
+    list.value= props.list
+    if(imageTab.value>0)carousel.value.setActiveItem(imageTab.value)
+    
 })
 </script>
 <style scoped>
@@ -122,6 +124,7 @@ img {
     position: absolute;
     right: 20px;
     top: 20px;
+    cursor: pointer;
 }
 
 .right-arrow {
@@ -139,11 +142,15 @@ img {
     width: 18px;
     height: 30px;
     position: absolute;
+    cursor: pointer;
 }
 
 .mg-t-60 {
     margin-top: 60px;
 }
+.select-box {
+            border: 1px solid #50e3c2 !important;
+        }
 
 .watch-box {
     width: 100%;
@@ -166,18 +173,18 @@ img {
 
     .list-img-box {
         overflow-x: scroll;
-        width: 800px;
+        width: 1200px;
         height: 100px;
 
-        .select-box {
-            border: 1px solid #50e3c2;
-        }
-
-        .img {
-            height: 60px;
+        .img-box-s {
+            height:62px;
             border: 1px solid transparent;
-            margin-left: 5px;
             border-radius: 8px;
+            margin-left: 5px;
+            .img-s{
+                height:60px;
+                border-radius: 8px;
+            }
         }
 
         .voide {
@@ -206,7 +213,6 @@ img {
     .img-box {
         width:1200px;
         height: 600px;
-        background: #fff;
         border-radius: 10px;
         overflow: hidden;
 
diff --git a/src/utils/api.js b/src/utils/api.js
index 0fcc07e..9475b14 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -27,6 +27,12 @@ export default{
     },
     details:(params={})=>{//房源详情
         return axios.post('/tenement/pc/api/details',params)
+    },
+    operation:(params={})=>{//收藏/取消收藏
+        return axios.post('/tenement/pc/api/user/operation',params)
+    },
+    contactData:(params={})=>{//获取联系方式
+        return axios.post('/tenement/pc/api/details/contactData',params)
     }
     
 }
\ No newline at end of file
diff --git a/src/views/detail.vue b/src/views/detail.vue
index 31fb918..91c8524 100644
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -3,7 +3,7 @@
         <pageTopBar></pageTopBar>
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
-                <breadcrumb :data="housingInfo['data']"></breadcrumb>
+                <breadcrumb :data="housingInfo['data']" :operation='setOperation'></breadcrumb>
                 <el-affix :offset="0" @change="changeTitleType">
                     <div class="top-bar-box dis-f jus-x" v-show="titleType">
                         <div class="top-bar dis-f al-item jus-bet">
@@ -45,7 +45,7 @@
                                     </div>
                                 </div>
                                 <div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
-                                    <div class="contact-btn" style="margin:0 0 0 10px;" @click="showConcat = true">
+                                    <div class="contact-btn" style="margin:0 0 0 10px;" @click="getConcatData">
                                         联系方式
                                     </div>
                                 </div>
@@ -88,7 +88,7 @@
                                     租期
                                 </div>
                                 <div class="type-text">
-                                    {{ housingInfo['data'] && housingInfo['data'].info.rentalduration === '0' ?
+                                    {{ !housingInfo['data']||housingInfo['data'] && housingInfo['data'].info.rentalduration === '0' ?
                                         '不限' : `${housingInfo['data'] && housingInfo['data'].info.rentalduration}
                                                                         ${housingInfo['data'] && housingInfo['data'].info.rentalperiod}` }}
                                 </div>
@@ -115,14 +115,14 @@
                             </div>
                             <div class="img-list-box dis-f jus-x al-item" @click="imageShow=true">
                                 <img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
-                                    @click="moveImageList('left')">
+                                    @click.stop="moveImageList('left')" v-show="imgListTab===0">
                                 <img src="../assets/img/detail/moreAllow.svg" class="icon left-icon" alt=""
-                                    style="transform: rotate(180deg);" @click="moveImageList('left')">
+                                    style="transform: rotate(180deg);" @click.stop="moveImageList('left')" v-show="imgListTab>0">
                                 <img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
-                                    @click="moveImageList('right')">
+                                    @click.stop="moveImageList('right')" v-show="imgList.length-1!==imgListTab">
                                 <img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
-                                    style="transform: rotate(180deg);" @click="moveImageList('right')">
-                                <div class="dis-f al-item list-box" ref="imageList" v-if="imgList.length > 0">
+                                    style="transform: rotate(180deg);" @click.stop="moveImageList('right')" v-show="imgList.length-1===imgListTab">
+                                <div class="dis-f al-item list-box" ref="imageList" v-if="imgList.length > 0" >
                                     <div v-for="(item, i) in imgList" :key="i">
                                         <div class="video" v-if="item && !item.thumbnail">
                                             <div class="icon-box dis-f jus-x al-item">
@@ -131,9 +131,8 @@
                                             <img class="video" ref="imgData" :src="item.image" @load="setImageWidth(i)"
                                                 @error="setImageWidth(i)" alt="">
                                         </div>
-                                        <div class="img" v-if="item && item.thumbnail"
-                                            :style="{ 'background': i % 2 === 0 ? '#000' : '#eee' }">
-                                            <img class="img" ref="imgData" :src="item.thumbnail" @load="setImageWidth(i)"
+                                        <div class="img dis-f" v-if="item && item.thumbnail">
+                                            <img class="img" style="margin:0;" ref="imgData" :src="item.thumbnail" @load="setImageWidth(i)"
                                                 @error="setImageWidth(i)" alt="">
                                         </div>
                                     </div>
@@ -154,7 +153,9 @@
                                     </div>
                                     <span class="text">
                                         {{
-                                            indexData['data'] && indexData['data']['config']['property'][housingInfo['data'] &&
+                                            indexData['data'] &&
+                                            indexData['data']['config']&&
+                                             indexData['data']['config']['property'][housingInfo['data'] &&
                                             housingInfo['data'].info.property]
                                         }}
                                     </span>
@@ -169,7 +170,9 @@
                                     |
                                     <span class="text" style="margin-left:0;">
                                         {{
-                                            indexData['data'] && indexData['data']['config']['elevator'][housingInfo['data'] &&
+                                            indexData['data'] && 
+                                            indexData['data']['config']&&
+                                            indexData['data']['config']['elevator'][housingInfo['data'] &&
                                             housingInfo['data'].info.elevator]
                                         }}
                                     </span>
@@ -180,8 +183,11 @@
                                     </div>
                                     <span class="text">
                                         {{
-                                            indexData['data'] && housingInfo['data'] && housingInfo['data'].info.sunshinearea
+                                            indexData['data'] && 
+                                            housingInfo['data'] && 
+                                            housingInfo['data'].info.sunshinearea
                                             !== -1 ?
+                                            indexData['data']['config']&&
                                             indexData['data']['config']['sunshinearea'][housingInfo['data'] &&
                                             housingInfo['data'].info.sunshinearea] : ''
                                         }}
@@ -204,7 +210,9 @@
                                     </div>
                                     <span class="text">
                                         {{
-                                            indexData['data'] && indexData['data']['config']['gender'][housingInfo['data'] &&
+                                            indexData['data'] && 
+                                            indexData['data']['config']&&
+                                            indexData['data']['config']['gender'][housingInfo['data'] &&
                                                 housingInfo['data'].info.gender]
                                         }}
                                     </span>
@@ -214,20 +222,26 @@
                         <div class="map-box">
                             <div class="dis-f al-item title-box">
                                 <img src="../assets/img/detail/mapIcon.png" class="img" alt="">
-                                <span class="title">九龙 > 油麻地/旺角/太子</span>
+                                <span class="title">{{ 
+                                    location[housingInfo['data']&&housingInfo['data']['info'].location.substring(0, 1)]
+                                }} > {{
+                                    location[housingInfo['data']&&housingInfo['data']['info'].location]
+                                }}</span>
                             </div>
                             <div class="dis-f jus-x" style="margin-top:15px;">
-                                <div class="map-s">
+                                <!-- <div class="map-s">
                                     <div class="pop-box">
                                         <div class="address-box dis-f al-item jus-bet">
                                             <div class="dis-f al-item">
                                                 <img src="../assets/img/detail/mapMarkIcon.png" class="img" alt="">
-                                                <span>独立大厦</span>
+                                                <span>{{ housingInfo['data'] &&
+                                                housingInfo['data'].info.address }}</span>
                                             </div>
                                             <img src="../assets/img/detail/moreNot.svg" class="icon" alt="">
                                         </div>
                                     </div>
-                                </div>
+                                </div> -->
+                                <!-- <mapInfo :info="housingInfo['data']&&housingInfo['data'].info"></mapInfo> -->
                             </div>
                         </div>
                         <div class="dis-f jus-x">
@@ -377,7 +391,9 @@
                             <div class="dis-f jus-x">
                                 <div class="user-type">
                                     {{
-                                        indexData['data'] && indexData['data']['config']['intermediary'][housingInfo['data'] &&
+                                        indexData['data'] && 
+                                        indexData['data']['config']&&
+                                        indexData['data']['config']['intermediary'][housingInfo['data'] &&
                                         housingInfo['data'].info.intermediary]
                                     }}
                                 </div>
@@ -385,15 +401,11 @@
                             <div class="dis-f al-item jus-x time-box">
                                 <img src="../assets/img/detail/timeIcon.svg" class="icon" alt="">
                                 <span>
-                                    {{
-                                        (new Date().getTime() - new
-                                            Date().getTime(housingInfo['data'] && housingInfo['data'].info.updatetime)) / 3600000
-                                        < 3600000 ? '一小时内' : `${Math.floor((new Date().getTime() - new
-                                            Date().getTime(housingInfo['data'] && housingInfo['data'].info.updatetime)) /
-                                            3600000)}` }} </span>
+                                    {{  checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
+                                         }} </span>
                             </div>
                             <div class="dis-f jus-x">
-                                <div class="contact-btn">
+                                <div class="contact-btn" @click="getConcatData">
                                     联系方式
                                 </div>
                             </div>
@@ -441,7 +453,7 @@
         <div class="pop-box" v-show="showConcat" @click="showConcat = !showConcat">
             <!-- 两种信息 -->
             <!-- third-concat -->
-            <div class="pop-big-box ">
+            <div class="pop-big-box" v-show="concatData.data&&concatData.data.count>1">
                 <div class="pop-info-box dis-f jus-x al-item">
                     <div class="pop-big-bg dis-f jus-x al-item">
                         <div class="user-liner-box dis-f al-item">
@@ -556,16 +568,16 @@
                 <img src="../assets/img/detail/close.png" class="close-img" alt="">
             </div>
             <!-- 一种信息 -->
-            <!-- <div class="pop">
+            <div class="pop" v-show="concatData.data&&concatData.data.count===1">
                 <div class="pop-bg-s-box dis-f jus-x al-item">
                     <div class="pop-bg-s">
                         <div class="pos-a pop-bg-s" style="z-index:666;">
                             <div class="title s-w-100">
                                 联系方式
                             </div>
-                            <div class="s-w-100 mg-t-35">
-                                <div class="wx-qrcode s-w-100">
-                                    <img src="" alt="">
+                            <div class="s-w-100 mg-t-35" v-if="concatData.data&&concatData.data.wechatdata">
+                                <div class="wx-qrcode s-w-100 dis-f al-item jus-x">
+                                    <img :src="concatData.data&&concatData.data.wechatdata.url" class="img" alt="">
                                 </div>
                                 <div style="margin-top:15px">
                                     <div>
@@ -576,7 +588,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="s-w-100">
+                            <div class="s-w-100" v-if="concatData.data&&concatData.data.whatsapp">
                                 <div class="whatsapp-title">
                                     WhatsApp
                                 </div>
@@ -585,7 +597,7 @@
                                 </div>
                             </div>
                             <div class="s-w-100 dis-f jus-x al-item mg-t-35">
-                                <div class="clone-btn dis-f al-item jus-x">
+                                <div class="clone-btn dis-f al-item jus-x" v-if="concatData.data&&concatData.data.whatsapp">
                                     <img src="../assets/img/detail/cloneIcon.png" class="icon" alt="">
                                     复制
                                 </div>
@@ -597,7 +609,7 @@
                 </div>
                 <img src="../assets/img/detail/close.png" class="close-img" alt="">
                 <img src="../assets/img/detail/popBg.svg" class="img" alt="">
-            </div> -->
+            </div>
         </div>
     </div>
     <watchImage :show="imageShow" :close="cloaseImageShow" :list="imgList"></watchImage>
@@ -613,6 +625,7 @@ import api from "../utils/api";
 import footerTool from '@/components/footer/footer.vue'
 import watchImage from '../components/detail/imageWatch.vue'
 import breadcrumb from '../components/detail/breadcrumb.vue'
+import mapInfo from '../components/public/viewMap.vue'
 import { ElMessage } from 'element-plus'
 import store from '@/store';
 
@@ -625,26 +638,35 @@ let cloaseImageShow=()=>{
     imageShow.value=false
 }
 
-//视频实例
+//图片组实例
 let imageList = ref(null)
 //图片数组
 let imgList = ref([])
 
+//图片距离
+let imageLIst=ref([])
+
 let imgListTab = ref(0)
 //计时器
 let interval = ''
 //点击方向按钮
 let moveImageList = (type) => {
-    if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imgList.value.length - 1 && type === 'right')) return
+    if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIst.value.length - 1 && type === 'right')) return
     type === 'left' ? imgListTab.value-- : imgListTab.value++
-    setOffsetWidth(imgList.value[imgListTab.value]['value'] * imgListTab.value, type)
+    setOffsetWidth(imageLIst.value[imgListTab.value],type)
 }
 //设置滚动
 let setOffsetWidth = (num, type) => {
-    let scroll = null
+    let scroll = 0
+    let clientWidth=imageList.value.clientWidth
+    let scrollWidth=imageList.value.scrollWidth
     interval = setInterval(() => {
+        if(!imageList.value){
+            clearInterval(interval)
+            return
+        }
         scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
-        if (num === scroll) {
+        if ((type === 'left'?num>=scroll:num <= scroll)||scroll+clientWidth>=scrollWidth) {
             clearInterval(interval)
         }
     })
@@ -653,7 +675,7 @@ let setOffsetWidth = (num, type) => {
 let imgData = ref(null)
 //获取图片宽度
 let setImageWidth = (num) => {
-    imgList.value[num]['value'] = imgData.value[num] && imgData.value[num].offsetWidth + 10
+    imageLIst.value[num]=imgData.value[num] && imgData.value[num].offsetLeft-20
 }
 
 //学校地址数据
@@ -685,7 +707,7 @@ let changeTitleType = () => {
 }
 
 let concatType = ref(false)
-//联系方式
+//联系方式顶部显示
 let changeConcatType = () => {
     concatType.value = !concatType.value
 }
@@ -723,15 +745,15 @@ let setHousingArr = () => {
     arr = housingInfo['data'].info.video?arr.concat(housingInfo['data'] && housingInfo['data'].info.video):[]
     arr = arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup)
     imgList.value = imgList.value.concat(arr)
-    // console.log('imgList',imgList.value)
+    imgList.value = imgList.value.concat(arr)
 }
 
+let location = store.state.indexData.config && store.state.indexData.config.location
 //设置顶部导航
 let setNavigation = () => {
-    let location = store.state.indexData.config && store.state.indexData.config.location
     let type = store.state.indexData.config && store.state.indexData.config.type
     indexData['data'] = store.state.indexData
-    // console.log(123, indexData['data'])
+    if(!location)return
     store.state.routeList['thirdIndex'] = {
         path: "",
         title: `${location[housingInfo['data']['info'].location.substring(0, 1)]}${type[housingInfo['data']['info'].type.substring(0, 1)]}房源`
@@ -759,7 +781,6 @@ let getHousingInfo = () => {
                 name: housingInfo['data']['info'].address,
             })
             concatInfo['data']=store.state.indexData.wechat
-            console.log(distanceList.value)
         } else {
             ElMessage({
                 message: res.message
@@ -768,6 +789,62 @@ let getHousingInfo = () => {
     })
 }
 
+//收藏
+let setOperation=()=>{
+    api.operation({
+        token:housingInfo['data'].token
+    }).then(res=>{
+        console.log(res)
+        if(res.code===200){
+            housingInfo['data'].info.count_fav=res.data.count
+            housingInfo['data'].isfav=res.data.status
+        }else{
+            ElMessage({
+                message:res.message
+            })
+        }
+    })
+}
+
+//获取联系方式
+let concatData=reactive({})
+let getConcatData=()=>{
+    showConcat.value=true
+    if(concatData['data'])return
+    api.contactData({
+        token:housingInfo['data'].token
+    }).then(res=>{
+        console.log(res)
+        if(res.code===200){
+            concatData['data']=res.data
+            let dataCount=0
+            Object.keys(concatData['data']).map(res=>{
+                if(concatData['data'][res]){
+                    dataCount++
+                }
+            })
+            concatData['data']['count']=dataCount
+            console.log(concatData)
+        }
+    })
+}
+
+//判断更新时间
+let checkUpdateTime=(Time)=>{
+    const now = new Date();
+    let time = new Date(Time)
+    const diff = now - time;
+    const seconds = Math.floor(diff / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (seconds < 60) return `${seconds}秒前`;
+    else if (minutes < 60) return `${minutes}分钟前`;
+    else if (hours < 24) return `${hours}小时前`;
+    else if (days < 7) return `${days}天前`;
+    else return Time;
+}
+
 //监听滚动条
 const onPageSrcoll = (e) => {
     let body = document.documentElement ? document.documentElement : document.body ?
@@ -1120,6 +1197,10 @@ img {
                 -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                 margin: 0 auto;
+                .img{
+                    width:130px;
+                    height:130px;
+                }
             }
 
             .mg-t-35 {
@@ -1532,7 +1613,7 @@ img {
 
             .list-box {
                 overflow-x: scroll;
-                height: 100px;
+                height: 120px;
                 color: #fff;
 
                 .icon-box {
@@ -1555,7 +1636,6 @@ img {
                     width: 100px;
                     height: 100px;
                     border-radius: 10px;
-                    background: #000;
                     margin-right: 10px;
                     flex-shrink: 0;
                     position: relative;
@@ -1563,9 +1643,7 @@ img {
 
                 .img {
                     height: 100px;
-                    width: 120px;
                     border-radius: 10px;
-                    background: #000;
                     margin-right: 10px;
                     flex-shrink: 0
                 }