123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402 |
- <template>
- <div style="background: #f0f0f0;padding-bottom:50px">
- <div class="banner">
- <img src="~@/assets/images/yqtz.jpg" alt="">
- </div>
- <div class="bread">
- <div>
- <span>当前位置:首页-<span style="color:rgba(75, 175, 227, 1)">园区通知</span></span>
- </div>
- </div>
- <div class="smart-device">
- <div class="smart-title">
- <span><span>园区通知</span>PARK NOTICE</span>
- </div>
- <!-- <div class="smart-title" v-else>-->
- <!-- <span style="font-size: 0.7rem;"><span>物业通知</span>INVESTMENT NOTICE</span>-->
- <!-- </div>-->
- <div class="smart-device-content">
- <div class="list-content">
- <div class="case-list">
- <div class="case-content">
- <ul class="list-table">
- <li v-for="(item,index) in noticeList" :key="index" class="myLi" @click="detail(item)">
- <div>
- <p>
- {{ item.createTime }}
- </p>
- </div>
- <div>
- <p class="ino">
- {{ item.name }}
- </p>
- </div>
- <div><span>></span></div>
- </li>
- </ul>
- <div class="paginationo-box">
- <van-pagination v-model="params.pageNum" :total-items="total" :show-page-size="8" @change="handleCurrentChange">
- <template #prev-text>
- <van-icon name="arrow-left" />
- </template>
- <template #next-text>
- <van-icon name="arrow" />
- </template>
- <template #page="{ text }">{{ text }}</template>
- </van-pagination>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { parkNotice, propertyNotice } from '@/service/api_service'
- /**
- * 分页是用的vant框架
- * */
- export default {
- data() {
- return {
- active: 1,
- currentPage: 1,
- total: 0,
- noticeList: [
- {
- name: '第一条通知',
- eventIndex: 1,
- detail: '',
- createTime: '2012-12-12'
- },
- {
- name: '第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知第二条通知',
- eventIndex: 2,
- detail: '',
- createTime: '2012-12-12'
- },
- {
- img: 'zs3.png',
- name: '第三条通知第三条通知第三条通知第三条通知第三条通知第三条通知',
- eventIndex: 3,
- detail: '',
- createTime: '2012-12-12'
- }
- ],
- params: {
- pageNum: 1,
- pageSize: 8,
- status: 'published'
- }
- }
- },
- mounted() {
- if (this.$route.query.active) {
- this.active = Number(this.$route.query.active)
- }
- this.initParkNotice()
- document.documentElement.scrollTop = document.body.scrollTop = 0 // 回到顶部
- if (window.history && window.history.pushState) {
- // 向历史记录中插入了当前页
- history.pushState(null, null, document.URL)
- window.addEventListener('popstate', this.goBack, false)
- }
- },
- destroyed() {
- window.removeEventListener('popstate', this.goBack, false)
- },
- methods: {
- goBack() {
- // console.log("点击了浏览器的返回按钮");
- // sessionStorage.clear()
- // window.history.back()
- // history.pushState(null, null, document.URL)
- this.$router.push({ path: '/' })
- },
- handleCurrentChange: function(val) {
- this.params.pageNum = val
- if (this.active === 1) {
- this.initParkNotice()
- } else {
- this.initPropertyNotice()
- }
- },
- changeType(active) {
- this.active = active
- this.params.pageSize = 10
- this.params.pageNum = 1
- if (this.active === 1) {
- this.initParkNotice()
- } else {
- this.initPropertyNotice()
- }
- },
- initParkNotice() {
- const _this = this
- // _this.params.parks = '' //绑定园区
- _this.params.type = '1'
- parkNotice(_this.params).then((res) => {
- console.log(res)
- this.total = res.total
- if (res.rows) {
- _this.noticeList = []
- res.rows.forEach((item) => {
- const jsons = this.getItemJson(item)
- const i = {
- name: jsons.title,
- eventIndex: 2,
- detail: jsons.content,
- source: jsons.source,
- createTime: jsons.releaseTime.substr(0, 10)
- }
- _this.noticeList.push(i)
- })
- }
- })
- },
- initPropertyNotice() {
- const _this = this
- // _this.params.parks = '' //绑定园区
- _this.params.type = '2'
- propertyNotice(_this.params).then((res) => {
- console.log(res)
- this.total = res.total
- if (res.rows) {
- _this.noticeList = []
- res.rows.forEach((item) => {
- const jsons = this.getItemJson(item)
- const i = {
- name: jsons.title,
- eventIndex: 2,
- detail: jsons.content,
- source: jsons.source,
- createTime: jsons.releaseTime.substr(0, 10)
- }
- _this.noticeList.push(i)
- })
- }
- })
- },
- getItemJson: function(item) {
- item.releaseTime = this.$common.transServDate(item.releaseTime)
- return item
- },
- detail(index) {
- index.active = this.active
- this.$router.push({ name: 'noticeDetail', params: index })
- }
- }
- }
- </script>
- <style scoped>
- .banner img{
- width: 100% !important;
- }
- @media screen and (min-width: 1000px){
- .bread{
- background: #fff;
- }
- .myLi:hover{
- background: rgba(75, 175, 227, 1) !important;
- color: white;
- }
- .bread div{
- width: 1200px;
- margin: 0 auto;
- text-align: left;
- padding: 0.8rem 0;
- font-size: 1rem;
- }
- .smart-title{
- margin:3rem 0;
- }
- .smart-device{
- width: 1200px;
- margin: 0 auto;
- text-align: left;
- font-size: 1rem;
- }
- .smart-device span span{
- font-size: 2rem;
- display: inline-block;
- position: relative;
- padding-right: 1rem;
- margin-right: 1rem;
- font-weight: 900;
- }
- .smart-device span span:after{
- content: '';
- width: 1px;
- height: 15px;
- background: #666;
- position: absolute;
- right: 0;
- bottom: 7px;
- }
- .device-title img{
- width: 80%;
- }
- .nav-list{
- display: flex;
- justify-content: center;
- flex-wrap: nowrap;
- margin: 2rem auto;
- width: 50%;
- }
- .nav-list li{
- min-width: 33.33%;
- max-width: 33.33%;
- text-align: center;
- color: #666;
- font-size: 1.5rem;
- cursor: pointer;
- }
- .nav-list li span{
- border-bottom: 2px solid #f0f0f0;
- padding-bottom: 0.8rem;
- }
- .active span{
- display: inline-block;
- border-bottom: 2px solid #FF6A00!important;
- color: #333;
- }
- .list-table li{
- overflow: hidden;
- width: 100%;
- background: #fff;
- margin-bottom: 1rem;
- padding: 1rem 0;
- }
- .list-table li>div{
- float: left;
- }
- .list-table li>div:nth-child(1){
- width: 20%;
- text-align: center;
- }
- .list-table li>div:nth-child(2){
- width: 60%;
- }
- .list-table li>div:nth-child(3){
- width: 20%;
- text-align: right;
- }
- .list-table li>div:nth-child(3) span{
- margin-right: 1rem;
- }
- .paginationo-box{
- width: 20%;
- margin: 0 auto;
- }
- }
- @media screen and (max-width: 1000px){
- .banner{
- display: none;
- }
- .bread{
- display: none;
- }
- .smart-title{
- margin-top:2rem;
- }
- .smart-device{
- width: 90%;
- margin: 0 auto;
- text-align: left;
- font-size: 1rem;
- overflow: hidden;
- }
- .smart-device span span{
- font-size: 1.5rem;
- display: inline-block;
- position: relative;
- padding-right: 1rem;
- margin-right: 1rem;
- font-weight: 900;
- }
- .smart-device span span:after{
- content: '';
- width: 1px;
- height: 15px;
- background: #666;
- position: absolute;
- right: 0;
- bottom: 7px;
- }
- .device-title img{
- width: 100%;
- }
- .nav-list{
- display: flex;
- justify-content: center;
- flex-wrap: nowrap;
- margin: 2rem;
- }
- .nav-list li{
- min-width: 33.33%;
- max-width: 33.33%;
- text-align: center;
- color: #666;
- font-size: 0.8rem;
- cursor: pointer;
- }
- .nav-list li span{
- border-bottom: 2px solid #f0f0f0;
- padding-bottom: 0.8rem;
- }
- .active span{
- display: inline-block;
- border-bottom: 2px solid #FF6A00!important;
- color: #333;
- font-weight:800!important;
- }
- .list-table li{
- overflow: hidden;
- width: 100%;
- background: #fff;
- margin-bottom: 1rem;
- padding: 1rem 0;
- }
- .list-table li>div{
- float: left;
- }
- .list-table li>div:nth-child(1){
- width: 30%;
- text-align: center;
- }
- .list-table li>div:nth-child(2){
- width: 50%;
- }
- .list-table li>div:nth-child(3){
- width: 20%;
- text-align: right;
- }
- .list-table li>div:nth-child(3) span{
- margin-right: 1rem;
- }
- }
- .list-table{
- width: 100%;
- }
- .list-table p{
- white-space:nowrap;
- overflow: hidden;
- }
- .list-table p.ino{
- white-space:nowrap;
- width: 113%; overflow: hidden;
- text-overflow: ellipsis;
- }
- .paginationo-box /deep/ .van-pagination__item--active{
- background: rgba(75, 175, 227, 1)!important;
- color: #fff!important;
- }
- .paginationo-box /deep/ .van-pagination__item{
- color: #333;
- }
- </style>
|