Files
xdd-uniapp-new/pages/home/components/serviec.vue
T

100 lines
2.1 KiB
Vue

<template>
<view class="service">
<view class="map-cont">
<map
:longitude="info.longitude"
:latitude="info.latitude"
style="width: 100%;height: 100%; border-radius: 20rpx;"
/>
</view>
<view class="v12-mt-3 info-wrap">
<view>
<view class="v12-font-32 v12-font-bold v12-mb-2">{{ info.name }}</view>
<view class="v12-font-24 v12-mb-1 v12-dark1-text">办公时间:{{ info.officeTime }}</view>
<view class="v12-font-24 v12-mb-1 v12-dark1-text">{{ info.address }}</view>
</view>
<view class="action-wrap">
<view>
<view>
<image :src="webUrl + '/page/qianxian/icon-addr.png'" class="img" />
</view>
<view class="text-center">导航</view>
</view>
<view>
<view>
<image :src="webUrl + '/page/qianxian/icon-phone.png'" class="img" />
</view>
<view class="text-center">客服</view>
</view>
</view>
</view>
<view style="padding: 0 20rpx;"><u-divider></u-divider></view>
<view class="intro-wrap">
<view class="v12-dark-text v12-font-bold">
简介
</view>
<view class="intro-text">
{{ info.intro }}
</view>
</view>
</view>
</template>
<script>
export default {
props: {
info: {
default: () => {}
}
},
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
}
},
mounted() {
console.log(this.info);
},
}
</script>
<style lang="scss" scoped>
.intro-text{
color: #999;
font-size: 24rpx;
margin-top: 20rpx;
}
.intro-wrap{
padding: 0 20rpx 20rpx;
}
.action-wrap{
display: flex;
align-items: center;
.text-center{
text-align: center;
font-size: 24rpx;
color: #666;
}
}
.info-wrap{
display: flex;
justify-content: space-between;
padding: 40rpx 20rpx 0;
}
.service{
position: relative;
}
.map-cont {
height: 400rpx;
border-radius: 20rpx;
background: #f2f1ed;
padding: 20rpx;
box-sizing: border-box;
}
.img{
display: block;
width: 64rpx;
height: 64rpx;
margin: 0 0 16rpx 16rpx;
}
</style>