odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

梁航：详情页完成

Browse Source
This commit is contained in:
hot777zz
2023-11-02 18:02:40 +08:00
parent a5eeb83385
commit 11b98f4082
1 changed files with 69 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
pages/detail/detail.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="detail">
<view class="detail" ref="viewref">
<view class="swiper">
<u-swiper :list="list" height="300rpx" radius="0"></u-swiper>
<u-swiper :list="list" height="500rpx" radius="0"></u-swiper>
</view>
<view class="sub-detail u-flex">
<view class="title">
@@ -10,15 +10,15 @@
<view>
<u-grid :col="3">
<u-grid-item>
<view class="grid-text">22</view>
<view class="grid-textup">22</view>
<view class="grid-text">租金</view>
</u-grid-item>
<u-grid-item>
<view class="grid-text">22</view>
<view class="grid-textup">22</view>
<view class="grid-text">转让费</view>
</u-grid-item>
<u-grid-item>
<view class="grid-text">22</view>
<view class="grid-textup">22</view>
<view class="grid-text">面积</view>
</u-grid-item>
</u-grid>
@@ -34,28 +34,30 @@
<u-avatar :src="src"></u-avatar>
<u-cell title="张先生" label="123456"></u-cell>
</view>
<u-cell title="店铺介绍" label="美食杂货店是一个主打食品和日用杂货的淘宝222222222222222222222美食杂货店是一个主打食品和日用杂货的淘宝美食杂货店是一个主打食品和日用杂货的淘宝"></u-cell>
<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">
<view class="share" @click="share()">
<u-icon name="share-fill" color="green"></u-icon>
分享
</view>
<view class="customer">
<view class="customer" @click="assist()">
<u-icon name="server-fill" color="green"></u-icon>
客服
</view>
</view>
<view class="tab-right">
<view class="call">
打电话
<view class="tab-right" @click="phonecall()">
<view class="call" >
<text>打电话</text>
</view>
</view>
</view>
</view>
<view class="bug-figure">
</view>
</view>
</template>
@@ -76,11 +78,28 @@
},
data() {
return {
viewheight:'',
}
},
methods: {
// getHeight(){
// let height = this.$refs.viewref.$el.offsetHeight
// this.viewheight = height
// },
phonecall(){
console.log('打电话');
},
share(){
console.log('分享');
},
assist(){
console.log('客服');
}
},
mounted(){
// this.getHeight();
// console.log(viewheight)
}
}
</script>
@@ -90,12 +109,22 @@
// background-color: #F8F8F8;
height: 100%;
}
.bug-figure{
height: 100rpx;
}
.swiper {
}
.title{
padding: 20rpx;
background-color: #fff;
}
.grid-textup{
color: #CC3333;
font-size: 20px;
}
.grid-text{
color: #B3B3B3;
}
.location-detail{
display: flex;
margin-top: 20rpx;
@@ -120,7 +149,8 @@
background-color: #fff;
width: 100%;
z-index: 100;
height: 100rpx;
// height: 100rpx;
// bottom: calc(var(--window-bottom) + 20px);
}
.bot-tab{
display: flex;
@@ -131,19 +161,36 @@
width: 50%;
display: flex;
justify-content: space-around;
height: 100px;
height: 50px;
}
.coustom{
height: 100px;
}
.tab-right{
width: 50%;
height: 100%;
.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>