feat: save

packages/admin/src/views/tab5/index.vue

@@ -125,7 +125,7 @@
               :limit="1"
               :http-request="handleFileUpload"
               list-type="picture-card"
-              accept=".jpeg,.png,.png"
+              accept=".jpeg,.jpg,.png,.png"
               :file-list="level2ModalForm.filelist"
               :on-remove="handleFileRemove">
               <i class="el-icon-plus"></i>

packages/mobile/src/views/Home.vue

@@ -65,7 +65,7 @@
     <Search v-if="searchShow" @close="searchShow = false" />
 
     <!-- 加载中 -->
-    <div class="homeLoding" :class="{ homeLodingNone: isLoding }">
+    <div class="homeLoading" :class="{ homeLoadingNone: isLoding }">
       <img src="../assets/img/loading.gif" alt="">
     </div>
   </div>
@@ -506,7 +506,7 @@ export default {
   position: relative;
   overflow: hidden;
 
-  .homeLoding {
+  .homeLoading {
     position: absolute;
     top: 0;
     left: 0;
@@ -522,7 +522,7 @@ export default {
       width: 40px;
     }
   }
-  .homeLodingNone {
+  .homeLoadingNone {
     opacity: 0;
     pointer-events: none;
   }

packages/pc/src/utils/api.js

@@ -70,5 +70,32 @@ export const addVisit = (sceneCode) => {
 }
 
 
+export const getTopicList = () => {
+    return axios({
+        method: 'get',
+        url: `/web/subject/getList`,
+    })
+}
+export const getTopicSecondaryList = (parentId) => {
+    return axios({
+        method: 'get',
+        url: `/web/subject/getSon/${parentId}`,
+    })
+}
+
+export const getTopicDetail = (id) => {
+    return axios({
+        method: 'get',
+        url: `/web/subject/detail/${id}`,
+    })
+}
+
+export const getMessageKeywords = (id) => {
+    return axios({
+        method: 'get',
+        url: `/web/dict/getList`,
+
+    })
+}
 
 

packages/pc/src/views/Home.vue

@@ -122,11 +122,13 @@
         :class="{ homeLoadingNone: isLoding }"
         v-loading="true"
     ></div>
+    <topic />
   </div>
 </template>
 
 <script>
 import {getStatistics, lookSaveApi} from "../utils/api";
+import Topic from './topic/index.vue'
 // mapIns存储初始化的地图map实例，如果map实例放在vue的data中会导致帧率下降严重
 var mapIns = null;
 var zoneLayer = null;
@@ -137,7 +139,9 @@ import "mars3d/dist/mars3d.css";
 
 export default {
   name: "home",
-  components: {},
+  components: {
+    topic: Topic
+  },
   data() {
     //这里存放数据
     return {

packages/pc/src/views/topic/index.vue

@@ -1,25 +1,80 @@
 <template>
   <div class="topic">
-    xxx
-    xxx
-
 
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+
+      <el-tab-pane :label="tab.name" :name="String(tab.id)" v-for="tab in primaryList">
+
+        <div class="card-list">
+          <div class="card-item" v-for="item in secondaryList">
+            <div class="inner_img" :style="{
+              backgroundImage:`url(${getImageURL(item.thumb)})`,
+            }"></div>
+            <div class="inner_title">{{ item.name }}</div>
+            <div class="bg"></div>
+          </div>
+
+        </div>
+
+      </el-tab-pane>
+
     </el-tabs>
   </div>
 </template>
 
 <script>
+import {getTopicList, getTopicSecondaryList} from "@/utils/api"
+
 
 export default {
+  computed: {
+    getImageURL: (url) => {
+      return (url) => {
+        const domain = process.env.NODE_ENV === 'development' ? 'http://project.4dage.com:8016' : ''
+        return domain + url
+      }
+    }
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+
+  },
   data() {
-    return {}
+
+    return {
+      activeName: "",
+      primaryList: [],
+      secondaryList: []
+
+    }
   },
 
+  methods: {
+    handleClick() {
+      this.handleSecondaryList();
+    },
+    async handleDefaultList() {
+      const res = await getTopicList();
+      this.primaryList = res.data || []
+      if (res.data.length > 0) {
+        this.activeName = String(res.data[0].id)
+        await this.handleSecondaryList();
+      }
+    },
+    async handleSecondaryList() {
+      const res = await getTopicSecondaryList(this.activeName);
+      console.log('res', res.data)
+      this.secondaryList = res.data || []
+    }
+  },
+  mounted() {
+    this.handleDefaultList();
+
+  }
+
 }
 </script>
 
@@ -27,6 +82,127 @@ export default {
 .topic {
   width: 100%;
   height: 100%;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
   background: rgba(33, 27, 18, 0.5);
+  backdrop-filter: blur(20px);
+  font-family: "思源宋体";
+
+  /deep/ .el-tabs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+
+    .el-tabs__header {
+      //height: 44px;
+      height: 150px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .el-tabs__nav-wrap::after {
+        height: 0;
+      }
+
+      .el-tabs__item {
+        padding: 5px 80px;
+        height: auto;
+        box-sizing: border-box;
+        display: inline-block;
+        list-style: none;
+        font-size: 36px;
+        font-weight: 500;
+        color: #ffffff;
+        position: relative;
+      }
+
+      .el-tabs__active-bar {
+        height: 9px;
+        background-color: transparent;
+
+        &:before {
+          content: '';
+          position: absolute;
+          width: 50%;
+          transform: translateX(50%);
+          height: 100%;
+
+          left: 0;
+          background-color: #D9C8A9;
+        }
+      }
+    }
+
+    .el-tabs__content {
+      flex: 1
+    }
+  }
+
+  .card-list {
+    user-select: none;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    gap: 0 80px;
+
+    .card-item {
+      width: 423px;
+      height: 681px;
+      position: relative;
+      z-index: 1;
+      cursor: pointer;
+
+      &:after {
+        content: "";
+        width: calc(100% - 30px);
+        height: calc(100% + 20px);
+        position: absolute;
+        top: 0;
+        left: 15px;
+        z-index: -1;
+        background: #806D52;
+      }
+
+      .inner_img {
+        width: calc(100% - 60px);
+        height: 100%;
+        margin: 10px auto 0 auto;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+        object-fit: scale-down;
+      }
+
+      .inner_title {
+        width: 100%;
+        font-weight: bold;
+        font-size: 24px;
+        color: #FFFFFF;
+        line-height: 30px;
+        letter-spacing: 12px;
+        text-align: center;
+        font-style: normal;
+        position: absolute;
+        bottom: 40px;
+      }
+
+      .bg {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 10px;
+        left: 0;
+        background: url("../../assets/img/topic_frame.png");
+        z-index: 2;
+
+      }
+
+
+    }
+  }
 }
 </style>