Merge pull request '罗世杰:成交案例页面完成' (#34) from lj into master
Reviewed-on: http://git.feashow.cn/odjbin/city-store-transfer/pulls/34
@@ -20,7 +20,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-border">
|
||||
<DropDownItem v-if="activeIndex !== -1" :list="tablist"/>
|
||||
<DropDownItem v-if="activeIndex !== -1" :list="tablist" @cancelDrop="cancelDrop"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -61,6 +61,10 @@
|
||||
this.activeIndex = -1;
|
||||
}else
|
||||
this.activeIndex = index
|
||||
},
|
||||
cancelDrop() {
|
||||
console.log("取消遮罩");
|
||||
this.activeIndex = -1;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<view class="root">
|
||||
<view class="mask"/>
|
||||
<view class="mask" @click="handleMask"/>
|
||||
<view class="list-container">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item,index) in list"
|
||||
:class="{isActive: activeIndex === index}"
|
||||
@click="handleActive(index)"
|
||||
>
|
||||
<view></view>
|
||||
<text class="list-text">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -22,11 +23,43 @@
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
activeIndex:-1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMask() {
|
||||
this.$emit('cancelDrop');
|
||||
},
|
||||
async handleActive(index) {
|
||||
this.activeIndex = index;
|
||||
// 设置一个定时器,等待200毫秒
|
||||
const delayPromise = this.delay(200);
|
||||
// 等待定时器完成
|
||||
await delayPromise;
|
||||
this.handleMask();
|
||||
},
|
||||
delay(ms) {
|
||||
return new Promise((resolve) => {
|
||||
// 设置一个定时器,并将定时器的ID存储在this.timerId中
|
||||
this.timerId = setTimeout(() => {
|
||||
resolve();
|
||||
// 清除定时器
|
||||
clearTimeout(this.timerId);
|
||||
}, ms);
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.isActive{
|
||||
color: #CC3333;
|
||||
}
|
||||
.mask{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<view class="list-border">
|
||||
<view class="yzr" v-if="showStyle === 2">
|
||||
<u-image src="/static/cjal/anl_tu.png" width="156rpx" height="156rpx"></u-image>
|
||||
</view>
|
||||
<view class="list-container">
|
||||
<view class="text-area">
|
||||
<text>{{shopInfo.title}}</text>
|
||||
@@ -24,25 +27,45 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="style3" v-if="showStyle === 2">
|
||||
<view class="cjsj">成交时间:{{shopInfo.date}}</view>
|
||||
<view class="cart-and-pos">
|
||||
<view>
|
||||
<view>
|
||||
<u-image src="/static/cjal/al_icon_flh.png" width="12px" height="15px"></u-image>
|
||||
</view>
|
||||
<text :class="{style3: showStyle === 2}">{{shopInfo.category}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<u-image src="/static/cjal/al_icon_dwh.png" width="12px" height="15px"></u-image>
|
||||
</view>
|
||||
<text :class="{style3: showStyle === 2}">{{shopInfo.pos}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pos-and-sqr">
|
||||
<view class="sqr-and-lx" :class="{pb0: showStyle === 2}">
|
||||
<view>
|
||||
<view>
|
||||
<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
|
||||
<u-image v-if="showStyle === 2" src="/static/cjal/al_icon_pm.png" width="12px" height="15px"></u-image>
|
||||
<u-image v-else src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
|
||||
</view>
|
||||
<text>{{shopInfo.sqr}}m2</text>
|
||||
<text :class="{style3: showStyle === 2}">{{shopInfo.sqr}}m2</text>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<u-image src="/static/shoplist/sy_icon_lbxm.png" width="12px" height="15px"></u-image>
|
||||
<u-image v-if="showStyle === 2" src="/static/cjal/al_icon_mch.png" width="12px" height="15px"></u-image>
|
||||
<u-image v-else src="/static/shoplist/sy_icon_lbxm.png" width="12px" height="15px"></u-image>
|
||||
</view>
|
||||
<text>{{shopInfo.uname}}</text>
|
||||
<text :class="{style3: showStyle === 2}">{{shopInfo.uname}}</text>
|
||||
</view>
|
||||
<view style="flex:2">
|
||||
<view>
|
||||
<u-image src="/static/shoplist/sy_icon_lblxr.png" width="12px" height="15px"></u-image>
|
||||
<u-image v-if="showStyle === 2" src="/static/cjal/al_icon_sjh.png" width="12px" height="15px"></u-image>
|
||||
<u-image v-else src="/static/shoplist/sy_icon_lblxr.png" width="12px" height="15px"></u-image>
|
||||
</view>
|
||||
<text>{{shopInfo.phoneNum}}</text>
|
||||
<text :class="{style3: showStyle === 2}">{{shopInfo.phoneNum}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -137,7 +160,27 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.style3 {
|
||||
position: relative;
|
||||
color:#696969 !important;
|
||||
.cart-and-pos{
|
||||
border-top: 1px solid #eee !important;
|
||||
}
|
||||
}
|
||||
.pb0{
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.yzr {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 13rpx;
|
||||
}
|
||||
.cjsj {
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.list-border {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
@@ -184,7 +227,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.style2 {
|
||||
.style2,.style3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #CC3333;
|
||||
@@ -199,7 +242,7 @@
|
||||
}
|
||||
.cart-and-pos{
|
||||
> view{
|
||||
margin-right: 27px;
|
||||
margin-right: 50rpx;
|
||||
display: flex;
|
||||
}
|
||||
display: flex;
|
||||
@@ -214,7 +257,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.pos-and-sqr {
|
||||
.sqr-and-lx {
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
padding-bottom: 6px;
|
||||
@@ -222,6 +265,9 @@
|
||||
color: #359867;
|
||||
line-height: 12px;
|
||||
}
|
||||
.style3 {
|
||||
color: #696969;
|
||||
}
|
||||
>view {
|
||||
flex:1;
|
||||
display: flex;
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<view class="marginLR10">
|
||||
<view class="head-img">
|
||||
<u-image
|
||||
:src="headimg"
|
||||
width=100%
|
||||
height=200rpx
|
||||
radius="10px"
|
||||
></u-image>
|
||||
</view>
|
||||
<view>
|
||||
<SearchShopList :show-style="2"></SearchShopList>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -8,7 +18,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
headimg: "https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -17,6 +27,18 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
.marginLR10 {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.head-img {
|
||||
margin-top: 10rpx;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="search-box-bg">
|
||||
<view class="bug-fix"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-box-input">
|
||||
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
|
||||
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<DropDown></DropDown>
|
||||
</view>
|
||||
<view class="marginLR10">
|
||||
<SearchShopList :showStyle="1"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -17,6 +33,49 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
.marginLR10{
|
||||
margin: 0 10px;
|
||||
}
|
||||
.search-box-bg{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
background-color: #F8F8F8;
|
||||
.bug-fix {
|
||||
transform: translateY(-20rpx);
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
}
|
||||
.search-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
width: 84.6%;
|
||||
transform: translateX(-50%);
|
||||
.search-box-input {
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
opacity: 0.85;
|
||||
|
||||
.u-border {
|
||||
border: none;
|
||||
|
||||
.u-input__content {
|
||||
height: 62rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.u-input__content__field-wrapper__field {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="search-box-bg">
|
||||
<view class="bug-fix"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-box-input">
|
||||
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
|
||||
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<DropDown></DropDown>
|
||||
</view>
|
||||
<view class="marginLR10">
|
||||
<SearchShopList :showStyle="1"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -17,6 +33,49 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
.marginLR10{
|
||||
margin: 0 10px;
|
||||
}
|
||||
.search-box-bg{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
background-color: #F8F8F8;
|
||||
.bug-fix {
|
||||
transform: translateY(-20rpx);
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
}
|
||||
.search-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
width: 84.6%;
|
||||
transform: translateX(-50%);
|
||||
.search-box-input {
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
opacity: 0.85;
|
||||
|
||||
.u-border {
|
||||
border: none;
|
||||
|
||||
.u-input__content {
|
||||
height: 62rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.u-input__content__field-wrapper__field {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="search-box">
|
||||
<view class="search-box-input">
|
||||
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
|
||||
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
|
||||
</u-input>
|
||||
<view class="search-box-bg">
|
||||
<view class="bug-fix"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-box-input">
|
||||
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
|
||||
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<DropDown></DropDown>
|
||||
</view>
|
||||
<view>
|
||||
<view class="marginLR10">
|
||||
<SearchShopList :showStyle="1"/>
|
||||
</view>
|
||||
</view>
|
||||
@@ -33,32 +37,45 @@
|
||||
page{
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
.search-box {
|
||||
.marginLR10{
|
||||
margin: 0 10px;
|
||||
}
|
||||
.search-box-bg{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
width: 84.6%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.search-box-input {
|
||||
border-radius: 12rpx;
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
opacity: 0.85;
|
||||
|
||||
.u-border {
|
||||
border: none;
|
||||
|
||||
.u-input__content {
|
||||
height: 62rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.u-input__content__field-wrapper__field {
|
||||
font-size: 26rpx !important;
|
||||
z-index: 3;
|
||||
background-color: #F8F8F8;
|
||||
.bug-fix {
|
||||
transform: translateY(-20rpx);
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
}
|
||||
.search-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
width: 84.6%;
|
||||
transform: translateX(-50%);
|
||||
.search-box-input {
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
opacity: 0.85;
|
||||
|
||||
.u-border {
|
||||
border: none;
|
||||
|
||||
.u-input__content {
|
||||
height: 62rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.u-input__content__field-wrapper__field {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="search-box">
|
||||
<view class="search-box-input">
|
||||
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
|
||||
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
|
||||
</u-input>
|
||||
<view class="search-box-bg">
|
||||
<view class="bug-fix"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-box-input">
|
||||
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
|
||||
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<DropDown></DropDown>
|
||||
</view>
|
||||
<view>
|
||||
<ShowShopList :showStyle="1"></ShowShopList>
|
||||
<view class="marginLR10">
|
||||
<ShowShopList :showStyle="1"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -33,32 +37,45 @@
|
||||
page{
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
.search-box {
|
||||
.marginLR10{
|
||||
margin: 0 10px;
|
||||
}
|
||||
.search-box-bg{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
width: 84.6%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.search-box-input {
|
||||
border-radius: 12rpx;
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
opacity: 0.85;
|
||||
|
||||
.u-border {
|
||||
border: none;
|
||||
|
||||
.u-input__content {
|
||||
height: 62rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.u-input__content__field-wrapper__field {
|
||||
font-size: 26rpx !important;
|
||||
z-index: 3;
|
||||
background-color: #F8F8F8;
|
||||
.bug-fix {
|
||||
transform: translateY(-20rpx);
|
||||
width: 100%;
|
||||
height: 20rpx;
|
||||
}
|
||||
.search-box {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
width: 84.6%;
|
||||
transform: translateX(-50%);
|
||||
.search-box-input {
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
opacity: 0.85;
|
||||
|
||||
.u-border {
|
||||
border: none;
|
||||
|
||||
.u-input__content {
|
||||
height: 62rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.u-input__content__field-wrapper__field {
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
<view class="home-base-bg">
|
||||
<InputAndSwiper></InputAndSwiper>
|
||||
<view class="home-content">
|
||||
<view class="service">
|
||||
<u-image src="/static/statistics/sy_icon_lxkf.png" width="108rpx" height="108rpx"/>
|
||||
</view>
|
||||
<HomeNavCard></HomeNavCard>
|
||||
<HomeNoticeBar :text="notice"/>
|
||||
<Statistics :data="statisticsNum"/>
|
||||
@@ -54,6 +57,12 @@
|
||||
width: 100%;
|
||||
.home-content {
|
||||
margin: 0 10px;
|
||||
.service {
|
||||
position: fixed;
|
||||
right: 17rpx;
|
||||
top: 1109rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.show-and-search{
|
||||
display: flex;
|
||||
|
||||
BIN
static/cjal/al_icon_dwh.png
Normal file
|
After Width: | Height: | Size: 726 B |
BIN
static/cjal/al_icon_flh.png
Normal file
|
After Width: | Height: | Size: 329 B |
BIN
static/cjal/al_icon_mch.png
Normal file
|
After Width: | Height: | Size: 489 B |
BIN
static/cjal/al_icon_pm.png
Normal file
|
After Width: | Height: | Size: 278 B |
BIN
static/cjal/al_icon_sjh.png
Normal file
|
After Width: | Height: | Size: 338 B |
BIN
static/cjal/anl_tu.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
static/statistics/sy_icon_lxkf.png
Normal file
|
After Width: | Height: | Size: 9.8 KiB |