From 88001e059e36bd45f782245e5daa16fa66364c59 Mon Sep 17 00:00:00 2001
From: fuxiaochun <f2e.xiaochun@gmail.com>
Date: Wed, 16 Aug 2023 23:48:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A3=80=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                          |  18 +
 src/views/business/legal/search.vue          | 315 ++++++++++++++
 src/views/business/legal/searchFormModal.vue | 239 +++++++++++
 src/views/business/legal/searchResult.vue    | 417 +++++++++++++++++++
 4 files changed, 989 insertions(+)
 create mode 100644 src/views/business/legal/search.vue
 create mode 100644 src/views/business/legal/searchFormModal.vue
 create mode 100644 src/views/business/legal/searchResult.vue

diff --git a/src/router/index.js b/src/router/index.js
index f32723c..ccc2ad5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -144,6 +144,24 @@ const router = createRouter({
                     },
                     component: () => import("@/views/business/legal/countryInfo.vue"),
                 },
+                {
+                    path: 'business/legal/search',
+                    name: 'search',
+                    meta: {
+                        title: 'AI商情-法律法规-境外法规检索',
+                        group: 'business'
+                    },
+                    component: () => import("@/views/business/legal/search.vue"),
+                },
+                {
+                    path: 'business/legal/searchResult',
+                    name: 'searchResult',
+                    meta: {
+                        title: 'AI商情-法律法规-境外法规检索',
+                        group: 'business'
+                    },
+                    component: () => import("@/views/business/legal/searchResult.vue"),
+                },
             ]
         }
     ],
diff --git a/src/views/business/legal/search.vue b/src/views/business/legal/search.vue
new file mode 100644
index 0000000..b85308c
--- /dev/null
+++ b/src/views/business/legal/search.vue
@@ -0,0 +1,315 @@
+<template>
+    <div class="pageContainer">
+        <div class="title">境外法规检索</div>
+        <div class="formBox">
+            <div class="item">
+                <div class="label">关键字</div>
+                <div class="val">
+                    <van-field :clearable="true" :center="true" class="txt" v-model="keywords" placeholder="请输入关键字"></van-field>
+                </div>
+            </div>
+            <div class="item">
+                <div class="label">地区</div>
+                <div class="val">
+                    <van-field class="areaInput" v-model="area.name" is-link readonly placeholder="地区" @click="onPick('area')" />
+                </div>
+            </div>
+            <div class="item">
+                <div class="label">国家</div>
+                <div class="val">
+                    <van-field class="areaInput" v-model="nation.name" is-link readonly placeholder="国家" @click="onPick('nation')" />
+                </div>
+            </div>
+            <div class="item">
+                <div class="label">生效区域</div>
+                <div class="val">
+                    <van-field class="areaInput" v-model="effectArea.name" is-link readonly placeholder="生效区域" @click="onPick('effectArea')" />
+                </div>
+            </div>
+            <van-popup v-model:show="showAreaPicker" round position="bottom">
+                <van-picker
+                    v-model="curSelectedAreaValue"
+                    :title="areaPickerTitle"
+                    :columns="areaColumns"
+                    :columns-field-names="{ text: 'name', value: 'id', children: null }"
+                    @cancel="showAreaPicker = false"
+                    @confirm="onAreaPickerConfirm"
+                />
+            </van-popup>
+
+
+            <div class="item" v-if="legalCategories.length">
+                <div class="label">法规分类</div>
+                <div class="val">
+                    <van-field class="areaInput" v-model="curCategory.name" is-link readonly placeholder="请选择法规分类" @click="showCategoryPicker = true" />
+                    <div class="legalSubTypes" v-if="curCategory.children">
+                        <van-checkbox-group v-model="checkedCategoryType">
+                            <van-checkbox :key="item.id" :name="item.name" v-for="item in curCategory.children" shape="square" >{{ item.name }}</van-checkbox>
+                        </van-checkbox-group>
+                    </div>
+                </div>
+            </div>
+            <van-popup v-model:show="showCategoryPicker" round position="bottom">
+                <van-picker
+                    title="法规分类"
+                    :columns="legalCategories"
+                    :columns-field-names="{ text: 'name', value: 'id', children: null }"
+                    @cancel="showCategoryPicker = false"
+                    @confirm="onCategoryPickerConfirm"
+                />
+            </van-popup>
+            
+        </div>
+        <div class="btns">
+            <button class="primary" @click="onSearch">检索</button>
+            <button @click="onReset">重置</button>
+        </div>
+        <div class="tips">
+            <p>友情提示：本网站仅只提供境外法规标题参考翻译及法规原文地址。境外网站访问不稳定，访问时请耐心等待。如原文地址打不开请稍后再尝试</p>
+        </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';
+
+const router = useRouter();
+
+const keywords = ref('');  // 关键字
+const areas = ref([]);
+const nations = ref([]);
+const effectAreas = ref([]);
+const area = ref({});
+const nation = ref({});
+const effectArea = ref({});
+
+const showAreaPicker = ref(false);
+const curAreaPickerType = ref();
+const areaPickerTitle = ref();
+const areaColumns = ref([]);
+const selectedAreaValues = ref({});
+const curSelectedAreaValue = ref();
+
+const showCategoryPicker = ref(false);
+
+const legalCategories = ref([]);
+const curCategory = ref({});
+
+const checkedTypeData = ref({});
+const checkedCategoryType = ref([]);
+
+onMounted(()=>{
+    getAreas();
+    getLegalCategory();
+});
+
+// 获取地区枚举
+const getAreas = ()=>{
+    let params = { parent_key: 'continent' };
+    http('/api/keywords', params, 'get').then(res => {
+        areas.value = res.data || [];
+    }).catch(err => {
+        showToast(err.message);
+    });
+};
+
+// 获取法规分类
+const getLegalCategory = (id) => {
+    let params = { parent_key: 'law_category' };
+    http('/api/keywords', params, 'get').then(res => {
+        legalCategories.value = res.data || [];
+        // curCategory.value = res.data[0];
+    }).catch(err => {
+        showToast(err.message);
+    });
+};
+
+const areaPickerTitleOptions = {
+    area: '请选择地区',
+    nation: '请选择国家',
+    effectArea: '请选择生效地区'
+};
+
+const onPick = (type)=>{
+    showAreaPicker.value = true;
+    curAreaPickerType.value = type;
+    curSelectedAreaValue.value = selectedAreaValues.value[type];
+    areaPickerTitle.value = areaPickerTitleOptions[type];
+    if(type == 'area'){
+        areaColumns.value = areas.value;
+    }else if(type == 'nation'){
+        areaColumns.value = nations.value;
+    }else if (type == 'effectArea') {
+        areaColumns.value = effectAreas.value;
+    }
+};
+
+const onAreaPickerConfirm = (val)=>{
+    showAreaPicker.value = false;
+    let _temp = val.selectedOptions[0];
+    let _typeVal = {...selectedAreaValues.value};
+    _typeVal[curAreaPickerType.value] = _temp.id;
+    selectedAreaValues.value = _typeVal;
+    switch (curAreaPickerType.value){
+        case 'area':
+            nations.value = _temp.children;
+            area.value = _temp;
+            break;
+        case 'nation':
+            effectAreas.value = _temp.children;
+            nation.value = _temp;
+            break;
+        case 'effectArea':
+            effectArea.value = _temp;
+            break;
+    }
+
+};
+
+
+const onCategoryPickerConfirm = (val)=>{
+    showCategoryPicker.value = false;
+    let _temp = val.selectedOptions[0];
+    curCategory.value = _temp;
+    checkedCategoryType.value = [];
+};
+
+
+const onSearch = ()=>{
+    let continent = area.value.name;
+    let params = {
+        title: keywords.value,
+        continent: continent,  // 地区洲
+        country: nation.value.id,
+        area: effectArea.value.id,
+        categories: checkedCategoryType.value.join(',')
+    };
+    router.push({
+        path: `/business/legal/searchResult`,
+        query: params
+    });
+};
+
+const onReset = ()=>{
+    keywords.value = '';
+    area.value = '';
+    nation.value = '';
+    effectArea.value = '';
+    nations.value = [];
+    effectAreas.value = [];
+    curCategory.value = {};
+    checkedTypeData.value = {};
+};
+
+</script>
+
+<style lang="scss" scoped>
+.pageContainer{
+    padding: 40px;
+    color: #FFF;
+    .title{
+        font-size: 36px;
+        padding: 20px 0;
+        text-align: center;
+        font-weight: bold;
+    }
+    .formBox{
+        width: 100%;
+        .item{
+            padding: 8px 0;
+            .label{
+                width: 100%;
+                height: 66px;
+                line-height: 66px;
+                font-size: 27px;
+                font-weight: bold;
+            }
+            .val{
+                flex: 1;
+                line-height: 72px;
+                display: flex;
+                flex-direction: column;
+                .txt,
+                .areaInput{
+                    flex: 1;
+                    height: 72px;
+                    border: 2px solid rgba($color: #414548, $alpha: 0.4);
+                    border-radius: 4px;
+                    background: none;
+                    color: #FFF;
+                    padding: 10px 20px;
+                    box-sizing: border-box;
+
+                    :deep(input) {
+                        background: none;
+                        color: #FFF;
+                        font-size: 27px;
+                        line-height: 52px;
+
+                        &::placeholder {
+                            color: #999;
+                        }
+                    }
+                }
+            }
+            :deep(.van-cell:after){
+                display: none;
+            }
+            .legalSubTypes{
+                flex: 1;
+                margin-top: 20px;
+                border: 2px solid #A6A8AF;
+                border-radius: 4px;
+                padding: 20px;
+                font-size: 28px;
+                color: #FFF;
+                li{
+                    width: 100%;
+                    line-height: 36px;
+                    padding: 15px 10px;
+                    margin-bottom: 10px;
+                }
+            }
+            :deep(.van-checkbox__label){
+                color: #FFF;
+            }
+            :deep(.van-checkbox){
+                padding: 15px 0;
+            }
+            :deep(.van-checkbox__icon--checked ~ span){
+                color: #3662FE;
+            }
+        }
+    }
+    .btns{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 50px 0;
+        button{
+            width: 200px;
+            height: 72px;
+            background: #414548;
+            border-radius: 3px;
+            font-size: 26px;
+            color: #FFF;
+            line-height: 72px;
+            text-align: center;
+            &.primary{
+                background: #3662FE;
+            }
+        }
+    }
+    .tips{
+        width: 100%;
+        font-size: 22px;
+        line-height: 36px;
+        color: #A6A8AF;
+        margin-top: 30px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/business/legal/searchFormModal.vue b/src/views/business/legal/searchFormModal.vue
new file mode 100644
index 0000000..44a212c
--- /dev/null
+++ b/src/views/business/legal/searchFormModal.vue
@@ -0,0 +1,239 @@
+<template>
+    <div class="pageContainer">
+        <div class="title">境外法规检索</div>
+        <div class="formBox">
+            <div class="item">
+                <div class="label">关键字</div>
+                <div class="val">
+                    <van-field :clearable="true" :center="true" class="txt" v-model="keywords"
+                        placeholder="请输入关键字"></van-field>
+                </div>
+            </div>
+            <div class="item">
+                <div class="label">地区</div>
+                <div class="val">
+                    <van-field class="areaInput" v-model="area.name" is-link readonly placeholder="地区"
+                        @click="onPick('area')" />
+                </div>
+            </div>
+            <div class="item">
+                <div class="label">国家</div>
+                <div class="val">
+                    <van-field class="areaInput" v-model="nation.name" is-link readonly placeholder="国家"
+                        @click="onPick('nation')" />
+                </div>
+            </div>
+            <div class="item">
+                <div class="label">生效区域</div>
+                <div class="val">
+                    <van-field class="areaInput" v-model="effectArea.name" is-link readonly placeholder="生效区域"
+                        @click="onPick('effectArea')" />
+                </div>
+            </div>
+            <van-popup v-model:show="showAreaPicker" round position="bottom">
+                <van-picker v-model="curSelectedAreaValue" :title="areaPickerTitle" :columns="areaColumns"
+                    :columns-field-names="{ text: 'name', value: 'id', children: null }" @cancel="showAreaPicker = false"
+                    @confirm="onAreaPickerConfirm" />
+            </van-popup>
+        </div>
+        <div class="btns">
+            <button class="primary" @click="onSearch">检索</button>
+            <button @click="onReset">重置</button>
+        </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';
+
+const props = defineProps({
+    onClose: Function
+});
+
+const router = useRouter();
+
+const keywords = ref('');  // 关键字
+const areas = ref([]);
+const nations = ref([]);
+const effectAreas = ref([]);
+const area = ref({});
+const nation = ref({});
+const effectArea = ref({});
+
+const showAreaPicker = ref(false);
+const curAreaPickerType = ref();
+const areaPickerTitle = ref();
+const areaColumns = ref([]);
+const selectedAreaValues = ref({});
+const curSelectedAreaValue = ref();
+
+onMounted(() => {
+    getAreas();
+});
+
+// 获取地区枚举
+const getAreas = () => {
+    let params = { parent_key: 'continent' };
+    http('/api/keywords', params, 'get').then(res => {
+        areas.value = res.data || [];
+    }).catch(err => {
+        showToast(err.message);
+    });
+};
+
+const areaPickerTitleOptions = {
+    area: '请选择地区',
+    nation: '请选择国家',
+    effectArea: '请选择生效地区'
+};
+
+const onPick = (type) => {
+    showAreaPicker.value = true;
+    curAreaPickerType.value = type;
+    curSelectedAreaValue.value = selectedAreaValues.value[type];
+    areaPickerTitle.value = areaPickerTitleOptions[type];
+    if (type == 'area') {
+        areaColumns.value = areas.value;
+    } else if (type == 'nation') {
+        areaColumns.value = nations.value;
+    } else if (type == 'effectArea') {
+        areaColumns.value = effectAreas.value;
+    }
+};
+
+const onAreaPickerConfirm = (val) => {
+    showAreaPicker.value = false;
+    let _temp = val.selectedOptions[0];
+    let _typeVal = { ...selectedAreaValues.value };
+    _typeVal[curAreaPickerType.value] = _temp.id;
+    selectedAreaValues.value = _typeVal;
+    switch (curAreaPickerType.value) {
+        case 'area':
+            nations.value = _temp.children;
+            area.value = _temp;
+            break;
+        case 'nation':
+            effectAreas.value = _temp.children;
+            nation.value = _temp;
+            break;
+        case 'effectArea':
+            effectArea.value = _temp;
+            break;
+    }
+
+};
+
+const onSearch = () => {
+    let continent = area.value.name;
+    let params = {
+        title: keywords.value,
+        continent: continent,  // 地区洲
+        country: nation.value.id,
+        area: effectArea.value.id,
+    };
+    props.onClose && props.onClose();
+    router.push({
+        path: `/business/legal/searchResult`,
+        query: params
+    });
+};
+
+const onReset = () => {
+    keywords.value = '';
+    area.value = '';
+    nation.value = '';
+    effectArea.value = '';
+    nations.value = [];
+    effectAreas.value = [];
+};
+
+</script>
+
+<style lang="scss" scoped>
+.pageContainer {
+    color: #FFF;
+
+    .title {
+        font-size: 36px;
+        padding: 20px 0;
+        text-align: center;
+        font-weight: bold;
+    }
+
+    .formBox {
+        width: 100%;
+
+        .item {
+            padding: 8px 0;
+
+            .label {
+                width: 100%;
+                height: 66px;
+                line-height: 66px;
+                font-size: 27px;
+                font-weight: bold;
+            }
+
+            .val {
+                flex: 1;
+                line-height: 72px;
+                display: flex;
+                flex-direction: column;
+
+                .txt,
+                .areaInput {
+                    flex: 1;
+                    height: 72px;
+                    border: 2px solid rgba($color: #414548, $alpha: 0.4);
+                    border-radius: 4px;
+                    background: none;
+                    color: #FFF;
+                    padding: 10px 20px;
+                    box-sizing: border-box;
+
+                    :deep(input) {
+                        background: none;
+                        color: #FFF;
+                        font-size: 27px;
+                        line-height: 52px;
+
+                        &::placeholder {
+                            color: #999;
+                        }
+                    }
+                }
+            }
+
+            :deep(.van-cell:after) {
+                display: none;
+            }
+        }
+    }
+
+    .btns {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 50px 0;
+
+        button {
+            width: 200px;
+            height: 72px;
+            background: #414548;
+            border-radius: 3px;
+            font-size: 26px;
+            color: #FFF;
+            line-height: 72px;
+            text-align: center;
+
+            &.primary {
+                background: #3662FE;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/business/legal/searchResult.vue b/src/views/business/legal/searchResult.vue
new file mode 100644
index 0000000..a48acfd
--- /dev/null
+++ b/src/views/business/legal/searchResult.vue
@@ -0,0 +1,417 @@
+<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/search">境外法规检索</router-link>
+        </div>
+        <div class="main">
+            <div class="results" v-if="Array.isArray(result.data)">
+                <h1>检索结果</h1>
+                <ul v-if="result.data.length > 0">
+                    <li :key="index+item.title1" v-for="item,index in result.data">
+                        <div class="area">{{item.continent }}/{{ item.country }}/{{ item.area }}</div>
+                        <p><a :href="item.url" target="_blank" rel="noopener noreferrer"><strong>{{item.title1}}</strong></a></p>
+                        <p><a :href="item.url" target="_blank" rel="noopener noreferrer">{{item.title2}}</a></p>
+                        <div class="category">分类： 
+                            <span :key="category" v-for="category in item.categories">{{category}}</span>
+                        </div>
+                    </li>
+                </ul>
+                <div class="plageholder" v-else>暂无数据</div>
+                <div class="pagesBox">
+                    <div class="pageInfo">
+                        <span>共{{result.total}}条</span>
+                        <span>每页显示<strong>{{pageSize}}</strong>条</span>
+                        <span>共{{result.last_page }}页</span>
+                    </div>
+                    <div class="pageAction">
+                        <a href="javascript:;" @click="goFirstPage">首页</a>
+                        <a href="javascript:;" @click="goPrePage" v-if="pageNum > 1">上一页</a>
+                        <a href="javascript:;" @click="goNextPage" v-if="pageNum < result.last_page">下一页</a>
+                        <a href="javascript:;" @click="goLastPage">尾页</a>
+                        <div class="pageForm">
+                            第 <van-field type="digit" class="txt" v-model="inputPage" /> 页
+                            <van-button type="primary" class="btn" @click="goInputPage">GO</van-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="plageholder" v-else>数据加载中。。。</div>
+        </div>
+    </div>
+    <div class="footerTips">
+        <p>友情提示：本网站仅只提供境外法规标题参考翻译及法规原文地址。境外网站访问不稳定，访问时请耐心等待。如原文地址打不开请稍后再尝试</p>
+    </div>
+    <div class="searchBar" @click="showSearchForm = true;"><van-icon name="search" /></div>
+    <div class="searchFormBox" v-if="showSearchForm">
+        <div class="closeBtn" @click="showSearchForm = false"><i class="icon-quxiao"></i></div>
+        <SearchFormModal :onClose="onSearchFormClose" />
+    </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 SearchFormModal from './searchFormModal.vue';
+
+const router = useRouter();
+const route = useRoute();
+
+
+const pageSize = ref(15);
+const pageNum = ref(1);
+const result = ref({});
+
+const inputPage = ref(1);
+
+const showSearchForm = ref(false);
+
+watch(pageNum, (newPage, oldPage)=>{
+    if(newPage !== oldPage){
+        inputPage.value = newPage;
+    }
+});
+
+watch(route, ()=>{
+    getResult();
+});
+
+onMounted(() => {
+    getResult();
+});
+
+const onSearchFormClose = ()=>{
+    showSearchForm.value = false;
+};
+
+const getResult = ()=>{
+    let params = {
+        ...route.query,
+        per_page: pageSize.value,
+        page: pageNum.value
+    };
+    http('/api/law', params, 'get').then(res => {
+        result.value = res.data;
+    }).catch(err => {
+        message.error(err.message);
+    });
+};
+
+// 首页
+const goFirstPage = ()=>{
+    pageNum.value = 1;
+    getResult();
+};
+
+// 上一页
+const goPrePage = ()=>{
+    let _num = pageNum.value;
+
+    pageNum.value = _num <= 1 ? 1 : _num - 1;
+    getResult();
+};
+
+// 下一页
+const goNextPage = ()=>{
+    let _num = pageNum.value;
+
+    pageNum.value = _num >= result.value.last_page ? result.value.last_page : _num + 1;
+    getResult();
+};
+
+// 尾页
+const goLastPage = ()=>{
+    pageNum.value = result.value.last_page;
+    getResult();
+};
+
+const goInputPage = ()=>{
+    pageNum.value = inputPage.value;
+    getResult();
+};
+
+
+</script>
+
+<style lang="scss" scoped>
+.pageContainer{
+    color: #FFF;
+    padding: 25px;
+    :deep(.van-cell:after){
+        display: none;
+    }
+    .breadNav{
+        padding-bottom: 20px;
+        line-height: 30px;
+        color: #999;
+        font-size: 22px;
+        span{
+            padding: 0 5px;
+        }
+        a{
+            color: #999;
+            &:hover{
+                color: #FFF;
+            }
+        }
+    }
+    
+    .searchForm{
+        flex: 1;
+        padding:  20px 30px;
+        background: #161718;
+        border: 2px solid #414548;
+        border-radius: 3px;
+        .title{
+            font-size: 23px;
+            line-height: 30px;
+            margin-bottom: 30px;
+            text-align: center;
+            font-weight: bold;
+        }
+        .item{
+            padding: 8px 0;
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            line-height: 32px;
+            .label{
+                width: 80px;
+                height: 32px;
+                line-height: 32px;
+                text-align: right;
+                padding-right: 15px;
+                font-size: 14px;
+                font-weight: bold;
+            }
+            .val{
+                flex: 1;
+                line-height: 32px;
+                display: flex;
+                flex-direction: column;
+                .txt,
+                .areaInput{
+                    flex: 1;
+                    border: 2px solid #A6A8AF;
+                    border-radius: 4px;
+                    background: none;
+                    color: #FFF;
+                    &::placeholder{
+                        color: #999;
+                    }
+                    :deep(input){
+                        background: none;
+                        color: #FFF;
+                        &::placeholder{
+                            color: #999;
+                        }
+                    }
+                    :deep(.ant-input-clear-icon){
+                        color: #999;
+                    }
+                    :deep(.ant-select-selector){
+                        color: #999;
+                        border: none;
+                        background: none;
+                        height: 36px;
+                        line-height: 36px;
+                        flex: 1;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        :deep(.ant-select-selection-item){
+                            border: none;
+                            line-height: 51px;
+                        }
+                    }
+                    :deep(.ant-select-arrow){
+                        color: #FFF;
+                    }
+                }
+            }
+        }
+        .btns{
+            width: 100%;
+            height: 40px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            button{
+                margin-right: 20px;
+                width: 86px;
+                height: 30px;
+                background: #414548;
+                border-radius: 3px;
+                color: #FFF;
+                line-height: 30px;
+                text-align: center;
+                &.primary{
+                    background: #3662FE;
+                }
+            }
+        }
+    }
+    .plageholder{
+        width: 100%;
+        height: 50vh;
+        font-size: 28px;
+        color: #ccc;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .results{
+        width: 100%;
+        min-height: 70vh;
+        h1{
+            font-weight: bold;
+            font-size: 36px;
+            text-align: center;
+            height: 60px;
+            line-height: 60px;
+            margin-bottom: 10px;
+        }
+        ul{
+            width: 100%;
+            li{
+                width: 100%;
+                padding: 20px 0;
+                border-bottom: 1px solid #666;
+                font-weight: bold;
+                font-size: 15px;
+
+                .area{
+                    font-size: 26px;
+                    font-weight: bold;
+                    line-height: 32px;
+                    padding-bottom: 30px;
+                }
+                p{
+                    line-height: 32px;
+                    font-size: 28px;
+                    padding: 10px 0;
+                    a{
+                        color: #FFF;
+                        &:hover{
+                            text-decoration: underline;
+                        }
+                    }
+                    strong{
+                        color: #3662FE;
+                    }
+                }
+                .category{
+                    font-size: 22px;
+                    line-height: 30px;
+                    margin-top: 30px;
+                    span{
+                        margin-right: 20px;
+                    }
+                }
+            }
+        }
+        .pagesBox{
+            width: 100%;
+            font-size: 22px;
+            .pageInfo{
+                width: 100%;
+                padding: 10px 0;
+                color: #ccc;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .pageAction{
+                width: 100%;
+                height: 70px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .pageForm{
+                display: flex;
+                height: 70px;
+                align-items: center;
+                .txt{
+                    width: 80px;
+                    height: 50px;
+                    line-height: 46px;
+                    text-align: center;
+                    border: 2px solid #A6A8AF;
+                    border-radius: 4px;
+                    background: none;
+                    color: #FFF;
+                    margin: 0 5px;
+                    padding: 0;
+                    :deep(input){
+                        background: none;
+                        color: #FFF;
+                        text-align: center;
+                        &::placeholder{
+                            color: #999;
+                        }
+                    }
+                }
+                .btn{
+                    margin-left: 10px;
+                    width: 80px;
+                    height: 50px;
+                }
+            }
+        }
+    }
+}
+.footerTips{
+    width: 100%;
+    padding: 50px 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    p{
+        font-size: 22px;
+        color: #999;
+        line-height: 30px;
+    }
+}
+.searchBar{
+    width: 94px;
+    height: 94px;
+    background: #3662FE;
+    box-shadow: 0px 12px 26px 0px rgba(32,69,201,0.86);
+    border-radius: 50%;
+    position: fixed;
+    top: 150px;
+    right: 10px;
+    z-index: 3;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.searchFormBox{
+    width: 100%;
+    height: calc(100vh - 90px);
+    margin-top: 90px;
+    padding: 40px;
+    background: #161718;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 5;
+    .closeBtn{
+        width: 80px;
+        height: 80px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        top: 20px;
+        right: 10px;
+        color: #FFF;
+        font-size: 38px;
+    }
+}
+</style>
\ No newline at end of file