This commit is contained in:
commit
1b198a13d7
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name" : "多商户商城",
|
||||
"appid" : "__UNI__99FC347",
|
||||
"name" : "铸源商城",
|
||||
"appid" : "__UNI__2D931EE",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.4",
|
||||
"versionCode" : 127,
|
||||
|
|
|
|||
|
|
@ -88,6 +88,13 @@
|
|||
"navigationBarTitleText": "商品分类"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shop/index",
|
||||
"style": {
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarTitleText": "商家联盟"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/news_list/index",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
.content{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
}
|
||||
.content .top-tab{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 28rpx 0;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content .top-tab .tab-location{
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left:28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.content .top-tab .tab-location .icon-dingwei{
|
||||
color: blue;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.content .content-map{
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
.content .content-map .map{
|
||||
width:100%;
|
||||
}
|
||||
.content .content-type{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding:40rpx 28rpx;
|
||||
flex-wrap: wrap;
|
||||
grid-row-gap: 28rpx;
|
||||
background-color: white;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
position: relative;
|
||||
top: -10rpx;
|
||||
}
|
||||
.content .content-type .type-item{
|
||||
flex: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.content .content-type .type-item .type-item-img{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.content .content-type .type-item .type-item-text{
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.content .content-list{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
.content .content-list .list-tab{
|
||||
padding:24rpx 28rpx;
|
||||
display: flex;
|
||||
grid-gap: 24rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.content .content-list .list-tab .action{
|
||||
font-weight: bold;
|
||||
}
|
||||
.content .content-list .list-container .list-item{
|
||||
background-color: #F2F2F2;
|
||||
display: flex;
|
||||
border-radius: 20rpx;
|
||||
margin: 24rpx 28rpx;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
.content .content-list .list-container .list-item .list-item-left{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.content .content-list .list-container .list-item .list-item-left image{
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border: solid 1px red;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.content .content-list .list-container .list-item .list-item-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 8rpx;
|
||||
}
|
||||
.content .content-list .list-container .list-item .list-item-right .item-title{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content .content-list .list-container .list-item .list-item-right .item-content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-right: 6rpx;
|
||||
}
|
||||
.content .content-list .list-container .list-item .list-item-right .item-content .right-center-left .center-left-score{
|
||||
color:#FE8C16;
|
||||
font-size: 24rpx;
|
||||
padding: 4rpx 0;
|
||||
}
|
||||
.content .content-list .list-container .list-item .list-item-right .item-content .right-center-right{
|
||||
color:white;
|
||||
background-color: #F87320;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
width: 128rpx;
|
||||
height: 46rpx;
|
||||
text-align: center;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.content .content-list .list-container .list-item .list-item-right .item-content .right-center-left .center-left-time{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.content .content-list .list-container .list-item .list-item-right .item-address{
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
padding-right: 6rpx;
|
||||
grid-gap: 12rpx;
|
||||
max-width: 500rpx;
|
||||
}
|
||||
.content .content-list .list-container .list-item .list-item-right .item-address .address{
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
max-width: 360rpx;
|
||||
}
|
||||
.content .content-list .list-container .list-item .list-item-right .item-address .distance{
|
||||
display: 1;
|
||||
display: flex;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
|
@ -1,11 +1,154 @@
|
|||
|
||||
<template>
|
||||
<navigator class="" url="/pages/shop_details/index">
|
||||
跳转门店详情
|
||||
</navigator>
|
||||
<view class="content">
|
||||
<view class="top-tab">
|
||||
<view class="tab-location">
|
||||
北京
|
||||
<view class="iconfont icon-dingwei"></view>
|
||||
</view>
|
||||
商家联盟
|
||||
</view>
|
||||
<view class="content-map" >
|
||||
<map class="map" :latitude="22.547" :longitude="114.085947" :markers="covers"></map>
|
||||
</view>
|
||||
<view class="content-type">
|
||||
<view class="type-item">
|
||||
<image class="type-item-img" src="@/static/images/shop/tab1.png" mode=""></image>
|
||||
<text class="type-item-text">餐饮美食</text>
|
||||
</view>
|
||||
<view class="type-item">
|
||||
<image class="type-item-img" src="@/static/images/shop/tab2.png" mode=""></image>
|
||||
<text class="type-item-text">丽人美妆</text>
|
||||
</view>
|
||||
<view class="type-item">
|
||||
<image class="type-item-img" src="@/static/images/shop/tab3.png" mode=""></image>
|
||||
<text class="type-item-text">休息娱乐</text>
|
||||
</view>
|
||||
<view class="type-item">
|
||||
<image class="type-item-img" src="@/static/images/shop/tab4.png" mode=""></image>
|
||||
<text class="type-item-text">运动健身</text>
|
||||
</view>
|
||||
<view class="type-item">
|
||||
<image class="type-item-img" src="@/static/images/shop/tab5.png" mode=""></image>
|
||||
<text class="type-item-text">婚庆服务</text>
|
||||
</view>
|
||||
<view class="type-item">
|
||||
<image class="type-item-img" src="@/static/images/shop/tab6.png" mode=""></image>
|
||||
<text class="type-item-text">亲子</text>
|
||||
</view>
|
||||
<view class="type-item">
|
||||
<image class="type-item-img" src="@/static/images/shop/tab7.png" mode=""></image>
|
||||
<text class="type-item-text">教育培训</text>
|
||||
</view>
|
||||
<view class="type-item">
|
||||
<image class="type-item-img" src="@/static/images/shop/tab8.png" mode=""></image>
|
||||
<text class="type-item-text">汽车服务</text>
|
||||
</view>
|
||||
<view class="type-item">
|
||||
<image class="type-item-img" src="@/static/images/shop/tab8.png" mode=""></image>
|
||||
<text class="type-item-text">家装</text>
|
||||
</view>
|
||||
<view class="type-item">
|
||||
<image class="type-item-img" src="@/static/images/shop/tab10.png" mode=""></image>
|
||||
<text class="type-item-text">生活服务</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-list">
|
||||
<view class="list-tab">
|
||||
<view class="action">全部商家</view>
|
||||
<view>附近商家</view>
|
||||
</view>
|
||||
<view class="list-container">
|
||||
<view class="list-item" v-for="(item,index) in 20" :key='index'>
|
||||
<view class="list-item-left">
|
||||
<image src="../users/static/images/level_avatar.png" mode=""></image>
|
||||
</view>
|
||||
<view class="list-item-right">
|
||||
<view class="item-title">
|
||||
特色餐厅（福田店）
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<view class="right-center-left">
|
||||
<view class="center-left-score">
|
||||
<text class="iconfont icon-kongxinxing"></text>
|
||||
<!-- <text class="iconfont icon-kongxinxing">★</text> -->
|
||||
<text>4.7分</text>
|
||||
</view>
|
||||
<view class="center-left-time">营业时间：12:00-24:00</view>
|
||||
</view>
|
||||
<view class="right-center-right">
|
||||
去选购
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-address">
|
||||
<view class="address">深圳市福田区购物公园cocopark购物中心</view>
|
||||
<view class="distance">100.23km</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
export default {
|
||||
components:{
|
||||
|
||||
<style>
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// tabList:[
|
||||
// {
|
||||
// url:'@/static/images/shop/tab1/png',
|
||||
// name:'餐饮美食'
|
||||
// },
|
||||
// {
|
||||
// url:'@/static/images/shop/tab2/png',
|
||||
// name:'丽人美妆'
|
||||
// },
|
||||
// {
|
||||
// url:'@/static/images/shop/tab3/png',
|
||||
// name:'休息娱乐'
|
||||
// },
|
||||
// {
|
||||
// url:'@/static/images/shop/tab4/png',
|
||||
// name:'运动健身'
|
||||
// },
|
||||
// {
|
||||
// url:'@/static/images/shop/tab5/png',
|
||||
// name:'婚庆服务'
|
||||
// },
|
||||
// {
|
||||
// url:'@/static/images/shop/tab6/png',
|
||||
// name:'亲子'
|
||||
// },
|
||||
// {
|
||||
// url:'@/static/images/shop/tab7/png',
|
||||
// name:'教育培训'
|
||||
// },
|
||||
// {
|
||||
// url:'@/static/images/shop/tab8/png',
|
||||
// name:'汽车服务'
|
||||
// },
|
||||
// {
|
||||
// url:'@/static/images/shop/tab9/png',
|
||||
// name:'家装'
|
||||
// },
|
||||
// {
|
||||
// url:'@/static/images/shop/tab10/png',
|
||||
// name:'生活服务'
|
||||
// },
|
||||
// ]
|
||||
}
|
||||
},
|
||||
onLoad(){
|
||||
this.init();
|
||||
this.loadScript();
|
||||
},
|
||||
methods:{
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("css/shop.css");
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
* {scrollbar-color: #e5e5e5 #f7f7f9;scrollbar-width: thin;}
|
||||
/* * {scrollbar-color: #e5e5e5 #f7f7f9;scrollbar-width: thin;} */
|
||||
html {margin: 0 auto;max-width: 1200px;}
|
||||
body {overflow-x: hidden;}
|
||||
.font-color,.font-color-red {color:#fc4141!important}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Loading…
Reference in New Issue