提交玩路子

src/components/Leftnav.vue

@@ -1,380 +1,453 @@
 <template>
-	<div class="nav">
-		<div class="nav-cont">
-			<!--<div class="yj-tqdiv">-->
-				<!--<div class="yj-qyb">-->
-					<!--<i class="iconfont yj-icon-tianqi-baoyu"></i>-->
-					<!--<p>暴雨</p>-->
-				<!--</div>-->
-				<!--<div class="yj-tqtxt">-->
-					<!--<p>风力：2级</p>-->
-					<!--<p>低温：20℃</p>-->
-					<!--<p>风向：东南风</p>-->
-					<!--<p>高温：17℃</p>-->
-					<!--<p>火险：一级火险</p>-->
-					<!--<p>湿度：93</p>-->
-				<!--</div>-->
-			<!--</div>-->
-			<div class="yj-tqdiv2">
-				<div class="yj-qyb">
-					<img class="yj-qybimg qing" src="../assets/images/yj-tq-qing.png"/>
-					<div class="yj-qybtxt">
-						<h4>-12~-4℃</h4>
-						<p><i class="iconfont yj-icon-weizhi"></i>延吉市 晴</p>
-					</div>
-				</div>
-				<div class="yj-tqtxt2">
-					<span>风力：2级</span>
-					<span>低温：-12℃</span>
-					<span>风向：西北风</span>
-					<span>高温：-4℃</span>
-					<span>火险：一级火险</span>
-					<span>湿度：53</span>
-				</div>
-			</div>
+  <div class="nav">
+    <div class="nav-cont">
+      <!--<div class="yj-tqdiv">-->
+      <!--<div class="yj-qyb">-->
+      <!--<i class="iconfont yj-icon-tianqi-baoyu"></i>-->
+      <!--<p>暴雨</p>-->
+      <!--</div>-->
+      <!--<div class="yj-tqtxt">-->
+      <!--<p>风力：2级</p>-->
+      <!--<p>低温：20℃</p>-->
+      <!--<p>风向：东南风</p>-->
+      <!--<p>高温：17℃</p>-->
+      <!--<p>火险：一级火险</p>-->
+      <!--<p>湿度：93</p>-->
+      <!--</div>-->
+      <!--</div>-->
+      <div class="yj-tqdiv2" v-for="w in warte" v-if="newDate==w.month">
+        <div class="yj-qyb">
+          <img class="yj-qybimg qing" src="../assets/images/yj-tq-qing.png"/>
+          <div class="yj-qybtxt">
+            <h4 >{{w.last}}~{{w.height}}℃</h4>
+            <p><i class="iconfont yj-icon-weizhi"></i>延吉市 晴</p>
+          </div>
+        </div>
+        <div class="yj-tqtxt2">
+          <span>风力：2级</span>
+          <span>低温：{{w.last}}℃</span>
+          <span>风向：西北风</span>
+          <span>高温：{{w.height}}℃</span>
+          <span>火险：一级火险</span>
+          <span>湿度：53</span>
+        </div>
+      </div>
 
-			<div class="nav-tit">
-				<div class="nav-circle">
-					<img src="../assets/images/yj-tity1.png" />
-				</div>
-				<p>应急资源信息</p>
-			</div>
-			<h6 class="nav-wz"><i class="iconfont yj-icon-weizhi"></i>新兴街道民昌社区</h6>
-			<div class="left-table">
-				<div class="bz-name">
-					<img src="../assets/images/yj-navimg2.png"/>
-					<p>班长</p>
-				</div>
-				<div class="bz-table">
-					<div class="bz-head">
-						<span>姓名</span>
-						<span>性别</span>
-						<span>身份证号</span>
-						<span>联系电话</span>
-					</div>
-					<div class="scroll h-22">
-						<div class="bz-td">
-							<span title="朴明">朴明</span>
-							<span title="女">女</span>
-							<span title="222401197210073324">222401197210073324</span>
-							<span title="17643311303">17643311303</span>
-						</div>
-						<div class="bz-td">
-							<span title="朴明">王永玲</span>
-							<span title="朴明">女</span>
-							<span title="朴明">222426198103232926</span>
-							<span title="朴明">17643311338</span>
-						</div>
-						<div class="bz-td">
-							<span title="邢超">邢超</span>
-							<span title="男">男</span>
-							<span title="23272119950921063X">23272119950921063X</span>
-							<span title="17643311332">17643311332</span>
-						</div>
-						<div class="bz-td">
-							<span title="于洋">于洋</span>
-							<span title="男">男</span>
-							<span title="222401199005270010">222401199005270010</span>
-							<span title="17643311336">17643311336</span>
-						</div>
-						<div class="bz-td">
-							<span title="桂延章">桂延章</span>
-							<span title="男">男</span>
-							<span title="222401199005270010">222401199005270010</span>
-							<span title="15944328870">15944328870</span>
-						</div>
-						<div class="bz-td">
-							<span title="于芳">于芳</span>
-							<span title="女">女</span>
-							<span title="222401199508020021">222401199508020021</span>
-							<span title="18340835186">18340835186</span>
-						</div>
-						<div class="bz-td">
-							<span title="于洋">于洋</span>
-							<span title="男">男</span>
-							<span title="222401199005270010">222401199005270010</span>
-							<span title="17643311336">17643311336</span>
-						</div>
-						<div class="bz-td">
-							<span title="单明金砚">单明金砚</span>
-							<span title="女">女</span>
-							<span title="222403199004275621">222403199004275621</span>
-							<span title="17643311340">17643311340</span>
-						</div>
+      <div class="nav-tit">
+        <div class="nav-circle">
+          <img src="../assets/images/yj-tity1.png" />
+        </div>
+        <p>应急资源信息</p>
+      </div>
+      <h6 class="nav-wz"><i class="iconfont yj-icon-weizhi"></i>新兴街道民昌社区</h6>
+      <div class="left-table">
+        <div class="bz-name">
+          <img src="../assets/images/yj-navimg2.png"/>
+          <p>班长</p>
+        </div>
+        <div class="bz-table">
+          <div class="bz-head">
+            <span>姓名</span>
+            <span>性别</span>
+            <span>身份证号</span>
+            <span>联系电话</span>
+          </div>
+          <div class="scroll h-22">
+            <div class="bz-td">
+              <span title="朴明">朴明</span>
+              <span title="女">女</span>
+              <span title="222401197210073324">222401197210073324</span>
+              <span title="17643311303">17643311303</span>
+            </div>
+            <div class="bz-td">
+              <span title="朴明">王永玲</span>
+              <span title="朴明">女</span>
+              <span title="朴明">222426198103232926</span>
+              <span title="朴明">17643311338</span>
+            </div>
+            <div class="bz-td">
+              <span title="邢超">邢超</span>
+              <span title="男">男</span>
+              <span title="23272119950921063X">23272119950921063X</span>
+              <span title="17643311332">17643311332</span>
+            </div>
+            <div class="bz-td">
+              <span title="于洋">于洋</span>
+              <span title="男">男</span>
+              <span title="222401199005270010">222401199005270010</span>
+              <span title="17643311336">17643311336</span>
+            </div>
+            <div class="bz-td">
+              <span title="桂延章">桂延章</span>
+              <span title="男">男</span>
+              <span title="222401199005270010">222401199005270010</span>
+              <span title="15944328870">15944328870</span>
+            </div>
+            <div class="bz-td">
+              <span title="于芳">于芳</span>
+              <span title="女">女</span>
+              <span title="222401199508020021">222401199508020021</span>
+              <span title="18340835186">18340835186</span>
+            </div>
+            <div class="bz-td">
+              <span title="于洋">于洋</span>
+              <span title="男">男</span>
+              <span title="222401199005270010">222401199005270010</span>
+              <span title="17643311336">17643311336</span>
+            </div>
+            <div class="bz-td">
+              <span title="单明金砚">单明金砚</span>
+              <span title="女">女</span>
+              <span title="222403199004275621">222403199004275621</span>
+              <span title="17643311340">17643311340</span>
+            </div>
 
-					</div>
-				</div>
-			</div>
-			<h6 class="nav-wz"><i class="iconfont yj-icon-weizhi"></i>进学街道</h6>
-			<div class="left-table">
-				<div class="bz-name">
-					<img src="../assets/images/yj-navimg2.png"/>
-					<p>班长</p>
-				</div>
-				<div class="bz-table">
-					<div class="bz-head">
-						<span>姓名</span>
-						<span>性别</span>
-						<span>身份证号</span>
-						<span>联系电话</span>
-					</div>
-					<div class="scroll h-22">
-						<div class="bz-td">
-							<span title="朴明">朴明</span>
-							<span title="女">女</span>
-							<span title="222401197210073324">222401197210073324</span>
-							<span title="17643311303">17643311303</span>
-						</div>
-						<div class="bz-td">
-							<span title="朴明">王永玲</span>
-							<span title="朴明">女</span>
-							<span title="朴明">222426198103232926</span>
-							<span title="朴明">17643311338</span>
-						</div>
-						<div class="bz-td">
-							<span title="邢超">邢超</span>
-							<span title="男">男</span>
-							<span title="23272119950921063X">23272119950921063X</span>
-							<span title="17643311332">17643311332</span>
-						</div>
-						<div class="bz-td">
-							<span title="于洋">于洋</span>
-							<span title="男">男</span>
-							<span title="222401199005270010">222401199005270010</span>
-							<span title="17643311336">17643311336</span>
-						</div>
-						<div class="bz-td">
-							<span title="桂延章">桂延章</span>
-							<span title="男">男</span>
-							<span title="222401199005270010">222401199005270010</span>
-							<span title="15944328870">15944328870</span>
-						</div>
-						<div class="bz-td">
-							<span title="于芳">于芳</span>
-							<span title="女">女</span>
-							<span title="222401199508020021">222401199508020021</span>
-							<span title="18340835186">18340835186</span>
-						</div>
-						<div class="bz-td">
-							<span title="于洋">于洋</span>
-							<span title="男">男</span>
-							<span title="222401199005270010">222401199005270010</span>
-							<span title="17643311336">17643311336</span>
-						</div>
-						<div class="bz-td">
-							<span title="单明金砚">单明金砚</span>
-							<span title="女">女</span>
-							<span title="222403199004275621">222403199004275621</span>
-							<span title="17643311340">17643311340</span>
-						</div>
+          </div>
+        </div>
+      </div>
+      <h6 class="nav-wz"><i class="iconfont yj-icon-weizhi"></i>进学街道</h6>
+      <div class="left-table">
+        <div class="bz-name">
+          <img src="../assets/images/yj-navimg2.png"/>
+          <p>班长</p>
+        </div>
+        <div class="bz-table">
+          <div class="bz-head">
+            <span>姓名</span>
+            <span>性别</span>
+            <span>身份证号</span>
+            <span>联系电话</span>
+          </div>
+          <div class="scroll h-22">
+            <div class="bz-td">
+              <span title="朴明">朴明</span>
+              <span title="女">女</span>
+              <span title="222401197210073324">222401197210073324</span>
+              <span title="17643311303">17643311303</span>
+            </div>
+            <div class="bz-td">
+              <span title="朴明">王永玲</span>
+              <span title="朴明">女</span>
+              <span title="朴明">222426198103232926</span>
+              <span title="朴明">17643311338</span>
+            </div>
+            <div class="bz-td">
+              <span title="邢超">邢超</span>
+              <span title="男">男</span>
+              <span title="23272119950921063X">23272119950921063X</span>
+              <span title="17643311332">17643311332</span>
+            </div>
+            <div class="bz-td">
+              <span title="于洋">于洋</span>
+              <span title="男">男</span>
+              <span title="222401199005270010">222401199005270010</span>
+              <span title="17643311336">17643311336</span>
+            </div>
+            <div class="bz-td">
+              <span title="桂延章">桂延章</span>
+              <span title="男">男</span>
+              <span title="222401199005270010">222401199005270010</span>
+              <span title="15944328870">15944328870</span>
+            </div>
+            <div class="bz-td">
+              <span title="于芳">于芳</span>
+              <span title="女">女</span>
+              <span title="222401199508020021">222401199508020021</span>
+              <span title="18340835186">18340835186</span>
+            </div>
+            <div class="bz-td">
+              <span title="于洋">于洋</span>
+              <span title="男">男</span>
+              <span title="222401199005270010">222401199005270010</span>
+              <span title="17643311336">17643311336</span>
+            </div>
+            <div class="bz-td">
+              <span title="单明金砚">单明金砚</span>
+              <span title="女">女</span>
+              <span title="222403199004275621">222403199004275621</span>
+              <span title="17643311340">17643311340</span>
+            </div>
 
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		name: 'Leftnav',
-		props: {
+export default {
+  name: 'Leftnav',
+  props: {
 
-		}
-	}
+  },
+  data(){
+    return{
+      newDate:this.getCurrentDataStr(),
+      warte:[
+        {
+          month:1,
+          last:'-20',
+          height:'-14'
+        },
+        {
+          month:2,
+          last:'-19',
+          height:'-8'
+        },
+        {
+          month:3,
+          last:'-3',
+          height:'6'
+        },
+        {
+          month:4,
+          last:'1',
+          height:'12'
+        },
+        {
+          month:5,
+          last:'6',
+          height:'16'
+        },
+        {
+          month:6,
+          last:'15',
+          height:'25'
+        },
+        {
+          month:7,
+          last:'17',
+          height:'31'
+        },
+        {
+          month:8,
+          last:'16',
+          height:'27'
+        },
+        {
+          month:9,
+          last:'12',
+          height:'25'
+        },
+        {
+          month:10,
+          last:'3',
+          height:'20'
+        },
+        {
+          month:11,
+          last:'-3',
+          height:'12'
+        },
+        {
+          month:12,
+          last:'-8',
+          height:'-22'
+        },
+      ]
+    }
+  },
+  methods:{
+    getCurrentDataStr() {
+      let date = new Date()
+      return date.getMonth() + 1
+    },
+  }
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-	.nav{
-		background: url("../assets/images/yj-leftnavbg.png") no-repeat center;
-		background-size: cover;
-		position: absolute;
-		left: 0px;
-		top:0px;
-		height: 100vh;
-		z-index: 3;
-		width: 382px;
-	}
-	.nav-cont{
-		width: 320px;
-		height: calc(100vh - 17vh);
-		margin-top: 10vh;
-		margin: 8vh 0px 0px 15px;
-	}
+.nav{
+  background: url("../assets/images/yj-leftnavbg.png") no-repeat center;
+  background-size: cover;
+  position: absolute;
+  left: 0px;
+  top:0px;
+  height: 100vh;
+  z-index: 3;
+  width: 382px;
+}
+.nav-cont{
+  width: 320px;
+  height: calc(100vh - 17vh);
+  margin-top: 10vh;
+  margin: 8vh 0px 0px 15px;
+}
 
-	.left-table{
-		display: flex;
-		flex-direction: row;
-		margin: 20px 0px;
-	}
-	.left-table .bz-name{
-		background: url("../assets/images/yj-navimg1.png") no-repeat center;
-		background-size: 100% 100%;
-		width: 40px;
-		height: 40px;
-		padding: 0px 5px;
-		margin-right: 8px;
-	}
-	.left-table .bz-name img{
-		width: 30px;
-		margin-top: 4px;
-	}
-	.left-table .bz-name p{
-		margin-top: -13px;
-		text-align: center;
-		font-size: 14px;
-		color: #36c9ff;
-		margin-top: 10px;
-	}
-	.bz-table{
-		width: 100%;
-	}
+.left-table{
+  display: flex;
+  flex-direction: row;
+  margin: 20px 0px;
+}
+.left-table .bz-name{
+  background: url("../assets/images/yj-navimg1.png") no-repeat center;
+  background-size: 100% 100%;
+  width: 40px;
+  height: 40px;
+  padding: 0px 5px;
+  margin-right: 8px;
+}
+.left-table .bz-name img{
+  width: 30px;
+  margin-top: 4px;
+}
+.left-table .bz-name p{
+  margin-top: -13px;
+  text-align: center;
+  font-size: 14px;
+  color: #36c9ff;
+  margin-top: 10px;
+}
+.bz-table{
+  width: 100%;
+}
 
-	.bz-table .bz-head{
-		background: rgb(27, 55, 113,0.8);
-		width: 100%;
-		height: 33px;
-		line-height: 33px;
-		padding: 0px 1%;
-	}
-	.bz-table .bz-td{
-		width: 100%;
-		height: 33px;
-		line-height: 33px;
-		padding: 0px 1%;
-	}
-	.bz-table .bz-td:nth-child(even){
-		background: rgb(24, 56, 129,0.4);
-	}
-	.bz-table .bz-head span,.bz-table .bz-td span{
-		color: #fff;
-		font-size: 10px;
-		display: inline-block;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		text-align: left;
-		position: relative;
-	}
-	.bz-table .bz-head span:nth-child(1){
-		width: 15%;
-	}
-	.bz-table .bz-head span:nth-child(2){
-		width: 10%;
-	}
-	.bz-table .bz-head span:nth-child(3){
-		width: 47%;
-	}
-	.bz-table .bz-head span:nth-child(4){
-		width: 28%;
-	}
+.bz-table .bz-head{
+  background: rgb(27, 55, 113,0.8);
+  width: 100%;
+  height: 33px;
+  line-height: 33px;
+  padding: 0px 1%;
+}
+.bz-table .bz-td{
+  width: 100%;
+  height: 33px;
+  line-height: 33px;
+  padding: 0px 1%;
+}
+.bz-table .bz-td:nth-child(even){
+  background: rgb(24, 56, 129,0.4);
+}
+.bz-table .bz-head span,.bz-table .bz-td span{
+  color: #fff;
+  font-size: 10px;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: left;
+  position: relative;
+}
+.bz-table .bz-head span:nth-child(1){
+  width: 15%;
+}
+.bz-table .bz-head span:nth-child(2){
+  width: 10%;
+}
+.bz-table .bz-head span:nth-child(3){
+  width: 47%;
+}
+.bz-table .bz-head span:nth-child(4){
+  width: 28%;
+}
 
-	.bz-table .bz-td span:nth-child(1){
-		width: 15%;
-	}
-	.bz-table .bz-td span:nth-child(2){
-		width: 10%;
-	}
-	.bz-table .bz-td span:nth-child(3){
-		width: 47%;
-	}
-	.bz-table .bz-td span:nth-child(4){
-		width: 28%;
-	}
+.bz-table .bz-td span:nth-child(1){
+  width: 15%;
+}
+.bz-table .bz-td span:nth-child(2){
+  width: 10%;
+}
+.bz-table .bz-td span:nth-child(3){
+  width: 47%;
+}
+.bz-table .bz-td span:nth-child(4){
+  width: 28%;
+}
 
 
 
 
-	.nav-wz{
-		font-size: 16px;
-		color: #46e7ff;
-		margin-top: 10px;
-		text-align: left;
-	}
-	.nav-wz i{
-		margin-right: 4px;
-	}
+.nav-wz{
+  font-size: 16px;
+  color: #46e7ff;
+  margin-top: 10px;
+  text-align: left;
+}
+.nav-wz i{
+  margin-right: 4px;
+}
 
-	.yj-tqdiv{
-		display: flex;
-		flex-direction: row;
-		margin: 0px 0px 20px 0px;
-		background: url("../assets/images/yj-tqbg.png") no-repeat center;
-		background-size: 100% 100%;
-		padding: 15px 0px;
-		height: 180px;
-	}
-	.yj-tqdiv .yj-qyb{
-		display: flex;
-		flex-direction: column;
-		margin-right: 15px;
-		align-items: center;
-		width: 120px;
-		text-align: center;
-	}
-	.yj-tqdiv .yj-qyb i{
-		color: #00ffff;
-		font-size: 60px;
-	}
-	.yj-tqdiv .yj-qyb p{
-		color: #00ffff;
-		font-size: 16px;
-	}
-	.yj-tqdiv .yj-tqtxt{
-		color: #00ffff;
-		text-align: left;
-		font-size: 14px;
-		line-height: 25px;
-	}
+.yj-tqdiv{
+  display: flex;
+  flex-direction: row;
+  margin: 0px 0px 20px 0px;
+  background: url("../assets/images/yj-tqbg.png") no-repeat center;
+  background-size: 100% 100%;
+  padding: 15px 0px;
+  height: 180px;
+}
+.yj-tqdiv .yj-qyb{
+  display: flex;
+  flex-direction: column;
+  margin-right: 15px;
+  align-items: center;
+  width: 120px;
+  text-align: center;
+}
+.yj-tqdiv .yj-qyb i{
+  color: #00ffff;
+  font-size: 60px;
+}
+.yj-tqdiv .yj-qyb p{
+  color: #00ffff;
+  font-size: 16px;
+}
+.yj-tqdiv .yj-tqtxt{
+  color: #00ffff;
+  text-align: left;
+  font-size: 14px;
+  line-height: 25px;
+}
 
 
-	.yj-tqdiv2{
-		display: flex;
-		flex-direction: column;
-		margin: 0px 0px 20px 0px;
-		background: url("../assets/images/yj-tqbg.png") no-repeat center;
-		background-size: 100% 100%;
-		padding: 15px 0px;
-		height: 180px;
-	}
-	.yj-tqdiv2 .yj-qyb{
-		display: flex;
-		flex-direction: row;
-		padding-left: 20px;
-	}
-	.yj-tqdiv2 .yj-qyb .yj-qybimg{
-		width: 60px;
-	}
-	.yj-tqdiv2 .yj-qyb .yj-qybtxt{
-		text-align: left;
-		padding-left: 25px;
-	}
-	.yj-tqdiv2 .yj-qyb .yj-qybtxt h4{
-		font-size: 30px;
-		color: #fff402;
-		font-weight: bold;
-	}
-	.yj-tqdiv2 .yj-qyb .yj-qybtxt p{
-		font-size: 14px;
-		color: #fff;
-	}
-	.yj-tqdiv2 .yj-qyb .yj-qybtxt p i{
-		font-size: 13px;
-		color: #fff;
-	}
-	.yj-tqdiv2 .yj-tqtxt2{
-		padding: 10px 0px 0px 20px;
-		text-align: left;
-	}
-	.yj-tqdiv2 .yj-tqtxt2 span{
-		color: #00bef1;
-		display: inline-block;
-		width: 130px;
-		margin: 0px 10px;
-		font-size: 14px;
-		line-height: 25px;
-	}
+.yj-tqdiv2{
+  display: flex;
+  flex-direction: column;
+  margin: 0px 0px 20px 0px;
+  background: url("../assets/images/yj-tqbg.png") no-repeat center;
+  background-size: 100% 100%;
+  padding: 15px 0px;
+  height: 180px;
+}
+.yj-tqdiv2 .yj-qyb{
+  display: flex;
+  flex-direction: row;
+  padding-left: 20px;
+}
+.yj-tqdiv2 .yj-qyb .yj-qybimg{
+  width: 60px;
+}
+.yj-tqdiv2 .yj-qyb .yj-qybtxt{
+  text-align: left;
+  padding-left: 25px;
+}
+.yj-tqdiv2 .yj-qyb .yj-qybtxt h4{
+  font-size: 30px;
+  color: #fff402;
+  font-weight: bold;
+}
+.yj-tqdiv2 .yj-qyb .yj-qybtxt p{
+  font-size: 14px;
+  color: #fff;
+}
+.yj-tqdiv2 .yj-qyb .yj-qybtxt p i{
+  font-size: 13px;
+  color: #fff;
+}
+.yj-tqdiv2 .yj-tqtxt2{
+  padding: 10px 0px 0px 20px;
+  text-align: left;
+}
+.yj-tqdiv2 .yj-tqtxt2 span{
+  color: #00bef1;
+  display: inline-block;
+  width: 130px;
+  margin: 0px 10px;
+  font-size: 14px;
+  line-height: 25px;
+}
 
 
 </style>