836 lines
26 KiB
Vue
836 lines
26 KiB
Vue
<template>
|
|
<div class="main">
|
|
<!-- <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">-->
|
|
<!-- <commercial-type :have="4"/>-->
|
|
<!-- </div>-->
|
|
<div style="position: fixed;right: 0;top: 20%;z-index:99999999999">
|
|
<!-- <commercial-type :have="4"/>-->
|
|
</div>
|
|
<!-- <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :analyseInfo="analyseInfo" :topBg="topBg" :page="page" :backType="backType"-->
|
|
<!-- :serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"/>-->
|
|
<!-- <div class="header" :style="{height:`${status.screenWidth / 1.37}px`}">-->
|
|
<div class="header" :style="{ height: menu.bottom + 65 + 'px' }">
|
|
<div class="box" :style="{ top: menu.top + (menu.height - 32) / 2 + 'px' }">
|
|
<div class="icon" @click="handleBack">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
|
|
</div>
|
|
<input class="search" confirm-type="search" placeholder="请输入品牌名称" v-model="searchText" @confirm="onSearch" />
|
|
</div>
|
|
<!-- <div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" >-->
|
|
<!--<!– @click="handleGoSelectService"–>-->
|
|
<!-- <div class="picker">-->
|
|
<!-- <div class="selectService">-->
|
|
<!-- <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>-->
|
|
<!-- <view class="select">-->
|
|
<!-- <view class="content">-->
|
|
<!-- <!– <view class="uni-input">{{serviceArray[serviceIndex]}}</view>–>-->
|
|
<!-- <view class="uni-input">安徽驿达</view>-->
|
|
<!-- <!– <text class="area">{{area}}</text>–>-->
|
|
<!--<!– <text class="area">{{serviceInfo.SPREGIONTYPE_NAME}}</text>–>-->
|
|
<!-- <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<div class="charts"
|
|
:style="{ height: `calc(100vh - 85px)`, paddingTop: serviceInfo.SERVERPART_NAME === '安徽驿达' ? menu.bottom + 62 + 14 + 'px' : '' }">
|
|
<div class="top">
|
|
<div :class="selectTab === item.value ? 'topItem bg' : 'topItem'" v-for="(item, index) in tabList" :key="index"
|
|
@click="handleChangeTab(item.value)">
|
|
<image class="icon" :src="item.img"></image>
|
|
<text class="text">{{ item.label || '-' }}</text>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<scroll-view scroll-x="true" class="navList" :scrollIntoView="currentNav" :scroll-with-animation="true">
|
|
<div :id="'item' + item.value" :class="selectNav === item.value ? 'navItem bg' : 'navItem'"
|
|
v-for="(item, index) in navList" :key="index" @click="handleChangeNavSelect(item.value)">
|
|
{{ item.label || '-' }}
|
|
<span v-if="item.count" class="count">{{ `(${item.count})` }}</span>
|
|
</div>
|
|
</scroll-view>
|
|
<div class="filter">
|
|
<image class="more" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/more.svg"
|
|
@click="handleShowFilter($event)"></image>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- height: calc(100vh - 404px);-->
|
|
<scroll-view class="list" :style="{ height: `calc(100vh - 400rpx)` }" :show-scrollbar="false" scroll-y="true"
|
|
:scroll-top="scrollTop" @scroll="handleScroll" :scroll-with-animation="true">
|
|
<div class="listItem" v-for="(item, index) in tableList" :key="index" @click="handleToDetail(item)">
|
|
<div class="left">
|
|
<image class="logo" :src="item.BRAND_INTRO"></image>
|
|
</div>
|
|
<div class="right">
|
|
<text class="title" :style="{ fontSize: item.BRAND_NAME.length > 8 ? '14px' : '16px' }">{{ item.BRAND_NAME }}</text>
|
|
<div class="labelList">
|
|
<!-- <div class="labelItem" v-for="(item,index) in labelItemList" :key="index">{{item.label}}</div>-->
|
|
<div class="labelItem">{{ item.BUSINESSTRADE_NAME }}</div>
|
|
<div class="labelItem">{{ item.BRAND_TYPENAME }}</div>
|
|
</div>
|
|
<view style="display: flex;justify-content: flex-end">
|
|
<div class="suggest" @click.stop="handleShopDetail(item)" v-if="item.MerchantName">
|
|
<!-- <view style="width: 100%;display: inline-block;text-align: right;font-size: 11px;">-->
|
|
<!-- {{item.MerchantName || ''}}-->
|
|
<!-- </view>-->
|
|
{{ item.MerchantName || '-' }}
|
|
<!-- <text class="value"></text>-->
|
|
<!-- <text class="text">建议提成比例</text>-->
|
|
</div>
|
|
</view>
|
|
|
|
</div>
|
|
<div class="type">
|
|
<image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/foodIcon.svg"></image>
|
|
<text class="text">服务区</text>
|
|
<text class="number">{{ item.ServerpartList.length }}</text>
|
|
</div>
|
|
</div>
|
|
<div style="height: 1px"></div>
|
|
</scroll-view>
|
|
</div>
|
|
<div v-if="showFilterBox" class="meng" @click="handleClose">
|
|
<div class="filterBox" :style="{ top: filterTop + 'px' }">
|
|
<div :class="selectNav === item.value ? 'filterItem bg' : 'filterItem'" v-for="(item, index) in navList"
|
|
@click.stop="handleChangeNavSelect(item.value)">
|
|
{{ item.label || '-' }}
|
|
<span v-if="item.count" class="count">{{ `(${item.count})` }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import headerTop from "./components/headerTop.vue";
|
|
import analyse from "./components/analyse.vue";
|
|
import FillingDegree from "./components/format/fillingDegree.vue";
|
|
import BandLevel from "./components/bussiness/bandLevel.vue";
|
|
import ConsumptionLevel from "./components/format/consumLevel.vue";
|
|
import BandNumber from "./components/format/bandNumber.vue";
|
|
import NoData from "./components/noData.vue";
|
|
import { tableList, wrapTreeNode } from '../../../util/dateTime/index'
|
|
|
|
export default {
|
|
name: "businessPortrait",
|
|
components: { NoData, BandNumber, ConsumptionLevel, BandLevel, FillingDegree, analyse, headerTop },
|
|
data() {
|
|
return {
|
|
topBg: 'linear-gradient(180deg, #C6C1F0 0%, #CECBF3 100%);',//顶部组件的悬浮背景色
|
|
labelList: ['女性', '高消费', '喜爱奶茶', '浙江', '20-30岁', '江苏'],//标签
|
|
title: '业态品牌',//页面标题
|
|
bgColor: '180deg, #459FFF 0%, #473AFF 100%',
|
|
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/formatPortraitBg.svg',//背景图片路径
|
|
page: '/pages/commercialBI/formatPortrait',
|
|
time: '',//跳转携带的时间
|
|
menu: {},//手机配置信息
|
|
fillDegreeList: [],//业态充盈度
|
|
bandLevelList: [],//品牌消费水平
|
|
consumLevelList: [],//业态消费水平
|
|
brandLabelList: [],//品牌指数标签列表
|
|
brandLabelListNoChange: [],//把第一次进来请求到的标签列表存起来
|
|
brandInfoList: [],//品牌指数列表
|
|
brandInfoListNoChange: [],//把第一次请求到的全部品牌指数列表存起来
|
|
serviceInfo: {}, //当前服务区信息
|
|
backType: '',//返回的页面类型
|
|
analyseInfo: {
|
|
analysisins_type: 1501 // 传给headTop组件的
|
|
},
|
|
selectKey: '',//有数据的话
|
|
str: '',
|
|
isClick: true,//图表是否能点击
|
|
single: '',//显示时间
|
|
thisMonth: '',//几月
|
|
endData: '', // 结束时间
|
|
|
|
tabList: [{ label: '餐饮主食', img: 'https://eshangtech.com/ShopICO/ahyd-BID/brand/food.svg', value: 1 },
|
|
{ label: '休闲小吃', img: 'https://eshangtech.com/ShopICO/ahyd-BID/brand/snack.svg', value: 2 },
|
|
{ label: '生活零售', img: 'https://eshangtech.com/ShopICO/ahyd-BID/brand/lifeRetail.svg', value: 3 },
|
|
{ label: '汽车服务', img: 'https://eshangtech.com/ShopICO/ahyd-BID/brand/carService.svg', value: 4 },
|
|
{ label: '司乘体验', img: 'https://eshangtech.com/ShopICO/ahyd-BID/brand/drivingExperience.svg', value: 5 }],
|
|
selectTab: 1,
|
|
navList: [{ label: '全部', value: '' }, { label: '中餐馆', value: '' }, { label: '中式快餐', value: '' }, { label: '西式快餐', value: '' }, { label: '西式快餐', value: '' }, { label: '西式快餐', value: '' }, { label: '西式快餐', value: '' }, { label: '西式快餐', value: '' }],
|
|
showFilterBox: false,// 是否显示分类的悬浮框
|
|
treeList: [],// 树列表完整内容 有子级
|
|
selectNav: 0,// 选中的type
|
|
filterTop: '',// 点击的纵坐标
|
|
tableList: [],// 列表数据
|
|
brandType: [],// 品牌类型的枚举列表
|
|
searchText: '',// 顶部搜索框的内容
|
|
scrollTop: 0,// 滚动条位置
|
|
oldScrollTop: 0,// 滚动条位置记录的
|
|
currentNav: '',// 当前选中的nav的id
|
|
status: {},// 设备信息
|
|
}
|
|
},
|
|
props: {
|
|
selectIndex: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
comeType: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
watch: {
|
|
selectIndex: {
|
|
handler(value) {
|
|
if (value === 5) {
|
|
this.handleGetPageData()
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if (this.comeType !== 'summaryOfPortraits') {
|
|
this.handleGetTreeList()
|
|
//枚举
|
|
this.handleBrandType()
|
|
}
|
|
},
|
|
onShow() {
|
|
if (this.comeType !== 'summaryOfPortraits') {
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.status = systemInfo
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
}
|
|
},
|
|
onUnload() {
|
|
this.$util.addUserBehavior()
|
|
},
|
|
methods: {
|
|
// 拿到页面数据
|
|
handleGetPageData() {
|
|
this.handleGetTreeList()
|
|
//枚举
|
|
this.handleBrandType()
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.status = systemInfo
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
},
|
|
// 拿到树状列表
|
|
async handleGetTreeList() {
|
|
const data = await request.$webGet('EShangApiMain/BaseInfo/GetBusinessTradeTree', {})
|
|
const treeTable = wrapTreeNode(data.Result_Data.List);
|
|
this.treeList = treeTable
|
|
const list = tableList({ ...data.Result_Data, List: treeTable })
|
|
this.tabList.forEach((item, index) => {
|
|
item.label = list.data[index].AUTOSTATISTICS_NAME
|
|
item.value = list.data[index].AUTOSTATISTICS_ID
|
|
})
|
|
// 默认选中
|
|
this.selectTab = list.data[0].AUTOSTATISTICS_ID
|
|
this.handleChangeTab(list.data[0].AUTOSTATISTICS_ID)
|
|
},
|
|
handleScroll(e) {
|
|
this.oldScrollTop = e.detail.scrollTop
|
|
},
|
|
//点击跳转服务区
|
|
handleGoSelectService() {
|
|
uni.navigateTo({
|
|
url: `/pages/map/index?page=${this.page}&chartType=${true}&serviceInfo=${JSON.stringify(this.serviceInfo)}`
|
|
})
|
|
},
|
|
handleShopDetail(item) {
|
|
if (item.MerchantID && item.MerchantID !== '-1') {
|
|
uni.navigateTo({
|
|
url: `/pages/commercialBI/shopDetail?id=${item.MerchantID}&COOPMERCHANTSID=${item.MerchantID_Encrypt}`
|
|
})
|
|
}
|
|
},
|
|
//返回上一级s
|
|
handleBack() {
|
|
if (this.backType === 'userCenter') {
|
|
uni.switchTab({
|
|
url: '/pages/userCenter/userCenter'
|
|
})
|
|
} else {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
},
|
|
// 拿到枚举列表
|
|
async handleBrandType() {
|
|
const req = {
|
|
FieldExplainField: 'BRAND_TYPE',
|
|
sessionName: 'BRAND_TYPE'
|
|
}
|
|
const data = await request.$webGet('EShangApiMain/FrameWork/GetFieldEnumTree', req)
|
|
const list = wrapTreeNode(data.Result_Data.List)
|
|
this.brandType = list
|
|
},
|
|
handleChangeTab(value) {
|
|
this.selectTab = value
|
|
this.scrollTop = this.oldScrollTop
|
|
this.$nextTick(() => {
|
|
this.scrollTop = 0
|
|
});
|
|
let list = []
|
|
this.treeList.forEach(item => {
|
|
if (item.AUTOSTATISTICS_ID === value) {
|
|
list = item.children
|
|
}
|
|
})
|
|
let navList = []
|
|
let count = 0
|
|
list.forEach(item => {
|
|
count += item.STATISTICS_TYPE
|
|
navList.push({ label: item.AUTOSTATISTICS_NAME, value: item.AUTOSTATISTICS_ID, count: item.STATISTICS_TYPE })
|
|
})
|
|
navList.unshift({ label: '全部', value: value, count: count })
|
|
this.navList = navList
|
|
this.selectNav = this.navList[0].value
|
|
this.currentNav = 'item' + this.navList[0].value
|
|
this.handleGetList(this.navList[0].value)
|
|
},
|
|
// 跳转详情
|
|
handleToDetail(obj) {
|
|
uni.navigateTo({
|
|
url: `/pages/commercialBI/formatDetail?detail=${JSON.stringify(obj)}`
|
|
})
|
|
},
|
|
// 显示分类的悬浮框
|
|
handleShowFilter(e) {
|
|
this.filterTop = e.detail.y + 15
|
|
this.showFilterBox = true
|
|
},
|
|
// 点击蒙层关闭悬浮框
|
|
handleClose() {
|
|
this.showFilterBox = false
|
|
},
|
|
// 切换选中的类型
|
|
handleChangeNavSelect(value) {
|
|
this.selectNav = value
|
|
this.scrollTop = this.oldScrollTop
|
|
this.$nextTick(() => {
|
|
this.scrollTop = 0
|
|
});
|
|
this.currentNav = 'item' + value
|
|
this.handleGetList(value)
|
|
},
|
|
// 拿到类型的品牌列表
|
|
async handleGetList(id) {
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
const req = {
|
|
SearchParameter: {
|
|
BRAND_INDUSTRY: id,
|
|
BRAND_STATE: 1
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
}
|
|
const data = await request.$webPost('EShangApiMain/BaseInfo/GetBrandList', req)
|
|
// BRAND_TYPE
|
|
data.Result_Data.List.forEach(item => {
|
|
this.brandType.forEach(subItem => {
|
|
if (item.BRAND_TYPE === subItem.value) {
|
|
item.BRAND_TYPENAME = subItem.label
|
|
}
|
|
})
|
|
})
|
|
this.tableList = data.Result_Data.List
|
|
uni.hideLoading()
|
|
},
|
|
// 搜索框的值
|
|
async onSearch() {
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
const req = {
|
|
keyWord: {
|
|
Key: 'BRAND_NAME',
|
|
value: this.searchText,
|
|
},
|
|
SearchParameter: {
|
|
BRAND_STATE: 1,
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
}
|
|
const data = await request.$webPost('EShangApiMain/BaseInfo/GetBrandList', req)
|
|
data.Result_Data.List.forEach(item => {
|
|
this.brandType.forEach(subItem => {
|
|
if (item.BRAND_TYPE === subItem.value) {
|
|
item.BRAND_TYPENAME = subItem.label
|
|
}
|
|
})
|
|
})
|
|
this.tableList = data.Result_Data.List
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
background: #EEF0FE;
|
|
|
|
//background: url("https://eshangtech.com/ShopICO/ahyd-BID/brand/headerBg.svg")no-repeat;
|
|
//background-size: contain;
|
|
.header {
|
|
//height: 272px;
|
|
//background: linear-gradient(135deg, #7660FF 0%, #A0BAFD 31%, #B8D2FF 47%, #CAD9FF 66%, #BCB6FF 100%);
|
|
width: 100vw;
|
|
//background: url("https://eshangtech.com/ShopICO/ahyd-BID/brand/headerBg.svg")no-repeat;
|
|
background-size: cover;
|
|
|
|
//background-position-y: -5px;
|
|
.box {
|
|
padding: 0 16px;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
//transform: translateY(-50%);
|
|
.icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
width: 180px;
|
|
height: 32px;
|
|
background: #F4F4FF;
|
|
border-radius: 17px;
|
|
box-sizing: border-box;
|
|
padding: 0 12px;
|
|
border: 1px solid #F8F8FF;
|
|
margin-left: 8px;
|
|
line-height: 32px;
|
|
}
|
|
|
|
}
|
|
|
|
.serviceArea {
|
|
width: calc(100% - 32px);
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
padding-left: 16px;
|
|
|
|
.picker {
|
|
.selectService {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.img {
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.select {
|
|
//min-width: 174px;
|
|
height: 32px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
padding-right: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.uni-input {
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.area {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.rightArrow {
|
|
width: 24px;
|
|
height: 12px;
|
|
position: absolute;
|
|
right: 0px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.charts {
|
|
width: 100%;
|
|
//height: calc(100vh - 272px);
|
|
border-top-left-radius: 16px;
|
|
border-top-right-radius: 16px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
|
|
//transform: translateY(-16px);
|
|
.top {
|
|
width: 100%;
|
|
height: 100px;
|
|
background: linear-gradient(180deg, #F1F1FF 0%, #FEFEFF 95%, #FFFFFF 100%);
|
|
box-shadow: 0 20px 20px 0 rgba(231, 231, 255, 0.6);
|
|
box-sizing: border-box;
|
|
padding: 16px 15px;
|
|
display: flex;
|
|
|
|
.topItem {
|
|
width: 20%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
|
|
.icon {
|
|
width: 35px;
|
|
height: 35px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 11px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 500;
|
|
color: #5C5773;
|
|
line-height: 18px
|
|
}
|
|
}
|
|
|
|
.bg {
|
|
background: linear-gradient(180deg, #E6DFFF 0%, #F0F0FF 100%);
|
|
border-radius: 5px;
|
|
|
|
.text {
|
|
color: #683FF6 !important;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
width: 100vw;
|
|
height: 48px;
|
|
box-sizing: border-box;
|
|
padding-top: 20px;
|
|
position: relative;
|
|
background: linear-gradient(180deg, #F1F1FF 0%, #FFFFFF 100%);
|
|
|
|
.navList {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 44px 0 16px;
|
|
white-space: nowrap;
|
|
|
|
.navItem {
|
|
height: 22px;
|
|
display: inline-block;
|
|
padding: 3px 10px;
|
|
background: #F3F3F9;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #5C5773;
|
|
line-height: 22px;
|
|
border-radius: 4px;
|
|
margin-right: 8px;
|
|
|
|
.count {
|
|
line-height: 22px;
|
|
font-size: 11px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9D99B0;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
|
|
.bg {
|
|
background: #683FF6 !important;
|
|
color: #fff !important;
|
|
|
|
.selectCount {
|
|
color: #C2B2FB !important;
|
|
;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
color: transparent;
|
|
}
|
|
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
|
::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/*定义滑块 内阴影+圆角*/
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.filter {
|
|
width: 56px;
|
|
height: 28px;
|
|
background: #F7F7FF;
|
|
box-shadow: -8rpx 0rpx 8rpx 0rpx rgba(40, 0, 179, 0.06);
|
|
position: absolute;
|
|
right: 0;
|
|
top: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 999;
|
|
|
|
.more {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
|
|
|
|
.listItem {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 12px;
|
|
display: flex;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: linear-gradient(45deg, #F7FCFF 0%, #F8F9FF 100%);
|
|
border-radius: 6px;
|
|
border: 1px solid #F6F6FF;
|
|
margin-bottom: 12px;
|
|
|
|
.left {
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
|
|
.logo {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: calc(100% - 100px);
|
|
margin-left: 12px;
|
|
|
|
.title {
|
|
display: inline-block;
|
|
width: 150px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #051433;
|
|
line-height: 22px;
|
|
//margin-bottom: 4px;
|
|
}
|
|
|
|
.labelList {
|
|
//margin-bottom: 8px;
|
|
display: flex;
|
|
flex-flow: nowrap;
|
|
|
|
.labelItem {
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
padding: 1px 8px;
|
|
margin-right: 8px;
|
|
//background: linear-gradient(270deg, rgba(90, 199, 255, 0.15) 0%, rgba(90, 193, 255, 0.15) 100%);
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
.suggest {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
color: #9D99B0;
|
|
//width: 80%;
|
|
min-height: 25px;
|
|
padding: 0 8px;
|
|
//background: linear-gradient(270deg, RGBA(222, 231, 255, 1) 0%, RGBA(241, 246, 255, 1) 100%);
|
|
border-radius: 2px;
|
|
margin-top: 10px;
|
|
font-size: 11px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
.value {
|
|
font-size: 11px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.text {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #8995B5;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.type {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background: linear-gradient(135deg, #77A1FF 0%, #7967FF 100%);
|
|
border-radius: 0rpx 10rpx 0rpx 10rpx;
|
|
padding: 0 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
//border-image: linear-gradient(227deg, rgba(255, 255, 255, 1), rgba(234, 240, 255, 1), rgba(255, 255, 255, 0)) 1 1;
|
|
.typeIcon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #E3DEFF;
|
|
line-height: 18px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.number {
|
|
font-size: 14px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
color: transparent;
|
|
}
|
|
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
|
::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/*定义滑块 内阴影+圆角*/
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.meng {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: -100vh;
|
|
left: 0;
|
|
|
|
.filterBox {
|
|
width: calc(100vw - 32px);
|
|
background: #FFFFFF;
|
|
box-shadow: 0 0 30px 0 rgba(22, 4, 82, 0.13);
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
padding: 12px;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 16px;
|
|
|
|
.filterItem {
|
|
z-index: 200;
|
|
display: inline-block;
|
|
background: #F3F3F9;
|
|
border-radius: 4px;
|
|
padding: 3px 10px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #5C5773;
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
|
|
.count {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9D99B0;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
|
|
.bg {
|
|
background: #683FF6 !important;
|
|
color: #fff !important;
|
|
|
|
.selectCount {
|
|
color: #C2B2FB !important;
|
|
;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|