baixingwenzheng-pc/src/view/home/index.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>