梁航:更新详情页
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="detail">
|
<view class="detail">
|
||||||
<view class="swiper">
|
<view class="swiper">
|
||||||
<u-swiper :list="list"></u-swiper>
|
<u-swiper :list="list" height="300rpx" radius="0"></u-swiper>
|
||||||
</view>
|
</view>
|
||||||
<view class="sub-detail u-flex">
|
<view class="sub-detail u-flex">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
@@ -34,18 +34,49 @@
|
|||||||
<u-avatar :src="src"></u-avatar>
|
<u-avatar :src="src"></u-avatar>
|
||||||
<u-cell title="张先生" label="123456"></u-cell>
|
<u-cell title="张先生" label="123456"></u-cell>
|
||||||
</view>
|
</view>
|
||||||
<!-- <text>美食杂货店是一个主打食品和日用杂货的淘宝2222222222222222</text> -->
|
|
||||||
<u-cell title="店铺介绍" label="美食杂货店是一个主打食品和日用杂货的淘宝222222222222222222222美食杂货店是一个主打食品和日用杂货的淘宝美食杂货店是一个主打食品和日用杂货的淘宝"></u-cell>
|
<u-cell title="店铺介绍" label="美食杂货店是一个主打食品和日用杂货的淘宝222222222222222222222美食杂货店是一个主打食品和日用杂货的淘宝美食杂货店是一个主打食品和日用杂货的淘宝"></u-cell>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props:{},
|
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() {
|
data() {
|
||||||
return {
|
return {
|
||||||
list:'',
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -83,4 +114,36 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: 16rpx;
|
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>
|
</style>
|
||||||
@@ -2,9 +2,9 @@
|
|||||||
<view>
|
<view>
|
||||||
<view class="search_box">
|
<view class="search_box">
|
||||||
<view class="search_box_border">
|
<view class="search_box_border">
|
||||||
<u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
|
<!-- <u-input placeholder="搜索优质产品" placeholder-style="color: #969696" prefixIcon="search"
|
||||||
prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx" readonly>
|
prefixIconStyle="font-size: 22px;color: #909399;margin-left:30rpx" readonly>
|
||||||
</u-input>
|
</u-input> -->
|
||||||
</view>
|
</view>
|
||||||
<InputAndSwiper></InputAndSwiper>
|
<InputAndSwiper></InputAndSwiper>
|
||||||
<TabBar :current-page="0"></TabBar>
|
<TabBar :current-page="0"></TabBar>
|
||||||
|
|||||||
Reference in New Issue
Block a user