gter.net/HKRentingMiniprogram
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

'首页的区域选择框'

Browse Source
This commit is contained in:
我是子健 2023-05-03 00:00:29 +08:00
parent 3dcfc0d551
commit 3448b9aabb
10 changed files with 985 additions and 472 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app.wxss
View File

@ -39,6 +39,7 @@ view {
margin-right: 8rpx;
/*margin-right: 10rpx;*/
vertical-align: middle;
padding-right: 25rpx;
}
.hotbtn {

BIN
img/area-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 918 B

BIN
img/list-head.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

11
img/reset.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter45">
<feColorMatrix type="matrix" values="1 0 0 0 0.6 0 1 0 0 0.6 0 0 1 0 0.6 0 0 0 1 0 " in="SourceGraphic" />
</filter>
</defs>
<g transform="matrix(1 0 0 1 -2153 -1100 )">
<image preserveAspectRatio="none" style="overflow:visible" width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABGUUKwAAADdElEQVR4Ae1Zi3GbQBCV00DowJcKQgeiBHUQXIHTgVyCO4hKUCrQpYIoFVipwHTgvKdhM8vqECcNMHDSzqz3c3uf91gwxovFXUZlIMNuz9Ad9MMocxxjTZJSAtU71AK3MWvW0KSkBBoLtCveYU4S3XANeCHnN0iYtTic3rZ9hVwJdVCRHM53KMcEvNgX5GYrBCVAxBJsm2QYkDqxb23Fc8h7A2gbcWjWCHix50iLWLK95FP70CAjPmLVfaDGBXK9pIYmYGlOGQJnShbeJhAn0wFVAFzSKbmHxcaAzVAk9WK3MROvqRn6FrjmTKEuISmDyBQJGARo26I3T8BDGzM95XkPa4ndz87jGrFz9X6d/s13wJ2Azh5JvGBOHZAPcS3mRMAg7wJzImCIBgj+aiHT36BsOQdlTH+OssehK+gB6qE/oYxbZY0R/g5OVVs/uGYAze9vqQK3uIiVmP/LDp4tSj0m5uMzoIT9wcDIL8S+zomtw6MJ5fT42H4R2FBytMvA+BNzHqqvNh8SDpqa5ABEbBrrliDtZ+sVk4kKsWkCPN8D/hiwzsQphUFsr0CoWaH/DM2gqQixEJPF+fqApIPuoZ+hViokOCZWxiUnMe1f6IHOCOKwx6PZJ0Ocqxx9ydGG5IskSziWndTjFwEvdgMnddCCby+grd3eCAmFBS4x75UKKkylaBtX3/45TPAbqBU+LOeoFgfjrU5aAjjmdUGC/tkOIF52QcrSwBfqgJTBR2OzD7/oiRMrtDgYZ/qMfLCFhIVa2up0zRR9i4NnbGC5+VvgTsAU+3bMM907YEy2p7jXvQOmeFXGPFOfHVDg4NRLZIXiNbTxctKxgMM4P2/RDiZ8gdDatZFT9fRjhOBlj03MhLrmrZ73DttFnKyvbWOrvjqAYES0L7mQLVXSKf+cW2LQ1QUEX9b+1aYvApw6gfZV+sR9VJml8s+5ltziXHHMWF8E5Goz7av0iRtbpydq0pi3sa6N8vsiIGqzHoosaTa+eIu5EXAxwGsneEz8UNq1jq6lHyN9zOnay+5xUn9rHWD/D7pIgQAX0251zcHWthHgbeGE4zXOlkWez0fWHV8wQvfPnHPVBUQdGeWEOQO2Zy9jr77UreCkQIIHjlxAWdv4QmoH67iApVKK48/mjwzh12Zq9IhPd14syqHWPayHSh7uqfwDfscOSS3c3dYAAAAASUVORK5CYII=" x="2153px" y="1100px" filter="url(#filter45)" />
</g>
</svg>

290
pages/index/index.js
View File

@ -4,150 +4,164 @@ var app = getApp()
var config = {};
var miucms = require('../../utils/miucms.js');
Page({
/**
* 页面的初始数据
*/
data: {
loding: true,
HKapartment: [],
otherHousing: [],
HKhousing: [],
banner: [],
service: '',
servicename: '',
video: '',
screen_data: {},
advListHKhousing: {},
advListotherHousing: {},
initState: false,
unreadMessages: 0, // 底部我的图标 未读系统通知数量
},
/**
* 页面的初始数据
*/
data: {
loding: true,
HKapartment: [],
otherHousing: [],
HKhousing: [],
banner: [],
service: '',
servicename: '',
video: '',
screen_data: {},
advListHKhousing: {},
advListotherHousing: {},
initState: false,
unreadMessages: 0, // 底部我的图标 未读系统通知数量
areaList: ['school', 'district', 'type'],
areaTab: "school", // school district type
areaObj: {
'school': 0,
'district': 1,
'type': 2,
},
},
/**
* 生命周期函数--监听页面加载
*/
timer: null,
onLoad: function (options) {
wx.showLoading()
this.get_config()
},
/**
* 生命周期函数--监听页面加载
*/
timer: null,
onLoad: function (options) {
wx.showLoading()
this.get_config()
},
// 获取系统通知数量
getNoticeNumber() {
if (app.globalData.unreadMessagesState) return
miucms.count().then(res => {
this.setData({
unreadMessages: res.data.count
})
})
},
// 获取系统通知数量
getNoticeNumber() {
if (app.globalData.unreadMessagesState) return
miucms.count().then(res => {
this.setData({
unreadMessages: res.data.count
})
})
},
get_config() {
var that = this;
this.setData({
screen_data: app.globalData.screen_data,
bottomLift: app.globalData.screen_data.bottomLift,
})
// if (app.globalData.code) {
if (app.globalData.config && app.globalData.config.lists) {
this.get_list();
this.setData({
initState: true
})
} else {
setTimeout(function () {
that.get_config()
}, 10)
}
},
get_config() {
var that = this;
this.setData({
screen_data: app.globalData.screen_data,
bottomLift: app.globalData.screen_data.bottomLift,
})
// if (app.globalData.code) {
if (app.globalData.config && app.globalData.config.lists) {
this.get_list();
this.setData({
initState: true
})
} else {
setTimeout(function () {
that.get_config()
}, 10)
}
},
get_list() {
var that = this;
miucms.request('https://app.gter.net/tenement/home', {}).then(data => {
let advListHKhousing = {},
advListotherHousing = {};
if (data.data.advList && data.data.advList.HKhousing && data.data.advList.HKhousing.length > 0) {
data.data.advList.HKhousing.forEach(item => {
advListHKhousing[item.position + ''] = Object.assign({}, item)
})
}
if (data.data.advList && data.data.advList.otherHousing && data.data.advList.otherHousing.length > 0) {
data.data.advList.otherHousing.forEach(item => {
advListotherHousing[item.position + ''] = Object.assign({}, item)
})
}
get_list() {
var that = this;
miucms.request('https://app.gter.net/tenement/home', {}).then(data => {
let advListHKhousing = {},
advListotherHousing = {};
if (data.data.advList && data.data.advList.HKhousing && data.data.advList.HKhousing.length > 0) {
data.data.advList.HKhousing.forEach(item => {
advListHKhousing[item.position + ''] = Object.assign({}, item)
})
}
if (data.data.advList && data.data.advList.otherHousing && data.data.advList.otherHousing.length > 0) {
data.data.advList.otherHousing.forEach(item => {
advListotherHousing[item.position + ''] = Object.assign({}, item)
})
}
let findHouseSource = data.data.findHouseSource
let findHouseSource = data.data.findHouseSource
findHouseSource.forEach(element => {
if (Array.isArray(element['rent'])) element['rent'] = `${element['rent'][0]} ~ ${ element['rent'][1] }`
})
findHouseSource.forEach(element => {
if (Array.isArray(element['rent'])) element['rent'] = `${element['rent'][0]} ~ ${ element['rent'][1] }`
})
that.setData({
HKapartment: data.data.HKapartment,
otherHousing: data.data.otherHousing,
findHouseSource,
HKhousing: data.data.HKhousing,
banner: data.data.banner,
service: data.data.service,
servicename: data.data.servicename,
advListHKhousing,
advListotherHousing,
loding: false
},
function () {
wx.hideLoading()
that.getNoticeNumber()
})
}).catch(res => {})
},
that.setData({
HKapartment: data.data.HKapartment,
otherHousing: data.data.otherHousing,
findHouseSource,
HKhousing: data.data.HKhousing,
banner: data.data.banner,
service: data.data.service,
servicename: data.data.servicename,
advListHKhousing,
advListotherHousing,
loding: false
},
function () {
wx.hideLoading()
that.getNoticeNumber()
})
}).catch(res => {})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title: "寄托香港租房"
}
},
copy() {
// const content = 'GTservice';
// const content = 'Gternet2';
const content = this.data.servicename;
miucms.copy(content).then((res) => {}).catch(err => {})
},
play(e) {
this.setData({
video: e.detail.src
})
},
closePage(e) {
this.setData({
video: ''
})
},
// 关闭广告
closeAd(e) {
let {
position,
world,
id
} = e.detail;
if (world) {
delete this.data.advListotherHousing[position];
this.setData({
advListotherHousing: this.data.advListotherHousing
})
} else {
delete this.data.advListHKhousing[position];
this.setData({
advListHKhousing: this.data.advListHKhousing
})
}
miucms.closeAD(id)
},
// 点击广告
clickAD(e) {
miucms.clickAD(e.detail.id)
}
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title: "寄托香港租房"
}
},
copy() {
// const content = 'GTservice';
// const content = 'Gternet2';
const content = this.data.servicename;
miucms.copy(content).then((res) => {}).catch(err => {})
},
play(e) {
this.setData({
video: e.detail.src
})
},
closePage(e) {
this.setData({
video: ''
})
},
// 关闭广告
closeAd(e) {
let {
position,
world,
id
} = e.detail;
if (world) {
delete this.data.advListotherHousing[position];
this.setData({
advListotherHousing: this.data.advListotherHousing
})
} else {
delete this.data.advListHKhousing[position];
this.setData({
advListHKhousing: this.data.advListHKhousing
})
}
miucms.closeAD(id)
},
// 点击广告
clickAD(e) {
miucms.clickAD(e.detail.id)
},
setValue(e) {
let value = e.currentTarget.dataset.value
this.setData({
areaTab: value
})
},
})

413
pages/index/index.wxml
View File

@ -1,187 +1,270 @@
<view class="container" wx:if="{{ !loding }}">
<header-nav inner-text="Some text" isIndexPage="index">寄托香港租房</header-nav>
<!-- swiper -->
<head-swiper attachment="{{ banner }}" isInner="1"></head-swiper>
<!-- 搜索 -->
<navigator url="/pages/search/search" class="search-btn" hover-class="hover">
<!-- <image class='searchbtn' src="../../img/search-6.png" />搜索房源 -->
<image class='searchbtn' src="../../img/search-6.png" />搜索房源或输入房源ID
</navigator>
<!-- 分类 -->
<view class="types-tab">
<navigator class="item" url="/pages/personList/personList" hover-class="hover">
<view class="img-box">
<image src="/img/hkperson.jpg"></image>
</view>
<!-- <view>香港个人房源</view> -->
<view>个人房源</view>
<header-nav inner-text="Some text" isIndexPage="index">寄托香港租房</header-nav>
<!-- swiper -->
<head-swiper attachment="{{ banner }}" isInner="1"></head-swiper>
<!-- 搜索 -->
<navigator url="/pages/search/search" class="search-btn" hover-class="hover">
<!-- <image class='searchbtn' src="../../img/search-6.png" />搜索房源 -->
<image class='searchbtn' src="../../img/search-6.png" />搜索房源或输入房源ID
</navigator>
<navigator class="item" url="/pages/irentList/irentList" hover-class="hover">
<view class="img-box">
<image src="/img/hkbrands.jpg"></image>
</view>
<view>品牌公寓</view>
</navigator>
<!-- <navigator class="item" url="/pages/UK/UK" hover-class="hover">
<!-- 分类 -->
<view class="types-tab">
<navigator class="item" url="/pages/personList/personList" hover-class="hover">
<view class="img-box">
<image src="/img/hkperson.jpg"></image>
</view>
<!-- <view>香港个人房源</view> -->
<view>个人房源</view>
</navigator>
<navigator class="item" url="/pages/irentList/irentList" hover-class="hover">
<view class="img-box">
<image src="/img/hkbrands.jpg"></image>
</view>
<view>品牌公寓</view>
</navigator>
<!-- <navigator class="item" url="/pages/UK/UK" hover-class="hover">
<view class="img-box">
<image src="/img/uk-apartment.png"></image>
</view>
<view>英国学生公寓</view>
</navigator> -->
<navigator class="item" url="/pages/restOfWorld/restOfWorld" hover-class="hover">
<view class="img-box">
<image src="/img/uk-apartment.png"></image>
<!-- <image src="/img/worldother.jpg"></image> -->
</view>
<!-- <view>世界各地房源</view> -->
<view>求房源</view>
</navigator>
<!-- <navigator class="item" url="/pages/chooseLocation/chooseLocation" hover-class="hover"> -->
<navigator class="item" url="/pages/edit/edit?cityName=香港&alias=Hongkong&uniqid=kbu4a9v7CjzvjJ__vUlA_jYDaTVRHWsf93n0bXfpkc4Q5XuCsk2ubBTz-qLRaUT_87YAS_ET7pf5tt0itORxLtPJJ7C76Q5_qXBATZgDTr_uyuBsaOnC0YA0Gm239lTdshoOpmqksJ85qQMXI_-jSNt7O4wZA5bropLHPIPdq6sX51OVn1WobolXqAcUbe-4mXPFIFpawZNCwmPlLf8e2ZZdkxkmfq_fCw7Pd8jj5rFiJh2_Im7unspYmE8nOO4iePI0wmW9F50tai27VeWj2s2mmGO6kiqhIb3B_Irub_WT3ys-0-1Yvf9oHop6dz0TAXgc6-ReM_tIZDE0NQ~~" hover-class="hover">
<view class="img-box addhousingresource-icon">
<view class="addhousingresource-yellow">
<view class="across"></view>
<view class="vertical"></view>
<navigator class="item" url="/pages/restOfWorld/restOfWorld" hover-class="hover">
<view class="img-box">
<image src="/img/uk-apartment.png"></image>
<!-- <image src="/img/worldother.jpg"></image> -->
</view>
<!-- <view>世界各地房源</view> -->
<view>求房源</view>
</navigator>
<!-- <navigator class="item" url="/pages/chooseLocation/chooseLocation" hover-class="hover"> -->
<navigator class="item" url="/pages/edit/edit?cityName=香港&alias=Hongkong&uniqid=kbu4a9v7CjzvjJ__vUlA_jYDaTVRHWsf93n0bXfpkc4Q5XuCsk2ubBTz-qLRaUT_87YAS_ET7pf5tt0itORxLtPJJ7C76Q5_qXBATZgDTr_uyuBsaOnC0YA0Gm239lTdshoOpmqksJ85qQMXI_-jSNt7O4wZA5bropLHPIPdq6sX51OVn1WobolXqAcUbe-4mXPFIFpawZNCwmPlLf8e2ZZdkxkmfq_fCw7Pd8jj5rFiJh2_Im7unspYmE8nOO4iePI0wmW9F50tai27VeWj2s2mmGO6kiqhIb3B_Irub_WT3ys-0-1Yvf9oHop6dz0TAXgc6-ReM_tIZDE0NQ~~" hover-class="hover">
<view class="img-box addhousingresource-icon">
<view class="addhousingresource-yellow">
<view class="across"></view>
<view class="vertical"></view>
</view>
</view>
<view style="color: #ffc05f;">发布房源</view>
</navigator>
</view>
<!-- 区域选择 -->
<view class="area-selection">
<view class="head flexacenter shadow">
<view class="head-item flexcenter flex1 {{ item == areaTab ? 'pitch' : '' }}" wx:for="{{ areaList }}" bindtap="setValue" data-value="{{ item }}">
学校附近
<view class="head-underline" wx:if="{{ item == areaTab }}"></view>
</view>
</view>
</view>
<view style="color: #ffc05f;">发布房源</view>
</navigator>
</view>
<!-- 个人房源 -->
<view class="house-block">
<navigator url="/pages/personList/personList" hover-class="hover" class="title">
<view>个人房源</view>
<view class="more">
more
<image src="/img/more-yellow.png"></image>
</view>
</navigator>
<scroll-view scroll-x="true" class="scroll">
<view class="inner-scroll">
<block wx:for="{{ HKhousing }}" wx:key="index">
<block wx:if="{{ index<HKhousing.length-1 }}">
<!-- 非广告 -->
<navigator class="item" hover-class="hover" url="/pages/show/show?tid={{ item.tid }}&uniqid={{ item.uniqid }}&cityid=1" wx:if="{{ !advListHKhousing[index+1] }}">
<view class="card">
<card-person isads="{{false}}" item="{{ item }}"></card-person>
</view>
</navigator>
<!-- 广告 -->
<navigator class="item" hover-class="hover" url="/{{ advListHKhousing[index+1].path }}" wx:if="{{ advListHKhousing[index+1] }}">
<view class="card">
<card-person bindcloseAd="closeAd" bindclickAD="clickAD" isads="true" item="{{ advListHKhousing[index+1] }}"></card-person>
</view>
</navigator>
</block>
</block>
<navigator class="item" hover-class="hover" url="/pages/personList/personList" wx:if="{{ HKhousing.length>0}}">
<view class="card">
<card-person item="{{ HKhousing[HKhousing.length-1] }}"></card-person>
</view>
<view class="last-child">
<view class="btn">查看更多
<image src="/img/more-white.png"></image>
<view class="area-content shadow">
<view class="area-data flexcenter">
<image class="area-icon" mode="widthFix" src="/img/area-icon.png"></image>
当前共有 <view class="area-amount">13298</view> 个房源
</view>
<view wx:if="{{ areaTab == 'school' }}" class="area-list area-school flexflex">
<view class="area-item flexcenter" wx:for="{{ 10 }}">港岛</view>
</view>
<view wx:if="{{ areaTab == 'district' }}" class="area-list area-district flexflex">
<view class="area-item flexcenter" wx:for="{{ 3 }}">港岛</view>
</view>
<block wx:if="{{ areaTab == 'type' }}">
<view class="area-list area-type flexflex">
<view class="area-type-name">合租</view>
<view class="area-type-block flex1 flexflex">
<view class="area-item flexcenter" wx:for="{{ 5 }}">港岛</view>
</view>
</view>
<view class="area-list area-type flexflex">
<view class="area-type-name">合租</view>
<view class="area-type-block flex1 flexflex">
<view class="area-item flexcenter" wx:for="{{ 5 }}">港岛</view>
</view>
</view>
</block>
</view>
<page-container show="{{ false }}" z-index="{{ 1001 }}">
<view class="area-pop-header" style="height: {{ screen_data.totalTopHeight }}px;">
<view style="height:{{screen_data.statusBarHeight}}px"></view>
<view class="flexacenter" style="height:{{screen_data.titleBarHeight}}px">
<view class="area-pop-header-left flexacenter flex1">
<image mode="widthFix" class="" src="/img/back.png"></image>
</view>
<view class="area-pop-header-title">区域找房</view>
<view class=" flex1"></view>
</view>
</view>
<view class="area-pop-content flexflex" style="top: {{ screen_data.totalTopHeight }}px;">
<view class="flexflex flex1">
<view class="area-pop-content-left">
<view class="area-pop-content-left-item pitch flexcenter">港岛</view>
<view class="area-pop-content-left-item flexcenter">九龙</view>
<view class="area-pop-content-left-item flexcenter">新界</view>
</view>
<view class="area-pop-content-right flex1">
<view class="area-pop-content-right-item flexacenter" wx:for="{{ 10 }}">
<view class="area-pop-content-right-name">不限</view>
<view class="area-pop-content-right-operate"></view>
</view>
</view>
</view>
<view class="area-pop-bottom flexacenter">
<view class="area-pop-reset-btn flexcenter">
<image class="" src="/img/reset.svg"></image>
重置
</view>
<view class="area-pop-confirm-btn flex1 flexcenter">确定</view>
</view>
</view>
</page-container>
</view>
<!-- 个人房源 -->
<view class="house-block">
<navigator url="/pages/personList/personList" hover-class="hover" class="title">
<view>个人房源</view>
<view class="more">
more
<image src="/img/more-yellow.png"></image>
</view>
</view>
</navigator>
<view class="right"></view>
</view>
</scroll-view>
</view>
<scroll-view scroll-x="true" class="scroll">
<view class="inner-scroll">
<block wx:for="{{ HKhousing }}" wx:key="index">
<block wx:if="{{ index<HKhousing.length-1 }}">
<!-- 非广告 -->
<navigator class="item" hover-class="hover" url="/pages/show/show?tid={{ item.tid }}&uniqid={{ item.uniqid }}&cityid=1" wx:if="{{ !advListHKhousing[index+1] }}">
<view class="card">
<card-person isads="{{false}}" item="{{ item }}"></card-person>
</view>
</navigator>
<!-- 广告 -->
<navigator class="item" hover-class="hover" url="/{{ advListHKhousing[index+1].path }}" wx:if="{{ advListHKhousing[index+1] }}">
<view class="card">
<card-person bindcloseAd="closeAd" bindclickAD="clickAD" isads="true" item="{{ advListHKhousing[index+1] }}"></card-person>
</view>
</navigator>
</block>
<!-- 品牌公寓 -->
<view class="house-block house-brands">
<navigator url="/pages/irentList/irentList" hover-class="hover" class="title">
<view>品牌公寓</view>
<view class="more">
more
<image src="/img/more-blue.png"></image>
</view>
</navigator>
<scroll-view scroll-x="true" class="scroll">
<view class="inner-scroll">
<block wx:for="{{ HKapartment }}" wx:key="index">
<navigator class="item" hover-class="hover" url="/pages/irentDetail/irentDetail?uniqid={{item.uniqid}}" wx:if="{{ index<HKapartment.length-1 }}">
<view class="card">
<card-brands bindplay="play" item="{{ item }}" index="{{ index }}"></card-brands>
</block>
<navigator class="item" hover-class="hover" url="/pages/personList/personList" wx:if="{{ HKhousing.length>0}}">
<view class="card">
<card-person item="{{ HKhousing[HKhousing.length-1] }}"></card-person>
</view>
<view class="last-child">
<view class="btn">查看更多
<image src="/img/more-white.png"></image>
</view>
</view>
</navigator>
<view class="right"></view>
</view>
</navigator>
</block>
<navigator class="item" hover-class="hover" url="/pages/irentList/irentList" wx:if="{{ HKapartment.length>0}}">
<view class="card">
<card-brands bindplay="play" item="{{ HKapartment[HKapartment.length-1] }}"></card-brands>
</view>
<view class="last-child">
<view class="btn">查看更多
<image src="/img/more-white.png"></image>
</scroll-view>
</view>
<!-- 品牌公寓 -->
<view class="house-block house-brands">
<navigator url="/pages/irentList/irentList" hover-class="hover" class="title">
<view>品牌公寓</view>
<view class="more">
more
<image src="/img/more-blue.png"></image>
</view>
</view>
</navigator>
<view class="right"></view>
</view>
</scroll-view>
</view>
<!-- 世界各地房源 -->
<view wx:if="{{ otherHousing.length>0 }}" class="house-block world-block">
<navigator url="/pages/restOfWorld/restOfWorld" hover-class="hover" class="title">
<!-- <view>世界各地房源</view> -->
<view>求房源</view>
<view class="more">
more
<image src="/img/more-green.png"></image>
</view>
</navigator>
<scroll-view scroll-x="true" class="scroll">
<view class="inner-scroll">
<!-- <block wx:for="{{ otherHousing }}" wx:key="index"> -->
<block wx:for="{{ findHouseSource }}" wx:key="index">
<block wx:if="{{ index<otherHousing.length-1 }}">
<!-- 非广告 -->
<navigator class="item" hover-class="hover" url="/pages/show/show?tid={{ item.tid }}&uniqid={{ item.uniqid }}" wx:if="{{ !advListotherHousing[index+1] }}">
<view class="card">
<card-person world="true" bindclickAD="clickAD" bindcloseAd="closeAd" isads="{{ false }}" item="{{ item }}"></card-person>
</view>
</navigator>
<!-- 广告 -->
<navigator class="item" hover-class="hover" url="/{{ advListotherHousing[index+1].path}}" wx:if="{{ advListotherHousing[index+1] }}">
<view class="card">
<card-person world="true" bindclickAD="clickAD" bindcloseAd="closeAd" isads="{{ true }}" item="{{ advListotherHousing[index+1] }}"></card-person>
</view>
</navigator>
</block>
</block>
<navigator class="item" hover-class="hover" url="/pages/restOfWorld/restOfWorld" wx:if="{{ otherHousing.length>0}}">
<view class="card">
<card-person world="true" item="{{ otherHousing[otherHousing.length-1] }}"></card-person>
</view>
<view class="last-child">
<view class="btn">查看更多
<image src="/img/more-white.png"></image>
<scroll-view scroll-x="true" class="scroll">
<view class="inner-scroll">
<block wx:for="{{ HKapartment }}" wx:key="index">
<navigator class="item" hover-class="hover" url="/pages/irentDetail/irentDetail?uniqid={{item.uniqid}}" wx:if="{{ index<HKapartment.length-1 }}">
<view class="card">
<card-brands bindplay="play" item="{{ item }}" index="{{ index }}"></card-brands>
</view>
</navigator>
</block>
<navigator class="item" hover-class="hover" url="/pages/irentList/irentList" wx:if="{{ HKapartment.length>0}}">
<view class="card">
<card-brands bindplay="play" item="{{ HKapartment[HKapartment.length-1] }}"></card-brands>
</view>
<view class="last-child">
<view class="btn">查看更多
<image src="/img/more-white.png"></image>
</view>
</view>
</navigator>
<view class="right"></view>
</view>
</scroll-view>
</view>
<!-- 世界各地房源 -->
<view wx:if="{{ otherHousing.length>0 }}" class="house-block world-block">
<navigator url="/pages/restOfWorld/restOfWorld" hover-class="hover" class="title">
<!-- <view>世界各地房源</view> -->
<view>求房源</view>
<view class="more">
more
<image src="/img/more-green.png"></image>
</view>
</view>
</navigator>
<view class="right"></view>
</view>
</scroll-view>
</view>
<scroll-view scroll-x="true" class="scroll">
<view class="inner-scroll">
<!-- <block wx:for="{{ otherHousing }}" wx:key="index"> -->
<block wx:for="{{ findHouseSource }}" wx:key="index">
<block wx:if="{{ index<otherHousing.length-1 }}">
<!-- 非广告 -->
<navigator class="item" hover-class="hover" url="/pages/show/show?tid={{ item.tid }}&uniqid={{ item.uniqid }}" wx:if="{{ !advListotherHousing[index+1] }}">
<view class="card">
<card-person world="true" bindclickAD="clickAD" bindcloseAd="closeAd" isads="{{ false }}" item="{{ item }}"></card-person>
</view>
</navigator>
<!-- 广告 -->
<navigator class="item" hover-class="hover" url="/{{ advListotherHousing[index+1].path}}" wx:if="{{ advListotherHousing[index+1] }}">
<view class="card">
<card-person world="true" bindclickAD="clickAD" bindcloseAd="closeAd" isads="{{ true }}" item="{{ advListotherHousing[index+1] }}"></card-person>
</view>
</navigator>
</block>
<!-- 服务号推广 -->
<image mode='widthFix' show-menu-by-longpress class="popularize" src="{{ service }}" bindtap="copy"></image>
<!-- <image mode='widthFix' show-menu-by-longpress class="popularize" src="../../img/1.jpg" bindtap="copy"></image> -->
</block>
<navigator class="item" hover-class="hover" url="/pages/restOfWorld/restOfWorld" wx:if="{{ otherHousing.length>0}}">
<view class="card">
<card-person world="true" item="{{ otherHousing[otherHousing.length-1] }}"></card-person>
</view>
<view class="last-child">
<view class="btn">查看更多
<image src="/img/more-white.png"></image>
</view>
</view>
</navigator>
<view class="right"></view>
</view>
</scroll-view>
</view>
<fix-footer unreadMessages="{{ unreadMessages }}" bottomLift="{{ bottomLift }}"></fix-footer>
<view class='video-box' wx:if="{{ video }}">
<!-- <image src="../../img/close.png" class='close' bindtap='close_video'></image> -->
<video src="{{ video }}" custom-cache="{{false}}" autoplay='true'>
<cover-view bindtap="closePage" style="top:{{ screen_data.statusBarHeight -5 }}px;height:{{ screen_data.titleBarHeight +10 }}px;width:{{ screen_data.titleBarHeight +10 }}px" class="cover">
<cover-image class="image" src="/img/close-f.png"></cover-image>
<!-- 服务号推广 -->
<image mode='widthFix' show-menu-by-longpress class="popularize" src="{{ service }}" bindtap="copy"></image>
<!-- <image mode='widthFix' show-menu-by-longpress class="popularize" src="../../img/1.jpg" bindtap="copy"></image> -->
</cover-view>
</video>
</view>
<fix-footer unreadMessages="{{ unreadMessages }}" bottomLift="{{ bottomLift }}"></fix-footer>
<view class='video-box' wx:if="{{ video }}">
<!-- <image src="../../img/close.png" class='close' bindtap='close_video'></image> -->
<video src="{{ video }}" custom-cache="{{false}}" autoplay='true'>
<cover-view bindtap="closePage" style="top:{{ screen_data.statusBarHeight -5 }}px;height:{{ screen_data.titleBarHeight +10 }}px;width:{{ screen_data.titleBarHeight +10 }}px" class="cover">
<cover-image class="image" src="/img/close-f.png"></cover-image>
<announcement-popup interface="home" init="{{ initState }}"></announcement-popup>
</cover-view>
</video>
</view>
<announcement-popup interface="home" init="{{ initState }}"></announcement-popup>
</view>

606
pages/index/index.wxss
View File

@ -1,260 +1,556 @@
/* pages/pageIndex/pageIndex.wxss */
.container {
background: #fafafa;
min-height: 100vh;
padding-bottom: 160rpx;
background: #fafafa;
min-height: 100vh;
padding-bottom: 160rpx;
}
.search-btn {
display: flex;
align-items: center;
height: 90rpx;
line-height: 90rpx;
width: calc(100vw - 60rpx);
margin: 0 auto 35rpx;
border-radius: 10rpx;
color: #999;
font-size: 26rpx;
padding: 0 30rpx;
box-shadow: 0px 1px 21px 0px rgba(153, 153, 153, 0.27);
position: relative;
top: -25rpx;
z-index: 10;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.96)
display: flex;
align-items: center;
height: 90rpx;
line-height: 90rpx;
width: calc(100vw - 60rpx);
margin: 0 auto 35rpx;
border-radius: 10rpx;
color: #999;
font-size: 26rpx;
padding: 0 30rpx;
box-shadow: 0px 1px 21px 0px rgba(153, 153, 153, 0.27);
position: relative;
top: -25rpx;
z-index: 10;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.96)
}
.search-btn image {
width: 32rpx;
height: 32rpx;
margin-right: 16rpx;
width: 32rpx;
height: 32rpx;
margin-right: 16rpx;
}
.types-tab {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 22rpx;
color: #333;
padding: 0 30rpx 10rpx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 22rpx;
color: #333;
padding: 0 30rpx 10rpx;
}
.types-tab .item {
display: inline-flex;
/* flex: 1; */
justify-content: center;
align-items: center;
flex-direction: column;
display: inline-flex;
/* flex: 1; */
justify-content: center;
align-items: center;
flex-direction: column;
}
.types-tab .item .img-box {
margin-bottom: 16rpx;
display: inline-flex;
align-items: center;
justify-content: center;
width: 110rpx;
height: 110rpx;
border-radius: 30rpx;
background-color: rgb(255, 255, 255);
box-shadow: 0.629px 0.777px 16px 0px rgba(243, 243, 243, 0.996);
margin-bottom: 16rpx;
display: inline-flex;
align-items: center;
justify-content: center;
width: 110rpx;
height: 110rpx;
border-radius: 30rpx;
background-color: rgb(255, 255, 255);
box-shadow: 0.629px 0.777px 16px 0px rgba(243, 243, 243, 0.996);
}
.types-tab .item:nth-child(1) image {
width: 62rpx;
height: 58rpx;
width: 62rpx;
height: 58rpx;
}
.types-tab .item:nth-child(2) image {
width: 63rpx;
height: 60rpx;
width: 63rpx;
height: 60rpx;
}
.types-tab .item:nth-child(3) image {
width: 66rpx;
height: 57rpx;
width: 66rpx;
height: 57rpx;
}
.types-tab .item:nth-child(4) image {
width: 60rpx;
height: 60rpx;
width: 60rpx;
height: 60rpx;
}
.addhousingresource-icon {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.addhousingresource-icon .addhousingresource-yellow {
width: 60rpx;
height: 60rpx;
background-color: #fddb50;
border-radius: 50%;
position: relative;
width: 60rpx;
height: 60rpx;
background-color: #fddb50;
border-radius: 50%;
position: relative;
}
.across {
width: 32rpx;
height: 4rpx;
border-radius: 50rpx;
background-color: #000222;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 32rpx;
height: 4rpx;
border-radius: 50rpx;
background-color: #000222;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.vertical {
width: 4rpx;
height: 32rpx;
border-radius: 50rpx;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 4rpx;
height: 32rpx;
border-radius: 50rpx;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.house-block {
padding: 64rpx 0 0;
padding: 64rpx 0 0;
}
.house-block .title {
margin-bottom: 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 30rpx;
font-size: 32rpx;
color: #333;
margin-bottom: 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 30rpx;
font-size: 32rpx;
color: #333;
}
.house-block .title .more {
color: #ffc05f;
font-size: 24rpx;
padding: 10rpx 30rpx;
color: #ffc05f;
font-size: 24rpx;
padding: 10rpx 30rpx;
}
.house-block .title .more image {
width: 9rpx;
height: 14rpx;
margin-left: 10rpx;
width: 9rpx;
height: 14rpx;
margin-left: 10rpx;
}
.scroll {
width: 100vw;
width: 100vw;
}
.scroll .inner-scroll {
display: flex;
padding: 0 30rpx;
display: flex;
padding: 0 30rpx;
}
.scroll .inner-scroll .item {
margin-right: 20rpx;
display: inline-flex;
border-radius: 10rpx;
background-color: rgb(255, 255, 255);
box-shadow: 0.629px 0.777px 16px 0px rgba(243, 243, 243, 0.994);
flex: 0 0 620rpx;
max-width: calc(100vw - 130rpx);
overflow: hidden;
position: relative;
margin-right: 20rpx;
display: inline-flex;
border-radius: 10rpx;
background-color: rgb(255, 255, 255);
box-shadow: 0.629px 0.777px 16px 0px rgba(243, 243, 243, 0.994);
flex: 0 0 620rpx;
max-width: calc(100vw - 130rpx);
overflow: hidden;
position: relative;
}
.scroll .inner-scroll .right {
display: inline-flex;
flex: 0 0 2rpx;
display: inline-flex;
flex: 0 0 2rpx;
}
.scroll .last-child {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(5, 5, 5, 0.7);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(5, 5, 5, 0.7);
display: flex;
align-items: center;
justify-content: center;
}
.scroll .last-child .btn {
color: #fff;
width: 210rpx;
height: 120rpx;
border: 1px solid #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #fff;
width: 210rpx;
height: 120rpx;
border: 1px solid #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
}
.scroll .last-child .btn image {
width: 20rpx;
height: 20rpx;
margin-left: 10rpx;
width: 20rpx;
height: 20rpx;
margin-left: 10rpx;
}
.house-brands .title .more {
color: #66b3ff;
color: #66b3ff;
}
.world-block .title .more {
color: #74cdc1
color: #74cdc1
}
.inner-scroll .card {
display: block;
width: 100%;
display: block;
width: 100%;
}
.popularize {
display: block;
width: calc(100vw - 60rpx);
margin: 60rpx auto 0;
border-radius: 10rpx;
display: block;
width: calc(100vw - 60rpx);
margin: 60rpx auto 0;
border-radius: 10rpx;
}
.video-box {
width: 100vw;
height: 100vh;
z-index: 100000;
background: rgba(0, 0, 0, 0.8);
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 100000;
background: rgba(0, 0, 0, 0.8);
position: fixed;
left: 0;
top: 0;
}
.video-box .close {
position: fixed;
left: 20rpx;
top: 20rpx;
width: 50rpx;
height: 50rpx;
z-index: 1000000
position: fixed;
left: 20rpx;
top: 20rpx;
width: 50rpx;
height: 50rpx;
z-index: 1000000
}
.video-box video {
/* margin: calc(50vh - 120px) auto;
/* margin: calc(50vh - 120px) auto;
display: block; */
width: 100vw;
height: 100vh;
width: 100vw;
height: 100vh;
}
.cover {
position: fixed;
left: 5px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
position: fixed;
left: 5px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.cover .image {
width: 30rpx;
height: 30rpx;
width: 30rpx;
height: 30rpx;
}
.area-selection .shadow {
-moz-box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0784313725490196);
/* box-shadow: 0 0 12rpx red; */
}
.area-selection {
width: 690rpx;
border-radius: 24rpx;
margin: 0 auto;
overflow: hidden;
}
.area-selection .head {
height: 102rpx;
font-size: 27rpx;
color: #fff;
background-color: rgb(98, 177, 255);
margin-top: 12rpx;
border-radius: 24rpx 24rpx 0 0;
/* overflow: hidden; */
margin-top: 30rpx;
}
.area-selection .head .head-item {
height: 100%;
flex-direction: column;
margin-bottom: 18rpx;
}
.area-selection .head .pitch {
color: #000000;
font-size: 30rpx;
font-weight: 650;
position: relative;
z-index: 1;
padding-bottom: 24rpx;
background-color: #fff;
height: 114rpx;
border-radius: 24rpx 24rpx 0 0;
margin-bottom: 12rpx;
/* -moz-box-shadow: 0 -12rpx 12rpx rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0 -12rpx 12rpx rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0 -12rpx 12rpx rgba(0, 0, 0, 0.0784313725490196) */
box-shadow: 0 -6rpx 12rpx rgba(0, 0, 0, 0.0784313725490196);
}
.area-selection .head .pitch::after,
.area-selection .head .pitch::before {
content: "";
position: absolute;
bottom: 18rpx;
right: -24rpx;
width: 24rpx;
height: 24rpx;
background: radial-gradient(24rpx at 24rpx 0px, transparent 24rpx, #fff 24rpx);
}
.area-selection .head .pitch::after {
left: -24rpx;
right: auto;
transform: scaleX(-1);
}
.area-selection .head .head-underline {
width: 122rpx;
height: 8rpx;
border-radius: 57rpx;
background-color: rgba(253, 218, 85, 1);
margin-top: 6rpx;
}
.area-selection .area-content {
background-color: #fff;
border-radius: 24rpx;
margin-top: -18rpx;
padding-bottom: 48rpx;
}
.area-selection .area-data {
font-size: 24rpx;
color: #555555;
padding-top: 55rpx;
position: relative;
margin-bottom: 48rpx;
}
.area-selection .area-data::after,
.area-selection .area-data::before {
content: "";
width: 124.5rpx;
height: 1rpx;
background-color: #ebebeb;
position: absolute;
}
.area-selection .area-data::before {
left: 30rpx;
}
.area-selection .area-data::after {
right: 30rpx;
}
.area-selection .area-amount {
font-weight: 900;
margin: 0 15rpx;
}
.area-selection .area-icon {
width: 30rpx;
height: 30rpx;
margin-right: 15rpx;
}
.area-selection .area-list {
flex-wrap: wrap;
color: #555555;
font-size: 24rpx;
padding: 0 30rpx;
}
.area-selection .area-list.area-district {
justify-content: space-between;
}
.area-selection .area-list .area-item {
border-radius: 12rpx;
background-color: rgba(242, 242, 242, 1);
height: 60rpx;
}
.area-selection .area-list.area-district .area-item {
width: 198rpx;
}
.area-selection .area-list.area-school .area-item {
width: 90rpx;
margin-right: 18rpx;
margin-bottom: 18rpx;
}
.area-selection .area-list.area-school .area-item:nth-child(6n) {
margin-right: 0;
}
.area-selection .area-list.area-school .area-item:nth-child(n + 6) {
margin-bottom: 0;
}
.area-selection .area-list.area-type {
margin-bottom: 39rpx;
}
.area-selection .area-list.area-type:last-of-type {
margin-bottom: 0;
}
.area-selection .area-list.area-type .area-item {
width: 168rpx;
margin-right: 18rpx;
margin-bottom: 18rpx;
}
.area-selection .area-list.area-type .area-item:nth-child(3n) {
margin-right: 0;
}
.area-selection .area-list.area-type .area-type-name {
height: 60rpx;
line-height: 60rpx;
margin-right: 40rpx;
}
.area-selection .area-list.area-type .area-type-block {
flex-wrap: wrap;
}
.area-selection .area-list.area-type .area-item:nth-child(n + 3) {
margin-bottom: 0;
}
.area-pop-header {
background-color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
border-bottom: 1rpx solid #ebebeb;
}
.area-pop-header .area-pop-header-title {
font-size: 32rpx;
color: #000000;
font-weight: 650;
}
.area-pop-header .area-pop-header-left {
padding-left: 30rpx;
}
.area-pop-header .area-pop-header-left image {
width: 30rpx;
height: 18rpx;
transform: rotate(-90deg);
}
.area-pop-content {
position: fixed;
left: 0;
top: 80rpx;
width: 100%;
background-color: #fff;
flex-direction: column;
}
.area-pop-content-left {
width: 180rpx;
color: #555555;
font-size: 27rpx;
background-color: rgba(246, 246, 246, 1);
}
.area-pop-content-left .area-pop-content-left-item {
height: 120rpx;
width: 100%;
}
.area-pop-content-left .area-pop-content-left-item.pitch {
background-color: #fff;
font-weight: 650;
color: #000000;
}
.area-pop-content-right {
color: #555555;
font-size: 27rpx;
overflow: auto;
min-height: 50vh;
max-height: 60vh;
}
.area-pop-content-right .area-pop-content-right-item {
height: 120rpx;
padding-left: 48rpx;
padding-right: 31.5rpx;
justify-content: space-between;
}
.area-pop-content-right .area-pop-content-right-operate {
width: 27rpx;
height: 27rpx;
border-radius: 6rpx;
border: 1rpx solid rgba(170, 170, 170, 1);
}
.area-pop-bottom {
font-size: 36rpx;
padding: 36rpx 30rpx 54rpx;
border-top: 1rpx solid #ebebeb;
}
.area-pop-bottom .area-pop-reset-btn {
color: #D7D7D7;
}
.area-pop-bottom .area-pop-reset-btn image {
width: 30rpx;
height: 30rpx;
margin-right: 12rpx;
}
.area-pop-bottom .area-pop-reset-btn {
width: 180rpx;
height: 96rpx;
border-radius: 82.5rpx;
border: 1rpx solid rgba(215, 215, 215, 1);
margin-right: 30rpx;
}
.area-pop-bottom .area-pop-confirm-btn {
height: 96rpx;
border-radius: 82.5rpx;
background-color: rgba(98, 177, 255, 1);
color: #fff;
font-size: 650;
}

2
pages/personList/personList.wxml
View File

@ -51,7 +51,7 @@
<!--合租 -->
<view class='list'>
<!-- <common-list></common-list> -->
<common-list></common-list>
<block wx:for="{{ lists }}" wx:key="index">
<template is="personalList" wx:if="{{ !item.isad }}" data="{{ item:item }}" />
<ads isList="true" wx:if="{{ item.isad && !item.banner }}" data-index="{{ index }}" bindclickAD="clickAD" bindcloseAD="closeAD" item="{{ item }}"></ads>

49
template/commonList/commonList.wxml
View File

@ -1,21 +1,46 @@
<!--template/commonList/commonList.wxml-->
<!-- <text>template/commonList/commonList.wxml</text> -->
<view class="item">
<view class="top-right-corner">
<view class="top-right-corner-content"></view>
</view>
<view class="head flexacenter">
<image class="head-icon" src="/img/list-head.png"></image>
认证房源
</view>
<view class="content">
<view class="title">三房找一位室友合租，家具设备齐全，拎包入住</view>
<view class="area-list flexflex">
<view class="area-item flexacenter" wx:for="{{ 1 }}">
<image class="area-icon" src="/img/orientation.png"></image>
九龙 > 尖沙咀/佐敦
<view class="title">三房找一位室友合租，家具设备家具设备家具设备齐全，拎包入住</view>
<view class="information flexacenter">
<view class="left">
<view class="area-list flexflex">
<view class="area-item flexacenter" wx:for="{{ 1 }}">
<image class="area-icon" src="/img/orientation.png"></image>
九龙 > 尖沙咀/佐敦
<view class="area-vertical"></view>
<view class="area-distance">0.9km </view>
</view>
</view>
<view class="tab-list">
整租 · studio · 有电梯 · 短租
</view>
<view class="price-section flexacenter">
<view class="unit">HK$</view>
<view class="price">8000~10000</view>/月
</view>
</view>
<view class="right flexflex">
<image wx:if="{{ false }}" class="image" mode="widthFix" src="https://oss.gter.net/Zvt57TuJSUvkyhw-xG7Y2l-T95wud3bqqsgFptxhXa6SWi2uePJ5Bg8VFrPIvsEG-4BUCm7F7lfn5E5jtX0K_tdQgQ_5bap6c_Ca1y46ujtLOuWoNKTjEaE0NDI5"></image>
<view wx:else class="video flexflex">
<view class="mask"></view>
<image class="image" mode="widthFix" src="https://oss.gter.net/Zvt57TuJSUvkyhw-xG7Y2l-T95wud3bqqsgFptxhXa6SWi2uePJ5Bg8VFrPIvsEG-4BUCm7F7lfn5E5jtX0K_tdQgQ_5bap6c_Ca1y46ujtLOuWoNKTjEaE0NDI5"></image>
<image class="video-icon" src="/img/videoplay.png"></image>
</view>
</view>
</view>
<view class="tab-list">
整租 · studio · 有电梯 · 短租
</view>
<view class="price-section flexacenter">
<view class="unit">HK$</view>
<view class="price">8000~10000</view>/月
</view>
</view>
<view class="footer flexacenter">
<image class="avatar" src="https://oss.gter.net/avatar/97KwEWIDY-QTHTXcpEbnWQxaRv6Xz0ll1wRhYWNh/middle"></image>

85
template/commonList/commonList.wxss
View File

@ -2,8 +2,9 @@
@import '/app.wxss';
.item {
position: relative;
background-color: #fff;
margin: 0 30rpx;
margin: 0 28rpx;
border-radius: 24rpx;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
@ -11,6 +12,27 @@
.content {
padding: 0 20rpx;
position: relative;
}
.top-right-corner {
top: 0;
right: 0;
background-color: #fddf6d;
/* background-color: transparent; */
position: absolute;
width: 45rpx;
height: 45rpx;
border-radius: 10rpx;
}
.top-right-corner .top-right-corner-content {
background-color: #fff;
border-radius: 0 35rpx 0 0;
width: 100%;
height: 100%;
}
.title {
@ -49,6 +71,18 @@
margin-right: 8rpx;
}
.area-list .area-vertical {
width: 1rpx;
height: 24rpx;
background-color: #D7D7D7;
margin: 0 10rpx;
}
.area-list .area-distance {
color: #50E3C2;
}
.price-section {
color: #555555;
@ -69,6 +103,38 @@
padding: 0 15rpx;
}
.information {
justify-content: space-between;
}
.image {
width: 200rpx;
height: 174rpx;
border-radius: 15rpx;
}
.video {
position: relative;
border-radius: 15rpx;
overflow: hidden;
}
.video .mask {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(51, 51, 51, 0.733);
}
.video .video-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 45rpx;
height: 45rpx;
}
.footer {
padding: 0 20rpx;
font-size: 21rpx;
@ -103,4 +169,21 @@
height: 30rpx;
margin-right: 18rpx;
}
.head {
width: 640.5rpx;
border-radius: 24rpx 0 0 0;
height: 48rpx;
padding-left: 20rpx;
color: #fff;
font-size: 24rpx;
background-image: linear-gradient(to right, #8080ff, #fff);
}
.head .head-icon {
width: 36rpx;
height: 36rpx;
margin-right: 15rpx;
margin-left: 6rpx;
}