143 lines
3.4 KiB
Vue
143 lines
3.4 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="会员店铺" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
|
height='38'></u-navbar>
|
|
<view class="box">
|
|
<view class="top">
|
|
<u-search placeholder="搜索" input-align="center" v-model="keyword"></u-search>
|
|
<view class="all">
|
|
<text :class="indexactive == 1 ? 'active':''" @click="btnac(1)">全部</text><text :class="indexactive == 2 ? 'active':''" @click="btnac(2)">我的</text><text :class="indexactive == 3 ? 'active':''" @click="btnac(3)">下级</text>
|
|
</view>
|
|
</view>
|
|
<view class="list" v-for="(item,index) in 3" :key="index" @click="btnxq">
|
|
<view class="list_top">
|
|
<view class="">福鼎大酒店</view><view class="">查看会员 <u-icon name="arrow-right" style="margin-left: 10rpx;"></u-icon></view>
|
|
</view>
|
|
<view class="xian"></view>
|
|
<view class="list_bom">
|
|
<view class="cen">
|
|
<view class="">免费次数</view>
|
|
<view class="" style="margin-top: 14rpx;font-weight: 600;">2/天</view>
|
|
</view>
|
|
<view class="cen">
|
|
<view class="">会员名额</view>
|
|
<view class="" style="margin-top: 14rpx;font-weight: 600;">10</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyword:'',
|
|
indexactive:1
|
|
}
|
|
},
|
|
methods: {
|
|
btnac(index){
|
|
this.indexactive = index
|
|
},
|
|
btnxq(){
|
|
uni.navigateTo({
|
|
url:'/pages/agentpages/shopguanli/member/chakan/index'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
.active{
|
|
background: #1DBE7B !important;
|
|
color: #fff !important;
|
|
}
|
|
.page {
|
|
width: 750rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
.box{
|
|
width: 750rpx;
|
|
height: 1440rpx;
|
|
background: #F4F5F7;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
.list{
|
|
width: 680rpx;
|
|
height: 208rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
|
margin: auto;
|
|
margin-top: 32rpx;
|
|
.list_bom{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 24rpx 138rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
.list_top{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 24rpx;
|
|
color: #3D3D3D;
|
|
padding: 24rpx 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.xian{
|
|
width:680rpx;
|
|
height: 2rpx;
|
|
background: #F0F0F0;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
}
|
|
}
|
|
.all{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 32rpx;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
text{
|
|
width: 172rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
background: #F0F0F0;
|
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
color: #979797;
|
|
}
|
|
}
|
|
.top{
|
|
width: 750rpx;
|
|
height: 232rpx;
|
|
background: #FFFFFF;
|
|
padding: 32rpx 36rpx;
|
|
box-sizing: border-box;
|
|
/deep/ .u-content{
|
|
border: 1px solid #ccc;
|
|
border-radius: 50rpx 0 0 50rpx !important;
|
|
}
|
|
/deep/ .u-action{
|
|
border-radius: 0 50rpx 50rpx 0 !important;
|
|
width: 112rpx;
|
|
height: 65rpx;
|
|
line-height: 65rpx;
|
|
border: 2rpx solid #ccc;
|
|
margin-left: 0;
|
|
color: #3D3D3D;
|
|
background-color: #f2f2f2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |