217 lines
4.3 KiB
Vue
217 lines
4.3 KiB
Vue
<template>
|
||
<view class="detail" ref="viewref">
|
||
<view class="swiper">
|
||
<u-swiper :list="list" height="500rpx" radius="0"></u-swiper>
|
||
</view>
|
||
<view class="sub-detail u-flex">
|
||
<view class="title">
|
||
{{title}}
|
||
</view>
|
||
<view>
|
||
<u-grid :col="3">
|
||
<u-grid-item>
|
||
<view class="grid-textup">22</view>
|
||
<view class="grid-text">租金</view>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<view class="grid-textup">22</view>
|
||
<view class="grid-text">转让费</view>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<view class="grid-textup">22</view>
|
||
<view class="grid-text">面积</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
</view>
|
||
<view class="bgc">
|
||
|
||
</view>
|
||
<view class="location-detail">
|
||
<text>行业：</text>
|
||
<text>区域：</text>
|
||
<text>地址：</text>
|
||
</view>
|
||
<view class="bug-figure">
|
||
|
||
</view>
|
||
<view class="seller-shop-detail">
|
||
<view class="avator">
|
||
<u-avatar :src="src"></u-avatar>
|
||
<u-cell title="张先生" label="123456" :border="false"></u-cell>
|
||
|
||
</view>
|
||
<u-divider :height="20"></u-divider>
|
||
<u-cell title="店铺介绍" label="美食杂货店是一个主打食品和日用杂货的淘宝222222222222222222222美食杂货店是一个主打食品和日用杂货的淘宝美食杂货店是一个主打食品和日用杂货的淘宝" label-style="color = #5D5D5D"></u-cell>
|
||
</view>
|
||
|
||
<view class="bottom">
|
||
<view class="bot-tab">
|
||
<view class="tab-left">
|
||
<view class="share" @click="share()">
|
||
<u-icon name="share-fill" color="green"></u-icon>
|
||
分享
|
||
</view>
|
||
<view class="customer" @click="assist()">
|
||
<u-icon name="server-fill" color="green"></u-icon>
|
||
客服
|
||
</view>
|
||
</view>
|
||
<view class="tab-right" @click="phonecall()">
|
||
<view class="call" >
|
||
<text>打电话</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bug-figure">
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
list: {
|
||
type: Array,
|
||
default () {
|
||
return [
|
||
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
|
||
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
|
||
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"
|
||
]
|
||
}
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
shopInfo:{
|
||
|
||
}
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
phonecall(){
|
||
console.log('打电话');
|
||
},
|
||
share(){
|
||
console.log('分享');
|
||
},
|
||
assist(){
|
||
console.log('客服');
|
||
}
|
||
},
|
||
onLoad: function(options) {
|
||
const shopInfomation = JSON.parse(decodeURIComponent(options.shopInfo))
|
||
console.log(shopInfomation);
|
||
this.shopInfo = shopInfomation
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page{
|
||
background-color: #F8F8F8;
|
||
}
|
||
.sub-detail{
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.bgc{
|
||
background-color: #F8F8F8;
|
||
height: 30rpx;
|
||
}
|
||
.detail{
|
||
// background-color: #F8F8F8;
|
||
height: 100%;
|
||
}
|
||
.bug-figure{
|
||
height: 100rpx;
|
||
background-color: #F8F8F8;
|
||
}
|
||
.swiper {
|
||
}
|
||
.title{
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
.grid-textup{
|
||
color: #CC3333;
|
||
font-size: 20px;
|
||
}
|
||
.grid-text{
|
||
color: #B3B3B3;
|
||
}
|
||
.location-detail{
|
||
display: flex;
|
||
margin-top: 50rpx;
|
||
background-color: #fff;
|
||
flex-direction: column;
|
||
padding-left: 16rpx;
|
||
line-height: 33px;
|
||
font-size: 15px;
|
||
}
|
||
.seller-shop-detail{
|
||
margin-top: 50rpx;
|
||
}
|
||
.avator{
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-left: 16rpx;
|
||
margin-top: 50rpx;
|
||
}
|
||
.bottom{
|
||
position: fixed;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
width: 100%;
|
||
z-index: 100;
|
||
// height: 100rpx;
|
||
// bottom: calc(var(--window-bottom) + 20px);
|
||
}
|
||
.bot-tab{
|
||
display: flex;
|
||
// flex: 1;
|
||
justify-content: space-evenly;
|
||
}
|
||
.tab-left{
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
height: 50px;
|
||
}
|
||
.customer{
|
||
// height: 50px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 50%;
|
||
}
|
||
.tab-right{
|
||
width: 50%;
|
||
height: 50px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-image: linear-gradient(to right, #E86262, #CC3333);
|
||
}
|
||
.share{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 50%;
|
||
}
|
||
.call{
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
</style> |