首页-4

src/layout/components/Main/index.vue

@@ -3,12 +3,13 @@ import { useTabsBarStore } from "@/store/tabsbar";
 const cachedViews = useTabsBarStore().cachedViews;
 
 const props = defineProps({
-    hasTabs: { type: Boolean, default: true }
+    hasTabs: { type: Boolean, default: true },
+    hasPadding: { type: Boolean, default: false }
 });
 </script>
 
 <template>
-    <section :class="['tjm_main_content_container', !hasTabs && 'no-tabs-bar']">
+    <section :class="['tjm_main_content_container', !hasTabs && 'no-tabs-bar', hasPadding && 'content-has-padding']">
         <router-view v-slot="{ Component, route }">
             <transition-group appear name="fade-transform" mode="out-in">
                 <keep-alive :include="cachedViews">
@@ -21,12 +22,16 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 .tjm_main_content_container {
-  min-height: $base-main-height;
+  min-height: calc($base-main-height + 2 * $base-padding);
   background-color: inherit;
+}
+
+.content-has-padding {
+  min-height: $base-main-height;
   padding: $base-padding;
 }
 
 .no-tabs-bar {
-  min-height: calc(#{$base-main-height} + #{$base-tabsbar-height});
+  min-height: calc($base-main-height + $base-tabsbar-height);
 }
 </style>

src/layout/components/NavBar/components/Breadcrumb.vue

@@ -20,7 +20,7 @@ const levelList = ref([])
 function getBreadcrumb() {
     let matched = route.matched.filter(item => item.meta && item.meta.title);
     
-    if (!isDashboard(matched[0])) matched.unshift({ path: "/home/index", meta: { title: "首页" }, redirect: "/" });
+    if (!isDashboard(matched[0]) && route && route.name != "policyDetail") matched.unshift({ path: "/home/index", meta: { title: "首页" }, redirect: "/" });
     if (route && route.path.trim() === "/publicDomain") matched[matched.length - 1].meta.title = route.query.zcType && route.query.zcType.trim() || route.name;
 
     levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

src/layout/components/NavBar/index.vue

@@ -48,7 +48,6 @@ const { collapse, layoutStyle } = storeToRefs(settingStore)
 import { useUserStore } from '@/store/user.js'
 const router = useRouter()
 const avatar = ref(useUserStore().userInfo.avatar || "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png");
-layoutStyle.value = "vertical";
 
 function goUserInfo() {
     router.push('/userInfo')

src/layout/index.vue

@@ -10,7 +10,7 @@
                         <tjm-tabs-bar v-if="hasTabs" />
                     </div>
                     <div class="content_container">
-                        <tjm-main :hasTabs="hasTabs" />
+                        <tjm-main :hasTabs="hasTabs" :hasPadding="hasPadding" />
                     </div>
                 </div>
             </div>
@@ -29,8 +29,12 @@ import TjmTabsBar from "./components/TabsBar/index.vue";
 import TjmMain from "./components/Main/index.vue";
 
 const route = useRoute();
-const hasTabs = computed(() => route.name != "homePolicyDetail");
+const hasTabs = computed(() => route.name != "policyDetail");
+const hasPadding = computed(() => route.name != "Index");
+
 const { collapse, layoutStyle } = storeToRefs(useSettingStore());
+layoutStyle.value = "vertical";
+collapse.value = true;
 
 const { messages, locale, t } = useI18n();
 const localeLang = ref(messages[getConfig("globalI18n")])

src/permission.js

@@ -19,8 +19,8 @@ router.beforeEach((to, from, next) => {
                         redirect: "/notfound"
                     })
 
-                    if (to.fullPath == "/publicDomain" && !to.query.zcType && !to.query.name) next({ path: "/notfound", replace: true }); // hack方法 确保addRoutes已完成
-                    else if (to.fullPath == "/policyDetail" && !to.query.id) next({ path: "/notfound", replace: true }); // hack方法 确保addRoutes已完成
+                    if (to.path == "/publicDomain" && !to.query.zcType && !to.query.name) next({ path: "/notfound", replace: true }); // hack方法 确保addRoutes已完成
+                    else if (to.path == "/policyDetail" && !to.query.id) next({ path: "/notfound", replace: true }); // hack方法 确保addRoutes已完成
                     else next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
                 })
             })

src/router/constantRoutes.js

@@ -58,7 +58,7 @@ export const staticRoutes = [
                 children: []
             }, {
                 path: "/policyDetail",
-                name: "homePolicyDetail",
+                name: "policyDetail",
                 component: () => import("@/views/home/policyDetail.vue"),
                 alwaysShow: false,
                 hidden: true,

src/views/home/index.vue

@@ -1,21 +1,22 @@
 <template>
-    <img class="home-bg" src="/homeBg.png" />
-
     <div class="home-container">
-        <el-form @submit.prevent @keyup.enter="name && toDomain({ name })">
-            <el-form-item>
-                <el-input v-model="name" size="large" clearable placeholder="搜索">
-                    <template #suffix>
-                        <el-button link icon="search" @click="name && toDomain({ name })"></el-button>
-                    </template>
-                </el-input>
-            </el-form-item>
-            <!-- <el-form-item label="热搜词:">
-                <el-tag type="warning">政策</el-tag>
-            </el-form-item> -->
-        </el-form>
-
-        <el-card class="home-container__tabs-card">
+        <div style="background-image: url(/home-header.png)" class="home-header">
+            <el-form @submit.prevent @keyup.enter="name && toDomain({ name })">
+                <el-form-item>
+                    <el-input v-model="name" placeholder="搜索你想了解的政策">
+                        <template #append>
+                            <el-button link icon="search" @click="name && toDomain({ name })"></el-button>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <!-- <el-form-item label="热搜词:">
+                    <el-tag type="warning">政策</el-tag>
+                </el-form-item> -->
+            </el-form>
+        </div>
+
+        <div class="home-content">
+            <el-card class="home-container__tabs-card">
             <el-tabs class="left-tabs" v-model="params.zcLevel" tab-position="left" @tab-change="reloadTable">
                 <el-tab-pane v-for="item in levelDic" :key="item" :label="item.slice(0, -1)" :name="item"></el-tab-pane>
             </el-tabs>
@@ -26,24 +27,27 @@
                         <el-tab-pane v-for="item in storageTypeDic" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
                     </el-tabs>
                 </template>
-                <el-table v-loading="loading" row-key="id" header-cell-class-name="tjm_card_table_header" height="300px" :data="tableData" border @row-click="table_detail">
-                    <template v-for="(item, index) in columns" :key="index">
-                        <el-table-column :label="item.label" :prop="item.props" min-width="100" show-overflow-tooltip>
-                            <template #default="scope">{{ columnFormat(scope.row, item.props) }}</template>
-                        </el-table-column>
-                    </template>
-                </el-table>
+                
+                <ul v-loading="loading">
+                    <li v-for="item in tableData" :key="item.id">
+                        <el-text truncated @click="table_detail(item)"><span>[{{ item.zcType }}]</span>{{ item.name }}</el-text>
+                        <!-- <el-text truncated @click="table_detail(item)"><span>[{{ item.zcType }}]</span>《{{ item.name }}》</el-text> -->
+                        <span class="date">{{ columnFormat(item, "createTime") }}</span>
+                    </li>
+                </ul>
             </el-card>
         </el-card>
-
-        <el-card class="home-container__domain">
-            <template #header>{{ domainTitle }}</template>
-            <el-row>
-                <el-col v-for="zcType in typeDic" :key="zcType" :span="8">
-                    <el-button @click="toDomain({ zcType, inWhType: params.inWhType })">{{ zcType }}</el-button>
-                </el-col>
-            </el-row>
-        </el-card>
+        </div>
+        
+        <div class="home-container__domain">
+            <div class="domain-title">{{ domainTitle }}</div>
+            
+            <div class="domain-link">
+                <template v-for="zcType in typeDic" v-bind:key="zcType">
+                    <el-card @click="toDomain({ zcType, inWhType: params.inWhType })">{{ zcType }}</el-card>
+                </template>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -109,26 +113,56 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.home-bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
+.home-header {
+  display: flex;
+  align-items: center;
+  background-repeat: no-repeat;
+  background-size: 100% 94%;
+  height: 400px;
+
+  .el-form {
+    width: 780px;
+    margin: 0 auto 100px;
+
+    .el-input {
+      --el-component-size: 50px;
+      --el-fill-color-light: var(--el-color-primary);
+      --el-input-border-radius: 8px;
+
+      :deep(.el-input__wrapper) {
+        border: 2px solid var(--el-color-primary);
+        border-right: none;
+        box-shadow: 0 0;
+      }
+
+      :deep(.el-input-group__append) {
+        padding: 0 30px;
+        box-shadow: 0 0;
+        border: 2px solid var(--el-color-primary);
+        border-left: none;
+        color: #fff;
+
+        .el-button {
+          --el-button-active-color: #fff;
+          font-size: 16px;
+        }
+      }
+    }
+  }
 }
 
-.home-container {
-  position: relative;
-  z-index: 100;
-  padding: 15px 20px;
+.home-content {
+  padding: 0 20px;
 
   .el-tabs :deep {
     .el-tabs__active-bar {
       display: none;
     }
 
+    .el-tabs__item {
+      font-size: 18px;
+    }
+
     .el-tabs__item.is-active {
       background: var(--el-color-primary);
       color: #fff;
@@ -178,50 +212,65 @@ export default {
         }
       }
 
-      .el-card__body {
-        padding-right: 0;
-        padding-bottom: 0;
+      .el-card__body ul li {
+        display: flex;
+        justify-content: space-between;
+        font-size: 16px;
 
-        .el-table .el-table__header tr th {
-          background: #f4f4f4;
-          color: #333333;
+        .el-text {
+          cursor: pointer;
+          flex: 1;
+          font-size: inherit;
+          color: inherit;
+
+          span {
+            padding-right: 6px;
+          }
+        }
+
+        &:hover .el-text {
+          text-decoration: underline;
+          color: var(--el-color-primary);
+        }
+
+        .date {
+          color: #6c7380;
         }
       }
     }
   }
+}
 
-  .home-container__domain {
-    margin-top: 18px;
-
-    :deep(.el-card__header) {
-      position: relative;
-      border-bottom: none;
-      text-align: center;
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 20px;
-        width: calc(100% - 40px);
-        height: 1px;
-        background: var(--el-card-border-color);
-      }
-    }
+.home-container__domain {
+  margin-top: 40px;
+  padding: 0 20px 40px;
 
-    :deep(.el-card__body) {
-      text-align: center;
-      padding-top: calc(var(--el-card-padding) + 10px);
-      padding-bottom: calc(var(--el-card-padding) - 10px);
+  .domain-title {
+    margin-bottom: 30px;
+    text-align: center;
+    font-size: 36px;
+    font-weight: 700;
+  }
 
-      .el-col {
-        margin-bottom: calc(var(--el-card-padding) + 10px);
+  .domain-link {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+
+    .el-card {
+      flex-basis: calc((100% - 80px) / 3);
+      margin-bottom: 20px;
+      cursor: pointer;
+
+      :deep(.el-card__body) {
+        padding: 30px;
+        text-align: center;
+        font-size: 18px;
+      }
 
-        .el-button {
-          --el-button-border-color: var(--el-text-color-primary);
-          --el-button-text-color: var(--el-text-color-primary);
-          padding: 30px 40px;
-        }
+      &:hover {
+        --el-card-border-color: var(--el-color-primary);
+        box-shadow: 0 0 20px 5px var(--el-color-primary);
       }
     }
   }

src/views/publicDomain/index.vue

@@ -37,29 +37,19 @@
         <el-divider></el-divider>
 
         <div class="tjm_card_table">
-            <el-table v-loading="loading" row-key="id" header-cell-class-name="tjm_card_table_header" height="400" :data="tableData" border @row-click="(row, column) => !column.fixed && table_detail(row)">
+            <el-table v-loading="loading" row-key="id" header-cell-class-name="tjm_card_table_header" height="400" :data="tableData" border @row-click="table_detail">
                 <el-table-column type="index" label="序号" width="55"></el-table-column>
                 <template v-for="(item, index) in columns" :key="index">
                     <el-table-column :label="item.label" :prop="item.props" :width="item.width || 180" show-overflow-tooltip>
                         <template #default="scope">{{ columnFormat(scope.row, item.props) }}</template>
                     </el-table-column>
                 </template>
-                <el-table-column label="操作" fixed="right" width="240">
-                    <template #default="scope">
-                        <el-button type="primary" link icon="tickets" @click.stop="table_detail(scope.row)">详情</el-button>
-                        <el-button type="primary" link icon="link" @click.stop="table_link(scope.row)">政策关联</el-button>
-                        <el-button type="primary" link icon="chat-line-square" @click.stop="table_msg(scope.row)">留言</el-button>
-                    </template>
-                </el-table-column>
             </el-table>
         </div>
         <div class="tjm_card_pagination">
             <yh-pagination v-model:pageNo="params.page" v-model:pageSize="params.size" :total="total" @paginationChange="reloadTable"></yh-pagination>
         </div>
     </el-card>
-
-    <policy-detail v-if="dialog.detail" ref="policyDetail" @closed="dialog.detail = false"></policy-detail>
-    <policy-link v-if="dialog.link" ref="policyLink" @closed="dialog.link = false"></policy-link>
 </template>
 
 <script>
@@ -68,14 +58,10 @@ import { levelDic, typeDic, storageTypeDic } from "@/views/policyShare/main";
 import { columns } from "./main";
 
 import yhPagination from "@/components/Pagination/index.vue";
-import policyDetail from "@/views/manage/policyShare/dialog.vue";
-import policyLink from "@/views/publicDomain/link/index.vue";
 
 export default {
     components: {
-        yhPagination,
-        policyDetail,
-        policyLink
+        yhPagination
     },
 
     data() {
@@ -92,12 +78,7 @@ export default {
             },
 
             total: 0,
-            tableData: [],
-
-            dialog: {
-                detail: false,
-                link: false
-            }
+            tableData: []
         }
     },
 
@@ -143,17 +124,8 @@ export default {
             this.reloadTable();
         },
 
-        table_detail(row) {
-            this.dialog.detail = true;
-            nextTick(() => this.$refs.policyDetail.open("detail").setData(row.id));
-        },
-
-        table_link(row) {
-            this.dialog.link = true;
-            nextTick(() => this.$refs.policyLink.open(row));
-        },
-
-        table_msg(row) {
+        table_detail({ id }) {
+            this.$router.push({ path: "/policyDetail", query: { id } });
         }
     }
 }