|
|
@@ -1,347 +1,422 @@
|
|
|
-<template>
|
|
|
- <view class="container" @click="filterShow = false">
|
|
|
- <view class="top-box">
|
|
|
- <view class="search-box">
|
|
|
- <view class="search-left">
|
|
|
- <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword" />
|
|
|
- </view>
|
|
|
- <view class="search-right">取消</view>
|
|
|
- </view>
|
|
|
- <view class="filter-box">
|
|
|
- <view class="filter-item">
|
|
|
- <view class="fiter1 " >
|
|
|
- <u-icon name="map"></u-icon>
|
|
|
- <span class="filter-l">贵阳市青少年人才社区</span>
|
|
|
- <u-icon name="arrow-down-fill"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="fiter2" @tap.stop="handlerSelectAllFilter(2)">
|
|
|
- <span>综合排序</span>
|
|
|
- <u-icon name="arrow-down-fill"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="fiter1" @tap.stop="handlerSelectMenu(1)">
|
|
|
- <span>筛选</span>
|
|
|
- <u-icon name="arrow-down-fill"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="filter-drapdown" v-show="filterShow">
|
|
|
- <view class="filter1" v-show="filterType == 1">
|
|
|
- <view class="scroll-box">
|
|
|
- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="filter-menu-left scroll-Y" @scrolltoupper="upper"
|
|
|
- @scrolltolower="lower" @scroll="scroll">
|
|
|
- <view id="demo1" class="scroll-view-item uni-bg-red menu-item"
|
|
|
- :class="current == index ? 'act-left-menu' : ''"
|
|
|
- v-for="(item,index) of menuList"
|
|
|
- @click.stop='handlerSelectLMenu(item,index)'>{{ item.name }}
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="filter-menu-right scroll-Y" @scrolltoupper="upper"
|
|
|
- @scrolltolower="lower" @scroll="scroll">
|
|
|
- <view id="demo1" class="scroll-view-item uni-bg-red" v-for="item of 15">
|
|
|
- <view class="menu-right-title">洗车</view>
|
|
|
- <view class="menu-right-contentbox" >
|
|
|
- <span class="menu-item" v-for="item of 7">测试</span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="filter2" v-show="filterType == 2">
|
|
|
- <view class="">离我最近</view>
|
|
|
- <view class="">好评优先</view>
|
|
|
- <view class="">离我有点远</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="content-box">
|
|
|
- <view class="content-item" v-for="item of 10">
|
|
|
- <view class="item-left">
|
|
|
- <image class="img" src="../../../static/logo.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="item-right">
|
|
|
-
|
|
|
- <view class="">
|
|
|
- <view class="item-title">
|
|
|
- <view class="tag">常去 </view>
|
|
|
- <view class="title">途虎养车洗车机（贵州省贵阳市云岩区）</view>
|
|
|
- </view>
|
|
|
- <view class="str-box">
|
|
|
- <view class="srt-left">
|
|
|
- <u-rate activeColor="#fc8400" :value="3.7" readonly></u-rate>
|
|
|
- <text>5.0</text>
|
|
|
- </view>
|
|
|
- <view class="border"></view>
|
|
|
- <view class="srt-right">998单</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bottom-textbox">
|
|
|
- <view class="bottom-left">宝安中心区美容洗车</view>
|
|
|
- <view class="bottom-right">2.7km</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- keyword: null,
|
|
|
- filterShow: false,
|
|
|
- filterType: 0,
|
|
|
-
|
|
|
- current:0,
|
|
|
-
|
|
|
- menuList:[
|
|
|
- {name:'汽车'},
|
|
|
- {name:'汽车2'},
|
|
|
- {name:'汽车3'},
|
|
|
- {name:'汽车4'},
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 点击综合排序
|
|
|
- handlerSelectAllFilter(e) {
|
|
|
- this.filterShow = true
|
|
|
- this.filterType = 2
|
|
|
- },
|
|
|
- //
|
|
|
- handlerSelectMenu(e){
|
|
|
- this.filterShow = true
|
|
|
- this.filterType = 1
|
|
|
- },
|
|
|
- // 选择左侧菜单
|
|
|
- handlerSelectLMenu(item,index){
|
|
|
- this.current = index
|
|
|
- },
|
|
|
- scroll(){
|
|
|
-
|
|
|
- },
|
|
|
- lower(){},
|
|
|
- upper(){},
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #efefef;
|
|
|
-
|
|
|
- .top-box {
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .search-box {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .search-left {
|
|
|
- width: 80%;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .search-right {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .filter-box {
|
|
|
- margin-top: 20rpx;
|
|
|
-
|
|
|
- .filter-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .fiter1,
|
|
|
- .fiter2 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .filter-l {
|
|
|
- width: 200rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .fiter1 {
|
|
|
- color: #808080;
|
|
|
- font-size: 24rpx
|
|
|
- }
|
|
|
-
|
|
|
- .fiter2 {}
|
|
|
- }
|
|
|
-
|
|
|
- .filter-drapdown {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- background-color: #fff;
|
|
|
- // height: 300rpx;
|
|
|
- z-index: 999;
|
|
|
- box-shadow: 0 10rpx 20rpx -5rpx rgba(0, 0, 0, 0.2);
|
|
|
- .filter1{
|
|
|
- .scroll-box {
|
|
|
- display: flex;
|
|
|
- max-height: 1200rpx;
|
|
|
- .filter-menu-left{
|
|
|
- width: 30%;
|
|
|
- background-color: #ebebeb;
|
|
|
- overflow-y: scroll;
|
|
|
- .menu-item{
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 100rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- background-color: #ebebeb;
|
|
|
- color: #5a5a5a;
|
|
|
- }
|
|
|
- .act-left-menu{
|
|
|
- background-color: #fff;
|
|
|
- color: #5992bb;
|
|
|
- border-right: 8rpx solid #5992bb !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .filter-menu-right{
|
|
|
- background-color: #fff;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 70%;
|
|
|
- overflow-y: scroll;
|
|
|
- .menu-right-title{
|
|
|
- font-size: 30rpx;
|
|
|
- color: #000;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
- .menu-right-contentbox{
|
|
|
- padding: 0 0 0 30rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: left;
|
|
|
- flex-wrap: wrap;
|
|
|
- .menu-item{
|
|
|
- // width: 100rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- height: 40rpx;
|
|
|
- background-color: #cccccc;
|
|
|
- color: #000;
|
|
|
- text-align: center;
|
|
|
- line-height: 40rpx;
|
|
|
- margin: 10rpx 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .filter2 {
|
|
|
- padding: 20rpx 50rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- view {
|
|
|
- margin: 30rpx 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .content-box {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .content-item {
|
|
|
- background-color: #fff;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 10rpx 0;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .item-left {
|
|
|
- margin-right: 10rpx;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-right {
|
|
|
- height: 200rpx;
|
|
|
- align-content: space-between;
|
|
|
-
|
|
|
- .item-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .tag {
|
|
|
- width: 80rpx;
|
|
|
- height: 46rpx;
|
|
|
- // line-height: 50rpx;
|
|
|
- padding: 4rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: #f6e7d4;
|
|
|
- color: #f99a47;
|
|
|
- border: 2rpx solid #f99a47;
|
|
|
- text-align: center;
|
|
|
- // align-items: center;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 30rpx;
|
|
|
- color: #000;
|
|
|
- font-weight: bold;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .str-box {
|
|
|
- display: flex;
|
|
|
- margin-top: 10rpx;
|
|
|
-
|
|
|
- .srt-left {
|
|
|
- display: flex;
|
|
|
- color: #fc8400;
|
|
|
- }
|
|
|
-
|
|
|
- .border {
|
|
|
- border-left: 2rpx solid #cfcfcf;
|
|
|
- margin: 0 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .srt-right {}
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .bottom-textbox {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 26rpx;
|
|
|
- margin-top: 40rpx;
|
|
|
-
|
|
|
- .bottom-left {
|
|
|
- color: #c7c7c7;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-right {
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view class="container" @click="filterShow = false">
|
|
|
+ <view class="top-box">
|
|
|
+ <view class="search-box">
|
|
|
+ <view class="search-left">
|
|
|
+ <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword" />
|
|
|
+ </view>
|
|
|
+ <view class="search-right">取消</view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-box">
|
|
|
+ <view class="filter-item">
|
|
|
+ <view class="fiter1 ">
|
|
|
+ <u-icon name="map"></u-icon>
|
|
|
+ <span class="filter-l">贵阳市青少年人才社区</span>
|
|
|
+ <u-icon name="arrow-down-fill"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="fiter2" @tap.stop="handlerSelectAllFilter(2)">
|
|
|
+ <span>{{sortCondition}}</span>
|
|
|
+ <u-icon name="arrow-down-fill"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="fiter1" @tap.stop="handlerSelectMenu(1)">
|
|
|
+ <span>筛选</span>
|
|
|
+ <u-icon name="arrow-down-fill"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-drapdown" v-show="filterShow">
|
|
|
+ <view class="filter1" v-show="filterType == 1">
|
|
|
+ <view class="scroll-box">
|
|
|
+ <scroll-view :scroll-top="scrollTop" scroll-y="true" class="filter-menu-left scroll-Y"
|
|
|
+ @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
|
|
|
+ <view id="demo1" class="scroll-view-item uni-bg-red menu-item"
|
|
|
+ :class="current == index ? 'act-left-menu' : ''" v-for="(item,index) of menuList"
|
|
|
+ @click.stop='handlerSelectLMenu(item,index)'>{{ item.name }}
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <scroll-view :scroll-top="scrollTop" scroll-y="true" class="filter-menu-right scroll-Y"
|
|
|
+ @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
|
|
|
+ <view id="demo1" class="scroll-view-item uni-bg-red" v-for="item of 15">
|
|
|
+ <view class="menu-right-title">洗车</view>
|
|
|
+ <view class="menu-right-contentbox">
|
|
|
+ <span class="menu-item" v-for="item of 7">测试</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter2" v-show="filterType == 2">
|
|
|
+ <view class="" @tap="sellerListFillter(1)">离我最近</view>
|
|
|
+ <view class="" @tap="sellerListFillter(2)">好评优先</view>
|
|
|
+ <view class=""@tap="sellerListFillter(3)">销量优先</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="content-item" v-for="(item,index) in sellerList" :key="index" @tap="goSellerDetail(item.id)">
|
|
|
+ <view class="item-left">
|
|
|
+ <image class="img" :src="item.logo" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-right">
|
|
|
+ <view class="">
|
|
|
+ <view class="item-title">
|
|
|
+ <view class="tag">常去 </view>
|
|
|
+ <view class="title">{{`${item.name}(${item.address})`}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="str-box">
|
|
|
+ <view class="srt-left">
|
|
|
+ <u-rate activeColor="#fc8400" :value="item.score" readonly></u-rate>
|
|
|
+ <text>{{item.score}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="border"></view>
|
|
|
+ <view class="srt-right">{{item.sale}}单</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bottom-textbox">
|
|
|
+ <view class="bottom-left">宝安中心区美容洗车</view>
|
|
|
+ <view class="bottom-right">{{(item.distance/1000).toFixed(1)}}KM</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getSellerList } from '@/api/business.js';
|
|
|
+ import { getCurrentLocation } from '@/api/home.js';
|
|
|
+ import { mapState } from 'vuex';
|
|
|
+ export default {
|
|
|
+ async mounted() {
|
|
|
+ let data = {
|
|
|
+ longitude:this.longitude,
|
|
|
+ latitude:this.latitude
|
|
|
+ }
|
|
|
+ try{
|
|
|
+ let obj = await getCurrentLocation(data)
|
|
|
+ this.sellerListParams.region = obj.data.id
|
|
|
+ this.getData()
|
|
|
+ }catch(e){
|
|
|
+ console.log(e,'error')
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ ...mapState({
|
|
|
+ longitude:state=>state.data.location.longitude,
|
|
|
+ latitude:state=>state.data.location.latitude
|
|
|
+ })
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ keyword: null,
|
|
|
+ filterShow: false,
|
|
|
+ filterType: 0,
|
|
|
+ sortCondition:'综合排序',
|
|
|
+ current: 0,
|
|
|
+ menuList: [{
|
|
|
+ name: '汽车'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '汽车2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '汽车3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '汽车4'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ sellerList:[],
|
|
|
+ sellerListParams:{
|
|
|
+ longitude:'',
|
|
|
+ latitude:'',
|
|
|
+ sort:'SYNTHESE',
|
|
|
+ size:10,
|
|
|
+ region:'',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 点击综合排序
|
|
|
+ handlerSelectAllFilter(e) {
|
|
|
+ this.filterShow = true
|
|
|
+ this.filterType = 2
|
|
|
+ },
|
|
|
+ // 排序条件
|
|
|
+ sellerListFillter(e){
|
|
|
+ switch (e){
|
|
|
+ case 1:
|
|
|
+ this.sortCondition = '离我最近'
|
|
|
+ this.sellerListParams.sort = 'NEAREST'
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.sortCondition = '好评优先'
|
|
|
+ this.sellerListParams.sort = 'FAVORITE'
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.sortCondition = '销量优先'
|
|
|
+ this.sellerListParams.sort = 'BESTSELLING'
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ getData(){
|
|
|
+ this.sellerListParams.latitude = this.latitude
|
|
|
+ this.sellerListParams.longitude = this.longitude
|
|
|
+ getSellerList(this.sellerListParams).then(res => {
|
|
|
+ this.sellerList = res.data
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goSellerDetail(id){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `pages/business/detail?id=${id}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //
|
|
|
+ handlerSelectMenu(e) {
|
|
|
+ this.filterShow = true
|
|
|
+ this.filterType = 1
|
|
|
+ },
|
|
|
+ // 选择左侧菜单
|
|
|
+ handlerSelectLMenu(item, index) {
|
|
|
+ this.current = index
|
|
|
+ },
|
|
|
+ scroll() {},
|
|
|
+ lower() {},
|
|
|
+ upper() {},
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #efefef;
|
|
|
+
|
|
|
+ .top-box {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .search-left {
|
|
|
+ width: 80%;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-right {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-box {
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .filter-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .fiter1,
|
|
|
+ .fiter2 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-l {
|
|
|
+ width: 200rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fiter1 {
|
|
|
+ color: #808080;
|
|
|
+ font-size: 24rpx
|
|
|
+ }
|
|
|
+
|
|
|
+ .fiter2 {}
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-drapdown {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ // height: 300rpx;
|
|
|
+ z-index: 999;
|
|
|
+ box-shadow: 0 10rpx 20rpx -5rpx rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
+ .filter1 {
|
|
|
+ .scroll-box {
|
|
|
+ display: flex;
|
|
|
+ max-height: 1200rpx;
|
|
|
+
|
|
|
+ .filter-menu-left {
|
|
|
+ width: 30%;
|
|
|
+ background-color: #ebebeb;
|
|
|
+ overflow-y: scroll;
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ background-color: #ebebeb;
|
|
|
+ color: #5a5a5a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .act-left-menu {
|
|
|
+ background-color: #fff;
|
|
|
+ color: #5992bb;
|
|
|
+ border-right: 8rpx solid #5992bb !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-menu-right {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 70%;
|
|
|
+ overflow-y: scroll;
|
|
|
+
|
|
|
+ .menu-right-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-right-contentbox {
|
|
|
+ padding: 0 0 0 30rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ // width: 100rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background-color: #cccccc;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter2 {
|
|
|
+ padding: 20rpx 50rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ view {
|
|
|
+ margin: 30rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .content-box {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .item-left {
|
|
|
+ margin-right: 10rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-right {
|
|
|
+ height: 200rpx;
|
|
|
+ align-content: space-between;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ // line-height: 50rpx;
|
|
|
+ padding: 4rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #f6e7d4;
|
|
|
+ color: #f99a47;
|
|
|
+ border: 2rpx solid #f99a47;
|
|
|
+ text-align: center;
|
|
|
+ // align-items: center;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .str-box {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 10rpx;
|
|
|
+
|
|
|
+ .srt-left {
|
|
|
+ display: flex;
|
|
|
+ color: #fc8400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .border {
|
|
|
+ border-left: 2rpx solid #cfcfcf;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .srt-right {}
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .bottom-textbox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ .bottom-left {
|
|
|
+ color: #c7c7c7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
