Skip to content

Y
yjjbnt-project
提交 9b19953a authored 作者: 王利's avatar 王利
浏览文件
操作

feat(index): 首页代码编写

上级 bbe3e0c5
显示空白字符变更
内嵌 并排
正在显示 包含 673 行增加 和 8 行删除
src/data/china.json 0 → 100644
浏览文件 @ 9b19953a
This source diff could not be displayed because it is too large. You can view the blob instead.
src/data/resourceData.json 0 → 100644
浏览文件 @ 9b19953a
{
"code": 200,
"data": [
{
"name": "2024年永久基本农田",
"status": true,
"id": "000"
},
{
"name": "2023年永久基本农田",
"status": false,
"id": "001"
},
{
"name": "基础地理（天地图）",
"status": true,
"id": "002"
},
{
"name": "2023年遥感影像（天地图）",
"status": true,
"id": "003"
},
{
"name": "2022年永久基本农田",
"status": true,
"id": "004"
},
{
"name": "2021年永久基本农田",
"status": true,
"id": "005"
},
{
"name": "2020年永久基本农田",
"status": false,
"id": "006"
}
]
}
\ No newline at end of file
src/views/home/index.vue
浏览文件 @ 9b19953a
<script setup lang="ts">
let a="fdasfda"
</script>
<template>
<div>
156156556
</div>
<header class="header">
<h1>永久基本农田公布查询系统</h1>
<div class="total-data open-position">
全国<span>15.46</span>亿亩
</div>
<div class="personal-div">
<i class="iconfont icon-widget-user"></i>
<span>个人中心</span>
</div>
</header>
<main class="main">
<!-- 地图 -->
<div class="map-container"></div>
<!-- 资源目录最小化 -->
<div class="resource-min" v-show="resourceIsFold" @click="resourceIsFold = false" title="展开资源目录">
<i class="iconfont icon-widget-layer1"></i>
</div>
<!-- 资源目录 -->
<div class="resource-panel" v-show="!resourceIsFold">
<div class="panel-title">
<i class="iconfont icon-widget-layer1"></i>
<span>资源目录</span>
<div class="fold-btn" @click="resourceIsFold = true" title="收起">
<i class="iconfont icon-widget-menufold"></i>
</div>
</div>
<div class="panel-body">
<lay-input suffix-icon="layui-icon-search" size="sm"> </lay-input>
<div class="list-box">
<div class="list-item" v-for="(item) in resourceData" :key="item.id">
<lay-checkbox :name="item.id" skin="primary" v-model="item.status" value="" :label="item.name"></lay-checkbox>
</div>
<!-- <div class="list-item">
<lay-checkbox name="like2" skin="primary" v-model="checked2" value="" label="属性属性描述描述"></lay-checkbox>
</div> -->
</div>
</div>
</div>
<!-- 图例最小化 -->
<div class="lengend-min" v-show="lengendIsFold" @click="lengendIsFold = false" title="展开图例">
<i class="iconfont icon-widget-mulu"></i>
</div>
<div class="lengend-panel" v-show="!lengendIsFold">
<div class="panel-title">
<i class="iconfont icon-widget-mulu"></i>
<span>图例</span>
<div class="fold-btn" @click="lengendIsFold = true" title="收起">
<i class="iconfont icon-widget-menufold"></i>
</div>
</div>
<div class="panel-body">
<ul class="list-box">
<li class="list-item">
<!-- -->
<div class="lengend-yh"></div>
<div class="lengend-title">永久基本农田</div>
</li>
<li class="list-item">
<div class="lengend-yhselected"></div>
<div class="lengend-title">选中永久基本农田图斑</div>
</li>
<li class="list-item">
<div class="lengend-xzqh"></div>
<div class="lengend-title">行政区划范围</div>
</li>
<li class="list-item">
<div class="lengend-zdy"></div>
<div class="lengend-title">自定义范围</div>
</li>
</ul>
</div>
</div>
<!-- 工具栏 -->
<div class="map-tools">
<div class="tools-arrow-part" @click="toolIsFold = !toolIsFold" :title="!toolIsFold ? '收起' : '展开'">
<i class="iconfont" :class="!toolIsFold ? 'icon-widget-move-right' : 'icon-widget-move-left'"></i>
</div>
<div class="tool-part-box" v-show="!toolIsFold">
<div class="tool-part">
<i class="iconfont icon-widget-info-query"></i>
<span>查询</span>
</div>
<lay-line direction="vertical" theme="black"></lay-line>
<div class="tool-part">
<i class="iconfont icon-widget-location1"></i>
<span>点定位</span>
</div>
<lay-line direction="vertical" theme="black"></lay-line>
<div class="tool-part">
<i class="iconfont icon-widget-guanxianchaxun-duobianxing"></i>
<span>面定位</span>
</div>
<lay-line direction="vertical" theme="black"></lay-line>
<div class="tool-part">
<i class="iconfont icon-widget-huizhi"></i>
<span>绘制范围</span>
</div>
<lay-line direction="vertical" theme="black"></lay-line>
<div class="tool-part">
<i class="iconfont icon-widget-hand-point"></i>
<span>点选</span>
</div>
<lay-line direction="vertical" theme="black"></lay-line>
<div class="tool-part">
<i class="iconfont icon-widget-map-full"></i>
<span>全幅</span>
</div>
<lay-line direction="vertical" theme="black"></lay-line>
<div class="tool-part">
<i class="iconfont icon-widget-celiang"></i>
<span>测距</span>
</div>
</div>
</div>
<!-- 行政区村庄等输入框下拉框 -->
<div class="input-box">
<lay-cascader :options="cascaderOptions" v-model="regionData" :onlyLastLevel="true" allow-clear placeholder="请选择行政区"
:replaceFields="replaceFields" contentClass="cascaderClass" size="sm"
contentStyle="--global-checked-color: #2c5f9e"></lay-cascader>
<lay-input suffix-icon="layui-icon-search" size="sm" placeholder="请输入村庄名称、图斑编号" :allow-clear="true"
@input="villageSearch"> </lay-input>
</div>
<!-- 地图类型 -->
<div class="map-type">
<ul class="list-box">
<li class="list-item">
<img src="../../assets/img/dt.png" alt="">
<div class="top-check">
<lay-checkbox name="sc" skin="primary" v-model="openCollect" value="" label="显示收藏点"></lay-checkbox>
</div>
<p class="detail-info">地图</p>
</li>
<li class="list-item">
<img src="../../assets/img/yx.png" alt="">
<div class="top-check">
<lay-checkbox name="lw" skin="primary" v-model="openLw" value="" label="开启路网"></lay-checkbox>
</div>
<p class="detail-info">影像</p>
</li>
</ul>
</div>
</main>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { getList } from "../../api/module/main";
const toolIsFold = ref(false);
const resourceIsFold = ref(false);
const lengendIsFold = ref(false);
const openCollect = ref(false);
const openLw = ref(false);
const regionData = ref();
const replaceFields = {
label: 'name',
value: 'code',
children: 'areaList'
}
interface resourceItemType {
id: string;
name: string;
status: boolean
}
interface cascaders {
name: string;
code: string;
}
interface cascadersItemType {
name: string;
code: string;
areaList: cascaders[]
}
const state = reactive({
resourceData: [] as resourceItemType[],
cascaderOptions: [] as cascadersItemType[]
})
const {
resourceData,
cascaderOptions
} = toRefs(state)
// 获取资源目录列表
getList('resourceData').then((res: any) => {
console.log(res)
state.resourceData = res.data
})
// 获取省市区
getList('china').then((res: any) => {
console.log(res)
state.cascaderOptions = res.data
})
// 村庄搜索
const villageSearch = function (val: string) {
console.log("当前值:" + val)
}
</script>
<style scoped lang="scss">
div{
.header {
height: 64px;
background: url("@/assets/img/homeTitleExBgImg.png") no-repeat;
h1 {
font-size: 28px;
color: #fff;
line-height: 40px;
margin: 12px 0 12px 30px;
float: left;
}
.personal-div {
float: right;
margin-right: 30px;
line-height: 30px;
margin-top: 17px;
color: #fff;
span {
margin-left: 5px;
font-size: 16px;
position: relative;
top: -1px;
}
i {
font-size: 18px;
}
}
}
.main {
height: calc(100% - 64px);
background: #fff;
position: relative;
.map-container {
height: 100%;
background: url("@/assets/img/mapbg.png") no-repeat;
background-size: 100% 100%;
}
}
.total-data {
position: relative;
color: #fff;
font-size: 18px;
font-weight: bold;
text-shadow: 2px 2px #222;
border-left: 1px solid #dedede;
display: inline-block;
margin: 18px 0 10px 20px;
padding-left: 15px;
line-height: 25px;
span {
// color: rgba(242, 119, 11);
color: #fff;
font-size: 20px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
margin: 0 5px;
}
}
.resource-panel {
width: 300px;
height: calc(100% - 203px);
position: absolute;
left: 10px;
top: 10px;
background: rgba($color: #ffffff, $alpha: 0.7);
box-shadow: -2px 4px 10px #ccc;
.panel-title {
height: 30px;
line-height: 30px;
background: #2c5f9e;
padding-left: 10px;
color: #fff;
span {
font-size: 16px;
margin-left: 5px;
}
.fold-btn {
width: 36px;
height: 30px;
line-height: 30px;
text-align: center;
float: right;
&:hover i {
cursor: pointer;
font-weight: bold;
}
}
}
.panel-body {
height: calc(100% - 30px);
padding: 8px;
box-sizing: border-box;
.list-box {
margin-top: 8px;
height: calc(100% - 38px);
overflow: auto;
}
.list-item {
line-height: 30px;
::v-deep .layui-form-checkbox[lay-skin="primary"]:hover i {
border-color: #2c5f9e;
color: #fff;
}
::v-deep .layui-form-checked[lay-skin="primary"] {
& {
i {
border-color: #2c5f9e;
background-color: #2c5f9e;
}
span {
color: #2c5f9e;
}
}
}
}
}
}
.resource-min {
width: 36px;
height: 36px;
line-height: 36px;
position: absolute;
background: #2c5f9e;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
padding: 10px 0;
color: #fff;
top: 10px;
left: 10px;
box-shadow: -2px 4px 10px #ccc;
cursor: pointer;
i {
font-size: 20px;
}
}
.lengend-panel {
width: 300px;
height: 174px;
position: absolute;
left: 10px;
bottom: 10px;
background: rgba($color: #ffffff, $alpha: 0.7);
box-shadow: -2px 4px 10px #ccc;
.panel-title {
height: 30px;
line-height: 30px;
background: #2c5f9e;
padding-left: 10px;
color: #fff;
span {
font-size: 16px;
margin-left: 5px;
}
.fold-btn {
width: 36px;
height: 30px;
line-height: 30px;
text-align: center;
float: right;
&:hover i {
cursor: pointer;
font-weight: bold;
}
}
}
.panel-body {
height: calc(100% - 30px);
padding: 8px;
box-sizing: border-box;
.list-box {
padding: 5px;
}
.list-item {
line-height: 30px;
color: #333;
&>div:first-child {
width: 34px;
height: 20px;
box-sizing: border-box;
border-radius: 3px;
float: left;
margin-top: 5px;
margin-right: 10px;
}
.lengend-yh {
background: rgba(248, 217, 104, 1);
}
.lengend-yhselected {
background: rgba(248, 217, 104, 1);
border: 1px solid rgba(228, 68, 58, 1);
}
.lengend-xzqh {
border: 1px dashed rgba(41, 121, 214, 1);
}
.lengend-zdy {
border: 1px dashed rgba(209, 44, 165, 1);
}
.lengend-title {
display: inline-block;
}
}
}
}
.lengend-min {
width: 36px;
height: 36px;
line-height: 36px;
position: absolute;
background: #2c5f9e;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
padding: 10px 0;
color: #fff;
bottom: 10px;
left: 10px;
box-shadow: -2px 4px 10px #ccc;
cursor: pointer;
i {
font-size: 20px;
}
}
.map-tools {
height: 36px;
line-height: 36px;
position: absolute;
right: 10px;
top: 10px;
background: #fff;
box-shadow: -2px 4px 10px #ccc;
.tools-arrow-part {
width: 20px;
color: #fff;
cursor: pointer;
text-align: center;
line-height: 36px;
background: #2c5f9e;
display: inline-block;
i {
font-size: 16px;
}
}
.layui-line-vertical {
margin: 0 !important;
position: relative;
top: -1px;
}
.tool-part-box {
display: inline-block;
.tool-part {
display: inline-block;
// background: #f00;
height: 100%;
padding: 0 15px;
color: #2c5f9e;
cursor: pointer;
span {
margin-left: 5px;
}
i {
position: relative;
top: 1px;
}
}
}
}
.input-box {
position: absolute;
top: 10px;
left: calc(10% + 300px);
display: flex;
}
.map-type {
width: 86px;
height: 60px;
position: absolute;
right: 10px;
bottom: 10px;
.list-item {
width: 86px;
height: 60px;
display: inline-block;
margin-left: 5px;
position: absolute;
border: 1px solid #666;
.detail-info {
position: absolute;
right: 0;
bottom: 0;
color: #fff;
font-size: 12px;
padding: 2px 5px;
}
&:hover {
.detail-info {
background: #2c5f9e;
}
.top-check {
background: rgba($color: #000000, $alpha: 0.4);
}
}
.top-check {
line-height: 20px;
position: absolute;
left: 0;
top: 0;
font-size: 12px;
width: 100%;
padding-left: 5px;
box-sizing: border-box;
::v-deep .layui-checkbox .layui-form-checkbox {
padding-left: 18px;
height: 16px;
line-height: 16px;
width: 16px;
.layui-checkbox-label {
font-size: 12px;
color: #fff;
}
}
::v-deep .layui-form-checkbox[lay-skin="primary"] {
i {
height: 16px;
line-height: 16px;
width: 16px;
}
i {
border-color: #2c5f9e;
color: #fff;
}
}
::v-deep .layui-form-checked[lay-skin="primary"] {
& {
i {
border-color: #2c5f9e;
background-color: #2c5f9e;
}
span {
color: #fff;
}
}
}
}
}
.list-box,
.list-item img {
width: 100%;
height: 100%;
}
}
.cascaderClass {
color: #fff;
.layui-cascader-menu {
layui-cascader-menu-item:hover {
background: #2c5f9e;
}
}
.layui-cascader-selected {
background: #2c5f9e;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论