147 lines
3.4 KiB
Vue
147 lines
3.4 KiB
Vue
<template>
|
|
<view class="page-v4">
|
|
<uni-search-bar class="search" placeholder="搜索店铺" bgColor="#fff" @confirm="search" @input="input"></uni-search-bar>
|
|
<view class="city-box">
|
|
<image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
|
|
<text>丽江市</text>
|
|
</view>
|
|
|
|
<view class="main-wrap">
|
|
<view class="list-box">
|
|
<view class="img-pic">
|
|
<image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2293895315,941305116&fm=15&gp=0.jpg"
|
|
mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="list-title">
|
|
草莓
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="img-pic">
|
|
<image src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg"
|
|
mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="list-title">
|
|
香蕉
|
|
<view>subtitle</view>
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="img-pic">
|
|
<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3571319963,2190929172&fm=26&gp=0.jpg"
|
|
mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="list-title">
|
|
杨桃
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="img-pic">
|
|
<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2356795443,149489428&fm=26&gp=0.jpg"
|
|
mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="list-title">
|
|
车厘子
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="img-pic">
|
|
<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=201658450,2328203442&fm=26&gp=0.jpg"
|
|
mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="list-title">
|
|
苹果
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view class="img-pic">
|
|
<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1572231494,1459024433&fm=26&gp=0.jpg"
|
|
mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="list-title">
|
|
橙子
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search {
|
|
.uni-searchbar {
|
|
padding: 20rpx 32rpx 12rpx !important;
|
|
|
|
.uni-searchbar__box {
|
|
border-radius: 44px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.city-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-left: 32rpx;
|
|
padding: 8rpx 18rpx 8rpx 16rpx;
|
|
border-radius: 30px;
|
|
background: #fff;
|
|
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
text {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.main-wrap {
|
|
column-count: 2;
|
|
// column-gap: 10rpx;
|
|
margin: 24rpx 32rpx;
|
|
}
|
|
|
|
.list-box {
|
|
// margin: 10rpx;
|
|
// width: 50%;
|
|
// width: calc(100% / 2 - 20rpx);
|
|
width: 332rpx;
|
|
margin-bottom: 24rpx;
|
|
background-color: #fff;
|
|
border-radius: 8rpx;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
// .img-pic {
|
|
// width: 100%;
|
|
// }
|
|
|
|
.img-pic>image {
|
|
width: 100%;
|
|
height: 332rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.list-title {
|
|
margin: 20rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
</style>
|