fix

virgo.wzfrontend/console/package-lock.json

@@ -5548,6 +5548,12 @@
 				"randomfill": "^1.0.3"
 			}
 		},
+		"crypto-js": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
+			"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+			"dev": true
+		},
 		"css-declaration-sorter": {
 			"version": "6.4.1",
 			"resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",

virgo.wzfrontend/console/package.json

@@ -33,6 +33,7 @@
 		"axios": "^0.19.0",
 		"babel-eslint": "^10.0.3",
 		"babel-plugin-import": "^1.13.0",
+		"crypto-js": "^4.2.0",
 		"eslint": "^5.16.0",
 		"eslint-plugin-vue": "^5.0.0",
 		"node-sass": "^4.14.1",

virgo.wzfrontend/console/src/components/common/city.vue

@@ -1,7 +1,8 @@
 <template>
 	<div class="city">
-		<el-cascader :props="propsOption" :options="mapDatas" separator="-" v-model="address" :placeholder="'请选择地址'"
-			@change="changeInput" :disabled="disabled"></el-cascader>
+		<el-cascader ref="cascader" :props="propsOption" :options="mapDatas" separator="-" v-model="address"
+			:placeholder="'请选择地址'" @change="changeInput" :disabled="disabled">
+		</el-cascader>
 	</div>
 </template>
 
@@ -36,6 +37,9 @@
 		methods: {
 			changeInput() {
 				this.$emit('change', this.address)
+			},
+			addressCode() {
+				return this.$refs.cascader.getCheckedNodes()[0].parent.data.label;
 			}
 		},
 		watch: {

virgo.wzfrontend/console/src/components/website/houseList.vue

@@ -1,31 +1,34 @@
 <template>
 	<div class="house-view">
-		<div class="house-list">
-			<div class="house-item" v-for="house in houseList" :key="house.id"
-				@click="$router.push('/website/homeDetail')">
-				<div class="house-item-image">
-					<img :src="imageUrl(house.showPicture)" :alt="house.name" />
-				</div>
-				<div class="house-content">
-					<div class="house-item-title hui-ellipsis">{{house.name}}</div>
-					<div class="space hui-ellipsis">
-						{{house.projectName}} / {{house.projectItemName}} / {{house.projectItemTargetName}}
-					</div>
-					<div class="tag hui-ellipsis">
-						<span>{{house.area}}m²</span>
-						<span v-for="(tag,index) in  house.tagList" :key="index">{{tag.name}}</span>
+		<el-empty description="暂无房源" v-if="houseList.length === 0"></el-empty>
+		<div class="house-list-box" v-else>
+			<div class="house-list">
+				<div class="house-item" v-for="house in houseList" :key="house.id"
+					@click="$router.push('/website/homeDetail?id=' + encrypt(house.id))">
+					<div class="house-item-image">
+						<img :src="imageUrl(house.showPicture)" :alt="house.name" />
 					</div>
-					<div class="pirce">
-						<span class="number">{{house.price}}</span>
-						<span class="unit"> /月</span>
+					<div class="house-content">
+						<div class="house-item-title hui-ellipsis">{{house.name}}</div>
+						<div class="space hui-ellipsis">
+							{{house.projectName}} / {{house.projectItemName}} / {{house.projectItemTargetName}}
+						</div>
+						<div class="tag hui-ellipsis">
+							<span>{{house.area}}m²</span>
+							<span v-for="(tag,index) in  house.tagList" :key="index">{{tag.name}}</span>
+						</div>
+						<div class="pirce">
+							<span class="number">{{house.price}}</span>
+							<span class="unit"> /月</span>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-		<div class="pagination">
-			<el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="totalCount"
-				@current-change="changePage">
-			</el-pagination>
+			<div class="pagination">
+				<el-pagination background layout="prev, pager, next" :page-size="pageSize" :current-page="currPage"
+					:total="totalCount" @current-change="changePage">
+				</el-pagination>
+			</div>
 		</div>
 	</div>
 </template>
@@ -33,7 +36,8 @@
 <script>
 	import {
 		getOpenHouseListByPage
-	} from '@/httpApi/space'
+	} from '@/httpApi/space';
+	import Crypto from '@/uitls/crypto'
 	export default {
 		props: ['type'],
 		data() {
@@ -50,10 +54,11 @@
 		methods: {
 			init() {
 				if (this.type === 'highseas') {
+					if (!this.$store.getters.city || !this.$store.getters.city.cityCode) return;
 					getOpenHouseListByPage({
 						currPage: this.currPage,
 						pageSize: this.pageSize,
-						code: this.$store.getters.city.cityCode
+						addressCode: this.$store.getters.city.cityCode
 					}).then(res => {
 						if (res.state) {
 							this.houseList = res.data.dataList;
@@ -69,6 +74,9 @@
 			imageUrl(data) {
 				if (!data) return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
 				return JSON.parse(data)[0].url;
+			},
+			encrypt(text) {
+				return Crypto.AES.encrypt(String(text), 'bosshand');
 			}
 		}
 	}

virgo.wzfrontend/console/src/components/website/login.vue

@@ -244,6 +244,7 @@
 			right: 10px;
 			font-size: 30px;
 			color: #c9cdd3;
+			cursor: pointer;
 		}
 
 		.get-code-btn {

virgo.wzfrontend/console/src/components/work/space/project/edit.vue

@@ -13,7 +13,7 @@
 					</el-select>
 				</el-form-item>
 				<el-form-item label="项目区域" prop="address" :rules="[{required: true, message: '请选择项目区域'}]">
-					<city v-model="projectForm.address"></city>
+					<city ref="city" v-model="projectForm.address"></city>
 				</el-form-item>
 				<el-form-item label="具体地点">
 					<el-input type="text" v-model="specific" placeholder="请输入具体地点">
@@ -117,6 +117,7 @@
 						postData['tagIds'] = this.$refs.tag.tagIds();
 						postData['coordinates'] = this.$refs.map.address;
 						postData['supportingFacilities'] = this.supportingFacilities.join(',');
+						postData['addressCode'] = this.$refs.city.addressCode();
 						if (this.isUpdate) {
 							updateProject(postData).then(this.successFunc);
 						} else {

virgo.wzfrontend/console/src/layout/website.vue

@@ -20,17 +20,18 @@
 					</div>
 					<span class="login-name">{{user.userName}}</span>
 					<span class="color-blue loginout" @click="loginout">退出</span>
-					<span class="color-blue loginout" @click="$router.push('/')">管理系统</span>
+					<span class="admin-system" @click="$router.push('/')">管理系统</span>
 				</div>
 				<div class="login" v-else>
 					<div class="login-icon">
 						<i class="el-icon-s-custom"></i>
 					</div>
 					<span class="login-name" @click="login">登录 / 注册</span>
+					<span class="admin-system" @click="$router.push('/')">管理系统</span>
 				</div>
 			</div>
 		</div>
-		<router-view :key="routerViewKey" />
+		<router-view :key="key" />
 		<div class="login-toggle" v-if="visible">
 			<login @callback="callback"></login>
 		</div>
@@ -44,12 +45,17 @@
 	import {
 		removeToken
 	} from '@/uitls/auth';
+	import {
+		getToken
+	} from '@/uitls/auth'
+	import {
+		mapGetters
+	} from 'vuex';
 	export default {
 		data() {
 			return {
 				visible: false,
-				user: {},
-				routerViewKey: 1
+				user: {}
 			}
 		},
 		created() {
@@ -64,7 +70,7 @@
 				this.initLocation();
 			},
 			initLocation() {
-				if (this.$store.getters.city) return;
+				if (this.$store.getters.city && this.$store.getters.city.cityCode) return;
 				$.getJSON("https://restapi.amap.com/v3/ip?key=36b8970fe5bcfd92fe9e34e32d0e7461", res => {
 					for (let i = 0; i < city.length; i++) {
 						if (city[i].cityCode == res.adcode) {
@@ -80,7 +86,11 @@
 			},
 			callback(type) {
 				if (type === 'init') {
-					this.routerViewKey++;
+					if (this.$route.path == '/website/homeDetail') {
+						this.$store.dispatch('app/changeEvent', {
+							type: 'homeDetailReload'
+						})
+					}
 					this.init();
 				}
 				this.visible = false;
@@ -93,10 +103,22 @@
 					this.$store.dispatch('app/changeOrganization', {});
 					this.$message.success('退出成功');
 					this.init();
-					this.routerViewKey++;
 				});
 			},
 		},
+		computed: {
+			key() {
+				if (this.$route.path != '/website/home' && !getToken()) this.login();
+				return this.$route.path;
+			},
+			...mapGetters(['event'])
+		},
+		watch: {
+			event() {
+				let event = this.$store.getters.event;
+				if (event.type == 'login') this.login();
+			}
+		},
 		components: {
 			login,
 			avatar
@@ -218,6 +240,19 @@
 					cursor: pointer;
 					font-weight: 500;
 				}
+
+				.admin-system {
+					padding: 5px 10px;
+					border-radius: 4px;
+					border: 1px solid #fff;
+					margin-left: 10px;
+					cursor: pointer;
+
+					&:hover {
+						border-color: $--color-primary;
+						color: $--color-primary;
+					}
+				}
 			}
 		}
 	}

virgo.wzfrontend/console/src/store/getters.js

@@ -9,5 +9,6 @@ const getters = {
 	identity: state => state.app.identity, //身份
 	houseData: state => state.projectBase.houseData, //房源编辑
 	city: state => state.app.city, //当前位置
+	event: state => state.app.event, //事件
 }
 export default getters

virgo.wzfrontend/console/src/store/modules/app.js

@@ -10,7 +10,8 @@ const state = {
 	config: {},
 	document: {},
 	identity: {},
-	city: {}
+	city: {},
+	event: {}
 }
 
 const mutations = {
@@ -37,6 +38,9 @@ const mutations = {
 	},
 	CHANGE_CITY: (state, city) => {
 		state.city = city;
+	},
+	CHANGE_EVENT: (state, event) => {
+		state.event = event;
 	}
 }
 
@@ -80,6 +84,11 @@ const actions = {
 		commit
 	}, city) {
 		commit('CHANGE_CITY', city);
+	},
+	changeEvent({
+		commit
+	}, event) {
+		commit('CHANGE_EVENT', event);
 	}
 }
 

virgo.wzfrontend/console/src/uitls/crypto.js

@@ -0,0 +1,15 @@
+import CryptoJS from 'crypto-js';
+
+const Crypto = {
+	AES: {
+		encrypt: function(plaintext, secretKey) {
+			return CryptoJS.AES.encrypt(plaintext, secretKey).toString();
+		},
+		decrypt: function(ciphertext, secretKey) {
+			const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
+			return bytes.toString(CryptoJS.enc.Utf8);
+		}
+	}
+};
+
+export default Crypto;

virgo.wzfrontend/console/src/views/website/city.vue

@@ -4,8 +4,8 @@
 			<div class="hot-city">
 				<div class="label">热门城市</div>
 				<div class="city-list">
-					<div class="city-item" v-for="(item,i) in hotCityList" :key="-i" @click="changeCity(item)">
-						{{item.cityName}}
+					<div class="city-item" v-for="(item,i) in hotCityList" :key="-i" @click="changeCity(item)">
+						{{item.cityName}}
 					</div>
 				</div>
 			</div>

virgo.wzfrontend/console/src/views/website/homeDetail.vue

@@ -1,101 +1,102 @@
 <template>
 	<div class="home-detail">
 		<div class="container">
-			<div class="title">滨湖万丽</div>
-			<div class="home-detail-content">
-				<div class="home-detail-swiper">
-					<div class="swiper-container">
-						<div class="swiper-wrapper">
-							<div v-for="item in swiperList" :key="item.id" class="swiper-slide"
-								:style="`background-image:url(${item.imgUrl})`">
+			<div class="container-box" v-if="detail.id">
+				<div class="title">{{detail.projectName}}</div>
+				<div class="home-detail-content">
+					<div class="home-detail-swiper">
+						<div class="swiper-container">
+							<div class="swiper-wrapper">
+								<div v-for="item in swiperList" :key="item.id" class="swiper-slide"
+									:style="`background-image:url(${item.url})`">
+								</div>
 							</div>
+							<div class="swiper-button-prev"></div>
+							<div class="swiper-button-next"></div>
 						</div>
-						<div class="swiper-button-prev"></div>
-						<div class="swiper-button-next"></div>
 					</div>
-				</div>
-				<div class="home-detail-information">
-					<div class="house-name">滨湖万丽南排小高，耳朵户型凤凰层</div>
-					<div class="tag">
-						<span>120m²</span>
-						<span>标签1</span>
-						<span>标签2</span>
-						<span>标签3</span>
-					</div>
-					<div class="house-price">
-						<div>
-							<span class="average alibaba">7116</span><span class="unit">元/月</span>
-						</div>
-						<div class="hui-button">预约看房</div>
-					</div>
-					<div class="content-title">基本信息</div>
-					<div class="information-list">
-						<div class="information-box">
-							<div class="information-title">所属楼宇：</div>
-							<div class="information-div">1号楼</div>
-						</div>
-						<div class="information-box">
-							<div class="information-title">所属楼层：</div>
-							<div class="information-div">2层</div>
+					<div class="home-detail-information">
+						<div class="house-name">{{detail.name}}</div>
+						<div class="tag">
+							<span>{{detail.area}}m²</span>
+							<span v-for="(tag,index) in  detail.tagList" :key="index">{{tag.name}}</span>
 						</div>
-						<div class="information-box">
-							<div class="information-title">房源类型：</div>
-							<div class="information-div">写字楼</div>
-						</div>
-						<div class="information-box">
-							<div class="information-title">房间号码：</div>
-							<div class="information-div">204</div>
-						</div>
-						<div class="information-box">
-							<div class="information-title">房源面积：</div>
-							<div class="information-div">120m²</div>
-						</div>
-						<div class="information-box">
-							<div class="information-title">付款方式：</div>
-							<div class="information-div">公对公帐户</div>
-						</div>
-						<div class="information-box" style="margin-bottom: 0;">
-							<div class="information-title">产权证书：</div>
-							<div class="information-div">SD123333234</div>
+						<div class="house-price">
+							<div>
+								<span class="average alibaba">{{detail.price}}</span><span class="unit">元/月</span>
+							</div>
+							<div class="hui-button">预约看房</div>
 						</div>
-						<div class="information-box" style="margin-bottom: 0;">
-							<div class="information-title">是否装修：</div>
-							<div class="information-div">是</div>
+						<div class="content-title">基本信息</div>
+						<div class="information-list">
+							<div class="information-box">
+								<div class="information-title">所属楼宇：</div>
+								<div class="information-div">{{detail.projectItemName}}</div>
+							</div>
+							<div class="information-box">
+								<div class="information-title">所属楼层：</div>
+								<div class="information-div">{{detail.projectItemTargetName}}</div>
+							</div>
+							<div class="information-box">
+								<div class="information-title">房源类型：</div>
+								<div class="information-div">{{$field.findTypeName('houseType',detail.roomTypeId)}}
+								</div>
+							</div>
+							<div class="information-box">
+								<div class="information-title">房间号码：</div>
+								<div class="information-div">{{detail.roomNumber}}</div>
+							</div>
+							<div class="information-box">
+								<div class="information-title">房源面积：</div>
+								<div class="information-div">{{detail.area}}m²</div>
+							</div>
+							<div class="information-box">
+								<div class="information-title">付款方式：</div>
+								<div class="information-div">{{$field.findTypeName('payWay',detail.payWay)}}</div>
+							</div>
+							<div class="information-box">
+								<div class="information-title">产权证书：</div>
+								<div class="information-div">{{detail.propertyCertificateNumber}}</div>
+							</div>
+							<div class="information-box">
+								<div class="information-title">是否装修：</div>
+								<div class="information-div">{{detail.decoration === 1 ? '已装修':'未装修'}}</div>
+							</div>
 						</div>
-					</div>
-					<div class="content-title">房源简介</div>
-					<div class="desc-text">
-						【小区优点】小区位置还不错，位于日月湖板块，主推大面积户型，洋房157平，小高层137平，改户可以选择。
-						【推荐人群】本小区适合想在日月湖买房，改善客户选择，可以选择洋房4室2卫的户型。
+						<div class="content-title">房源简介</div>
+						<div class="desc-text" v-html="detail.introduce"></div>
 					</div>
 				</div>
-			</div>
-			<div class="sub-title">周边配套</div>
-			<div class="map-container">
-				<div id="map"></div>
-				<div class="content-device">
-					<div class="people-tell">
-						<img class="people-avatar"
-							src="https://img0.baidu.com/it/u=3837888269,660016232&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800"
-							mode="aspectFill">
-						</img>
-						<div class="people-text">
-							<div class="people-name">房东名称</div>
-							<div class="people-organization">
-								组织名称
+				<div class="sub-title">周边配套</div>
+				<div class="map-container">
+					<div id="map"></div>
+					<div class="content-device">
+						<div class="people-tell">
+							<img class="people-avatar" :src="detail.chargePersonPortrait" mode="aspectFill">
+							</img>
+							<div class="people-text">
+								<div class="people-name">{{detail.chargePersonName}}</div>
+								<div class="people-organization">组织名称</div>
 							</div>
 						</div>
-					</div>
-					<div class="device-list">
-						<div class="device-item"
-							v-for="item in $field.findTypeNameByList('supportingFacilities','1,2,3,4,5,6')"
-							:key="item.id">
-							<i :class="'iconfont device-icon ' + item.icon"></i>
-							<span class="device-label">{{item.name}}</span>
+						<div class="device-list">
+							<div class="device-item"
+								v-for="item in $field.findTypeNameByList('supportingFacilities',detail.supportingFacilities)"
+								:key="item.id">
+								<i :class="'iconfont device-icon ' + item.icon"></i>
+								<span class="device-label">{{item.name}}</span>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
+			<div class="skeleton-box" v-else>
+				<el-empty :description="description">
+					<span class="color-blue" style="cursor: pointer;" @click="login" v-if="description === '请登录后查看'">
+						点击登录>>
+					</span>
+				</el-empty>
+			</div>
 		</div>
 		<house-foot></house-foot>
 	</div>
@@ -105,60 +106,59 @@
 	// 引入插件
 	import Swiper from 'swiper'; // 注意引入的是Swiper
 	import 'swiper/css/swiper.min.css' // 注意这里的引入
-	import houseFoot from "@/components/website/houseFoot.vue"
-	import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
-	window._AMapSecurityConfig = {
-		// 设置安全密钥
-		securityJsCode: "3e392dc7eb2cf2c04b1b8899776e8905",
-	};
+	import houseFoot from "@/components/website/houseFoot.vue"
+	import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
+	import Crypto from '@/uitls/crypto'
+	import {
+		getToken
+	} from '@/uitls/auth'
+	import {
+		getHouseDetailById
+	} from '@/httpApi/space'
+	import {
+		mapGetters
+	} from 'vuex';
 	export default {
 		data() {
 			return {
 				swiper: null,
-				swiperList: [{
-					id: 1,
-					title: '采集国家二级保护野生植物审批',
-					imgUrl: 'https://img0.baidu.com/it/u=3837888269,660016232&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
-				}, {
-					id: 2,
-					title: '农村危房改造',
-					imgUrl: 'https://img0.baidu.com/it/u=3837888269,660016232&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
-				}, {
-					id: 3,
-					title: '乡村医生执业注册',
-					imgUrl: 'https://img0.baidu.com/it/u=3837888269,660016232&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
-				}, {
-					id: 4,
-					title: '生鲜乳准运证明核发',
-					imgUrl: 'https://img0.baidu.com/it/u=3837888269,660016232&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
-				}, {
-					id: 5,
-					title: '常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚， 不要嫌名字长',
-					imgUrl: 'https://img0.baidu.com/it/u=3837888269,660016232&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
-				}, {
-					id: 6,
-					title: '使用 2 个空格进行缩进',
-					imgUrl: 'https://img0.baidu.com/it/u=3837888269,660016232&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
-				}, {
-					id: 7,
-					title: '不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以 提升可读性',
-					imgUrl: 'https://img0.baidu.com/it/u=3837888269,660016232&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
-				}, {
-					id: 8,
-					title: '使用字面量来代替对象构造器',
-					imgUrl: 'https://img0.baidu.com/it/u=3837888269,660016232&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
-				}],
-				detail: {}
+				swiperList: [],
+				detail: {},
+				detailId: '',
+				description: '无房源信息'
 			};
 		},
 		mounted() {
 			window.scrollTo(0, 0);
-			this.getSwiper();
-			this.initMap();
-
+			this.init();
 		},
 		methods: {
-			initMap() {
+			init() {
+				if (!getToken()) return this.description = '请登录后查看';
+				this.detailId = Crypto.AES.decrypt(this.$route.query.id, 'bosshand');
+				if (!this.detailId) return this.description = '无房源信息';
+				this.getDetail();
+			},
+			getDetail() {
+				getHouseDetailById(this.detailId).then(res => {
+					if (res.state) {
+						this.detail = res.data;
+						if (this.detail.picture) {
+							this.swiperList = JSON.parse(this.detail.picture);
+							this.getSwiper();
+						}
+						if (this.detail.coordinates) {
+							this.coordinates = this.detail.coordinates.split(',');
+							this.initMap([this.coordinates[0], this.coordinates[1]]);
+						}
+					}
+				})
+			},
+			initMap(position) {
+				window._AMapSecurityConfig = {
+					// 设置安全密钥
+					securityJsCode: "3e392dc7eb2cf2c04b1b8899776e8905",
+				};
 				AMapLoader.load({
 					key: "880f8193c52d9dee80cd82212d9508cf", //申请好的Web端开发者key，调用 load 时必填
 					version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
@@ -166,11 +166,11 @@
 					//JS API 加载完成后获取AMap对象
 					const map = new AMap.Map("map", {
 						divMode: '2D', //默认使用 2D 模式
-						zoom: 11, //地图级别
-						center: [116.397428, 39.90923], //地图中心点
+						zoom: 20, //地图级别
+						center: position, //地图中心点
 					});
 					const marker = new AMap.Marker({
-						position: [116.397428, 39.90923],
+						position: position,
 					});
 					map.add(marker);
 				}).catch((e) => {
@@ -179,16 +179,31 @@
 			},
 			getSwiper() {
 				this.swiper = new Swiper(".swiper-container", {
+					loop: true,
 					navigation: {
 						nextEl: '.swiper-button-next',
 						prevEl: '.swiper-button-prev',
 					},
 				})
+			},
+			login() {
+				this.$store.dispatch('app/changeEvent', {
+					type: 'login'
+				})
 			}
 		},
 		components: {
 			houseFoot
-		}
+		},
+		computed: {
+			...mapGetters(['event'])
+		},
+		watch: {
+			event() {
+				let event = this.$store.getters.event;
+				if (event.type == 'homeDetailReload') this.init();
+			}
+		},
 	};
 </script>
 
@@ -287,6 +302,11 @@
 		.container {
 			width: 1200px;
 			margin: 0 auto;
+			min-height: calc(100vh - 117px);
+		}
+
+		.skeleton-box {
+			padding-top: 50px;
 		}
 
 		.home-detail-content {
@@ -298,11 +318,17 @@
 			height: 480px;
 
 			.swiper-container,
-			.swiper-wrapper {
+			.swiper-wrapper,
+			.swiper-slide {
 				width: 100%;
 				height: 100%;
 			}
 
+			.swiper-slide {
+				background-size: 100% auto;
+				background-position: bottom;
+			}
+
 			.swiper-button-next:after,
 			.swiper-button-prev:after {
 				color: #eee;