732 lines
25 KiB
Vue
732 lines
25 KiB
Vue
<template>
|
|
<div class="main">
|
|
<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="box" :style="{top:(menu.bottom - (menu.height / 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 - ${status.screenWidth / 1.37}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 - ${status.screenWidth / 1.37}px - 132px)`}" :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">
|
|
{{item.MerchantName || ''}}
|
|
<!-- <text class="value">{{item.COMMISSION_RATIO || '-'}}</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/format/bandLevel.vue";
|
|
import ConsumptionLevel from "./components/format/consumLevel.vue";
|
|
import BandNumber from "./components/format/bandNumber.vue";
|
|
import NoData from "./components/noData.vue";
|
|
import commercialType from "./commercialType.vue";
|
|
import { tableList, wrapTreeNode } from '@/util/dateTime/index'
|
|
|
|
export default {
|
|
name: "businessPortrait",
|
|
components: {NoData, BandNumber, ConsumptionLevel, BandLevel, FillingDegree, analyse, headerTop,commercialType},
|
|
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:{},// 设备信息
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.handleGetTreeList()
|
|
//枚举
|
|
this.handleBrandType()
|
|
},
|
|
onShow(){
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.status = systemInfo
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
console.log('systemInfo',systemInfo)
|
|
},
|
|
onUnload() {
|
|
this.$util.addUserBehavior()
|
|
},
|
|
methods:{
|
|
// 拿到树状列表
|
|
async handleGetTreeList(){
|
|
const data = await request.$webGet('EShangApiMain/BaseInfo/GetBusinessTradeTree',{})
|
|
const treeTable = wrapTreeNode(data.Result_Data.List);
|
|
this.treeList = treeTable
|
|
console.log('treeTable',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){
|
|
console.log('item',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)
|
|
console.log('枚举',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){
|
|
console.log('e',e)
|
|
this.filterTop = e.detail.y + 15
|
|
this.showFilterBox = true
|
|
},
|
|
// 点击蒙层关闭悬浮框
|
|
handleClose(){
|
|
this.showFilterBox = false
|
|
},
|
|
// 切换选中的类型
|
|
handleChangeNavSelect(value){
|
|
console.log('value',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)
|
|
console.log('datalist',data)
|
|
// 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)
|
|
console.log('data',data)
|
|
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;
|
|
.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{
|
|
flex:1;
|
|
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;
|
|
min-height: 25px;
|
|
padding: 0 8px;
|
|
background: linear-gradient(90deg, RGBA(222, 231, 255, 1) 0%, RGBA(241, 246, 255, 1) 100%);
|
|
border-radius: 2px;
|
|
margin-top: 10px;
|
|
.value{
|
|
font-size: 14px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #396CFF;
|
|
line-height: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
.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>
|