Merge branch 'master' of https://gitea.hmily.club/haitu/aigc-h5

.env.development

@@ -2,4 +2,8 @@ VITE_PUBLIC_PATH = /
 
 VITE_API_BASE_URL = 'http://test-admin.haituaigc.com'
 
-VITE_API_CHAT_URL = 'http://openai-test.haituaigc.com'
+VITE_API_CHAT_URL = 'http://openai-test.haituaigc.com'
+
+VITE_PC_HOST = 'http://test.haituaigc.com'
+
+VITE_M_HOST = 'http://test-m.haituaigc.com'

.env.production

@@ -2,4 +2,8 @@ VITE_PUBLIC_PATH = /
 
 VITE_API_BASE_URL = 'http://test-admin.haituaigc.com'
 
-VITE_API_CHAT_URL = 'http://openai-test.haituaigc.com'
+VITE_API_CHAT_URL = 'http://openai-test.haituaigc.com'
+
+VITE_PC_HOST = 'http://test.haituaigc.com'
+
+VITE_M_HOST = 'http://test-m.haituaigc.com'

src/layouts/Header.vue

@@ -120,6 +120,8 @@ const jump = (url)=>{
     color: #FFF;
     padding: 10px;
     box-sizing: border-box;
+    position: relative;
+    z-index: 9;
     .logo{
         width: 230px;
         display: flex;

src/layouts/index.vue

@@ -26,6 +26,8 @@ import Footer from './Footer.vue';
         flex: 1;
         width: 100%;
         overflow-y: auto;
+        position: relative;
+        z-index: 1;
     }
 }
 </style>

src/main.js

@@ -15,6 +15,15 @@ import 'vant/es/toast/style';
 
 import 'amfe-flexible'
 
+function platCheck() {
+    const userAgent = navigator.userAgent.toLowerCase();
+    const mobileKeywords = ['iphone', 'ipod', 'android', 'silk', 'blackberry', 'bb10', 'phone', 'mobile', 'kindle', 'opera mini', 'mobile safari', 'windows phone'];
+    const isMobileDevice = mobileKeywords.some(keyword => userAgent.includes(keyword));
+    if (!isMobileDevice) {
+        window.location.href = import.meta.env.VITE_PC_HOST;
+    }
+}
+platCheck();
 
 
 const app = createApp(App);

src/router/index.js

@@ -79,7 +79,7 @@ const router = createRouter({
                         title: 'AI商情-行业洞察',
                         group: 'business'
                     },
-                    component: () => import("@/views/business/insight.vue"),
+                    component: () => import("@/views/business/insight/index.vue"),
                 },
                 {
                     path: 'business/insight/category/:cid',
@@ -88,7 +88,7 @@ const router = createRouter({
                         title: 'AI商情-行业洞察',
                         group: 'business'
                     },
-                    component: () => import("@/views/business/list.vue"),
+                    component: () => import("@/views/business/insight/list.vue"),
                 },
                 {
                     path: 'business/insight/detail/:cid/:id',
@@ -97,7 +97,34 @@ const router = createRouter({
                         title: 'AI商情-行业洞察',
                         group: 'business'
                     },
-                    component: () => import("@/views/business/detail.vue"),
+                    component: () => import("@/views/business/insight/detail.vue"),
+                },
+                {
+                    path: 'business/legal',
+                    name: 'legal',
+                    meta: {
+                        title: 'AI商情-法律法规',
+                        group: 'business'
+                    },
+                    component: () => import("@/views/business/legal/index.vue"),
+                },
+                {
+                    path: 'business/legal/policy',
+                    name: 'policy',
+                    meta: {
+                        title: 'AI商情-法律法规-政策解读',
+                        group: 'business'
+                    },
+                    component: () => import("@/views/business/legal/policy.vue"),
+                },
+                {
+                    path: 'business/legal/policy/detail/:id',
+                    name: 'policyDetail',
+                    meta: {
+                        title: 'AI商情-法律法规-政策解读',
+                        group: 'business'
+                    },
+                    component: () => import("@/views/business/legal/policyDetail.vue"),
                 },
             ]
         }

src/views/business/components/CategoryCardList.vue

@@ -1,16 +1,21 @@
 <template>
     <div class="listBox">
         <template v-if="dataList != null">
-            <ul v-if="dataList.length > 0">
+            <template v-if="dataList.length > 0">
-                <li :key="item.id" v-for="item in dataList" @click="goDetail(item.id)">
+                <ul>
-                    <img :src="item.cover" :alt="item.title">
+                    <li :key="item.id" v-for="item in dataList" @click="goDetail(item.id)">
-                    <div class="title">
+                        <img :src="item.cover" :alt="item.title">
-                        <h2>{{item.title}}</h2>
+                        <div class="title">
-                        <span>{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd')}}</span>
+                            <h2>{{ item.title }}</h2>
-                    </div>
+                            <span>{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}</span>
-                    <div class="desc">{{item.description }}</div>
+                        </div>
-                </li>
+                        <div class="desc">{{ item.description }}</div>
-            </ul>
+                    </li>
+                </ul>
+                <div class="pageBox" v-if="hasMore">
+                    <div class="loadMore" @click="loadMore">加载更多</div>
+                </div>
+            </template>
             <div class="placeholder" v-else>{{ placeholder }}</div>
         </template>
         <template v-else>
@@ -33,6 +38,10 @@ const props = defineProps({
     cid: {
         cid: Object,
         default: {}
+    },
+    type: {
+        type: String,
+        default: ''
     }
 })
 const pageSize = ref(15);
@@ -40,6 +49,7 @@ const pageNum = ref(1);
 const result = ref({});
 const dataList = ref([]);
 const placeholder = ref('');
+const hasMore = ref(false);
 
 onMounted(()=>{
     getList();
@@ -48,14 +58,15 @@ onMounted(()=>{
 const getList = ()=>{
     placeholder.value = '数据加载中...';
     let params = { 
-        category_id: props.cid,
+        category_id: props.cid ? props.cid : undefined,
-        type: 'business',
+        type: props.type,
         per_page: pageSize.value,
         page: pageNum.value
      };
     http('/api/article', params, 'get').then(res => {
         result.value = res.data;
-        dataList.value = res.data.data || [];
+        dataList.value = dataList.value.concat(res.data.data || []) ;
+        hasMore.value = res.data.current_page < res.data.last_page;
         placeholder.value = dataList.value.length == 0 ? '暂无数据' : '';
     }).catch(err => {
         showToast(err.message);
@@ -63,8 +74,17 @@ const getList = ()=>{
     });
 };
 
+const loadMore = ()=>{
+    pageNum.value += 1;
+    getList();
+};
+
 const goDetail = (id) => {
-    router.push(`/insights/category/${props.cid}/${id}`);
+    let path = {
+        business: `/business/insight/detail/${props.cid}/${id}`,  // 行业洞察详情页
+        policy: `/business/legal/policy/detail/${id}`,  // 法律法规-政策解读详情页
+    };
+    router.push(path[props.type]);
 };
 
 
@@ -72,38 +92,39 @@ const goDetail = (id) => {
 
 <style lang="scss" scoped>
 .listBox{
-    margin-top: 20px;
+    padding: 20px;
+    position: relative;
     ul{
         display: flex;
         flex-wrap: wrap;
     }
     li{
-        width: 370px;
+        width: 100%;
-        height: 305px;
+        height: 408px;
         background: #D6D6DD;
         border-radius: 3px;
-        border: 2px solid #D6D6DD;
+        border: 5px solid #D6D6DD;
-        margin: 0 17px 34px 17px;
+        margin-bottom: 20px;
         color: #333;
         cursor: pointer;
         img{
-            width: 364px;
+            width: 100%;
-            height: 205px;
+            height: 264px;
             display: block;
-            margin: 0 auto;
+            background-color: #666;
         }
         .title{
-            height: 36px;
+            height: 80px;
             width: 100%;
-            padding: 17px;
+            padding: 20px 10px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             h2{
-                height: 36px;
+                height: 40px;
                 font-weight: bold;
-                font-size: 18px;
+                font-size: 28px;
-                line-height: 36px;
+                line-height: 40px;
                 margin-right: 10px;
                 flex: 1;
                 overflow: hidden;
@@ -111,36 +132,42 @@ const goDetail = (id) => {
                 white-space: nowrap;
             }
             span{
-                height: 36px;
+                height: 40px;
-                line-height: 36px;
+                line-height: 40px;
                 display: inline-block;
-                font-size: 12px;
+                font-size: 22px;
             }
         }
         .desc{
-            padding: 5px 10px;
+            padding: 10px;
-            font-size: 12px;
+            font-size: 22px;
-            line-height: 22px;
+            font-weight: bold;
+            line-height: 30px;
         }
     }
-    .pagesBox{
+    .pageBox{
         width: 100%;
-        height: 40px;
         display: flex;
         justify-content: center;
         align-items: center;
         color: #FFF;
-        a{
+        padding: 30px 0;
-            color: #FFF;
+        .loadMore{
+            padding: 10px 30px;
+            border: 1px solid #CCC;
+            border-radius: 4px;
+            font-size: 23px;
+            color: #CCC;
         }
     }
     .placeholder{
         width: 100%;
-        height: 300px;
+        height: 60vh;
+        position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
-        font-size: 14px;
+        font-size: 24px;
         color: #FFF;
     }
 }

src/views/business/detail.vue

@@ -1,283 +0,0 @@
-<template>
-    <BackPage title="上一页" :url="`/insights/category/${cid}`">
-    <div class="pageContainer">
-        <div class="mainBox">
-            <div class="breadNav">
-                <router-link to="/home">首页</router-link><span>&gt;</span>
-                <router-link to="/insights">AI商情</router-link><span>&gt;</span>
-                <router-link to="/insights/category">行业洞察</router-link><span>&gt;</span>
-                <router-link :to="`/insights/category/${category.id}`" v-if="category.id">{{category.name}}</router-link><span v-if="category.id">&gt;</span>
-                <span>详情</span>
-            </div>
-            <div class="article" v-if="detail">
-                <h1 class="title">{{detail.title}}</h1>
-                <div class="props">
-                    <span>作者：{{detail.author }}</span>
-                    <span>责编：{{detail.editor }}</span>
-                    <span>{{DateFormat(new Date(detail.published_at * 1000), 'yyyy.MM.dd')}}</span>
-                </div>
-                <div class="info">
-                    <div v-html="detail.content"></div>
-                </div>
-                <!-- <div class="recommend">
-                    <div class="blockTitle">推荐文章</div>
-                    <ul>
-                        <li>
-                            <div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
-                            <div class="info">
-                                <h3>政策最新解读</h3>
-                                <p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
-                                <span>2023.05.19</span>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
-                            <div class="info">
-                                <h3>政策最新解读</h3>
-                                <p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
-                                <span>2023.05.19</span>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
-                            <div class="info">
-                                <h3>政策最新解读</h3>
-                                <p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
-                                <span>2023.05.19</span>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
-                            <div class="info">
-                                <h3>政策最新解读</h3>
-                                <p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
-                                <span>2023.05.19</span>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
-                            <div class="info">
-                                <h3>政策最新解读</h3>
-                                <p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
-                                <span>2023.05.19</span>
-                            </div>
-                        </li>
-                        <li>
-                            <div class="img"><img src="http://madjs.com/d/file/2021/06-09/c0d0de22384d1f0e4ea06ee74e60c59c.jpg" alt=""></div>
-                            <div class="info">
-                                <h3>政策最新解读</h3>
-                                <p>ChatGPT（全名：ChatGenerative Pre-trai...</p>
-                                <span>2023.05.19</span>
-                            </div>
-                        </li>
-                    </ul>
-                </div> -->
-            </div>
-            <div class="loadingBox" v-else>数据加载中...</div>
-        </div>
-        <AiAssistant></AiAssistant>
-    </div>
-    </BackPage>
-</template>
-
-<script setup>
-import { LeftCircleOutlined } from '@ant-design/icons-vue';
-import { ref, onBeforeMount, onMounted } from 'vue';
-import http from '@/io/http';
-import { message } from 'ant-design-vue';
-import { useRouter, useRoute } from 'vue-router';
-import { DateFormat } from '@/utils/format.js';
-import AiAssistant from '@/views/chat/components/ai-assistant.vue';
-import BackPage from '@/components/BackPage/index.vue'
-
-const router = useRouter();
-const route = useRoute();
-const cid = ref(route.params.cid);
-const id = ref(route.params.id);
-const category = ref({});
-const detail = ref();
-
-onBeforeMount(()=>{
-    getCategories();
-});
-
-onMounted(()=>{
-    getDetail();
-});
-
-const getCategories = () => {
-    let params = { type_key: 'business' };
-    http('/api/keywords', params, 'get').then(res => {
-        category.value = res.data.filter(v => v.id == cid.value)[0];
-    }).catch(err => {
-        message.error(err.message);
-    });
-};
-
-const getDetail = ()=>{
-    http(`/api/article/${id.value}`, {}, 'get').then(res => {
-        detail.value = res.data;
-    }).catch(err => {
-        message.error(err.message);
-    });
-};
-
-const goBack = () => {
-    router.back();
-};
-
-</script>
-
-<style lang="scss" scoped>
-.pageContainer{
-    color: #FFF;
-    width: 90rem;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-    .mainBox{
-        flex: 1;
-        background: #242527;
-        padding: 20px;
-    }
-    .sidebar{
-        width: 260px;
-        margin-left: 20px;
-        .pageNav{
-            width: 100%;
-            padding: 20px 0;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            .prePage{
-                height: 36px;
-                padding-left: 40px;
-                background: url('@/assets/images/icon_left_arrow_circle@2x.png') no-repeat left center;
-                background-size: 36px 36px;
-                line-height: 36px;
-                cursor: pointer;
-                &:hover{
-                    text-decoration: underline;
-                }
-            }
-        }
-        .sideBlock{
-            width: 100%;
-            margin-top: 20px;
-        }
-    }
-    .breadNav{
-        height: 30px;
-        line-height: 30px;
-        color: #999;
-        span{
-            padding: 0 5px;
-        }
-        a{
-            color: #999;
-            &:hover{
-                color: #FFF;
-            }
-        }
-    }
-    .loadingBox{
-        width: 100%;
-        height: 400px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 14px;
-    }
-    .article{
-        padding: 20px 0;
-        .title{
-            font-size: 27px;
-            line-height: 30px;
-            text-align: center;
-            padding: 10px 0;
-        }
-        .props{
-            width: 100%;
-            text-align: center;
-            line-height: 30px;
-            color: #999;
-            span{
-                display: inline-block;
-                margin: 10px;
-            }
-        }
-        .info{
-            line-height: 1.5;
-            :deep(p){
-                padding: 10px 0;
-            }
-            :deep(strong){
-                font-weight: bold;
-            }
-            :deep(b){
-                font-weight: bold;
-            }
-            :deep(h1){
-                font-weight: bold;
-            }
-            :deep(img){
-                max-width: 100%;
-                display: block;
-                margin: 10px auto;
-            }
-        }
-        .recommend{
-            padding: 30px 0;
-            .blockTitle{
-                height: 46px;
-                line-height: 45px;
-                border-bottom: 1px solid #666;
-                font-size: 18px;
-                font-weight: bold;
-            }
-            ul{
-                display: flex;
-                flex-wrap: wrap;
-                li{
-                    width: 50%;
-                    padding-right: 30px;
-                    display: flex;
-                    margin-top: 30px;
-                    .img{
-                        width: 120px;
-                        height: 168px;
-                        overflow: hidden;
-                        img{
-                            width: 120px;
-                            height: 168px;
-                        }
-                    }
-                    .info{
-                        flex: 1;
-                        margin-left: 15px;
-                        height: 168px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-between;
-                        h3{
-                            font-size: 14px;
-                            font-weight: bold;
-                            padding-bottom: 10px;
-                        }
-                        p{
-                            padding: 10px 0;
-                            font-size: 12px;
-                            line-height: 22px;
-                            flex: 1;
-                        }
-                        span{
-                            color: #999;
-                            font-size: 12px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-</style>

src/views/business/index.vue

@@ -1,7 +1,9 @@
 <template>
     <div>
         AI商情首页
-        <router-link to="/business/insight">行业洞察</router-link>
+        <div><router-link to="/business/insight">行业洞察</router-link></div>
+        <div><router-link to="/business/legal">法律法规</router-link></div>
+        
     </div>
 </template>
 

src/views/business/insight/detail.vue

@@ -0,0 +1,196 @@
+<template>
+    <div class="pageContainer">
+        <div class="breadNav">
+            <router-link to="/">首页</router-link><span>&gt;</span>
+            <router-link to="/business">AI商情</router-link><span>&gt;</span>
+            <router-link to="/business/insight">行业洞察</router-link><span>&gt;</span>
+            <router-link :to="`/business/insight/category/${category.id}`" v-if="category.id">{{category.name}}</router-link><span v-if="category.id">&gt;</span>
+            <span>详情</span>
+        </div>
+        <div class="article" v-if="detail">
+            <h1 class="title">{{detail.title}}</h1>
+            <div class="props">
+                <span>作者：{{detail.author }}</span>
+                <span>责编：{{detail.editor }}</span>
+                <span>{{DateFormat(new Date(detail.published_at * 1000), 'yyyy.MM.dd')}}</span>
+            </div>
+            <div class="info">
+                <div v-html="detail.content"></div>
+            </div>
+        </div>
+        <div class="loadingBox" v-else>数据加载中...</div>
+        <!-- <AiAssistant></AiAssistant> -->
+    </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount, onMounted } from 'vue';
+import http from '@/io/http';
+import { showToast } from 'vant';
+import { useRouter, useRoute } from 'vue-router';
+import { DateFormat } from '@/utils/format.js';
+// import AiAssistant from '@/views/chat/components/ai-assistant.vue';
+
+const router = useRouter();
+const route = useRoute();
+const cid = ref(route.params.cid);
+const id = ref(route.params.id);
+const category = ref({});
+const detail = ref();
+
+onBeforeMount(()=>{
+    getCategories();
+});
+
+onMounted(()=>{
+    getDetail();
+});
+
+const getCategories = () => {
+    let params = { type_key: 'business' };
+    http('/api/keywords', params, 'get').then(res => {
+        category.value = res.data.filter(v => v.id == cid.value)[0];
+    }).catch(err => {
+        showToast(err.message);
+    });
+};
+
+const getDetail = ()=>{
+    http(`/api/article/${id.value}`, {}, 'get').then(res => {
+        detail.value = res.data;
+    }).catch(err => {
+        showToast(err.message);
+    });
+};
+
+const goBack = () => {
+    router.back();
+};
+
+</script>
+
+<style lang="scss" scoped>
+.pageContainer{
+    color: #FFF;
+    padding: 25px;
+    background-color: #242527;
+    .breadNav{
+        height: 30px;
+        line-height: 30px;
+        color: #999;
+        font-size: 22px;
+        span{
+            padding: 0 5px;
+        }
+        a{
+            color: #999;
+            &:hover{
+                color: #FFF;
+            }
+        }
+    }
+    .loadingBox{
+        width: 100%;
+        height: 400px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+    }
+    .article{
+        padding: 20px 0;
+        .title{
+            font-size: 26px;
+            line-height: 30px;
+            font-weight: bold;
+            color: #FFF;
+            text-align: center;
+            padding: 10px 0;
+        }
+        .props{
+            width: 100%;
+            text-align: center;
+            line-height: 30px;
+            color: #999;
+            font-size: 23px;
+            span{
+                display: inline-block;
+                margin: 10px;
+            }
+        }
+        .info{
+            line-height: 1.5;
+            font-size: 23px;
+            :deep(p){
+                padding: 10px 0;
+            }
+            :deep(strong){
+                font-weight: bold;
+            }
+            :deep(b){
+                font-weight: bold;
+            }
+            :deep(h1){
+                font-weight: bold;
+            }
+            :deep(img){
+                max-width: 100%;
+                display: block;
+                margin: 10px auto;
+            }
+        }
+        .recommend{
+            padding: 30px 0;
+            .blockTitle{
+                height: 46px;
+                line-height: 45px;
+                border-bottom: 1px solid #666;
+                font-size: 18px;
+                font-weight: bold;
+            }
+            ul{
+                display: flex;
+                flex-wrap: wrap;
+                li{
+                    width: 50%;
+                    padding-right: 30px;
+                    display: flex;
+                    margin-top: 30px;
+                    .img{
+                        width: 120px;
+                        height: 168px;
+                        overflow: hidden;
+                        img{
+                            width: 120px;
+                            height: 168px;
+                        }
+                    }
+                    .info{
+                        flex: 1;
+                        margin-left: 15px;
+                        height: 168px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                        h3{
+                            font-size: 14px;
+                            font-weight: bold;
+                            padding-bottom: 10px;
+                        }
+                        p{
+                            padding: 10px 0;
+                            font-size: 12px;
+                            line-height: 22px;
+                            flex: 1;
+                        }
+                        span{
+                            color: #999;
+                            font-size: 12px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/business/insight/list.vue

@@ -1,18 +1,16 @@
 <template>
     <div class="pageContainer">
         <div class="banner" :style="`background-image: url(${banner.picture})`">
-            <div class="bannerContent">
+            <div class="desc">
-                <div class="desc">
+                <h2>{{ banner.name }}</h2>
-                    <h2>{{banner.name}}</h2>
+                <p>{{ banner.description }}</p>
-                    <p>{{banner.description }}</p>
-                </div>
             </div>
         </div>
         <div class="mainBox">
             <ul class="menu">
                 <li :class="{active: cid == item.id}" @click="jump(item.id)" v-for="item in categories">{{item.name}}</li>
             </ul>
-            <CardList :key="cid" :cid="cid"></CardList>
+            <CardList :key="cid" :cid="cid" type="business"></CardList>
         </div>
     </div>
 </template>
@@ -22,7 +20,7 @@ import { ref, onBeforeMount, onMounted, onUpdated, watch } from 'vue';
 import http from '@/io/http';
 import { showToast } from 'vant';
 import { useRouter, useRoute } from 'vue-router';
-import CardList from './components/CategoryCardList.vue';
+import CardList from '../components/CategoryCardList.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -63,12 +61,8 @@ const getCategories = ()=>{
     });
 };
 
-const goBack = () => {
-    router.push('/insights/category');
-};
-
 const jump = (cid)=>{
-    router.push(`/insights/category/${cid}`);
+    router.push(`/business/insight/category/${cid}`);
 };
 </script>
 
@@ -78,17 +72,11 @@ const jump = (cid)=>{
     color: #FFF;
     .banner{
         width: 100%;
-        height: 17.6rem;
+        height: 216px;
         background-color: rgba($color: #FFF, $alpha: 0.5);
         background-repeat: no-repeat;
-        background-size: contain;
+        background-size: cover;
         background-position: center center;
-        .bannerContent{
-            width: 90rem;
-            height: 17.6rem;
-            margin: 0 auto;
-            position: relative;
-        }
         .desc{
             width: 100%;
             height: 100%;
@@ -98,45 +86,37 @@ const jump = (cid)=>{
             align-items: center;
             text-align: center;
             h2{
-                font-size: 36px;
+                font-size: 27px;
             }
             p{
-                width: 326px;
+                width: 460px;
-                font-size: 12px;
+                font-size: 23px;
-                line-height: 20px;
+                line-height: 30px;
                 padding: 10px 0;
             }
         }
-        .nav{
-            position: absolute;
-            top: 38px;
-            right: 20px;
-            font-size: 16px;
-            cursor: pointer;
-            line-height: 30px;
-            display: flex;
-            align-items: center;
-            span{
-                margin-left: 10px;
-            }
-        }
     }
     .mainBox{
-        width: 90rem;
+        width: 100%;
-        margin: 20px auto;
         .menu{
+            width: 100%;
+            height: 90px;
+            overflow-y: hidden;
+            overflow-x: auto;
             display: flex;
-            padding: 10px 0;
+            padding: 20px;
-            flex-wrap: wrap;
+            flex-wrap: nowrap;
+            position: relative;
             li{
+                height: 48px;
                 padding: 0 20px;
                 border-radius: 3px;
                 color: #999;
-                line-height: 30px;
+                line-height: 48px;
-                margin-left: 17px;
+                margin-right: 20px;
-                margin-bottom: 10px;
+                font-size: 28px;
-                cursor: pointer;
+                white-space: nowrap;
-                &:hover,
+                &:active,
                 &.active{
                     background: #3662FE;
                     color: #FFF;

src/views/business/legal/index.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="pageContainer">
+        <div class="content">
+            <div class="card policy" @click="jump('/business/legal/policy')">
+                <div class="name"><span>政策解读</span></div>
+                <div class="desc">
+                    “宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，调节控制宏观经济的
+                </div>
+                <div class="more">详情 &gt;</div>
+            </div>
+            <div class="card map" @click="jump('/business/legal/country')">
+                <div class="name"><span>国别（地区）指南</span></div>
+                <div class="desc">
+                    “宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，调节控制宏观经济的
+                </div>
+                <div class="more">详情 &gt;</div>
+            </div>
+            <div class="card searchLaw" @click="jump('/business/legal/search')">
+                <div class="name"><span>境外法规检索</span></div>
+                <div class="desc">
+                    “宏观经济政策”（macroeconomic policy）是指国家或政府有意识有计划地运用一定的政策工具，调节控制宏观经济的
+                </div>
+                <div class="more">详情 &gt;</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+
+const jump = (path) => {
+    router.push(path);
+};
+</script>
+
+<style lang="scss" scoped>
+.pageContainer{
+    color: #FFF;
+    padding: 90px 60px;
+    .content{
+        position: relative;
+        &::before{
+            content: '';
+            width: 160px;
+            height: 128px;
+            background: url('@/assets/images/law_cube2.png') no-repeat center;
+            background-size: contain;
+            position: absolute;
+            top: -90px;
+            left: -20px;
+            z-index: 1;
+        }
+        &::after{
+            content: '';
+            width: 160px;
+            height: 128px;
+            background: url('@/assets/images/law_cube1.png') no-repeat center;
+            background-size: contain;
+            position: absolute;
+            bottom: -90px;
+            right: -20px;
+            z-index: 1;
+        }
+        .card{
+            width: 100%;
+            height: 254px;
+            margin-top: 25px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            position: relative;
+            z-index: 2;
+            &.policy{
+                background: url('@/assets/images/policy_analysis.jpg') no-repeat center center;
+                background-size: cover;
+            }
+            &.map{
+                background: url('@/assets/images/map_guide.jpg') no-repeat center center;
+                background-size: cover;
+            }
+            &.searchLaw{
+                background: url('@/assets/images/oversea_law.jpg') no-repeat center center;
+                background-size: cover;
+            }
+            &:hover{
+                border-color: #FFF;
+                box-shadow: 0 0 10px rgba($color: #FFF, $alpha: 0.5);
+            }
+            .name{
+                font-size: 27px;
+                text-indent: 10px;
+                position: relative;
+                line-height: 50px;
+                height: 50px;
+                font-weight: bold;
+                &::before{
+                    content: '';
+                    width: 31px;
+                    height: 31px;
+                    background: #3662FE;
+                    border-radius: 3px;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    z-index: 0;
+                }
+                span{
+                    position: relative;
+                    z-index: 1;
+                }
+            }
+            .desc{
+                font-size: 22px;
+                line-height: 30px;
+                text-indent: 2em;
+            }
+            .more{
+                width: 100%;
+                font-size: 24px;
+                text-align: right;
+                cursor: pointer;
+            }
+        }
+    }
+}
+</style>

src/views/business/legal/policy.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="pageContainer">
+        <div class="banner" :style="`background-image: url(${banner.picture})`" v-if="banner">
+            <div class="desc">
+                <h2>{{ banner.name }}</h2>
+                <p>{{ banner.description }}</p>
+            </div>
+        </div>
+        <div class="mainBox">
+            <ul class="menu" v-if="categories.length > 0">
+                <li :class="{ active: !cid }" @click="cid = 0" >全部</li>
+                <li :class="{ active: cid == item.id }" @click="changeCategory(item.id)" v-for="item in categories">{{ item.name }}</li>
+            </ul>
+            <CardList :key="cid" :cid="cid" type="policy"></CardList>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount, onMounted, onUpdated, watch } from 'vue';
+import http from '@/io/http';
+import { showToast } from 'vant';
+import { useRouter, useRoute } from 'vue-router';
+import CardList from '../components/CategoryCardList.vue';
+
+const cid = ref(0);
+const banner = ref();
+const categories = ref([]);
+
+onBeforeMount(() => {
+    getBanner();
+    getCategories();
+});
+
+const getBanner = () => {
+    let params = { key: 'pc_policy' };
+    http('/api/banner', params, 'get').then(res => {
+        banner.value = Array.isArray(res.data) ? res.data[0] : {};
+    }).catch(err => {
+        message.error(err.message);
+    });
+};
+
+const getCategories = () => {
+    let params = {
+        type_key: 'policy',
+    };
+    http('/api/keywords', params, 'get').then(res => {
+        categories.value = res.data || [];
+    }).catch(err => {
+        message.error(err.message);
+    });
+};
+
+const changeCategory = (val) => {
+    cid.value = val;
+};
+
+</script>
+
+<style lang="scss" scoped>
+.pageContainer {
+    width: 100%;
+    color: #FFF;
+
+    .banner {
+        width: 100%;
+        height: 216px;
+        background-color: rgba($color: #FFF, $alpha: 0.5);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+
+        .desc {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+
+            h2 {
+                font-size: 27px;
+            }
+
+            p {
+                width: 460px;
+                font-size: 23px;
+                line-height: 30px;
+                padding: 10px 0;
+            }
+        }
+    }
+
+    .mainBox {
+        width: 100%;
+
+        .menu {
+            width: 100%;
+            height: 90px;
+            overflow-y: hidden;
+            overflow-x: auto;
+            display: flex;
+            padding: 20px;
+            flex-wrap: nowrap;
+            position: relative;
+
+            li {
+                height: 48px;
+                padding: 0 20px;
+                border-radius: 3px;
+                color: #999;
+                line-height: 48px;
+                margin-right: 20px;
+                font-size: 28px;
+                white-space: nowrap;
+
+                &:active,
+                &.active {
+                    background: #3662FE;
+                    color: #FFF;
+                }
+            }
+        }
+
+    }
+}</style>

src/views/business/legal/policyDetail.vue

@@ -0,0 +1,216 @@
+<template>
+    <div class="pageContainer">
+        <div class="breadNav">
+            <router-link to="/">首页</router-link><span>&gt;</span>
+            <router-link to="/business">AI商情</router-link><span>&gt;</span>
+            <router-link to="/business/legal">法律法规</router-link><span>&gt;</span>
+            <router-link to="/business/legal/policy">政策解读</router-link><span>&gt;</span>
+            <span>详情</span>
+        </div>
+        <div class="article">
+            <template v-if="detail">
+                <h1 class="title">{{detail.title}}</h1>
+                <div class="props">
+                    <span>作者：{{detail.author }}</span>
+                    <span>责编：{{detail.editor }}</span>
+                    <span>{{DateFormat(new Date(detail.published_at * 1000), 'yyyy.MM.dd')}}</span>
+                </div>
+                <div class="info">
+                    <div v-html="detail.content"></div>
+                </div>
+            </template>
+            <div class="loadingBox" v-else>数据加载中...</div>
+            <div class="recommend" v-if="recommend.length > 0">
+                <div class="blockTitle">推荐文章</div>
+                <ul>
+                    <li :key="item.id" v-for="item in recommend" @click="goDetail(item.id)">
+                        <div class="img"><img :src="item.cover" :alt="item.title"></div>
+                        <div class="info">
+                            <h3>{{ item.title }}</h3>
+                            <p>{{ item.description }}1</p>
+                            <span>{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}</span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!-- <AiAssistant></AiAssistant> -->
+    </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount, onMounted } from 'vue';
+import http from '@/io/http';
+import { showToast } from 'vant';
+import { useRouter, useRoute } from 'vue-router';
+import { DateFormat } from '@/utils/format.js';
+// import AiAssistant from '@/views/chat/components/ai-assistant.vue';
+
+const router = useRouter();
+const route = useRoute();
+const id = ref(route.params.id);
+const category = ref({});
+const detail = ref();
+const recommend = ref([]);
+
+
+onMounted(()=>{
+    getDetail();
+    getRecommendList();
+});
+
+
+const getDetail = ()=>{
+    http(`/api/article/${id.value}`, {}, 'get').then(res => {
+        detail.value = res.data;
+        category.value = res.data.category;
+    }).catch(err => {
+        showToast(err.message);
+    });
+};
+
+const getRecommendList = () => {
+    let params = {
+        recommend: 1,
+        type: 'policy',
+        per_page: 4,
+        page: 1
+    };
+    http('/api/article', params, 'get').then(res => {
+        recommend.value = res.data.data || [];
+    }).catch(err => {
+        message.error(err.message);
+    });
+};
+
+const goDetail = (id) => {
+    router.push(`/business/legal/policy/detail/${id}`);
+};
+
+</script>
+
+<style lang="scss" scoped>
+.pageContainer{
+    color: #FFF;
+    padding: 25px;
+    background-color: #242527;
+    .breadNav{
+        height: 30px;
+        line-height: 30px;
+        color: #999;
+        font-size: 22px;
+        span{
+            padding: 0 5px;
+        }
+        a{
+            color: #999;
+            &:hover{
+                color: #FFF;
+            }
+        }
+    }
+    .loadingBox{
+        width: 100%;
+        height: 400px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+    }
+    .article{
+        padding: 20px 0;
+        .title{
+            font-size: 26px;
+            line-height: 30px;
+            font-weight: bold;
+            color: #FFF;
+            text-align: center;
+            padding: 10px 0;
+        }
+        .props{
+            width: 100%;
+            text-align: center;
+            line-height: 30px;
+            color: #999;
+            font-size: 23px;
+            span{
+                display: inline-block;
+                margin: 10px;
+            }
+        }
+        .info{
+            line-height: 1.5;
+            font-size: 23px;
+            :deep(p){
+                padding: 10px 0;
+            }
+            :deep(strong){
+                font-weight: bold;
+            }
+            :deep(b){
+                font-weight: bold;
+            }
+            :deep(h1){
+                font-weight: bold;
+            }
+            :deep(img){
+                max-width: 100%;
+                display: block;
+                margin: 10px auto;
+            }
+        }
+        .recommend{
+            padding: 30px 0;
+            .blockTitle{
+                height: 80px;
+                line-height: 80px;
+                border-bottom: 1px solid #666;
+                font-size: 39px;
+                font-weight: bold;
+            }
+            ul{
+                display: flex;
+                flex-wrap: wrap;
+                li{
+                    width: 100%;
+                    padding-right: 30px;
+                    display: flex;
+                    margin-top: 30px;
+                    .img{
+                        width: 260px;
+                        height: 360px;
+                        overflow: hidden;
+                        img{
+                            width: 260px;
+                            height: 360px;
+                        }
+                    }
+                    .info{
+                        flex: 1;
+                        margin-left: 15px;
+                        height: 360px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-between;
+                        h3{
+                            font-size: 32px;
+                            font-weight: bold;
+                            padding-bottom: 10px;
+                        }
+                        p{
+                            padding: 10px 0;
+                            font-size: 26px;
+                            line-height: 30px;
+                            flex: 1;
+                        }
+                        span{
+                            color: #999;
+                            font-size: 22px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>