|
|
|
<template>
|
|
|
|
<view class="main">
|
|
|
|
<view class="" style="margin-bottom: 40rpx;">
|
|
|
|
<u-input
|
|
|
|
placeholder="请输入"
|
|
|
|
prefixIcon="search"
|
|
|
|
border="surround"
|
|
|
|
v-model="value"
|
|
|
|
@change="change"
|
|
|
|
>
|
|
|
|
<u-text
|
|
|
|
text="城市"
|
|
|
|
suffixIcon="arrow-down-fill"
|
|
|
|
slot="prefix"
|
|
|
|
margin="0 3px 0 0"
|
|
|
|
type="tips"
|
|
|
|
@click="goSearch"
|
|
|
|
></u-text>
|
|
|
|
</u-input>
|
|
|
|
</view>
|
|
|
|
<view class="page">
|
|
|
|
<scroll-view id="left-scroll" class="left-box" :scroll-y="true" :scroll-top="leftTop">
|
|
|
|
<view class="left-box_item" :class="{'left-box_active':index==current}" v-for="(item,index) in category"
|
|
|
|
@click="changeIndex(index)">
|
|
|
|
{{item.name}}
|
|
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
<scroll-view class="right-box" :scroll-y="true">
|
|
|
|
<swiper class="swiper" :current="current" :vertical="true" @change="changeSwiper">
|
|
|
|
<swiper-item v-for="(item,index) in category">
|
|
|
|
<u-grid :border="false" col="3" >
|
|
|
|
<u-grid-item :customStyle="{marginBottom:'24rpx'}" v-for="(tool,toolIndex) in item.list"
|
|
|
|
:key="toolIndex" @click="jumpUrl(tool.url)">
|
|
|
|
<image class="grid-icon" src="@/static/images/ic_mc.png" mode=""></image>
|
|
|
|
<text class="grid-text">{{tool.name}}</text>
|
|
|
|
</u-grid-item>
|
|
|
|
<!-- <block v-if="index==0">
|
|
|
|
<u-grid-item :customStyle="{marginBottom:'24rpx'}" @click="addTool()">
|
|
|
|
<image class="grid-icon" src="@/static/images/ic_tj.png" mode=""></image>
|
|
|
|
<text class="grid-text">添加功能</text>
|
|
|
|
</u-grid-item>
|
|
|
|
</block> -->
|
|
|
|
</u-grid>
|
|
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
|
|
|
|
|
|
</scroll-view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
keyword: '',
|
|
|
|
current: 0,
|
|
|
|
leftTop: 0,
|
|
|
|
value:'',
|
|
|
|
category: [{
|
|
|
|
name:'主题管理',
|
|
|
|
list:[
|
|
|
|
{
|
|
|
|
name:'档案搜索',
|
|
|
|
url:'/pages2/mainManage/search'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name:'特种设备单位',
|
|
|
|
url:'/pages2/mainManage/device'
|
|
|
|
},{
|
|
|
|
name:'无照主体',
|
|
|
|
url:'/pages2/mainManage/noPhoto'
|
|
|
|
},{
|
|
|
|
name:'地图分布',
|
|
|
|
url:'/pages2/mainManage/map'
|
|
|
|
},{
|
|
|
|
name:'严重失信名录',
|
|
|
|
url:'/pages2/mainManage/warning'
|
|
|
|
},{
|
|
|
|
name:'经营异常名录',
|
|
|
|
url:'/pages2/mainManage/unusually'
|
|
|
|
},{
|
|
|
|
name:'信用修复记录',
|
|
|
|
url:'/pages2/mainManage/fix'
|
|
|
|
},
|
|
|
|
]
|
|
|
|
}, {name:'证照管理'}, {name:'日常监督'}, {name:'明厨亮灶'}, {name:'综合市场'}, {name:'互动监督'}, {name:'执法办案'}, {name:'抽检处置'}, {name:'特种设备'}, {name:'统计分析'}, {name:'常用工具'}, {name:'我的数据'}],
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
jumpUrl(url) {
|
|
|
|
uni.navigateTo({
|
|
|
|
url: url
|
|
|
|
})
|
|
|
|
},
|
|
|
|
change(e){
|
|
|
|
|
|
|
|
},
|
|
|
|
changeSwiper(e) {
|
|
|
|
this.changeIndex(e.detail.current);
|
|
|
|
},
|
|
|
|
goSearch(){
|
|
|
|
uni.navigateTo({
|
|
|
|
url:"/pages/subPages/moreChoose"
|
|
|
|
})
|
|
|
|
},
|
|
|
|
changeIndex(val) {
|
|
|
|
this.current = val;
|
|
|
|
let count = this.category.length;
|
|
|
|
const query = uni.createSelectorQuery().in(this);
|
|
|
|
let nodesRef = query.select('#left-scroll');
|
|
|
|
let that = this;
|
|
|
|
nodesRef.boundingClientRect(res => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
var height = res.height || 0;
|
|
|
|
if (height > 0 && count > 0) {
|
|
|
|
that.leftTop = val / count * height;
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
}).exec();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.main{
|
|
|
|
background: #f7f8faff;
|
|
|
|
padding: 24rpx;
|
|
|
|
}
|
|
|
|
.flexB{
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.page {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding-right: 28rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
|
|
|
.left-box {
|
|
|
|
width: 160rpx;
|
|
|
|
height: calc(100vh - 100px);
|
|
|
|
|
|
|
|
&_item {
|
|
|
|
width: 160rpx;
|
|
|
|
height: 104rpx;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 0 24rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
color: rgb(100, 101, 102);
|
|
|
|
font-size: 26rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
&_active {
|
|
|
|
width: 160rpx;
|
|
|
|
height: 104rpx;
|
|
|
|
font-weight: 600;
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: rgba(46, 122, 253, 1);
|
|
|
|
border-radius: 32rpx 0 0 32rpx;
|
|
|
|
background: rgb(255, 255, 255);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.search-box{
|
|
|
|
margin: 24rpx!important;
|
|
|
|
}
|
|
|
|
.right-box {
|
|
|
|
width: 542rpx;
|
|
|
|
height: calc(100vh - 100px);
|
|
|
|
border-radius: 16rpx;
|
|
|
|
background: rgb(255, 255, 255);
|
|
|
|
padding: 28rpx 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
.swiper {
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.grid-icon {
|
|
|
|
display: block;
|
|
|
|
margin-bottom: 16rpx;
|
|
|
|
width: 88rpx;
|
|
|
|
height: 88rpx;
|
|
|
|
border-radius: 24rpx;
|
|
|
|
background: rgb(242, 246, 254);
|
|
|
|
}
|
|
|
|
|
|
|
|
.grid-text {
|
|
|
|
color: rgba(0, 0, 0, 0.9);
|
|
|
|
font-size: 24rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
