199 lines
6.0 KiB
Vue
199 lines
6.0 KiB
Vue
<template>
|
||
<div>
|
||
<div style="padding:20px 8rem ;">
|
||
<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 style="font-size: 1.25rem;color: #0051B1;font-weight: 600;">最新问政</div>
|
||
<div style="font-size: 1.25rem;">最新回复</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>
|
||
<td>
|
||
110
|
||
</td>
|
||
<td>
|
||
<div class="dian1">
|
||
政和路午桥华府A区这段…政和路午桥华府A区这段…政和路午桥华府A区这段…政和路午桥华府A区这段…政和路午桥华府A区这段…政和路午桥华府A区这段…
|
||
</div>
|
||
</td>
|
||
<td>彻底废除</td>
|
||
<td>...</td>
|
||
<td>干！我刚才背的是啥</td>
|
||
</tr>
|
||
</tbody>
|
||
</n-table>
|
||
</div>
|
||
<div style="width: 50%;">
|
||
<n-table striped>
|
||
<thead>
|
||
<tr>
|
||
<th>Abandon</th>
|
||
<th>Abnormal</th>
|
||
<th>Abolish</th>
|
||
<th>...</th>
|
||
<th>万事开头难</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>放弃</td>
|
||
<td>反常的</td>
|
||
<td>彻底废除</td>
|
||
<td>...</td>
|
||
<td>干！我刚才背的是啥</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 :theme-overrides="PaginationThemeOverrides" v-model:page="page" :page-count="100"
|
||
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="[145,0]">
|
||
<div style="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="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="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="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>
|
||
<n-flex justify="space-between">
|
||
<div style="">
|
||
<n-carousel draggable>
|
||
<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>123</div>
|
||
</n-flex>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { PaginationProps } from 'naive-ui'
|
||
import {
|
||
ref
|
||
} from 'vue';
|
||
const page = ref(1);
|
||
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">
|
||
.carousel-img {
|
||
width: 50%;
|
||
height: 240px;
|
||
object-fit: cover;
|
||
}
|
||
.n-table {
|
||
border-radius: 0px;
|
||
width: 100%;
|
||
}
|
||
|
||
.n-table thead tr th {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.dian1 {
|
||
width: 8.75rem;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
</style>
|