baixingwenzheng-pc/src/view/home/index.vue

<template>
  <div>
    <div style="padding:20px 9rem ;">
      <div><img src="@/assets/img/b2.png" style="width: 100%;"/></div>
      <div
          style="text-align: center;position: relative;margin-top: 1.25rem;padding-top: 1.125rem;height: 3.75rem;">
        <img src="@/assets/img/bz1.png" style="width: 40%;"/>
        <div
            style="color: #0051B1;position: absolute;margin: 0 auto;left: 0;right: 0;top: 0;font-size: 2.5rem;letter-spacing: 5px;">
          最新问政
        </div>
        <div
            style="color: #0051B1;position: absolute;margin: 0 auto;left: 0;right: 0;bottom: 0;font-size: 0.875rem;letter-spacing: 0.0625rem;">
          ZUI XIN WEN ZHENG
        </div>

      </div>
      <div style="margin-top: 20px;">
        <n-flex justify="center" :size="[50,0]">
          <div @click="contneSelect(0)" :style="{ fontSize: '1.25rem', color: contnetKey === 0 ? '#0051B1' : '#000000', cursor: 'pointer' }">最新问政</div>
          <div @click="contneSelect(1)" :style="{ fontSize: '1.25rem', color: contnetKey === 1 ? '#0051B1' : '#000000', cursor: 'pointer' }">最新回复</div>
        </n-flex>
      </div>
      <div style="margin-top: 20px;">
        <n-flex justify="center" :size="[0,0]">
          <div style="width: 50%;">
            <n-table striped>
              <thead>
              <tr>
                <th width="100px">编号</th>
                <th>问政</th>
                <th>部门</th>
                <th>状态</th>
                <th>评论</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in contentList[0]">
                <td>
                  <div style="color:#606060;">{{item.id}}</div>
                </td>
                <td>
                  <div class="dian1">
                    {{item.politics_title}}
                  </div>
                </td>
                <td>
                  <div style="color: #616161">{{item.department_name}}</div>
                </td>
                <td>
                  <div style="color: #0051B1">
                    <span v-if="item.acceptance_status==0">待处理</span>
                    <span v-if="item.acceptance_status==1">已回复</span>
                  </div>
                </td>
                <td>
                  <div>{{item.comment_count}}</div>
                </td>
              </tr>
              </tbody>
            </n-table>
          </div>
          <div style="width: 50%;">
            <n-table striped>
              <thead>
              <tr>
                <th width="100px">编号</th>
                <th>问政</th>
                <th>部门</th>
                <th>状态</th>
                <th>评论</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(item,index) in contentList[1]">
                <td>
                  <div style="color:#606060;">{{item.id}}</div>
                </td>
                <td>
                  <div class="dian1">
                    {{item.politics_title}}
                  </div>
                </td>
                <td>
                  <div style="color: #616161">{{item.department_name}}</div>
                </td>
                <td>
                  <div style="color: #0051B1">
                    <span v-if="item.acceptance_status==0">待处理</span>
                    <span v-if="item.acceptance_status==1">已回复</span>
                  </div>
                </td>
                <td>
                  <div>{{item.comment_count}}</div>
                </td>
              </tr>
              </tbody>
            </n-table>
          </div>
        </n-flex>
        <div class="register-form " style="text-align: center;margin-top: 1.25rem;">
          <n-flex justify="center">
            <n-pagination @update:page="pageCheck" :theme-overrides="PaginationThemeOverrides" v-model:page="page" :page-count="pageCount"
                          size="medium" show-quick-jumper show-size-picker
                          :page-sizes="[{ label: '10条/页',value: 10}]">
              <template #goto>
                跳转
              </template>
            </n-pagination>
          </n-flex>
        </div>
      </div>
      <div style="margin-top: 30px;">
        <n-flex justify="center" :size="[135,0]">
          <div style="cursor: pointer;position: relative;">
            <img src="@/assets/img/zu1.png" style="width: 300px;"/>
            <div
                style="position: absolute;right: 20px;font-size: 2.5rem;color: #ffffff;top: 13px;font-weight: 600;">
              我要投诉
            </div>
          </div>
          <div style="cursor: pointer;position: relative;">
            <img src="@/assets/img/zu2.png" style="width: 300px;"/>
            <div
                style="position: absolute;right: 20px;font-size: 2.5rem;color: #ffffff;top: 13px;font-weight: 600;">
              公共服务
            </div>
          </div>
          <div style="cursor: pointer;position: relative;">
            <img src="@/assets/img/zu3.png" style="width: 300px;"/>
            <div
                style="position: absolute;right: 20px;font-size: 2.5rem;color: #ffffff;top: 13px;font-weight: 600;">
              问政部门
            </div>
          </div>
          <div style="cursor: pointer;position: relative;">
            <img src="@/assets/img/zu4.png" style="width: 300px;"/>
            <div
                style="position: absolute;right: 20px;font-size: 2.5rem;color: #ffffff;top: 13px;font-weight: 600;">
              问政热榜
            </div>
          </div>
        </n-flex>
      </div>
      <div
          style="text-align: center;position: relative;margin-top: 10px;padding-top: 1.125rem;height: 3.75rem;">
        <img src="@/assets/img/bz1.png" style="width: 40%;"/>
        <div
            style="color: #0051B1;position: absolute;margin: 0 auto;left: 0;right: 0;top: 0;font-size: 2.5rem;letter-spacing: 5px;">
          新闻推荐
        </div>
        <div
            style="color: #0051B1;position: absolute;margin: 0 auto;left: 0;right: 0;bottom: 0;font-size: 0.875rem;letter-spacing: 0.0625rem;">
          XIN WEN TUI JIAN
        </div>

      </div>
      <div style="margin-top: 20px">
        <n-flex justify="space-between">
          <div style="width: 50%">
            <n-carousel draggable :autoplay="true">
              <img
                  class="carousel-img"
                  src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
              >
              <img
                  class="carousel-img"
                  src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
              >
              <img
                  class="carousel-img"
                  src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
              >
              <img
                  class="carousel-img"
                  src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
              >
            </n-carousel>
          </div>
          <div style="width: 48%">
            <n-flex justify="space-between">
              <div  v-for="(item, index) in groupList" @click="openGroup(item.id)" :class="{ 'int': true, 'act': item.id == groupIndex }">{{item.name}}</div>
            </n-flex>
            <div style="padding: 2.5px 0px;margin-top: 20px" v-for="(item,index) in groupNews">
              <n-flex justify="space-between">
                <div class="txt-1" style="font-size: 17px;width: 70%">
                  <div style="background-color: #0051B1;width: 5px;height: 5px;border-radius: 50%;display: inline-block;vertical-align: middle"></div>
                  <text style="vertical-align: middle;margin-left: 5px">{{item.news_title}}</text>
                </div>
                <div style="color: #818794">{{item.showtime}}</div>
              </n-flex>
            </div>
          </div>
        </n-flex>
      </div>
    </div>
  </div>
  <div style="background: #D9D9D9;width: 120px;height: 180px;text-align: center;padding: 5px 0px 10px 0px;position: fixed;top: 50%;left: 10px">
    <div style="text-align: right;padding-right: 5px">
      <svg style="width: 20px;height: 20px;color: #999797" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64l-64 64L169.37 320l64-64l-64-64L192 169.37l64 64l64-64L342.63 192l-64 64z" fill="currentColor"></path></svg>
    </div>
    <div style="color: #0051B1;font-size: 12px">洛阳百姓问政</div>
    <div style="color: #0051B1;font-size: 12px">公众号</div>
    <div>
      <img src="@/assets/img/qrcode1.png" style="width: 100px;height: 100px;margin-top: 10px">
    </div>
  </div>
  <div style="background: #D9D9D9;width: 120px;height: 180px;text-align: center;padding: 5px 0px 10px 0px;position: fixed;top: 50%;right: 10px">
    <div style="text-align: right;padding-right: 5px">
      <svg style="width: 20px;height: 20px;color: #999797" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64l-64 64L169.37 320l64-64l-64-64L192 169.37l64 64l64-64L342.63 192l-64 64z" fill="currentColor"></path></svg>
    </div>
    <div style="color: #0051B1;font-size: 12px">洛阳百姓问政</div>
    <div style="color: #0051B1;font-size: 12px">公众号</div>
    <div>
      <img src="@/assets/img/qrcode1.png" style="width: 100px;height: 100px;margin-top: 10px">
    </div>
  </div>
</template>

<script setup lang="ts">
import {PaginationProps,useMessage } from 'naive-ui'
import {getPolitics,getNewsbx,getNewsbxList} from "@/api/index";
import {ref, reactive, onMounted} from 'vue'
const message = useMessage()
const page = ref(1);
const pageCount=ref(1);
const contentList=ref([]);
const contnetKey=ref(0);
const groupList=ref([]);
const groupIndex=ref(0);
const groupNews=ref([]);
onMounted(() => {
  getApiPolitics();
  getApiNewsbx();
})
const getApiPolitics = () => {
  getPolitics({'type':contnetKey.value,'page':page.value,'pageSize':10}).then(res => {
    if(res.code==200){
      contentList.value=chunk(res.data,2);
      pageCount.value=Math.ceil(res.count / 10);
      }else{
      message.error(res.msg)
    }
  });
}
const getApiNewsbx = () => {
  getNewsbx({'flag':'index'}).then(res => {
    if(res.code==200){
      groupList.value=res.data;
      groupIndex.value=res.data[0].id;
      getApiNewsList(res.data[0].id);
    }else{
      message.error(res.msg)
    }
  });
}
const getApiNewsList = (gory_id) => {
  getNewsbxList({'gory_id':gory_id,'page':1,'pageSize':7}).then(res => {
    if(res.code==200){
      groupNews.value=res.data;
    }else{
      message.error(res.msg)
    }
  });
}
const openGroup = (index) => {
  groupIndex.value=index;
  getApiNewsList(index);
}
const pageCheck = (p) => {
    console.log(p);
  page.value=p;
  getApiPolitics();
}
const contneSelect = (type) => {
  contnetKey.value=type;
  page.value=1;
  getApiPolitics();
}
const chunk = (arr, size) => {
  const firstChunkSize = Math.ceil(arr.length / 2);
  const firstChunk = arr.slice(0, firstChunkSize);
  const secondChunk = arr.slice(firstChunkSize);
  return [firstChunk, secondChunk];
};
type PaginationThemeOverrides = NonNullable<PaginationProps['themeOverrides']>
const PaginationThemeOverrides: PaginationThemeOverrides = {
  "itemTextColorHover": "#0051B1",
  "itemTextColorPressed": "#0051B1",
  "itemTextColorActive": "#ffffff",
  "itemBorderActive": "1px solid #0051B1",
  "itemColorActive": "#0051B1",
  "itemColor": "#F5F5F5",
  "itemColorActiveHover": "#0051B1"
}
</script>

<style scoped lang="scss">
.int{
  font-size: 20px;
  cursor: pointer;
}
.act{
  color: #0051B1;
  font-weight: 600;
}
.carousel-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.n-table {
  border-radius: 0px;
  width: 100%;
}

.n-table thead tr th {
  font-size: 1.2rem;
}

.dian1 {
  font-size: 16px;
  color: #0051B1;
  width: 8.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
</style>