|
|
@@ -1,462 +1,438 @@
|
|
|
<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"
|
|
|
- :key="index"
|
|
|
- @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" :key="item">
|
|
|
- <view class="menu-right-title">洗车</view>
|
|
|
- <view class="menu-right-contentbox">
|
|
|
- <span class="menu-item" v-for="item of 7" :key="item">测试</span>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="filter2" v-show="filterType == 2">
|
|
|
- <view @tap="sellerListFillter(1)">离我最近</view>
|
|
|
- <view @tap="sellerListFillter(2)">好评优先</view>
|
|
|
- <view @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> -->
|
|
|
- <image
|
|
|
- class="img"
|
|
|
- :src="error || !loaded ? 'https://cdn.uviewui.com/uview/album/10.jpg' : item.logo"
|
|
|
- mode="scaleToFill"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- <view class="item-right">
|
|
|
- <view>
|
|
|
- <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(2) }}KM</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <u-empty
|
|
|
- v-if="sellerList.length == 0"
|
|
|
- mode="data"
|
|
|
- icon="http://cdn.uviewui.com/uview/empty/data.png"
|
|
|
- ></u-empty>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <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"
|
|
|
+ :key="index" @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" :key="item">
|
|
|
+ <view class="menu-right-title">洗车</view>
|
|
|
+ <view class="menu-right-contentbox">
|
|
|
+ <span class="menu-item" v-for="item of 7" :key="item">测试</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter2" v-show="filterType == 2">
|
|
|
+ <view @tap="sellerListFillter(1)">离我最近</view>
|
|
|
+ <view @tap="sellerListFillter(2)">好评优先</view>
|
|
|
+ <view @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> -->
|
|
|
+ <image class="img"
|
|
|
+ :src="error || !loaded ? 'https://cdn.uviewui.com/uview/album/10.jpg' : item.logo"
|
|
|
+ mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-right">
|
|
|
+ <view>
|
|
|
+ <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(2) }}KM</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-empty v-if="sellerList.length == 0" mode="data"
|
|
|
+ icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getSellerList } from '@/api/client/business.js';
|
|
|
-import { getCurrentLocation } from '@/api/client/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) {}
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState({
|
|
|
- longitude: state => state.data.location.longitude,
|
|
|
- latitude: state => state.data.location.latitude,
|
|
|
- }),
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- filterShow: false,
|
|
|
- filterType: 0,
|
|
|
- sortCondition: '综合排序',
|
|
|
- current: 0,
|
|
|
- menuList: [
|
|
|
- {
|
|
|
- name: '汽车',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '汽车2',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '汽车3',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '汽车4',
|
|
|
- },
|
|
|
- ],
|
|
|
- sellerList: [],
|
|
|
- sellerListParams: {
|
|
|
- longitude: '',
|
|
|
- latitude: '',
|
|
|
- sort: 'SYNTHESE',
|
|
|
- size: 10,
|
|
|
- region: '', //地区编码
|
|
|
- keyword: '', //关键字
|
|
|
- categoryId: '', //分类ID
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.sellerListParams.categoryId = option.id;
|
|
|
- },
|
|
|
- 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 => {});
|
|
|
- },
|
|
|
- // 点击进入详情
|
|
|
- goSellerDetail(id) {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/client/clientPackage/storeDetail?id=${id}`,
|
|
|
- });
|
|
|
- },
|
|
|
- //
|
|
|
- handlerSelectMenu(e) {
|
|
|
- this.filterShow = true;
|
|
|
- this.filterType = 1;
|
|
|
- },
|
|
|
- // 选择左侧菜单
|
|
|
- handlerSelectLMenu(item, index) {
|
|
|
- this.current = index;
|
|
|
- },
|
|
|
- scroll() {},
|
|
|
- lower() {},
|
|
|
- upper() {},
|
|
|
- },
|
|
|
-};
|
|
|
+ import {
|
|
|
+ getSellerList
|
|
|
+ } from '@/api/client/business.js';
|
|
|
+ import {
|
|
|
+ getCurrentLocation
|
|
|
+ } from '@/api/client/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) {}
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ longitude: state => state.data.location.longitude,
|
|
|
+ latitude: state => state.data.location.latitude,
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ filterShow: false,
|
|
|
+ filterType: 0,
|
|
|
+ sortCondition: '综合排序',
|
|
|
+ current: 0,
|
|
|
+ menuList: [{
|
|
|
+ name: '汽车',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '汽车2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '汽车3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '汽车4',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ sellerList: [],
|
|
|
+ sellerListParams: {
|
|
|
+ longitude: '',
|
|
|
+ latitude: '',
|
|
|
+ sort: 'SYNTHESE',
|
|
|
+ size: 10,
|
|
|
+ region: '', //地区编码
|
|
|
+ keyword: '', //关键字
|
|
|
+ categoryId: '', //分类ID
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.sellerListParams.categoryId = option.id;
|
|
|
+ },
|
|
|
+ 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 => {});
|
|
|
+ },
|
|
|
+ // 点击进入详情
|
|
|
+ goSellerDetail(id) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/client/clientPackage/storeDetail?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: 35rpx;
|
|
|
- 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 {
|
|
|
- width: 85%;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #000;
|
|
|
- font-weight: bold;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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>
|
|
|
+ .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: 35rpx;
|
|
|
+ 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 {
|
|
|
+ width: 85%;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|
