|
|
@@ -0,0 +1,477 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="home">
|
|
|
+ <div>等待地图接口开发......</div>
|
|
|
+ <!-- 右侧菜单 -->
|
|
|
+ <div class="mean" :class="{ meanShow: arrowsShow }">
|
|
|
+ <!-- 背景装饰 -->
|
|
|
+ <div class="zhuangs"></div>
|
|
|
+ <div class="zhuangs zhuangs2"></div>
|
|
|
+ <!-- 左边箭头 -->
|
|
|
+ <div class="arrows" @click="arrowsShow = !arrowsShow">
|
|
|
+ <i class="el-icon-arrow-left" v-if="arrowsShow"></i>
|
|
|
+ <i class="el-icon-arrow-right" v-else></i>
|
|
|
+ </div>
|
|
|
+ <div class="top">
|
|
|
+ <p>江门市中国传统村落</p>
|
|
|
+ <p>一张图</p>
|
|
|
+ </div>
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <div class="search" @keyup.enter="mySearch">
|
|
|
+ <div class="searchBtn" @click="mySearch"></div>
|
|
|
+ <el-input
|
|
|
+ placeholder="搜索村落名称..."
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ v-model="name"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <!-- 下面内容 -->
|
|
|
+ <div class="main">
|
|
|
+ <div class="mainTop">
|
|
|
+ <div :class="{ active: mainInd === 0 }" @click="mainInd = 0">
|
|
|
+ 浏览统计
|
|
|
+ </div>
|
|
|
+ <div :class="{ active: mainInd === 1 }" @click="mainInd = 1">
|
|
|
+ 区域筛选
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 浏览统计盒子 -->
|
|
|
+ <div class="mainBox1" v-show="mainInd === 0">
|
|
|
+ <!-- 浏览概况 -->
|
|
|
+ <div class="browse">
|
|
|
+ <h3>浏览概况</h3>
|
|
|
+ <div class="browseNum">
|
|
|
+ <div>
|
|
|
+ <p>累计浏览量</p>
|
|
|
+ <span>1000</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p>今日浏览量</p>
|
|
|
+ <span>500</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 详情统计 -->
|
|
|
+ <div class="details">
|
|
|
+ <h3>详情统计</h3>
|
|
|
+ <div class="detailsNum">
|
|
|
+ <div
|
|
|
+ class="row"
|
|
|
+ :title="item.name + ' ' + item.num"
|
|
|
+ v-for="item in numData"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <div class="rowLeft">{{ item.name }}</div>
|
|
|
+ <div class="rowRight">
|
|
|
+ <div class="plan">
|
|
|
+ <div :style="`width:${(item.num / maxNum) * 100}%`"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rowNum">{{ item.num }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 区域筛选盒子 -->
|
|
|
+ <div class="mainBox2" v-show="mainInd === 1">
|
|
|
+ <div class="box2Row" v-for="item in mapData" :key="item.id">
|
|
|
+ <div class="ll" @click="cutInd(item.id)">
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
+ <div class="bs">{{ item.son.length }}</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="cutInd(item.id)"
|
|
|
+ class="rr"
|
|
|
+ :class="
|
|
|
+ item.id === mapDataInd
|
|
|
+ ? 'el-icon-arrow-up'
|
|
|
+ : 'el-icon-arrow-down'
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div class="sonBox">
|
|
|
+ <div
|
|
|
+ @click="$router.push()"
|
|
|
+ :class="{ active: item.id === mapDataInd }"
|
|
|
+ v-for="val in item.son"
|
|
|
+ :key="val.id"
|
|
|
+ >
|
|
|
+ · {{ val.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "home",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ arrowsShow: false,
|
|
|
+ name: "",
|
|
|
+ mainInd: 0,
|
|
|
+ numData: [
|
|
|
+ { id: 1, name: "东宁村", num: 253 },
|
|
|
+ { id: 2, name: "东宁村", num: 353 },
|
|
|
+ { id: 3, name: "东宁村", num: 553 },
|
|
|
+ { id: 4, name: "东宁村", num: 153 },
|
|
|
+ { id: 5, name: "东宁村", num: 252 },
|
|
|
+ { id: 6, name: "东宁村", num: 212 },
|
|
|
+ { id: 7, name: "东宁村", num: 233 },
|
|
|
+ { id: 8, name: "东宁村", num: 298 },
|
|
|
+ { id: 9, name: "东宁村", num: 256 },
|
|
|
+ { id: 10, name: "东宁村", num: 353 },
|
|
|
+ { id: 11, name: "东宁村", num: 643 },
|
|
|
+ { id: 12, name: "马降龙村", num: 243 },
|
|
|
+ ],
|
|
|
+ // 数据最大值
|
|
|
+ maxNum: 0,
|
|
|
+ // 区域筛选的数据
|
|
|
+ mapDataInd: 1000,
|
|
|
+ mapData: [
|
|
|
+ {
|
|
|
+ id: 1000,
|
|
|
+ name: "蓬江区",
|
|
|
+ son: [
|
|
|
+ { id: 1001, name: "良溪村" },
|
|
|
+ { id: 1002, name: "卢边村" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2000,
|
|
|
+ name: "江海区",
|
|
|
+ son: [
|
|
|
+ { id: 2001, name: "良溪村" },
|
|
|
+ { id: 2002, name: "卢边村" },
|
|
|
+ { id: 2003, name: "XX村" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3000,
|
|
|
+ name: "新会区",
|
|
|
+ son: [
|
|
|
+ { id: 3001, name: "良溪村" },
|
|
|
+ { id: 3002, name: "卢边村" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ cutInd(id){
|
|
|
+ if(this.mapDataInd===id) this.mapDataInd=null
|
|
|
+ else this.mapDataInd=id
|
|
|
+ },
|
|
|
+ mySearch() {
|
|
|
+ console.log("点击了搜索");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ let arr = [];
|
|
|
+ this.numData.forEach((v) => {
|
|
|
+ arr.push(v.num);
|
|
|
+ });
|
|
|
+ this.maxNum = arr.reduce((a, b) => (a > b ? a : b));
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.home {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: url("../assets/img/bg.jpg");
|
|
|
+ background-size: cover;
|
|
|
+ .mean {
|
|
|
+ transform: translateX(0);
|
|
|
+ transition: all 0.3s;
|
|
|
+ color: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ z-index: 99;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 400px;
|
|
|
+ height: 100%;
|
|
|
+ .zhuangs {
|
|
|
+ z-index: -1;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 0;
|
|
|
+ width: 307px;
|
|
|
+ height: 124px;
|
|
|
+ background: url("../assets/img/zhuans2.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .zhuangs2 {
|
|
|
+ top: 36%;
|
|
|
+ bottom: auto;
|
|
|
+ left: auto;
|
|
|
+ right: 0;
|
|
|
+ background: url("../assets/img/zhuans1.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(202, 185, 153, 0.9);
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
+ z-index: -2;
|
|
|
+ }
|
|
|
+ .arrows {
|
|
|
+ padding-left: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 20px 0 0 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: -20px;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 20px;
|
|
|
+ height: 80px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(202, 185, 153, 0.9);
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ & > i {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top {
|
|
|
+ & > p {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ position: relative;
|
|
|
+ margin: 15px 0;
|
|
|
+ .searchBtn {
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 10;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ /*修改提示文字的颜色*/
|
|
|
+ /deep/input::-webkit-input-placeholder {
|
|
|
+ /* WebKit browsers */
|
|
|
+ color: #c9a774;
|
|
|
+ }
|
|
|
+ /deep/input:-moz-placeholder {
|
|
|
+ /* Mozilla Firefox 4 to 18 */
|
|
|
+ color: #c9a774;
|
|
|
+ }
|
|
|
+ /deep/input::-moz-placeholder {
|
|
|
+ /* Mozilla Firefox 19+ */
|
|
|
+ color: #c9a774;
|
|
|
+ }
|
|
|
+ /deep/input:-ms-input-placeholder {
|
|
|
+ /* Internet Explorer 10+ */
|
|
|
+ color: #c9a774;
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #efeee8;
|
|
|
+ color: #c9a774;
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner:focus {
|
|
|
+ border-color: #c9a774;
|
|
|
+ }
|
|
|
+ /deep/.el-input__suffix {
|
|
|
+ color: #c9a774;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ .mainTop {
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ color: #e8e0d1;
|
|
|
+ border-bottom: 1px solid #e8e0d1;
|
|
|
+ padding: 0 40px;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 22px;
|
|
|
+ & > div {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+ border-bottom: 3px solid #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mainBox1 {
|
|
|
+ padding: 20px 5px 0 10px;
|
|
|
+ color: #fff;
|
|
|
+ .browse {
|
|
|
+ & > h3 {
|
|
|
+ background: url("../assets/img/gaikuang.png") no-repeat left center;
|
|
|
+ padding-left: 45px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .browseNum {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 15px;
|
|
|
+ & > div {
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ & > p {
|
|
|
+ color: #e8e0d1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ & > span {
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .details {
|
|
|
+ margin-top: 10px;
|
|
|
+ & > h3 {
|
|
|
+ background: url("../assets/img/detail.png") no-repeat left center;
|
|
|
+ padding-left: 45px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .detailsNum {
|
|
|
+ width: 100%;
|
|
|
+ height: 490px;
|
|
|
+ padding-top: 15px;
|
|
|
+ .row {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ .rowLeft {
|
|
|
+ border-right: 1px solid #e8e0d1;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ width: 90px;
|
|
|
+ }
|
|
|
+ .rowRight {
|
|
|
+ width: calc(100% - 170px);
|
|
|
+ position: relative;
|
|
|
+ .plan {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 13px;
|
|
|
+ width: 100%;
|
|
|
+ height: 14px;
|
|
|
+ background-color: rgba(232, 224, 209, 0.8);
|
|
|
+ & > div {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rowNum {
|
|
|
+ padding-left: 5px;
|
|
|
+ width: 80px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mainBox2 {
|
|
|
+ padding: 30px 5px 0 10px;
|
|
|
+ color: #fff;
|
|
|
+ .box2Row {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ position: relative;
|
|
|
+ .ll {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ .bs {
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ width: 24px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 8px;
|
|
|
+ background-color: #9f171c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rr {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 20px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ .sonBox {
|
|
|
+ padding-left: 15px;
|
|
|
+ & > div {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 0px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ height: auto;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .meanShow {
|
|
|
+ transform: translateX(400px);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
