图片

front/src/views/capacitySquare/components/application.vue

@@ -2,11 +2,145 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-08-09 09:31:25
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-08-09 09:38:03
+ * @LastEditTime: 2022-08-09 15:43:34
  * @Description: 应用资源
 -->
 <template>
-  <div>应用资源</div>
+  <div class="application">
+    <div class="select">
+      <div class="top">全 市</div>
+      <div class="bottom" v-show="selectFlag">
+        <div>全市</div>
+        <div>市级</div>
+        <div>区级</div>
+        <div>企业</div>
+      </div>
+    </div>
+    <div class="item-box">
+      <div class="item" v-for="item in list" :key="item.id">
+        <a-image :width="527" :height="270" :preview="false" :src="item.pic" />
+        <div class="name">{{ item.name }}</div>
+      </div>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import { onMounted, reactive, onBeforeUnmount, ref, nextTick } from 'vue'
+  import { selectAppList } from '@/api/home'
+  const pageNum = ref(1)
+  const flag = ref(true)
+  const type = ref(null)
+  const list = reactive([])
+  const selectFlag = ref(false)
+  let dom = null
+  const getList = () => {
+    selectAppList({ pageNum: pageNum.value, type: type.value }).then((res) => {
+      if (res.data.data.length < 9) {
+        dom.removeEventListener('scroll', viewMonitor, true)
+      }
+      res.data.data.map((val) => {
+        if (!val.pic) {
+          val.pic = require('@/assets/capacitySquare/yyzy.jpg')
+        }
+      })
+      list.push(...res.data.data)
+      nextTick(() => {
+        dom = document.querySelector('.item-box')
+        flag.value = true
+      })
+    })
+  }
+  getList()
+  const viewMonitor = () => {
+    const clientHeight = dom.clientHeight
+    const scrollTop = dom.scrollTop
+    const scrollHeight = dom.scrollHeight
+    console.log('滚动条滚动', clientHeight, scrollTop, scrollHeight, dom)
+    if (clientHeight + scrollTop === scrollHeight) {
+      console.log('竖向滚动条已经滚动到底部')
+      if (flag.value) {
+        flag.value = false
+        pageNum.value++
+        getList()
+      }
+    }
+  }
+  onMounted(() => {
+    dom = document.querySelector('.item-box')
+    console.log('box============', dom)
+    dom.addEventListener('scroll', viewMonitor, true)
+  })
+  onBeforeUnmount(() => {
+    dom.removeEventListener('scroll', viewMonitor, true)
+  })
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'webfont';
+    src: url('~@/assets/capacitySquare/webfont.ttf');
+  }
+  .application {
+    padding: 0 0.15rem;
+    .select {
+      margin: 0.1rem 0 0.1rem 0.2rem;
+      color: #fff;
+      font-size: 0.2rem;
+      font-family: webfont;
+      .top {
+        width: 3.61rem;
+        height: 0.85rem;
+        font-weight: 600;
+        text-align: center;
+        padding-top: 0.1rem;
+        background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
+        background-size: 100%;
+      }
+    }
+    .item-box {
+      margin-bottom: 0.15rem;
+      height: 8.8rem;
+      padding: 0 0.9rem 0 1rem;
+      overflow-y: scroll;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      .item {
+        width: 5.25rem;
+        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;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        :deep(.ant-image-img) {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+        .name {
+          width: 100%;
+          height: 0.6rem;
+          line-height: 0.6rem;
+          padding-left: 0.3rem;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          -o-text-overflow: ellipsis;
+          word-break: break-all;
+          background: url('~@/assets/capacitySquare/bt-bg.png') no-repeat;
+          background-size: 100%;
+          color: #fff;
+          font-size: 0.22rem;
+          font-family: webfont;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+        }
+      }
+    }
+  }
+</style>