资讯，政策支持页面更新

src/assets/styles/style.less

@@ -25,3 +25,6 @@
 .van-popup--center{
   top: 85%;
 }
+.van-search__content{
+  background-color: #FFFFFF;
+}

src/components/NavBar/index.vue

@@ -29,6 +29,14 @@
           size="18"
           :color="iconColor"
         />
+        <icon
+          v-if="showSearchIcon"
+          name="icon-sousuo"
+          class="absolute left-11"
+          size="18"
+          @click="$router.push('Search')"
+          :color="iconColor"
+        />
         <div>{{ title }}</div>
       </div>
     </div>
@@ -61,6 +69,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showSearchIcon:{
+      type: Boolean,
+      default: false,
+    }
   },
 });
 </script>

src/components/PolicyCard/index.vue

+<template>
+  <div>
+    <p class=" text-base text-gray-800 font-semibold pt-5">商业银行互联网贷款监管再升级</p>
+    <p class=" text-xs text-gray-400 pt-5">银保监会《通知》明确出资比例、集中度及限额三项定量指标</p>
+    <p class=" text-sm text-gray-800 text-justify pt-5">时隔半年，商业银行互联网贷款业务员升级。2月20日，中国银保监会发布《关于进一步规范商业银行互联网贷款业务的通知》（以下称《通知》），针对去年7月……      </p>
+    <p class=" text-xs text-gray-400 py-5">发布时间：2021-07-01</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue'
 import router from './router'
 import 'tailwindcss/tailwind.css'
 import store from './store'
-import { NoticeBar, Popup, Swipe, SwipeItem } from 'vant'
+import { NoticeBar, Popup, Search, Swipe, SwipeItem, Toast } from 'vant'
 import "@/assets/styles/style.less"
 
 createApp(App)
@@ -13,4 +13,6 @@ createApp(App)
   .use(Swipe)
   .use(SwipeItem)
   .use(Popup)
+  .use(Search)
+  .use(Toast)
   .mount('#app')
\ No newline at end of file

src/router/index.ts

@@ -55,6 +55,26 @@ const routes: Array<RouteRecordRaw> = [
     component: ()=>import("@/views/ActivityDetail/index.vue")
   },
   {
+    path: '/policySupport',
+    name: 'PolicySupport',
+    component: ()=>import("@/views/PolicySupport/index.vue")
+  },
+  {
+    path: '/news',
+    name: 'News',
+    component: ()=>import("@/views/News/index.vue")
+  },
+  {
+    path: '/newsDetail',
+    name: 'NewsDetail',
+    component: ()=>import("@/views/NewsDetail/index.vue")
+  },
+  {
+    path: '/search',
+    name: 'Search',
+    component: ()=>import("@/views/Search/index.vue")
+  },
+  {
     path: '/auth',
     component: () => import('@/views/Auth/index.vue'),
     redirect: {

src/views/News/NewsList/index.vue

+<template>
+  <div @click="$router.push('NewsDetail')">
+    <p class=" text-base text-gray-800 font-semibold pt-5">银保监会、人民银行联合出台现金管理类理财产品监管规则</p>
+    <p class=" text-xs text-gray-400 pt-5">新华社北京6月11日电（记者 李延霞）银保监会、人民银行11日联合对外发布通知……</p>
+    <div v-if="showImg" class=" h-32 bg-app-blue mt-5"></div>
+    <p class=" text-xs text-gray-400 py-5">发布时间：2021-07-01</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props:{
+    showImg:{
+      type:Boolean,
+      default:true
+    }
+  },
+  setup () {
+    
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/News/index.vue

+<template>
+  <div>
+    <nav-bar title="新闻动态" :style="{ 'background-color':'#F7F7FA'}" :showSearchIcon="true"/>
+    <div class=" mx-5 pt-3 divide-y">
+      <news-list v-for="n in 3" :key="n"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import NavBar from "@/components/NavBar/index.vue"
+import NewsList from "./NewsList/index.vue"
+export default defineComponent({
+  components:{ NavBar,NewsList },
+  setup () {
+    
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/NewsDetail/index.vue

+<template>
+  <nav-bar title="动态详情" :style="{ 'background-color':'#F7F7FA'}" />
+  <div class=" px-5 py-8">
+    <p class=" text-base text-gray-800 font-semibold">银保监会、人民银行联合出台现金管理类理财产品监管规则</p>
+    <p class=" text-xs text-gray-400 mt-5 ">发布时间：2021-07-01</p>
+    <div class=" text-sm text-gray-800 text-justify mt-5">
+      <p>
+      “中国冰雪大篷车”是国家体育总局深入推进冰雪运动“南展西扩东进”战略，落实“带动三亿人参与冰雪运动”目标的重要群众性活动之一。“中国冰雪大篷车”将在为期半年的时间里，深入全国30余个城市，举办100场线下活动，同时结合持续的线上互动，以创新的体验模式、丰富的活动内容和众多的展示渠道，普及冰雪运动常识，推广冰雪运动理念，让普通大众在家门口就能感受冰雪运动的乐趣。
+      </p>
+      <div class=" bg-app-blue h-32 my-5"></div>
+      <p>
+      “中国冰雪大篷车”是国家体育总局深入推进冰雪运动“南展西扩东进”战略，落实“带动三亿人参与冰雪运动”目标的重要群众性活动之一。“中国冰雪大篷车”将在为期半年的时间里，深入全国30余个城市，举办100场线下活动，同时结合持续的线上互动，以创新的体验模式、丰富的活动内容和众多的展示渠道，普及冰雪运动常识，推广冰雪运动理念，让普通大众在家门口就能感受冰雪运动的乐趣。
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import NavBar from "@/components/NavBar/index.vue"
+
+export default defineComponent({
+  components:{ NavBar },
+  setup () {
+    
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/PolicySupport/index.vue

+<template>
+  <div>
+    <nav-bar title="政策支持" :style="{ 'background-color':'#F7F7FA'}" :showSearchIcon="true"/>
+    <div class=" mx-5 pt-3 divide-y">
+      <policy-card v-for="n in 3" :key="n" class=""/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import NavBar from "@/components/NavBar/index.vue"
+import PolicyCard from '@/components/PolicyCard/index.vue'
+
+export default defineComponent({
+  components:{ NavBar,PolicyCard },
+  setup () {
+    
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Search/components/Empty/index.vue

+<template>
+  <div class=" text-center mt-36">
+    <img src="../../../../assets/img/empty.png" class=" block mx-auto" > 
+    <p class=" text-sm text-gray-800 pt-5 ">暂无此内容</p>
+    <p class=" text-xs text-gray-400 pt-5">尝试搜索其它关键词吧~~</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup () {
+    
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Search/components/Result/index.vue

+<template>
+  <div class=" pt-4 px-5 divide-y">
+    <component :is="type"></component>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent,ref } from 'vue'
+import NewsList from "@/views/News/NewsList/index.vue"
+import PolicyCard from '@/components/PolicyCard/index.vue'
+
+export default defineComponent({
+  components:{ NewsList,PolicyCard },
+  setup () {
+    let result = ref("NewsList")
+    const type = computed(()=>{
+      return result.value
+    })
+    return {
+      type
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Search/components/SearchBar/index.vue

+<template>
+  <div>
+    <van-search
+      v-model="value"
+      show-action
+      :clearable="false"
+      background="#F7F7FA"
+      placeholder="请输入关键字"
+      @search="onSearch"
+    >
+      <template #action>
+        <img
+          v-if="isActive"
+          src="../../../../assets/icons/delete_active.png" 
+          class=" w-9 h-9"
+          @click="onCancel"
+        />
+         <img
+          v-else  
+          src="../../../../assets/icons/delete.png" 
+          class=" w-9 h-9"
+        />
+      </template>
+    </van-search>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,computed } from 'vue'
+
+export default defineComponent({
+  setup (props,context) {
+    const value = ref('')
+    const isActive = computed(()=> value.value != '' ? true : false)
+    const onSearch = (val:string) => { context.emit('OnSearch',true,val)}
+    const onCancel = () =>{
+      context.emit('OnCancel',false)
+      value.value = ''
+    }
+    return {
+      value,
+      onSearch,
+      onCancel,
+      isActive
+    };
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Search/index.vue

+<template>
+  <div>
+    <nav-bar title="搜索" :style="{ 'background-color':'#F7F7FA'}" />
+    <search-bar @onSearch="onSearch" @onCancel="onCancel"/>
+    <component v-if="showResult" :is="searchResult"></component>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent,computed,ref } from 'vue'
+import NavBar from "@/components/NavBar/index.vue"
+import SearchBar from './components/SearchBar/index.vue'
+import Empty from './components/Empty/index.vue'
+import Result from './components/Result/index.vue'
+
+export default defineComponent({
+  components:{ NavBar,SearchBar,Empty,Result },
+  setup () {
+    let isEmpty = ref(true)
+    const searchResult = computed(()=>{ 
+      return isEmpty.value ? 'Empty':'Result'
+    })
+
+    let showResult = ref(false)
+    const onSearch = (visible:boolean,val:string)=>{
+      showResult.value = visible
+      console.log(val)
+    } 
+    const onCancel = (visible:boolean)=>{
+      showResult.value = visible
+    } 
+    return {
+      isEmpty,
+      searchResult,
+      showResult,
+      onSearch,
+      onCancel
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/withMenu/Home/appList.ts

@@ -24,11 +24,13 @@ export default [
     name: '政策支持',
     icon: 'icon-zhengcezhichi',
     color: '#D886ED',
+    routerName: 'PolicySupport',
   },
   {
     name: '新闻动态',
     icon: 'icon-xinwendongtai',
     color: '#00CEF7',
+    routerName: 'News',
   },
   {
     name: '精彩直播',

src/views/withMenu/Home/index.vue

@@ -19,7 +19,7 @@
         alt=""
         @click="$router.push('ActivityDetail')"
       />
-      <group-title class="mt-7" title="热门资讯" />
+      <group-title class="mt-7" title="热门资讯"  @click="$router.push('News')" />
       <HotNews v-for="n in 2" :key="n" />
     </div>
   </div>