新增阳光村务

src/components/sunVillage/common/header.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="header_main">
+    <div class="navigation_main">
+      <div class="head_portrait"></div>
+      <div class="dynamic_main">
+        <div
+          class="flex_navigation"
+          :class="[currentNav == '1' ? 'current' : '']"
+        >
+          最新动态
+        </div>
+        <div
+          class="flex_navigation"
+          :class="[currentNav == '2' ? 'current' : '']"
+        >
+          民生直通车
+        </div>
+        <div
+          class="flex_navigation"
+          :class="[currentNav == '3' ? 'current' : '']"
+        >
+          股权查询
+        </div>
+      </div>
+    </div>
+    <div class="headings_main" v-if="headings" @click="previousStep">
+      <div class="return"></div>
+      <div class="title">{{ headings }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["headings", "currentNav"],
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {
+    previousStep() {
+      this.$router.back();
+    },
+  },
+};
+</script>
+
+
+<style scoped lang="scss">
+.header_main {
+  padding: 32px 0 28px;
+  border-bottom: 2px solid #e5e5e5;
+  margin: 0 24px;
+}
+.navigation_main {
+  display: flex;
+
+  .head_portrait {
+    width: 64px;
+    height: 64px;
+    background: url("../../../assets/images/sunVillage/head_portrait.jpg")
+      no-repeat;
+    background-size: 100% 100%;
+    margin-right: 24px;
+  }
+  .dynamic_main {
+    flex: 1;
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+    .flex_navigation {
+      height: 64px;
+      line-height: 64px;
+      background: #ededed;
+      font-size: 32px;
+      border-radius: 10px;
+      padding: 0 28px;
+      &.current {
+        background: #07c160;
+        color: #fff;
+      }
+    }
+  }
+}
+.headings_main {
+  display: flex;
+  align-items: center;
+  padding-top: 28px;
+  .return {
+    width: 16px;
+    height: 26px;
+    background: url("../../../assets/images/sunVillage/headings_return.png")
+      center center no-repeat;
+    background-size: 100% 100%;
+    margin-right: 16px;
+    margin-left: 8px;
+  }
+  .title {
+    font-size: 32px;
+  }
+}
+</style>

src/permission.js

@@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
 NProgress.configure({ showSpinner: false })
 
 const whiteList = [
- '/index',
+  '/index',
   '/login',
   '/auth-redirect',
   '/bind',
@@ -64,7 +64,15 @@ const whiteList = [
   '/yinnongLogin',
   '/lawEnforcement/userRegister',
   '/lawEnforcement/companyRegister',
-
+  '/sunVillage/login',
+  //阳光村务公众号 -- 待删
+  '/sunVillage/index',
+  '/sunVillage/latestReport', //最新报道列表
+  '/sunVillage/latestReport/details',  //最新报道详情
+  '/sunVillage/importantItems',   //重大事项列表
+  '/sunVillage/public',  //三务公开
+  '/sunVillage/financial', //惠民金融
+  '/sunVillage/financial/products' //惠民金融 - 理财产品
 ]
 
 router.beforeEach((to, from, next) => {
@@ -98,11 +106,13 @@ router.beforeEach((to, from, next) => {
               next(`/onlineHomeLogin`)
             } else if (to.path.indexOf('/yinnong') !== -1) {
               next(`/yinnongLogin`)
-            }else if (to.path.indexOf('/homesteadSurvey') !== -1) {
+            } else if (to.path.indexOf('/homesteadSurvey') !== -1) {
               next(`/homesteadLogin`)
-            }else if (to.path.indexOf('/lawEnforcement') !== -1) {
+            } else if (to.path.indexOf('/lawEnforcement') !== -1) {
               next(`//lawEnforcement/login`)
-            }else {
+            } else if (to.path.indexOf('/sunVillage') !== -1) {
+              next(`/sunVillage/login`)
+            } else {
               next({ path: '/' })
             }
           })
@@ -124,13 +134,15 @@ router.beforeEach((to, from, next) => {
         next(`/homestead/login?redirect=${to.fullPath}`)
       } else if (to.path.indexOf('/onlineHome') !== -1) {
         next(`/onlineHomeLogin`)
-      }else if (to.path.indexOf('/yinnong') !== -1) {
+      } else if (to.path.indexOf('/yinnong') !== -1) {
         next(`/yinnongLogin`)
       } else if (to.path.indexOf('/homesteadSurvey') !== -1) {
         next(`/homesteadLogin`)
-      }else if (to.path.indexOf('/lawEnforcement') !== -1) {
+      } else if (to.path.indexOf('/lawEnforcement') !== -1) {
         next(`/lawEnforcement/login?redirect=${to.fullPath}`)
-      }  else {
+      } else if (to.path.indexOf('/sunVillage') !== -1) {
+        next(`/sunVillage/login`)
+      } else {
         next(`/login?redirect=${to.fullPath}`)
       }
 

src/router/index.js

@@ -76,7 +76,7 @@ export const constantRoutes = [
       title: '我的'
     },
     component: (resolve) => require(['@/views/mynsgk'], resolve)
-  } ,
+  },
   {
     path: '/authenticRight',
     name: 'authenticRight',
@@ -363,7 +363,7 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/homestead/login'], resolve)
   },
-//两清三化宅基地
+  //两清三化宅基地
   {
     path: '/authenticRight/index',
     name: 'authenticRightIndex',
@@ -1878,7 +1878,7 @@ export const constantRoutes = [
       hidden: true,
     },
     component: (resolve) => require(['@/views/yinnong/bankAgriculture/paymentApproval/approvalApproval10'], resolve)
-  },{
+  }, {
     path: '/yinnong/approvalApproval11',
     name: 'approvalApproval11',
     meta: {
@@ -2428,6 +2428,78 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/onlineHome/homestead/homeApplication/proposerLite'], resolve)
   },
+  {
+    path: '/sunVillage/login',
+    name: 'sunVillageLogin',
+    meta: {
+      title: '登录',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/login'], resolve)
+  },
+  {
+    path: '/sunVillage/index',
+    name: 'sunVillage',
+    meta: {
+      title: '阳光村务',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/index'], resolve)
+  },
+  {
+    path: '/sunVillage/latestReport',
+    name: 'latestReport',
+    meta: {
+      title: '最新报道',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/dynamic/latestReport/index'], resolve)
+  },
+  {
+    path: '/sunVillage/latestReport/details',
+    name: 'latestReportDetails',
+    meta: {
+      title: '最新报道',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/dynamic/latestReport/details'], resolve)
+  },
+  {
+    path: '/sunVillage/importantItems',
+    name: 'importantItems',
+    meta: {
+      title: '重大事项',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/dynamic/importantItems/index'], resolve)
+  },
+  {
+    path: '/sunVillage/public',
+    name: 'sunVillagePublic',
+    meta: {
+      title: '三务公开',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/dynamic/public/index'], resolve)
+  },
+  {
+    path: '/sunVillage/financial',
+    name: 'sunVillageFinancial',
+    meta: {
+      title: '惠民金融',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/dynamic/financial/index'], resolve)
+  },
+  // {
+  //   path: '/sunVillage/financial',
+  //   name: 'sunVillageFinancial',
+  //   meta: {
+  //     title: '惠民金融',
+  //     hidden: true,
+  //   },
+  //   component: (resolve) => require(['@/views/sunVillage/dynamic/financial/index'], resolve)
+  // }
 
 ];
 

src/utils/request.js

@@ -69,17 +69,19 @@ service.interceptors.response.use(res => {
     })
       .then(() => {
         store.dispatch('LogOut').then(() => {
-          if(window.location.href.indexOf('lawEnforcement') != -1){
+          if (window.location.href.indexOf('lawEnforcement') != -1) {
             window.location.href = '/lawEnforcement/login';
           } else if (window.location.href.indexOf('authenticRight') != -1) {
             window.location.href = '/authenticRight/login';
-          } else if (window.location.href.indexOf('homesteadSurvey')!= -1) {
+          } else if (window.location.href.indexOf('homesteadSurvey') != -1) {
             window.location.href = '/homesteadLogin';
-          } else if (window.location.href.indexOf('onlineHome')!= -1) {
+          } else if (window.location.href.indexOf('onlineHome') != -1) {
             window.location.href = '/onlineHomeLogin';
-          }else if (window.location.href.indexOf('yinnong')!= -1) {
+          } else if (window.location.href.indexOf('yinnong') != -1) {
             window.location.href = '/yinnongLogin';
-          }else {
+          } else if (window.location.href.indexOf('/sunVillage') != -1) {
+            window.location.href = '/sunVillage/login';
+          } else {
             // 农村宅基地调查
             window.location.href = '/homesteadLogin';
 

src/views/sunVillage/dynamic/financial/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav :headings="headingsTitle" :currentNav="1"></header-nav>
+    <div class="navigation_main">
+      <router-link
+        tag="div"
+        to="/sunVillage/financial"
+        class="flex_wrap current"
+        >金融政策</router-link
+      >
+      <router-link
+        tag="div"
+        to="/sunVillage/financial/products"
+        class="flex_wrap"
+        >理财产品</router-link
+      >
+      <div class="flex_wrap">金融贷款</div>
+    </div>
+    <!---金融政策-->
+
+    <div class="focus_news">
+      <div class="news_img">
+        <img src="@/assets/images/sunVillage/5.jpg" />
+      </div>
+      <div class="news_title">疫情之下,多为中小企业送上金融政策"急救包"</div>
+    </div>
+    <div class="news_list">
+      <ul>
+        <li
+          class="item_block"
+          @click="skip('/sunVillage/latestReport/details')"
+        >
+          <div class="title">金融政策项目01</div>
+          <div class="insets">
+            <img src="@/assets/images/sunVillage/2.jpg" />
+          </div>
+        </li>
+        <li
+          class="item_block"
+          @click="skip('/sunVillage/latestReport/details')"
+        >
+          <div class="title">金融政策项目01</div>
+          <div class="insets">
+            <img src="@/assets/images/sunVillage/2.jpg" />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .navigation_main {
+    margin: 0 24px;
+    display: flex;
+    justify-content: space-between;
+    padding: 30px 0 10px;
+    .flex_wrap {
+      height: 80px;
+      background: #f8f8f8;
+      color: #07c160;
+      font-size: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 216px;
+      border-radius: 12px;
+      &.current {
+        color: #fff;
+        background: #07c160;
+      }
+    }
+  }
+  .focus_news {
+    margin: 20px 24px 16px;
+    .news_img {
+      width: 702px;
+      height: 256px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .news_title {
+      font-size: 24px;
+      margin-top: 16px;
+    }
+  }
+  .news_list {
+    li {
+      display: flex;
+      height: 146px;
+      justify-content: center;
+      align-items: center;
+      padding: 0 33px;
+      .title {
+        padding-left: 8px;
+        flex: 1;
+        font-size: 28px;
+      }
+      .insets {
+        width: 116px;
+        margin-left: 26px;
+        height: 116px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+export default {
+  name: "sunVillageFinancial",
+  components: { headerNav },
+  data() {
+    return {
+      headingsTitle: "惠民金融",
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>

src/views/sunVillage/dynamic/financial/loan.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav :headings="headingsTitle" :currentNav="1"></header-nav>
+    <div class="navigation_main">
+      <router-link tag="div" to="/sunVillage/financial" class="flex_wrap"
+        >金融政策</router-link
+      >
+      <router-link
+        tag="div"
+        to="/sunVillage/financial/products"
+        class="flex_wrap current"
+        >理财产品</router-link
+      >
+      <div class="flex_wrap">金融贷款</div>
+    </div>
+    <div class="products_main">
+      <ul>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .navigation_main {
+    margin: 0 24px;
+    display: flex;
+    justify-content: space-between;
+    padding: 30px 0 10px;
+    .flex_wrap {
+      height: 80px;
+      background: #f8f8f8;
+      color: #07c160;
+      font-size: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 216px;
+      border-radius: 12px;
+      &.current {
+        color: #fff;
+        background: #07c160;
+      }
+    }
+  }
+  .products_main {
+    margin: 20px 24px;
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+    li {
+      width: 320px;
+      height: 210px;
+      margin-bottom: 24px;
+      .advertising {
+        width: 320px;
+        height: 160px;
+        border-radius: 10px;
+        img {
+          width: 320px;
+          height: 160px;
+        }
+      }
+      .title {
+        height: 48px;
+        font-size: 28px;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -o-text-overflow: ellipsis;
+        color: #999;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+export default {
+  name: "sunVillageFinancialLoan",
+  components: { headerNav },
+  data() {
+    return {
+      headingsTitle: "惠民金融",
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>

src/views/sunVillage/dynamic/financial/products.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav :headings="headingsTitle" :currentNav="1"></header-nav>
+    <div class="navigation_main">
+      <router-link tag="div" to="/sunVillage/financial" class="flex_wrap"
+        >金融政策</router-link
+      >
+      <router-link
+        tag="div"
+        to="/sunVillage/financial/products"
+        class="flex_wrap current"
+        >理财产品</router-link
+      >
+      <div class="flex_wrap">金融贷款</div>
+    </div>
+    <div class="products_main">
+      <ul>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+        <li>
+          <div class="advertising">
+            <img src="@/assets/images/sunVillage/6.jpg" />
+          </div>
+          <div class="title">农行福满盈</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .navigation_main {
+    margin: 0 24px;
+    display: flex;
+    justify-content: space-between;
+    padding: 30px 0 10px;
+    .flex_wrap {
+      height: 80px;
+      background: #f8f8f8;
+      color: #07c160;
+      font-size: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 216px;
+      border-radius: 12px;
+      &.current {
+        color: #fff;
+        background: #07c160;
+      }
+    }
+  }
+  .products_main {
+    margin: 20px 24px;
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+    li {
+      width: 320px;
+      height: 210px;
+      margin-bottom: 24px;
+      .advertising {
+        width: 320px;
+        height: 160px;
+        border-radius: 10px;
+        img {
+          width: 320px;
+          height: 160px;
+        }
+      }
+      .title {
+        height: 48px;
+        font-size: 28px;
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -o-text-overflow: ellipsis;
+        color: #999;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+export default {
+  name: "sunVillageFinancial",
+  components: { headerNav },
+  data() {
+    return {
+      headingsTitle: "惠民金融",
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>

src/views/sunVillage/dynamic/importantItems/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav :headings="headingsTitle" :currentNav="1"></header-nav>
+    <div class="article_main">
+      <div class="title">国新办解读中央一号文件：乡村振兴求好不求快</div>
+      <div class="info_wrap">
+        <div class="publisher">阳光村务公开平台</div>
+        <div class="time">2022-02-25 09:00</div>
+      </div>
+    </div>
+    <div class="focus_news">
+      <div class="news_img">
+        <img src="@/assets/images/sunVillage/1.jpg" />
+      </div>
+    </div>
+    <div class="news_list">
+      <ul>
+        <li
+          class="item_block"
+          @click="skip('/sunVillage/latestReport/details')"
+        >
+          <div class="title">最新报道列表项目1</div>
+          <div class="insets">
+            <img src="@/assets/images/sunVillage/2.jpg" />
+          </div>
+        </li>
+        <li
+          class="item_block"
+          @click="skip('/sunVillage/latestReport/details')"
+        >
+          <div class="title">国新办解读中央一号文件：乡村振兴求好不求快</div>
+          <div class="insets">
+            <img src="@/assets/images/sunVillage/2.jpg" />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .article_main {
+    margin: 0 24px;
+    padding: 15px 0;
+    .title {
+      font-size: 28px;
+      line-height: 45px;
+      margin-bottom: 6px;
+    }
+    .info_wrap {
+      display: flex;
+      line-height: 48px;
+      font-size: 24px;
+      .publisher {
+        color: rgb(92, 107, 140);
+        margin-right: 20px;
+      }
+      .time {
+        color: #999;
+      }
+    }
+  }
+  .focus_news {
+    margin: 10px 24px 16px;
+    .news_img {
+      width: 702px;
+      height: 256px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .news_list {
+    li {
+      display: flex;
+      height: 146px;
+      justify-content: center;
+      align-items: center;
+      padding: 0 33px;
+      .title {
+        padding-left: 8px;
+        flex: 1;
+        font-size: 28px;
+      }
+      .insets {
+        width: 116px;
+        margin-left: 26px;
+        height: 116px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+export default {
+  name: "importantItems",
+  components: { headerNav },
+  data() {
+    return {
+      headingsTitle: "重大事项",
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>

src/views/sunVillage/dynamic/latestReport/details.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav :currentNav="1" :headings="headingsTitle"></header-nav>
+    <div class="article_main">
+      <div class="title">国新办解读中央一号文件：乡村振兴求好不求快</div>
+      <div class="info_wrap">
+        <div class="publisher">阳光村务公开平台</div>
+        <div class="time">2022-02-25 09:00</div>
+      </div>
+    </div>
+    <div class="particulars_main">
+      <p><img src="@/assets/images/sunVillage/3.jpg" /></p>
+      <p>
+        2月22日,阿松大了看啥看三菱电机阿斯兰的阿阿莱克斯大家阿拉山口大家阿斯兰的骄傲
+        埃里克森加大了圣诞节阿拉山口道路喀什觉得拉克丝奥斯陆扩大急啊离开圣诞节奥斯陆扩大爱丽丝大家爱丽丝大家
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+      <p>
+        卢卡斯的急啊离开圣诞节阿斯兰的阿萨卢卡斯的骄傲啦卢卡斯的就按设按时打算科技大厦了的骄傲睡了多久啊是阿斯利康大家ask的埃里克森的奥斯陆扩大爱山东
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .article_main {
+    margin: 0 24px;
+    padding-top: 15px;
+    .title {
+      font-size: 28px;
+      line-height: 45px;
+      margin-bottom: 6px;
+    }
+    .info_wrap {
+      display: flex;
+      line-height: 48px;
+      font-size: 24px;
+      .publisher {
+        color: rgb(92, 107, 140);
+        margin-right: 20px;
+      }
+      .time {
+        color: #999;
+      }
+    }
+  }
+  .particulars_main {
+    margin: 24px 24px 0;
+    font-size: 24px;
+    padding-bottom: 15px;
+    img {
+      max-width: 100%;
+    }
+    p {
+      padding-bottom: 15px;
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+export default {
+  name: "latestReportDesc",
+  components: { headerNav },
+  data() {
+    return {
+      headingsTitle: "最新报道",
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>

src/views/sunVillage/dynamic/latestReport/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav :headings="headingsTitle" :currentNav="1"></header-nav>
+    <div class="focus_news">
+      <div class="news_img">
+        <img src="@/assets/images/sunVillage/1.jpg" />
+      </div>
+      <div class="news_title">国新办解读中央一号文件：乡村振兴求好不求快</div>
+    </div>
+    <div class="news_list">
+      <ul>
+        <li
+          class="item_block"
+          @click="skip('/sunVillage/latestReport/details')"
+        >
+          <div class="title">最新报道列表项目1</div>
+          <div class="insets">
+            <img src="@/assets/images/sunVillage/2.jpg" />
+          </div>
+        </li>
+        <li
+          class="item_block"
+          @click="skip('/sunVillage/latestReport/details')"
+        >
+          <div class="title">国新办解读中央一号文件：乡村振兴求好不求快</div>
+          <div class="insets">
+            <img src="@/assets/images/sunVillage/2.jpg" />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .focus_news {
+    margin: 20px 24px 16px;
+    .news_img {
+      width: 702px;
+      height: 256px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .news_title {
+      font-size: 24px;
+      margin-top: 16px;
+    }
+  }
+  .news_list {
+    li {
+      display: flex;
+      height: 146px;
+      justify-content: center;
+      align-items: center;
+      padding: 0 33px;
+      .title {
+        padding-left: 8px;
+        flex: 1;
+        font-size: 28px;
+      }
+      .insets {
+        width: 116px;
+        margin-left: 26px;
+        height: 116px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+export default {
+  name: "latestReport",
+  components: { headerNav },
+  data() {
+    return {
+      headingsTitle: "最新报道",
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>

src/views/sunVillage/dynamic/public/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav :headings="headingsTitle" :currentNav="1"></header-nav>
+    <div class="navigation_main">
+      <div class="flex_wrap current">村务公开</div>
+      <div class="flex_wrap">党务公开</div>
+      <div class="flex_wrap">政务公开</div>
+    </div>
+    <div class="focus_news">
+      <div class="news_img">
+        <img src="@/assets/images/sunVillage/4.jpg" />
+      </div>
+      <div class="news_title">巨峰镇大官庄村2014年1-2月份阳光村务现场</div>
+    </div>
+    <div class="news_list">
+      <ul>
+        <li
+          class="item_block"
+          @click="skip('/sunVillage/latestReport/details')"
+        >
+          <div class="title">阳光村务内容01</div>
+          <div class="insets">
+            <img src="@/assets/images/sunVillage/2.jpg" />
+          </div>
+        </li>
+        <li
+          class="item_block"
+          @click="skip('/sunVillage/latestReport/details')"
+        >
+          <div class="title">阳光村务内容01</div>
+          <div class="insets">
+            <img src="@/assets/images/sunVillage/2.jpg" />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+  .navigation_main {
+    margin: 0 24px;
+    display: flex;
+    justify-content: space-between;
+    padding: 30px 0 10px;
+    .flex_wrap {
+      height: 80px;
+      background: #f8f8f8;
+      color: #07c160;
+      font-size: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 216px;
+      border-radius: 12px;
+      &.current {
+        color: #fff;
+        background: #07c160;
+      }
+    }
+  }
+  .focus_news {
+    margin: 20px 24px 16px;
+    .news_img {
+      width: 702px;
+      height: 256px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .news_title {
+      font-size: 24px;
+      margin-top: 16px;
+    }
+  }
+  .news_list {
+    li {
+      display: flex;
+      height: 146px;
+      justify-content: center;
+      align-items: center;
+      padding: 0 33px;
+      .title {
+        padding-left: 8px;
+        flex: 1;
+        font-size: 28px;
+      }
+      .insets {
+        width: 116px;
+        margin-left: 26px;
+        height: 116px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+export default {
+  name: "sunVillagePublic",
+  components: { headerNav },
+  data() {
+    return {
+      headingsTitle: "三务公开",
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>

src/views/sunVillage/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="home_wrapper">
+    <header-nav :currentNav="1"></header-nav>
+    <div class="subnavigation_main">
+      <router-link tag="div" to="/sunVillage/latestReport" class="channel c1">
+        <div class="icon"></div>
+        <div class="title">最新报道</div>
+      </router-link>
+
+      <router-link tag="div" to="/sunVillage/importantItems" class="channel c2">
+        <div class="icon"></div>
+        <div class="title">重大事项</div>
+      </router-link>
+      <router-link tag="div" to="/sunVillage/public" class="channel c3">
+        <div class="icon"></div>
+        <div class="title">三务公开</div>
+      </router-link>
+
+      <router-link tag="div" to="/sunVillage/financial" class="channel c4">
+        <div class="icon"></div>
+        <div class="title">惠民金融</div>
+      </router-link>
+      <div class="channel c5">
+        <div class="icon"></div>
+        <div class="title">三资公开</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home_wrapper {
+  width: 100%;
+  min-height: 100vh;
+  background: #fff;
+}
+.subnavigation_main {
+  margin: 50px 40px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .channel {
+    background: #58cf99;
+    border-radius: 20px;
+    width: 308px;
+    height: 308px;
+    margin-bottom: 40px;
+    display: flex;
+    flex-direction: column; /* 子元素横向排列 */
+    justify-content: center; /* 相对父元素水平居中 */
+    align-items: center; /*  子元素相对父元素垂直居中 */
+
+    .icon {
+      width: 128px;
+      height: 128px;
+      margin-bottom: 32px;
+    }
+    .title {
+      color: #fff;
+      font-size: 28px;
+    }
+    &.c1 {
+      background: #58cf99;
+      .icon {
+        background: url("../../assets/images/sunVillage/index_nav_1.png")
+          no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    &.c2 {
+      background: #ff9d00;
+      .icon {
+        background: url("../../assets/images/sunVillage/index_nav_2.png")
+          no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    &.c3 {
+      background: #fa90c2;
+      .icon {
+        background: url("../../assets/images/sunVillage/index_nav_3.png")
+          no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    &.c4 {
+      background: #6a7afa;
+      .icon {
+        background: url("../../assets/images/sunVillage/index_nav_4.png")
+          no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    &.c5 {
+      background: #66ccff;
+      .icon {
+        background: url("../../assets/images/sunVillage/index_nav_5.png")
+          no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import headerNav from "@/components/sunVillage/common/header.vue";
+export default {
+  name: "latestReport",
+  components: { headerNav },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>

src/views/sunVillage/login.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="login_wrapper">
+    <div class="login_title">
+      <div class="title">登录</div>
+      <div class="desc">阳光村务公众号</div>
+    </div>
+    <div class="login_from">
+      <div class="form_item">
+        <div class="headings">姓名</div>
+        <div class="input_wrap">
+          <input type="text" class="ipt" placeholder="请输入姓名" />
+        </div>
+      </div>
+      <div class="form_item">
+        <div class="headings">身份证号</div>
+        <div class="input_wrap">
+          <input type="text" class="ipt" placeholder="请输入身份证号" />
+        </div>
+      </div>
+    </div>
+    <div class="login_btn_wrap">
+      <div class="login_btn" @click="loginSubmit">登录</div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.login_wrapper {
+  background: #fff;
+  min-width: 100%;
+  min-height: 100vh;
+}
+.login_title {
+  text-align: center;
+  padding-top: 88px;
+  margin-bottom: 96px;
+  .title {
+    font-size: 72px;
+    color: #2ecc71;
+    margin-bottom: 38px;
+  }
+  .desc {
+    font-size: 36px;
+  }
+}
+.login_from {
+  margin: 0 75px;
+  .form_item {
+    .headings {
+      font-size: 28px;
+      color: #2ecc71;
+    }
+    .input_wrap {
+      margin-top: 4px;
+      height: 68px;
+      position: relative;
+      margin-bottom: 50px;
+      .ipt {
+        font-size: 30px;
+        width: 100%;
+        height: 60px;
+        line-height: 60px;
+      }
+      &::after {
+        content: " ";
+        height: 4px;
+        border-radius: 4px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background: #2ecc71;
+      }
+    }
+  }
+}
+.login_btn_wrap {
+  position: absolute;
+  left: 0;
+  width: 600px;
+  bottom: 180px;
+  margin: 0 75px;
+  .login_btn {
+    height: 100px;
+    border-radius: 100px;
+    background: #2ecc71;
+    color: #fff;
+    line-height: 100px;
+    font-size: 40px;
+    text-align: center;
+  }
+}
+</style>
+
+<script>
+export default {
+  name: "Login",
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {
+    loginSubmit() {
+      this.$router.push("/sunVillage/index");
+    },
+  },
+};
+</script>