149 lines
3.0 KiB
Vue
149 lines
3.0 KiB
Vue
<template>
|
||
<view class="detail">
|
||
<view class="swiper">
|
||
<u-swiper :list="list" height="300rpx" radius="0"></u-swiper>
|
||
</view>
|
||
<view class="sub-detail u-flex">
|
||
<view class="title">
|
||
石锅饭铺面转让石锅饭铺面转让石锅饭铺面转
|
||
</view>
|
||
<view>
|
||
<u-grid :col="3">
|
||
<u-grid-item>
|
||
<view class="grid-text">22</view>
|
||
<view class="grid-text">租金</view>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<view class="grid-text">22</view>
|
||
<view class="grid-text">转让费</view>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<view class="grid-text">22</view>
|
||
<view class="grid-text">面积</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
</view>
|
||
<view class="location-detail">
|
||
<text>行业：</text>
|
||
<text>区域：</text>
|
||
<text>地址：</text>
|
||
</view>
|
||
<view class="seller-shop-detail">
|
||
<view class="avator">
|
||
<u-avatar :src="src"></u-avatar>
|
||
<u-cell title="张先生" label="123456"></u-cell>
|
||
</view>
|
||
<u-cell title="店铺介绍" label="美食杂货店是一个主打食品和日用杂货的淘宝222222222222222222222美食杂货店是一个主打食品和日用杂货的淘宝美食杂货店是一个主打食品和日用杂货的淘宝"></u-cell>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="bot-tab">
|
||
<view class="tab-left">
|
||
<view class="share">
|
||
<u-icon name="share-fill" color="green"></u-icon>
|
||
分享
|
||
</view>
|
||
<view class="customer">
|
||
<u-icon name="server-fill" color="green"></u-icon>
|
||
客服
|
||
</view>
|
||
</view>
|
||
<view class="tab-right">
|
||
<view class="call">
|
||
打电话
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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 {
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.detail{
|
||
// background-color: #F8F8F8;
|
||
height: 100%;
|
||
}
|
||
.swiper {
|
||
}
|
||
.title{
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
.location-detail{
|
||
display: flex;
|
||
margin-top: 20rpx;
|
||
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;
|
||
}
|
||
.bottom{
|
||
position: fixed;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
width: 100%;
|
||
z-index: 100;
|
||
height: 100rpx;
|
||
}
|
||
.bot-tab{
|
||
display: flex;
|
||
// flex: 1;
|
||
justify-content: space-evenly;
|
||
}
|
||
.tab-left{
|
||
width: 50%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
height: 100px;
|
||
}
|
||
.coustom{
|
||
height: 100px;
|
||
}
|
||
.tab-right{
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.share{
|
||
|
||
}
|
||
</style> |