You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
836 lines
27 KiB
836 lines
27 KiB
<template>
|
|
<view class="Locations">
|
|
|
|
<map style="width: 100%;height: 60vh;pointer-events: auto;"
|
|
:layer-style='5'
|
|
:show-location='true'
|
|
:latitude="position.latitude"
|
|
:longitude="position.longitude"
|
|
:markers="spotGuideMarkers"
|
|
:scale="scale"
|
|
@markertap="markertap"
|
|
id="mapId"
|
|
@callouttap="callouttap"
|
|
:enable-zoom="true"
|
|
:enable-scroll="true"
|
|
:enable-rotate="true">
|
|
</map>
|
|
|
|
<!-- 测试按钮 -->
|
|
<view class="test-button" @click="testLoadHouseList">
|
|
<text>测试加载房源</text>
|
|
</view>
|
|
|
|
<!-- 搜索功能 -->
|
|
<view class="search-container">
|
|
<view class="se-bgc-white se-pb-20 se-pt-30 se-px-40">
|
|
<uv-search @search="onSearch" placeholder="搜索租房信息" :showAction="false" v-model="keyword" :disabled="false"></uv-search>
|
|
</view>
|
|
<view class="se-pb-10 se-px-40 se-bgc-white">
|
|
<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#1EC77A"
|
|
:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
|
|
:extra-active-icon="{name:'arrow-up-fill',color:'#1EC77A',size:'26rpx'}" :defaultValue="defaultValue"
|
|
:custom-style="{padding: '0rpx 0rpx',borderBottom:'1rpx solid transparent'}" @click="selectMenu">
|
|
|
|
<uv-drop-down-item name="region" type="2" :label="dropItem('region').label" :value="dropItem('region').value">
|
|
</uv-drop-down-item>
|
|
<uv-drop-down-item name="rent" type="2" :label="dropItem('rent').label" :value="dropItem('rent').value">
|
|
</uv-drop-down-item>
|
|
<uv-drop-down-item name="type" type="2" :label="dropItem('type').label" :value="dropItem('type').value">
|
|
</uv-drop-down-item>
|
|
<uv-drop-down-item name="duration" type="2" :label="dropItem('duration').label" :value="dropItem('duration').value">
|
|
</uv-drop-down-item>
|
|
</uv-drop-down>
|
|
<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" :currentDropItem="currentDropItem"
|
|
@clickItem="clickItem" @popupChange="change"></uv-drop-down-popup>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="Locations-list">
|
|
<!-- 房源列表 -->
|
|
<homeList :list="list"></homeList>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { housePageList, houseType, houseArea, houseIconClass, housePrice, houseYear } from "@/common/api.js"
|
|
import { getInfo } from "@/common/api.js"
|
|
import homeList from "@/components/home/homeList.vue"
|
|
export default {
|
|
components: {
|
|
homeList
|
|
},
|
|
data() {
|
|
return {
|
|
scale: 12, //缩放级别
|
|
show: true,
|
|
tabs: [],
|
|
spotGuideIndex: 0, // 当前选中的菜单索引
|
|
position: {
|
|
latitude: 23.106574,
|
|
longitude: 113.324587
|
|
},
|
|
areaId: null, // 当前选中的区域ID
|
|
// 房源列表相关数据
|
|
list: [],
|
|
classId: null,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
houseTypeList: [], // 房源类型列表
|
|
currentHouseType: 0, // 当前选中的房源类型索引
|
|
userInfo: null, // 用户信息
|
|
|
|
// 搜索功能相关数据
|
|
keyword: "",
|
|
// 表示value等于这些值，就属于默认值
|
|
defaultValue: ['all', 'all', 'all','all'],
|
|
// 筛选结果
|
|
result: [],
|
|
region:{
|
|
label: '区域',
|
|
value: 'all',
|
|
activeIndex: 0,
|
|
color: '#333',
|
|
activeColor: '#1EC77A',
|
|
child: []
|
|
},
|
|
rent:{
|
|
label: '租金',
|
|
value: 'all',
|
|
activeIndex: 0,
|
|
color: '#333',
|
|
activeColor: '#1EC77A',
|
|
child: []
|
|
},
|
|
type: {
|
|
label: '类型',
|
|
value: 'all',
|
|
activeIndex: 0,
|
|
color: '#333',
|
|
activeColor: '#1EC77A',
|
|
child: []
|
|
},
|
|
duration:{
|
|
label: '年限',
|
|
value: 'all',
|
|
activeIndex: 0,
|
|
color: '#333',
|
|
activeColor: '#1EC77A',
|
|
child: []
|
|
},
|
|
activeName: 'region',
|
|
// 筛选条件
|
|
priceId: null,
|
|
classId: null,
|
|
yearId: null
|
|
}
|
|
},
|
|
computed: {
|
|
spotGuideMarkers() {
|
|
let markers = [];
|
|
console.log('计算地图标记点，房源列表长度:', this.list.length)
|
|
|
|
this.list.forEach((item, index) => {
|
|
if (item.latitude && item.longitude) {
|
|
console.log(`添加标记点 ${index}:`, item.title, item.latitude, item.longitude)
|
|
markers.push({
|
|
id: index,
|
|
latitude: parseFloat(item.latitude),
|
|
longitude: parseFloat(item.longitude),
|
|
iconPath: '/static/image/tourGuide/2.png',
|
|
width: 30,
|
|
height: 30,
|
|
callout: {
|
|
content: item.title || '房源',
|
|
color: '#000000',
|
|
fontSize: 14,
|
|
borderRadius: 5,
|
|
bgColor: '#ffffff',
|
|
padding: 5,
|
|
display: 'ALWAYS'
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
console.log('生成的标记点数量:', markers.length)
|
|
return markers;
|
|
},
|
|
|
|
// 搜索功能计算属性
|
|
dropItem() {
|
|
return (name) => {
|
|
const result = {};
|
|
const find = this.result.find(item => item.name === name);
|
|
if (find) {
|
|
result.label = find.label;
|
|
result.value = find.value;
|
|
} else {
|
|
result.label = this[name].label;
|
|
result.value = this[name].value;
|
|
}
|
|
return result;
|
|
}
|
|
},
|
|
// 获取当前下拉筛选项
|
|
currentDropItem() {
|
|
return this[this.activeName];
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log('页面加载完成')
|
|
// 确保在页面加载完成后初始化数据
|
|
this.$nextTick(() => {
|
|
if (this.list.length === 0) {
|
|
this.onHousePageList()
|
|
}
|
|
})
|
|
},
|
|
onPageScroll() {
|
|
// 滚动后及时更新下拉菜单位置
|
|
if (this.$refs.dropDown) {
|
|
this.$refs.dropDown.init();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getCurrentLocation()
|
|
this.onHouseType() // 获取房源类型
|
|
//this.getUserInfo() // 获取用户信息
|
|
// 初始化搜索筛选数据
|
|
this.initSearchData()
|
|
// 延迟加载房源列表，确保用户信息已获取
|
|
this.$nextTick(() => {
|
|
this.onHousePageList() // 加载房源列表
|
|
})
|
|
},
|
|
onPullDownRefresh() {
|
|
let that = this
|
|
that.pageNo = 1
|
|
that.list = []
|
|
that.onHousePageList()
|
|
},
|
|
onReachBottom() {
|
|
let that = this
|
|
that.pageNo = that.pageNo + 1
|
|
that.onHousePageList()
|
|
},
|
|
methods: {
|
|
getUserInfo(state){
|
|
this.$store.commit('getUserInfo', (userInfo) => {
|
|
this.userInfo = userInfo
|
|
if(userInfo && userInfo.isPay != 1){
|
|
|
|
uni.showModal({
|
|
title: '开通会员可查看租房地图',
|
|
content: '开通会员后可查看详细地址和联系方式',
|
|
confirmText: '立即开通',
|
|
cancelText: '取消',
|
|
success : res => {
|
|
if(res.confirm){
|
|
// 跳转到会员页面
|
|
uni.navigateTo({
|
|
url: '/pages_subpack/member/index'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 获取当前位置
|
|
getCurrentLocation() {
|
|
const that = this;
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function (res) {
|
|
console.log('当前位置的经度：' + res.longitude);
|
|
console.log('当前位置的纬度：' + res.latitude);
|
|
that.position.latitude = res.latitude;
|
|
that.position.longitude = res.longitude;
|
|
// 更新地图位置
|
|
that.onHousePageList();
|
|
},
|
|
fail: function (err) {
|
|
console.error('获取位置失败：', err);
|
|
uni.showToast({
|
|
title: '获取位置失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
//点击tab栏
|
|
clickTabs({ index, name }) {
|
|
this.currentArea = index
|
|
if (this.areaList[index]) {
|
|
this.areaId = this.areaList[index].id
|
|
}
|
|
this.onHousePageList()
|
|
this.$nextTick(() => {
|
|
this.selectArea()
|
|
})
|
|
},
|
|
setSpotGuideIndex(index) {
|
|
this.spotGuideIndex = index
|
|
this.onHousePageList()
|
|
},
|
|
textToSpeech() {
|
|
console.log('textToSpeech');
|
|
|
|
let self = this
|
|
|
|
// self.context.src = this.$config.baseUrl + '/info/textToAudio?text=' + "你好"
|
|
// self.context.play()
|
|
|
|
// return
|
|
|
|
plugin.textToSpeech({
|
|
lang: "zh_CN",
|
|
tts: true,
|
|
content: "景德镇市陶阳里御窑景区位于景德镇的城市中心地带，北起瓷都大桥、昌江大道，南至昌江大桥、西至沿江西路，东至莲社路、胜利路。 自宋以来，景德镇先民“沿河建窑，因窑成市”，渐呈“码头—民窑—老街—里弄—御窑”聚落的历史空间和瓷业肌理，形成了世界建筑史上绝无仅有的老城格局，成就了中国“东方瓷国”的盛誉，陶瓷成为了中国走向世界，世界认识中国的文化符号。这里是景德镇历史上制瓷业的中心、原点和高峰，是“一带一路”海上陶瓷之路的零公里起点，是研究皇家御窑制瓷历史文化和景德镇陶瓷技艺，讲好景德镇故事，传播中国声音的“窗口”和“名片”。",
|
|
success: function (res) {
|
|
self.context.src = res.filename;
|
|
self.context.play()
|
|
},
|
|
fail: function (res) {
|
|
console.log("fail tts", res)
|
|
}
|
|
})
|
|
},
|
|
//地图点击事件
|
|
markertap(e) {
|
|
console.log("markertap===你点击了标记点===", e)
|
|
|
|
let event = this.list[e.markerId]
|
|
|
|
if (event) {
|
|
this.onDetail(event)
|
|
} else {
|
|
console.error('未找到对应的房源数据')
|
|
uni.showToast({
|
|
title: '房源信息获取失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
openLocation(n) {
|
|
uni.openLocation({
|
|
latitude: n.spotLatitude,
|
|
longitude: n.spotLongitude,
|
|
})
|
|
},
|
|
//地图点击事件
|
|
callouttap(e) {
|
|
console.log('callouttap地图点击事件', e)
|
|
let event = this.list[e.markerId]
|
|
|
|
if (event && event.latitude && event.longitude) {
|
|
uni.openLocation({
|
|
latitude: event.latitude,
|
|
longitude: event.longitude,
|
|
})
|
|
} else {
|
|
console.error('未找到对应的房源位置信息')
|
|
uni.showToast({
|
|
title: '房源位置信息获取失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
toUrl(item) {
|
|
console.log(item);
|
|
if (item.categoryId == 0) {
|
|
this.$utils.navigateTo(`/pages_order/service/articleDetail?id=${item.id}&type=Inheritance`)
|
|
}
|
|
},
|
|
// 点击按钮将地图中心移动到指定定位点
|
|
moveTolocation(latitude, longitude) {
|
|
let mapObjs = uni.createMapContext('mapId', this)
|
|
mapObjs.moveToLocation(
|
|
{
|
|
latitude,
|
|
longitude
|
|
},
|
|
{
|
|
complete: res => {
|
|
console.log('移动完成:', res)
|
|
}
|
|
})
|
|
// this.onRegionChange('',true)
|
|
},
|
|
// 点击景区，选择最近的一个景点
|
|
selectArea() {
|
|
let item = this.spotGuide[0]
|
|
if (item && item.spotLatitude && item.spotLongitude) {
|
|
this.moveTolocation(item.spotLatitude, item.spotLongitude)
|
|
}
|
|
},
|
|
clickAreaDetail(id) {
|
|
uni.navigateTo({
|
|
url: '/pages_order/service/areaDetail?id=' + id
|
|
})
|
|
},
|
|
|
|
// 获取房源类型列表
|
|
onHouseType() {
|
|
houseType({}).then(response => {
|
|
console.info('houseType', response)
|
|
this.houseTypeList = response.result
|
|
}).catch(error => {
|
|
|
|
})
|
|
},
|
|
// 点击房源类型
|
|
onClickHouseType(event) {
|
|
console.info(event)
|
|
let that = this
|
|
that.pageNo = 1
|
|
that.classId = event.id
|
|
that.currentHouseType = event.index
|
|
that.list = []
|
|
that.onHousePageList()
|
|
},
|
|
// 获取房源列表
|
|
onHousePageList() {
|
|
let that = this
|
|
let params = {
|
|
classId: that.classId,
|
|
pageNo: that.pageNo,
|
|
pageSize: that.pageSize,
|
|
// 搜索和筛选参数
|
|
title: that.keyword, // 关键词搜索
|
|
areaId: that.areaId, // 区域筛选
|
|
priceId: that.priceId, // 租金筛选
|
|
classId: that.classId, // 类型筛选
|
|
yearId: that.yearId // 年限筛选
|
|
}
|
|
|
|
// 如果有位置信息，添加到参数中
|
|
if (that.position.latitude && that.position.longitude) {
|
|
params.latitude = that.position.latitude
|
|
params.longitude = that.position.longitude
|
|
}
|
|
|
|
console.log('请求房源列表参数:', params)
|
|
|
|
housePageList(params).then((response) => {
|
|
console.info("房源列表数据", response.result.records)
|
|
if (response.result && response.result.records) {
|
|
response.result.records.forEach((items, indexs) => {
|
|
if (items.image) {
|
|
items.images = items.image.split(',')
|
|
} else {
|
|
items.images = []
|
|
}
|
|
if (items.homeImage) {
|
|
items.homeImages = items.homeImage.split(',')
|
|
} else {
|
|
items.homeImages = []
|
|
}
|
|
if (items.iconTitle) {
|
|
items.iconTitles = items.iconTitle.split(',')
|
|
} else {
|
|
items.iconTitles = []
|
|
}
|
|
})
|
|
that.list = that.list.concat(response.result.records)
|
|
|
|
// 调试信息：检查有多少房源有位置信息
|
|
let markersCount = that.list.filter(item => item.latitude && item.longitude).length
|
|
console.log(`房源总数: ${that.list.length}, 有位置信息的房源: ${markersCount}`)
|
|
|
|
// 如果有房源数据，更新地图中心点
|
|
if (that.list.length > 0) {
|
|
let firstHouse = that.list.find(item => item.latitude && item.longitude)
|
|
if (firstHouse) {
|
|
that.position.latitude = firstHouse.latitude
|
|
that.position.longitude = firstHouse.longitude
|
|
}
|
|
|
|
// 强制更新地图组件
|
|
that.$nextTick(() => {
|
|
let mapContext = uni.createMapContext('mapId', that)
|
|
if (mapContext) {
|
|
mapContext.updateGroundOverlay({
|
|
id: 'markers',
|
|
'include-points': that.spotGuideMarkers
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}).catch((error) => {
|
|
console.error('获取房源列表失败:', error)
|
|
uni.showToast({
|
|
title: '获取房源列表失败',
|
|
icon: 'none'
|
|
})
|
|
})
|
|
},
|
|
// 点击房源详情
|
|
onDetail(event) {
|
|
uni.navigateTo({
|
|
url: "/pages_subpack/detail/index?id=" + event.id
|
|
})
|
|
},
|
|
|
|
// 搜索功能相关方法
|
|
|
|
// 初始化搜索筛选数据
|
|
initSearchData() {
|
|
this.onhouseArea()
|
|
this.onhouseIconClass()
|
|
this.onhousePrice()
|
|
this.onhouseYear()
|
|
},
|
|
|
|
// 处理搜索
|
|
onSearch(value) {
|
|
// 如果传入了搜索值，使用传入的值，否则使用当前keyword
|
|
if (value !== undefined) {
|
|
this.keyword = value;
|
|
}
|
|
console.info('搜索关键词:', this.keyword)
|
|
this.pageNo = 1
|
|
this.list = []
|
|
this.onHousePageList()
|
|
},
|
|
|
|
// 选择筛选菜单
|
|
selectMenu(e) {
|
|
const { name, active, type } = e;
|
|
this.activeName = name;
|
|
// type 等于1 的需要特殊处理：type不等于1可以忽略
|
|
if (type == 1) {
|
|
this.clickItem({
|
|
name: 'vip_type',
|
|
label: 'VIP文档',
|
|
value: e.active ? 1 : 0
|
|
});
|
|
} else {
|
|
const find = this.result.find(item => item.name == this.activeName);
|
|
if (find) {
|
|
const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value == find.value);
|
|
this[this.activeName].activeIndex = findIndex;
|
|
} else {
|
|
this[this.activeName].activeIndex = 0;
|
|
}
|
|
}
|
|
},
|
|
|
|
// 点击筛选项
|
|
clickItem(e) {
|
|
let { label, value } = e;
|
|
|
|
// 处理筛选结果数组
|
|
const findIndex = this.result.findIndex(item => item.name == this.activeName);
|
|
if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
|
|
label = this[this.activeName].label;
|
|
}
|
|
|
|
// 已经存在筛选项
|
|
if (findIndex > -1) {
|
|
this.$set(this.result, findIndex, {
|
|
name: this.activeName,
|
|
label,
|
|
value
|
|
});
|
|
} else {
|
|
this.result.push({
|
|
name: this.activeName,
|
|
label,
|
|
value
|
|
});
|
|
}
|
|
|
|
// 过滤掉默认值
|
|
this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
|
|
|
|
console.log('筛选结果：', this.result);
|
|
|
|
// 处理筛选逻辑
|
|
this.handleFilter({ label, value });
|
|
},
|
|
|
|
// 处理筛选
|
|
handleFilter(item) {
|
|
console.info('筛选条件变化:', item)
|
|
this.pageNo = 1
|
|
|
|
// 根据筛选类型设置对应的参数
|
|
if (this.activeName === 'region') {
|
|
this.areaId = item.value === 'all' ? null : item.value
|
|
} else if (this.activeName === 'rent') {
|
|
this.priceId = item.value === 'all' ? null : item.value
|
|
} else if (this.activeName === 'type') {
|
|
this.classId = item.value === 'all' ? null : item.value
|
|
} else if (this.activeName === 'duration') {
|
|
this.yearId = item.value === 'all' ? null : item.value
|
|
}
|
|
|
|
this.list = []
|
|
this.onHousePageList()
|
|
},
|
|
|
|
// 弹窗状态变化
|
|
change(e) {
|
|
console.log('弹窗打开状态：', e);
|
|
},
|
|
|
|
// 获取区域数据
|
|
onhouseArea() {
|
|
let that = this
|
|
houseArea({}).then(response => {
|
|
let arr = [
|
|
{
|
|
label: '全部',
|
|
value: 'all'
|
|
}
|
|
]
|
|
response.result.forEach(items => {
|
|
let obj = {}
|
|
obj.label = items.title;
|
|
obj.value = items.id
|
|
arr.push(obj)
|
|
})
|
|
that.region.child = arr
|
|
console.info('区域数据', response.result)
|
|
}).catch(error => {
|
|
|
|
})
|
|
},
|
|
|
|
// 获取类型数据
|
|
onhouseIconClass() {
|
|
let that = this
|
|
houseIconClass({}).then(response => {
|
|
console.info('类型数据', response.result)
|
|
let arr = [
|
|
{
|
|
label: '全部',
|
|
value: 'all'
|
|
}
|
|
]
|
|
response.result.forEach(items => {
|
|
let obj = {}
|
|
obj.label = items.title;
|
|
obj.value = items.id
|
|
arr.push(obj)
|
|
})
|
|
that.type.child = arr
|
|
}).catch(error => {
|
|
|
|
})
|
|
},
|
|
|
|
// 获取价格数据
|
|
onhousePrice() {
|
|
let that = this
|
|
housePrice({}).then(response => {
|
|
let arr = [
|
|
{
|
|
label: '全部',
|
|
value: 'all'
|
|
}
|
|
]
|
|
response.result.forEach(items => {
|
|
let obj = {}
|
|
obj.label = items.title;
|
|
obj.value = items.price
|
|
arr.push(obj)
|
|
})
|
|
that.rent.child = arr
|
|
}).catch(error => {
|
|
|
|
})
|
|
},
|
|
|
|
// 获取年限数据
|
|
onhouseYear() {
|
|
let that = this
|
|
houseYear({}).then(response => {
|
|
console.info('年限数据', response.result)
|
|
let arr = [
|
|
{
|
|
label: '全部',
|
|
value: 'all'
|
|
}
|
|
]
|
|
response.result.forEach(items => {
|
|
let obj = {}
|
|
obj.label = items.title;
|
|
obj.value = items.timeGo
|
|
arr.push(obj)
|
|
})
|
|
that.duration.child = arr
|
|
}).catch(error => {
|
|
|
|
})
|
|
},
|
|
|
|
// 测试加载房源列表
|
|
testLoadHouseList() {
|
|
console.log('手动触发房源列表加载');
|
|
this.pageNo = 1;
|
|
this.list = [];
|
|
this.onHousePageList();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.test-button {
|
|
position: fixed;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
background-color: #1EC77A;
|
|
color: white;
|
|
padding: 20rpx;
|
|
border-radius: 10rpx;
|
|
z-index: 999;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.Locations {
|
|
|
|
.search-container {
|
|
position: relative;
|
|
background-color: #fff;
|
|
z-index: 100;
|
|
|
|
// 确保搜索框可以正常点击
|
|
.se-bgc-white {
|
|
position: relative;
|
|
z-index: 101;
|
|
}
|
|
|
|
// 确保下拉菜单可以正常显示和点击
|
|
/deep/ .uv-drop-down {
|
|
position: relative;
|
|
z-index: 102;
|
|
}
|
|
|
|
/deep/ .uv-drop-down-popup {
|
|
z-index: 103 !important;
|
|
}
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
|
|
&>view {
|
|
flex: 1;
|
|
margin: 20rpx 10rpx;
|
|
padding: 20rpx 10rpx;
|
|
background-color: #e8f7f0;
|
|
color: #1EC77A;
|
|
border-radius: 40rpx;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.act {
|
|
background-color: #1EC77A;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.Locations-list {
|
|
.main {
|
|
display: flex;
|
|
margin: 20rpx;
|
|
|
|
.main-image {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.info {
|
|
margin-left: 20rpx;
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.tips {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.controls {
|
|
margin-left: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.f {
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
padding: 10rpx;
|
|
font-size: 22rpx;
|
|
color: #1EC77A;
|
|
border: 1rpx solid #1EC77A;
|
|
background-color: #e8f7f0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
border-radius: 15rpx;
|
|
|
|
image {
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
|
|
text {
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
padding-left: 40rpx;
|
|
|
|
.main {
|
|
align-items: center;
|
|
|
|
.main-image {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
}
|
|
|
|
.controls {
|
|
flex-direction: row;
|
|
|
|
.f {
|
|
margin: 30rpx;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|