赋能案例查询页

front/src/views/assignCase/components/queryPage.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="box">
+    <div id="container">
+      <div class="banner"></div>
+      <div class="mainBox">
+        <div class="top">
+          <h1>赋能案例</h1>
+          <div></div>
+          <h3>Enabling Cases</h3>
+        </div>
+        <div class="navigation">
+          <div class="navigationMain">
+            <div class="top-title">
+              <div
+                v-for="(item, index) in titleName"
+                :key="index"
+                class="tabAll"
+                @click="changeCards(index)"
+                :class="{ tabAllActive: index == number }"
+              >
+                <span>{{ item.name }}</span>
+              </div>
+            </div>
+            <div
+              class="tabClick"
+              v-if="tabClickShow"
+              ref="txttype"
+              :class="hidetext == true ? 'hidetext' : ''"
+            >
+              <span v-for="(item, index) in tabClickData" :key="index">
+                {{ item.name }}
+              </span>
+              <a class="more" v-if="nomore" @click="lookmore">
+                {{ moretext }}
+                <!-- <i
+                  :class="
+                    hidetext == false
+                      ? 'el-icon-arrow-up'
+                      : 'el-icon-arrow-down'
+                  "
+                ></i> -->
+              </a>
+            </div>
+          </div>
+        </div>
+        <main>
+          <div class="content">
+            <div
+              class="contenBox"
+              v-for="(item, index) in contenBox"
+              :key="index"
+            >
+              <img :src="item.photo || ''" alt="" />
+              <h3>{{ item.name }}</h3>
+              <p>
+                发布时间
+                <span>{{ item.time }}</span>
+              </p>
+              <div class="look">查看详情</div>
+            </div>
+            <div class="contenBox contenBoxImg" v-if="contenBox.length < 3">
+              <img :src="hopeing" alt="" class="hopeingImg" />
+              <p>正在研发中...</p>
+            </div>
+          </div>
+          <div class="pagination">
+            <!-- 分页 -->
+            <a-pagination
+              v-model:current="currentPage"
+              v-model:pageSize="currentPageSize"
+              show-quick-jumper
+              :total="resourceTotal"
+              @change="pageChange"
+            />
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, reactive, onMounted } from 'vue'
+  import { useStore } from 'vuex'
+  import { useRouter } from 'vue-router'
+  // import { pinyin } from 'pinyin-pro'
+  // import { Empty } from 'ant-design-vue'
+
+  const contenBox = ref([
+    {
+      photo: require('@/assets/assignCase/road.png'),
+      name: '道路保洁监管场景',
+      time: '2022-01-01 12:00',
+    },
+    {
+      photo: require('@/assets/assignCase/city.png'),
+      name: '文明创城场景',
+      time: '2022-01-01 12:00',
+    },
+  ])
+  const hopeing = require('@/assets/assignCase/hopeing.png')
+  // 分页
+  const resourceTotal = ref(15)
+  const currentPage = ref(1)
+  const currentPageSize = ref(3)
+  const pageChange = (val) => {
+    console.log(val)
+    currentPage.value = val
+    // paramsGetResources.pageNum = val
+  }
+  // 选项卡
+  const titleName = ref([
+    {
+      name: '全部',
+    },
+    {
+      name: '按应用领域',
+    },
+  ])
+  const tabClickData = ref([
+    {
+      name: '社会治安',
+    },
+    {
+      name: '城市管理',
+    },
+    {
+      name: '疫情防控',
+    },
+    {
+      name: '危化品管理',
+    },
+    {
+      name: '交通运输',
+    },
+    {
+      name: '森林防火',
+    },
+    {
+      name: '防汛抗旱',
+    },
+    {
+      name: '文化旅游',
+    },
+    {
+      name: '非煤矿山',
+    },
+    {
+      name: '医疗卫生',
+    },
+    {
+      name: '安全生产',
+    },
+    {
+      name: '生态环境',
+    },
+    {
+      name: '农村农业',
+    },
+    {
+      name: '市场监管',
+    },
+    {
+      name: '政务服务',
+    },
+    {
+      name: '其他',
+    },
+  ])
+  const tabClickShow = ref(false)
+  const number = ref(0)
+  const changeCards = (val) => {
+    console.log(val)
+    number.value = val
+    if (val == 1) {
+      tabClickShow.value = true
+    } else {
+      tabClickShow.value = false
+    }
+  }
+  const moretext = ref('查看更多')
+  const nomore = ref('true')
+  const hidetext = ref('false')
+</script>
+<style scoped lang="less">
+  .box {
+    // overflow: hidden;
+    height: 100%;
+  }
+  #container {
+    position: relative;
+    .banner {
+      position: absolute;
+      width: 100%;
+      height: 400px;
+      background: url(../../../assets/assignCase/bg.png) no-repeat center;
+    }
+    .mainBox {
+      width: 1920px;
+      margin: 0 auto;
+      background: #f7f8fa;
+    }
+    .top {
+      width: 1350px;
+      margin: 0 auto;
+      height: 400px;
+      padding-top: 80px;
+      position: relative;
+      margin-top: 64px;
+      h1 {
+        font-size: 40px;
+        font-weight: 300;
+        line-height: 50px;
+        color: #ffffff;
+      }
+      div {
+        width: 76px;
+        height: 4px;
+        background: #ff8b55;
+        margin: 20px 0;
+      }
+      h3 {
+        font-weight: 300;
+        font-size: 26px;
+        color: #ffffff;
+      }
+    }
+    .navigation {
+      width: 100%;
+      height: 80px;
+      line-height: 80px;
+      background: #ffffff;
+      .navigationMain {
+        width: 1350px;
+        margin: 0 auto;
+        display: flex;
+        .top-title {
+          display: flex;
+          .tabAll {
+            font-size: 22px;
+            color: #526aff;
+            margin-right: 35px;
+            cursor: pointer;
+          }
+          .tabAll:nth-child(2) {
+            margin-left: 35px;
+            margin-right: 60px;
+          }
+          .tabAllActive {
+            color: #999999;
+          }
+        }
+        .tabClick {
+          span {
+            font-size: 22px;
+            color: #333333;
+            margin-right: 30px;
+          }
+          span:last-child {
+            margin-right: 50px;
+          }
+        }
+        .tabClick {
+          letter-spacing: 0.5px;
+          line-height: 20px;
+          position: relative;
+        }
+        .hidetext {
+          position: relative;
+          height: 20px;
+          overflow: hidden;
+          span {
+            display: block;
+            width: calc(100% - 100px);
+          }
+        }
+      }
+    }
+    main {
+      position: relative;
+      z-index: 5;
+      width: 1350px;
+      height: 100%;
+      margin: 0 auto;
+      .content {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        padding-top: 40px;
+        .contenBox {
+          width: 430px;
+          padding: 30px;
+          border: 1px solid #e4e6f5;
+          margin-right: 30px;
+          background: #ffffff;
+          border-radius: 6px;
+          box-shadow: 5px 5px 20px 0 #f2f3fb;
+          img {
+            width: 370px;
+            height: 200px;
+            border-radius: 6px;
+          }
+          h3 {
+            margin: 30px 0 20px;
+            font-size: 28px;
+            color: #000000;
+          }
+          p {
+            font-size: 18px;
+            color: #999999;
+          }
+          .look {
+            width: 100px;
+            height: 36px;
+            line-height: 36px;
+            border: 1px solid #526aff;
+            color: #526aff;
+            border-radius: 6px;
+            font-size: 18px;
+            text-align: center;
+          }
+        }
+        .contenBox:last-of-type {
+          margin-right: 0px;
+        }
+        .contenBoxImg {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          .hopeingImg {
+            width: 178px;
+            height: 130px;
+            margin-bottom: 40px;
+          }
+          h3 {
+            font-size: 22px;
+            color: #999999;
+          }
+        }
+      }
+      .pagination {
+        padding: 60px 0 40px;
+        .ant-pagination {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+</style>

front/src/views/assignCase/index.vue

@@ -1,17 +1,23 @@
 <template>
   <div>
     <home-header></home-header>
+    <query-page></query-page>
+    <home-footer></home-footer>
   </div>
 </template>
 
 <script>
   import HomeHeader from '@/views/home/components/header'
+  import HomeFooter from '@/views/newHome/components/Footer'
+  import QueryPage from '@/views/assignCase/components/queryPage'
   export default {
     setup() {
       return {}
     },
     components: {
       HomeHeader,
+      HomeFooter,
+      QueryPage,
     },
   }
 </script>