应用广场开发
This commit is contained in:
a0049873
parent
b4268c9961
commit
4c4de0abea
|
|
@ -1,11 +1,11 @@
|
|||
/*
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2020-07-07 16:03:23
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-08-06 10:43:53
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-08-09 15:29:14
|
||||
* @Description: 数据资源参数配置
|
||||
*/
|
||||
const newLocation = 'xihaian'
|
||||
const newLocation = 'qingdao'
|
||||
// const newLocation = 'baotou'
|
||||
// const newLocation = 'xihaian'
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-04-01 19:19:40
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-18 16:24:44
|
||||
* @LastEditTime: 2022-08-09 10:37:31
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
|
@ -370,3 +370,11 @@ export function getDevelopDocTree(params) {
|
|||
params,
|
||||
})
|
||||
}
|
||||
// 能力广场 应用资源
|
||||
export function selectAppList(params) {
|
||||
return request({
|
||||
url: '/resource/selectAppList',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,22 +2,26 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-08-09 09:31:25
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-08-09 15:43:34
|
||||
* @LastEditTime: 2022-08-09 16:35:48
|
||||
* @Description: 应用资源
|
||||
-->
|
||||
<template>
|
||||
<div class="application">
|
||||
<div class="select">
|
||||
<div class="top">全 市</div>
|
||||
<div class="top" @click="selectFlag = true">
|
||||
{{ typeName }}
|
||||
<div class="light"></div>
|
||||
</div>
|
||||
<div class="bottom" v-show="selectFlag">
|
||||
<div>全市</div>
|
||||
<div>市级</div>
|
||||
<div>区级</div>
|
||||
<div>企业</div>
|
||||
<span class="light"></span>
|
||||
<div @click="getList('全市')">全市</div>
|
||||
<div @click="getList('市级')">市级</div>
|
||||
<div @click="getList('区级')">区级</div>
|
||||
<div @click="getList('企业')">企业</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<div class="item" v-for="item in list" :key="item.id">
|
||||
<div class="item" v-for="item in data.list" :key="item.id">
|
||||
<a-image :width="527" :height="270" :preview="false" :src="item.pic" />
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div>
|
||||
|
|
@ -30,10 +34,34 @@
|
|||
const pageNum = ref(1)
|
||||
const flag = ref(true)
|
||||
const type = ref(null)
|
||||
const list = reactive([])
|
||||
const typeName = ref('全市')
|
||||
const data = reactive({ list: [] })
|
||||
const selectFlag = ref(false)
|
||||
let dom = null
|
||||
const getList = () => {
|
||||
const getList = (str) => {
|
||||
if (str) {
|
||||
dom.scrollTop = 0
|
||||
switch (str) {
|
||||
case '全市':
|
||||
type.value = null
|
||||
typeName.value = '全 市'
|
||||
break
|
||||
case '市级':
|
||||
type.value = 2
|
||||
typeName.value = '市 级'
|
||||
break
|
||||
case '区级':
|
||||
type.value = 3
|
||||
typeName.value = '区 级'
|
||||
break
|
||||
case '企业':
|
||||
type.value = 4
|
||||
typeName.value = '企 业'
|
||||
break
|
||||
}
|
||||
pageNum.value = 1
|
||||
data.list = []
|
||||
}
|
||||
selectAppList({ pageNum: pageNum.value, type: type.value }).then((res) => {
|
||||
if (res.data.data.length < 9) {
|
||||
dom.removeEventListener('scroll', viewMonitor, true)
|
||||
|
|
@ -43,10 +71,15 @@
|
|||
val.pic = require('@/assets/capacitySquare/yyzy.jpg')
|
||||
}
|
||||
})
|
||||
list.push(...res.data.data)
|
||||
data.list.push(...res.data.data)
|
||||
selectFlag.value = false
|
||||
nextTick(() => {
|
||||
dom = document.querySelector('.item-box')
|
||||
flag.value = true
|
||||
if (str) {
|
||||
dom.removeEventListener('scroll', viewMonitor, true)
|
||||
dom.addEventListener('scroll', viewMonitor, true)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -55,7 +88,7 @@
|
|||
const clientHeight = dom.clientHeight
|
||||
const scrollTop = dom.scrollTop
|
||||
const scrollHeight = dom.scrollHeight
|
||||
console.log('滚动条滚动', clientHeight, scrollTop, scrollHeight, dom)
|
||||
// console.log('滚动条滚动', clientHeight, scrollTop, scrollHeight, dom)
|
||||
if (clientHeight + scrollTop === scrollHeight) {
|
||||
console.log('竖向滚动条已经滚动到底部')
|
||||
if (flag.value) {
|
||||
|
|
@ -86,7 +119,9 @@
|
|||
color: #fff;
|
||||
font-size: 0.2rem;
|
||||
font-family: webfont;
|
||||
position: relative;
|
||||
.top {
|
||||
cursor: pointer;
|
||||
width: 3.61rem;
|
||||
height: 0.85rem;
|
||||
font-weight: 600;
|
||||
|
|
@ -94,6 +129,47 @@
|
|||
padding-top: 0.1rem;
|
||||
background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
.light {
|
||||
width: 0.56rem;
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 1.52rem;
|
||||
background: url('~@/assets/capacitySquare/select-light1.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 0.9rem;
|
||||
z-index: 1000;
|
||||
background: rgba(57, 134, 239, 0.68);
|
||||
border: 1px solid #aed5ff;
|
||||
.light {
|
||||
display: inline-block;
|
||||
width: 2.39rem;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
top: -0.08rem;
|
||||
left: -0.3rem;
|
||||
background: url('~@/assets/capacitySquare/select-light2.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
& > div {
|
||||
width: 1.8rem;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid #aed5ff;
|
||||
}
|
||||
& > div:nth-of-type(1) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-box {
|
||||
|
|
@ -109,7 +185,6 @@
|
|||
height: 2.75rem;
|
||||
margin-bottom: 0.3rem;
|
||||
position: relative;
|
||||
z-index: 3000;
|
||||
background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
|
|
@ -143,4 +218,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.item-box::-webkit-scrollbar-track-piece {
|
||||
background: #a5bcdb;
|
||||
border-radius: 0.08rem;
|
||||
}
|
||||
.item-box::-webkit-scrollbar-thumb {
|
||||
height: 3.2rem;
|
||||
background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
|
||||
}
|
||||
.item-box::-webkit-scrollbar {
|
||||
height: 8.8rem;
|
||||
width: 0.08rem;
|
||||
border-radius: 0.08rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue