提交

songhua-ui/src/api/index/index.js

@@ -0,0 +1,20 @@
+
+function smalClick(val){
+	debugger;
+	var node=$(val).next();
+	if(node.is(':hidden')){//如果node是隐藏的则显示node元素，否则隐藏
+	    node.show();
+	}else{
+		    node.hide();
+	}
+	
+}
+$(function(){
+	$(this).TL_Tab ({
+		tab : ".region_tab2 .div_tab2 a",
+		box : ".regionIn_tab2",
+		events : "over",// over
+		num : 1,
+		speed : 10
+	});
+});

songhua-ui/src/assets/images/shh_body.scss

@@ -0,0 +1,161 @@
+/* CSS Document */
+*{
+	font-size: 14px;
+}
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset,  button, input, textarea, th, td {
+	margin: 0;
+	padding: 0;
+}
+body {
+	font-size: 12px;
+    background-color: #010e21;
+    font-family: 'Microsoft YaHei';
+}
+body, button, input, select, textarea {
+	border:none;
+	font-family: "微软雅黑"
+}
+select, input, button, textarea {
+	_font-size: 100%;
+	border: none;
+	resize: none;
+	outline: none;
+}
+h4, h5, h6 {
+	font-size: 100%;
+}
+
+ul, ol {
+	list-style: none outside none;
+}
+a {
+	color: #333;
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: none;
+}
+a, a:hover {
+	outline: none;
+/* blr:expression(this.onFocus=this.blur()); */
+}
+legend {
+	color: #000;
+}
+fieldset, img {
+	border: none;
+}
+button, input, select, textarea {
+	font-size: 100%;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+hr {
+	border: none;
+	height: 1px;
+}
+html {
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+ul, ol {
+	list-style: none outside;
+}
+img {
+	-ms-interpolation-mode: bicubic;
+}
+.flex-r{
+	display: flex
+}
+.cl {
+	clear: both;
+}
+.fl {
+	float: left;
+	_display: inline;
+}
+.fr {
+	float: right;
+	_display: inline;
+}
+.tl {
+	text-align: left;
+}
+.tc {
+	text-align: center;
+}
+.tr {
+	text-align: right;
+}
+.fb {
+	font-weight: bold;
+}
+.fn {
+	font-weight: normal;
+}
+.noline {
+	text-decoration: none;
+}
+.underline {
+	text-decoration: underline;
+}
+i,em {
+	text-decoration: none;
+	list-style: none;
+	font-style: normal;
+	letter-spacing: 1px;
+}
+.none {
+	display: none;
+}
+
+.nowrap {
+	white-space: nowrap;
+}
+.nobor {
+	border: none;
+}
+
+.yahei {
+	font-family: "微软雅黑";
+}
+.hidden {
+	display: none
+}
+.nobg{ background:none}
+.mt10{ margin-top:10px;}
+.clearfix:after {
+  content: " ";
+  display: block;
+  clear: both;
+  height: 0;
+}
+.clearfix {
+  zoom: 1;
+}
+.clear{ clear:both}
+.br0{ border:none !important;}
+.bor{
+	border: #0ce0f6 solid 1px;
+	color: #fff;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

songhua-ui/src/assets/images/shh_index.scss

@@ -0,0 +1,430 @@
+.header{
+  width: 100%;
+  background: url(./bg_header.png);
+  height: 118px;
+  position: relative;
+  background-size: 100% 100%;
+}
+.header_title{
+  font-size: 47px;
+  color: #3cdfff;
+  text-align: center;
+  line-height: 118px;
+}
+.time{
+  float: right;
+  color: #fff;
+  position: absolute;
+  top: 20px;
+  right: 50px;
+}
+.container{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0 0 10px 0;
+}
+.left{
+  width: 562px;
+  margin: 0 10px;
+}
+.center{
+  width: 754px;
+}
+.right{
+  width: 568px;
+  margin: 0 10px;
+}
+.Visitorsflowrate{
+  border: 1px solid #053c51;
+  height: 309px;
+  margin-bottom: 10px;
+}
+.all_title{
+  width: 100%;
+  margin: 0 auto;
+  height: 52px;
+  position: relative;
+}
+.PartTitle {
+  color: #3cdfff;
+  font-size: 19px;
+  height: 52px;
+  line-height: 52px;
+  font-weight: normal;
+  padding-left: 17px;
+}
+.selectDate {
+  font-size: 14px;
+  line-height: 1.64;
+  color: #3cdfff;
+  position:absolute;
+  top: 15px;
+  right: 20px;
+}
+.icon_more {
+  width: 37px;
+  height: 18px;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  line-height: 18px;
+  font-family: Arial, 瀹嬩綋, Helvetica, sans-serif;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgb(5, 60, 81);
+  border-image: initial;
+  border-radius: 15px;
+  color: #3cdfff;
+}
+.icon_more:hover {
+  background-color: #3cdfff;
+  color: #000000;
+}
+.selectDate ._moreMenu {
+  position: absolute;
+  right: 0px;
+  width: 160px;
+  background: rgba(0,0,0,0.5);
+  border: 1px solid #0e3964;
+  top: 30px;
+  display: none;
+  z-index: 99;
+}
+.selectDate ._moreMenu ul {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.selectDate ._moreMenu ul li {
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  cursor: pointer;
+}
+.selectDate ._moreMenu ul li:hover {
+  background-color: #3cdfff;
+  color: #333333;
+}
+.TouristData {
+  border: 1px solid #053c51;
+  height: 343px;
+  margin-bottom: 11px;
+}
+.SalesTrend {
+  border: 1px solid #053c51;
+  height: 291px;
+}
+
+.regionData {
+  border: 1px solid #053c51;
+  width: 752px;
+  height: 631px;
+  margin-bottom: 11px;
+  margin-top: 33px;
+  position: relative;
+  overflow: hidden;
+}
+.moddlebot{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.ProvinceData{
+  border: 1px solid #053c51;
+  width: 244px;
+  height: 289px;
+}
+.AgeData{
+  border: 1px solid #053c51;
+  width: 248px;
+  height: 289px;
+}
+.GenderData{
+  border: 1px solid #053c51;
+  width: 242px;
+  height: 289px;
+}
+
+.OTA_ranking{
+  border: 1px solid #053c51;
+  height: 308px;
+  margin-bottom: 10px;
+}
+.Forecast{
+  border: 1px solid #053c51;
+  height: 343px;
+  margin-bottom: 10px;
+}
+.paymentCount{
+  border: 1px solid #053c51;
+  height: 290px;
+}
+.ticketType{
+  padding: 0 30px;
+}
+.ticketLeft{
+  float: left;
+  width: 260px;
+}
+.tableTitle{
+  font-size: 14px;
+  color: #3cdfff;
+  font-weight: normal;
+  line-height: 30px;
+}
+.ticketLeft h4{
+  margin: 0 0 0 120px;
+}
+.ticketLeft ul li{
+  overflow: hidden;
+  margin: 0 0 15px 0;
+}
+.ticketLeft ul li em{
+  display: block;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: #0ce0f6;
+  font-size: 14px;
+  text-align: center;
+  color: #000000;
+  line-height: 30px;
+  float: left;
+  margin: 0 15px 0 0;
+}
+.ticketLeft ul li span{
+  display: block;
+  width:200px;
+  height: 30px;
+  background: #061731;
+  font-size: 14px;
+  color: #fff;
+  line-height: 30px;
+  text-align: center;
+  float: left;
+}
+.ticketRight{
+  width: 197px;
+  text-align: center;
+  float: right;
+}
+.chart{
+  width: 100%;
+  height: 210px;
+}
+.Tourischart{
+  width: 90%;
+  height:270px;
+  margin: 0 auto;
+}
+.Saleschart{
+  width: 90%;
+  height:220px;
+  margin: 0 auto;
+}
+.genderBili{
+  width:196px;
+  margin:40px auto 20px auto;
+}
+.man{
+  float: left;
+}
+.woman{
+  float: right;
+}
+.man .icon_man{
+  width: 81px;
+  height: 81px;
+  background: url(./icon_man.png) no-repeat center center;
+  display: block;
+  margin: 0 auto;
+  border: 1px solid #184461;
+  border-radius: 50%;
+}
+.genderBili strong {
+  display: block;
+  text-align: center;
+  color: #b0b0b2;
+  line-height: 32px;
+  font-size: 12px;
+  font-weight: normal;
+}
+.woman .icon_woman{
+  display: block;
+  width: 81px;
+  height: 81px;
+  background: url(./icon_woman.png) no-repeat center center;
+  margin: 0 auto;
+  border: 1px solid #184461;
+  border-radius: 50%;
+}
+.genderBili ._line {
+  height: 9px;
+  background: #333;
+  width: 100%;
+  border-radius: 50px;
+  position: relative;
+  overflow: hidden;
+  margin:0 0 10px 0;
+}
+.genderBili ._line ._line_man {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background-color: #53cef8;
+}
+.genderBili ._line ._line_woman {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  background-color: #fcaddd;
+}
+.ForecastData{
+  padding:0 30px;
+}
+.Forecastchart{
+  height: 270px;
+  width: 250px;
+  float: left;
+}
+.stopList{
+  float: right;
+}
+.stopList li{
+  width: 180px;
+  background: #0e254d;
+  height: 60px;
+  line-height: 60px;
+  display: flex;
+  flex-direction: row;
+  justify-content:space-between;
+  padding: 0 10px;
+  margin: 15px 0;
+}
+.stopList li span{
+  font-size: 16px;
+  background-image:-webkit-linear-gradient(left,#52ffff,#2aacfa);
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
+}
+.OTA_ranking ul{
+  padding: 0 0 0 10px;
+}
+.OTA_ranking ul li{
+  float: left;
+  background: url(./shuju_bj.png) no-repeat;
+  width: 94px;
+  height: 200px;
+  text-align: center;
+  background-size: 100% auto;
+  margin: 0 10px 0 0;
+}
+.OTA_ranking ul li img{
+  display: block;
+  width: 26px;
+  height: 26px;
+  margin: 18px auto;
+}
+.OTA_ranking ul li em{
+  display: block;
+  font-size: 12px;
+  color: #fff;
+  margin:30px 0 15px 0;
+}
+.OTA_ranking ul li h2{
+  color:#01eeff;
+  font-size: 16px;
+  font-weight: bold;
+}
+.OTA_ranking ul li i{
+  display: block;
+  font-size: 12px;
+  color: #fff;
+}
+.OTA_ranking ul li:nth-child(1),.OTA_ranking ul li:nth-child(3),.OTA_ranking ul li:nth-child(5){
+  margin-top:70px;
+}
+.OTA_ranking ul li:nth-child(2),.OTA_ranking ul li:nth-child(4){
+  margin-top:20px;
+}
+
+/***********************tab*******************************/
+.region_tab2{
+  width: 740px;
+  height: 620px;
+  overflow: hidden;
+  margin: 0 auto;
+  position: relative;
+}
+.region_tab2 .div_tab2{
+  width:100%;
+  overflow:hidden;
+  position: absolute;
+  top: 10px;
+}
+.region_tab2 .div_tab2 a{
+  display:block;
+  float:right;
+  width:97px;
+  height:35px;
+  font-size:14px;
+  color:#fff;
+  text-align:center;
+  line-height:31px;
+}
+.region_tab2 .div_tab2 a.df_on{
+  color:#01ecff;
+  background: url(./tab_bj.png);
+}
+.regionIn_tab2{ width:100%; height: 620px;}
+
+.wholeCountry{
+  height: 207px;
+  position: absolute;
+  color: #fff;
+  padding-top: 7px;
+  padding-left: 28px;
+  padding-right: 28px;
+  z-index: 6000;
+}
+.wholeCountry h4{
+  font-size:18px;
+  line-height:47px;
+  font-weight:normal;
+}
+.wholeCountry .money span {
+  width: 51px;
+  height: 66px;
+  border: 1px solid #ccc;
+  display: inline-block;
+  text-align: center;
+  line-height: 66px;
+  font-size: 47px;
+  background-color: #3cdfff;
+  color: #043a78;
+  font-weight: bold;
+  margin-right: 14px;
+  vertical-align: bottom;
+  transition: all 0.2s linear;
+}
+.wholeCountry ._count {
+  font-size: 17px;
+  line-height: 37px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.wholeCountry ._count ins {
+  text-decoration: none;
+  color: #3cdfff;
+  font-size: 24px;
+  padding-left: 19px;
+  padding-right: 19px;
+}
+.map{
+  position: absolute;
+  left: 0;
+  top: 200px;
+}

songhua-ui/src/router/index.js

@@ -87,7 +87,16 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  }
+  },
+  {
+    //林业中心
+    path: '/songhuaIndex',
+    name: 'songhuaIndex',
+    component: () => import('@/views/index/index'),
+    meta: {
+      title: '松花湖'
+    }
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

songhua-ui/src/views/index/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <div class="header">
+      <h1 class="header_title">松花湖景区通</h1>
+      <span class="time">2024年4月23日 星期二 上午 9:51:54</span>
+    </div>
+    <div class="container">
+      <div class="left">
+        <div class="Visitorsflowrate">
+          <div class="all_title">
+            <h3 class="PartTitle">景区人流量排行榜TOP5</h3>
+            <div class="selectDate" data-objname="ticketType">
+              <span class="_selectData">2020年04月</span>
+              <a class="icon_more"  onclick="smalClick(this)"> &gt; </a>
+              <div class="_moreMenu">
+                <ul>
+                  <li class="change" data-date="2020-04">2020年04月</li>
+                  <li data-date="2020-03">2020年03月</li>
+                  <li data-date="2020-02">2020年02月</li>
+                  <li data-date="2020-01">2020年01月</li>
+                  <li data-date="2019-12">2019年12月</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="ticketType">
+            <div class="ticketLeft">
+              <h4 class="tableTitle">景区排名</h4>
+              <ul>
+                <li>
+                  <em>1</em>
+                  <span>成人票</span>
+                </li>
+                <li>
+                  <em>2</em>
+                  <span>儿童票</span>
+                </li>
+                <li>
+                  <em>3</em>
+                  <span>大门票+船票</span>
+                </li>
+                <li>
+                  <em>4</em>
+                  <span>免费票</span>
+                </li>
+                <li>
+                  <em>5</em>
+                  <span>亲子套票</span>
+                </li>
+              </ul>
+            </div>
+            <div class="ticketRight">
+              <h4 class="tableTitle">景区排名</h4>
+              <div class="chart bor">
+                图表位置
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="TouristData">
+          <div class="all_title">
+            <h3 class="PartTitle">景区近一个月游客排行榜TOP5</h3>
+            <div class="selectDate" data-objname="ticketType">
+              <span class="_selectData">2020年04月</span>
+              <a class="icon_more"  onclick="smalClick(this)"> &gt; </a>
+              <div class="_moreMenu">
+                <ul>
+                  <li class="change" data-date="2020-04">2020年04月</li>
+                  <li data-date="2020-03">2020年03月</li>
+                  <li data-date="2020-02">2020年02月</li>
+                  <li data-date="2020-01">2020年01月</li>
+                  <li data-date="2019-12">2019年12月</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="Tourischart bor">
+            图表位置
+          </div>
+        </div>
+        <div class="SalesTrend">
+          <div class="all_title">
+            <h3 class="PartTitle">景区近一年销售趋势排行榜TOP5</h3>
+            <div class="selectDate" data-objname="ticketType">
+              <span class="_selectData">2020年04月</span>
+              <a class="icon_more"  onclick="smalClick(this)"> &gt; </a>
+              <div class="_moreMenu">
+                <ul>
+                  <li class="change" data-date="2020-04">2020年04月</li>
+                  <li data-date="2020-03">2020年03月</li>
+                  <li data-date="2020-02">2020年02月</li>
+                  <li data-date="2020-01">2020年01月</li>
+                  <li data-date="2019-12">2019年12月</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="Saleschart bor">
+            图表位置
+          </div>
+        </div>
+      </div>
+      <div class="center">
+        <div class="regionData">
+          <!--通知公告选项卡开始-->
+          <div class="region_tab2">
+            <div class="div_tab2">
+              <a>游船视图</a>
+              <a>游客视图</a>
+            </div>
+            <div class="regionIn_tab2">
+              <div class="bor">
+                1111
+              </div>
+            </div>
+            <div class="regionIn_tab2">
+              <div class="wholeCountry">
+                <h4>当日平台总成交额 </h4>
+                <div class="money">
+                  <span>1</span>
+                  <span>5</span>
+                  <span>3</span>
+                  <span>8</span>
+                  <span>9</span>
+                  <span>7</span>
+                  <span>4</span>
+                  <span>5</span>
+                </div>
+                <div class="_count">当日累计总游客数<ins>234856</ins> 人</div>
+              </div>
+              <div class="map bor">
+                地图位置
+              </div>
+
+            </div>
+          </div>
+          <!--通知公告结束-->
+        </div>
+        <div class="moddlebot">
+          <div class="ProvinceData">
+            <h3 class="PartTitle">客源地省份排名</h3>
+            <div class="Saleschart bor">
+              图表位置
+            </div>
+          </div>
+          <div class="AgeData">
+            <h3 class="PartTitle">游客年龄比例</h3>
+            <div class="Saleschart bor">
+              图表位置
+            </div>
+          </div>
+          <div class="GenderData">
+            <h3 class="PartTitle">游客男女比例</h3>
+            <div class="GenderChart">
+              <div class="genderBili">
+                <div class="man">
+                  <i class="icon_man"></i>
+                  <strong> 男士60%</strong>
+                </div>
+                <div class="woman">
+                  <i class="icon_woman"></i>
+                  <strong> 女士40%</strong>
+                </div>
+                <div class="_line">
+                  <div class="_line_man" style="width:60%;"></div>
+                  <div class="_line_woman"  style="width:40%;"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="OTA_ranking">
+          <ul>
+            <li>
+              <img src="@/assets/images/piao.png"/>
+              <em>今日售票数</em>
+              <h2>5684</h2>
+              <i>张</i>
+            </li>
+            <li>
+              <img src="@/assets/images/piao.png"/>
+              <em>今日退票数</em>
+              <h2>5684</h2>
+              <i>张</i>
+            </li>
+            <li>
+              <img src="@/assets/images/people.png"/>
+              <em>今日入园数</em>
+              <h2>5684</h2>
+              <i>张</i>
+            </li>
+            <li>
+              <img src="@/assets/images/people.png"/>
+              <em>今日出园数</em>
+              <h2>5684</h2>
+              <i>张</i>
+            </li>
+            <li>
+              <img src="@/assets/images/people.png"/>
+              <em>在园人数</em>
+              <h2>5684</h2>
+              <i>张</i>
+            </li>
+          </ul>
+        </div>
+        <div class="Forecast">
+          <h3 class="PartTitle">停车场概况统计</h3>
+          <div class="ForecastData">
+            <div class="Forecastchart  bor">
+              图表位置
+            </div>
+            <ul class="stopList">
+              <li>
+                <span>总车位数</span>
+                <span>1600</span>
+              </li>
+              <li>
+                <span>当日停车费营收</span>
+                <span>600</span>
+              </li>
+              <li>
+                <span>当月停车费营收</span>
+                <span>1600</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="paymentCount">
+          <h3 class="PartTitle">近一个月平台购票渠道和支付方式统计</h3>
+          <div class="Saleschart bor">
+            图表位置
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import "@/assets/images/shh_body.scss";
+import "@/assets/images/shh_index.scss";
+export default {
+  name: "songhuaIndex"
+}
+</script>
+
+<!--<style lang="scss" scoped>-->
+<!--@import "@/assets/index/shh_body.scss";-->
+<!--@import "@/assets/index/shh_index.scss";-->
+
+<!--</style>-->