sisMobilePhone/components/thermometerCard/ThermometerCard.vue

<template>
	<div>
		<div class="thermometerContainer" :style="{'width':width,'height':height,'margin-left':marginLeft}">
			<!-- <div class="container" :style="{'width':width,'height':height}"> -->
				<div class="time" :style="{'font-size':fontSize,'margin-left':marginleftTime}">
					{{nowTime}} 实况
				</div>
				<div class="thermometerAndTemperature">
					<div class="temperature" :style="{'margin-left':marginleftTemper,'margin-top':marginbottom}">
						{{weatherProphetData_17Hour[0].temperature}}<span>℃</span>
					</div>
					<div :class="[thermometerClassName,totalClassName]" :style="{'margin-left':marginleftPicture}">
					</div>
				</div>
				<div class="realFeelWindDirectionSpeed" :style="{'margin-left':marginleftThree}">
					<div class="realFeel" :style="{'margin-left':marginleftThree,'font-size':fontSize}">
						<div class="realFeelIcon"></div>&nbsp;体感温度：{{weatherProphetData_17Hour[0].realfeel}}℃
					</div>
					<div class="windDirection" :style="{'margin-left':marginleftThree,'font-size':fontSize}">
						<div class="windDirectionIcon"></div>&nbsp;风向：{{weatherProphetData_17Hour[0].winddirection}}
					</div>
					<div class="speed" :style="{'margin-left':marginleftSpeed,'font-size':fontSize}">
						<div class="speedIcon"></div>&nbsp;风速：{{weatherProphetData_17Hour[0].speed}}km/h
					</div>
				</div>
				<div class="weatherDayTemperatureSunrise" :style="{'font-size':fontSize}"  v-show="weatherSwitch==true">
					<div class="dayTemperature" :style="{'font-size':fontSize,'width':widths,'margin-left':marginleftTemperature}">
						<div class="dayTemperatureIcon"></div>&nbsp;温度：{{weatherProphetData_1[0].temperature1}}℃
					</div>
					<div class="daySunrise" :style="{'font-size':fontSize,'width':widths,'margin-left':marginleftSunrise}">
						<div class="daySunriseIcon"></div>&nbsp;日出：{{weatherProphetData_1[0].sunrise}}
					</div>
					<div class="weatherDayAndNightButton">
						<div :class="[weatherSwitch==true?'dayButtonWhite':'dayButtonBlack']" @click="weatherDaySwitch()">白天</div>
						<div :class="[weatherSwitch==false?'nightButtonWhite':'nightButtonBlack']" @click="weatherNightSwitch()">夜间</div>
					</div>
				</div>
				<div class="weatherNightTemperatureSunrise" :style="{'font-size':fontSize}" v-show="weatherSwitch==false">
					<div class="nightTemperature" :style="{'font-size':fontSize,'width':widths,'margin-left':marginleftTemperature}">
						<div class="nightTemperatureIcon"></div>&nbsp;温度：{{weatherProphetData_1[0].temperature2}}℃
					</div>
					<div class="nightSunrise" :style="{'font-size':fontSize,'width':widths,'margin-left':marginleftSunrise}">
						<div class="nightSunriseIcon"></div>&nbsp;日落：{{weatherProphetData_1[0].sunset}}
					</div>
					<div class="weatherDayAndNightButton">
						<div :class="[weatherSwitch==true?'dayButtonWhite':'dayButtonBlack']"  @click="weatherDaySwitch()">白天</div>
						<div :class="[weatherSwitch==false?'nightButtonWhite':'nightButtonBlack']"  @click="weatherNightSwitch()">夜间</div>
					</div>
				</div>
				
			<!-- </div> -->
		</div>
	</div>
</template>
<script>
	Date.prototype.Format = function(fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/(y+)/.test(fmt))
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt))
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	};
	//调用--
	// var mytime=new Date(后台传来的毫秒格式的时间);
	// var newtime=mytime.Format("需转化的时间格式比如--yyyy-MM-hh");

	export default {
		data: function() {
			return {
				nowTime: "",
				weatherProphetData_17Hour: [{
					realfeel:'',
					speed:'',
					temperature:'',
					winddirection:'',
				}],
				weatherProphetData_1: [{
					speed:'',
					temperature1:'',
					sunrise:'',
					temperature2:'',
					sunset:''
				}],
				thermometerClassName: "",
				totalClassName: "thermometer",
				width: "",
				height: "",
				weatherSwitch:true,
				windowWidth:"",
				windowHeight:"",
				marginLeft:'',
				marginleft:'',
				marginLEft:'',
				fontSize:"",
				marginLEFT:'',
				widths:'',
				marginleftThree:'',
				marginleftPicture:'',
				marginbottom:'',
				marginleftTemper:'',
				marginleftTemperature:'',
				choiceMarginRight:'',
				marginleftTime:'',
				marginleftSunrise:'',
				marginleftSpeed:'',
				
			}
		},
		created: function() {
			this.windowWidth=uni.getSystemInfoSync().windowWidth;
			this.windowHeight=uni.getSystemInfoSync().windowHeight;
			let that = this;
			setInterval(function() {
				that.getNowTime();
			}, 1000);
			if(this.windowWidth>=768){
				this.marginLeft="5%";
				this.marginleftThree="5%"
				this.marginleft="30%";
				this.marginLEft="10%";
				this.fontSize="16px";
				this.marginLEFT="20%";
				this.widths=100+"px";
				this.marginbottom="-1%";
				this.marginleftPicture="35%";
				this.marginleftTemper="20%";
				this.marginleftTemperature="60px";
				this.marginleftTime="50px";
				this.marginleftSunrise="106px";
				this.marginleftSpeed="80px";
			}else{
				this.marginLeft="5%";
				this.marginLEft="0";
				this.marginleft="0";
				this.marginLEFT="0";
			    this.fontSize="14px";
				this.marginbottom="0";
				this.widths=80+"px";
				this.marginleftTime="0";
				this.marginleftTime="30px";
			}
			// this.getHourWeatherData("90", "360", this.weatherProphetData_17Hour,this.weatherProphetData_1)

		},
		methods: {
			weatherDaySwitch:function(){
				this.weatherSwitch=true;
				this.$emit("listenEven","day");
			},
			weatherNightSwitch:function(){
				this.weatherSwitch=false;
				this.$emit("listenEven","night");
			},
			getNowTime: function() {
				var nowTime = new Date(new Date().getTime()).Format("hh:mm");
				this.nowTime = nowTime;
			},
			// getDayWeatherData:function(weatherProphetData_1){
			//     this.weatherProphetData_1 = weatherProphetData_1;
			// 	console.log(this.weatherProphetData_1)
			// },
			getHourWeatherData: function(width, height, weatherProphetData_17Hour,weatherProphetData_1) {
				console.log(width);
				this.weatherProphetData_1=weatherProphetData_1;
				this.weatherProphetData_17Hour = weatherProphetData_17Hour;
				this.width = width + "%";
				this.height = height + "px";
				//判断温度计的度数,list[0].maximumtem%5后 1、2取0 ， 3、4取5				
				if (parseInt(weatherProphetData_17Hour[0].temperature) % 5 == 0) {
					this.thermometerClassName = "thermometer_" + parseInt(weatherProphetData_17Hour[0].temperature);
				} else if (parseInt(weatherProphetData_17Hour[0].temperature) % 5 == 1 || parseInt(weatherProphetData_17Hour[0].temperature) %
					5 == 2) {
					this.thermometerClassName = "thermometer_" + (parseInt(weatherProphetData_17Hour[0].temperature / 5) * 5);
				} else if (parseInt(weatherProphetData_17Hour[0].temperature) % 5 == 3 || parseInt(weatherProphetData_17Hour[0].temperature) %
					5 == 4) {
					this.thermometerClassName = "thermometer_" + ((parseInt(weatherProphetData_17Hour[0].temperature / 5) + 1) * 5);
				} else if (parseInt(weatherProphetData_17Hour[0].temperature) % 5 == -1 || parseInt(weatherProphetData_17Hour[0].temperature) %
					5 == -2) {
					this.thermometerClassName = "thermometer_" + (parseInt(weatherProphetData_17Hour[0].temperature / 5) * -5);
				} else if (parseInt(weatherProphetData_17Hour[0].temperature) % 5 == -3 || parseInt(weatherProphetData_17Hour[0].temperature) %
					5 == -4) {
					this.thermometerClassName = "thermometer_" + ((parseInt(weatherProphetData_17Hour[0].temperature / 5) + 1) * -5);
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.thermometerContainer {
		width: 65%;
		height: 100%;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
		background: rgba(0, 0, 0, 0.1);
		
		float: left;
		margin: 0px auto;
		border-radius: 20px;
		margin: 20px;
	}

	.container {
		width: 370px;
		height: 370px;
		margin: 0px auto;
	}

	.time {
		width: 100px;
		height: 30px;
		color: white;
		font-size: 16px;
		margin-left: 30px;
		margin-top: 30px;
		
		font-family: "microsoft yahei";
	}

	.thermometerAndTemperature {
		width: 100%;
		height: 200px;
	}

	.temperature {
		width: 100px;
		height: 100px;
		float: left;
		margin-top: 40px;
		margin-left: 20px;
		font-size: 68px;
		font-family: "microsoft yahei";
		text-align: center;
		line-height: 140px;
		color: white;
	}

	.temperature span {
		font-size: 37px;
		font-family: "microsoft yahei";
	}

	.thermometer {
		width: 104px;
		height: 186px;
		margin-left: 85px;
		float: left;
		margin-top: -30px;
	}

	.realFeelWindDirectionSpeed {
		width: 100%;
		height: 80px;
		font-size: 15px;
		margin-top: -30px;
		margin-left: 15px;
	}

	.realFeel {
		width: 150px;
		height: 40px;
		float: left;
		margin-left: 20px;
		line-height: 40px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}

	.realFeelIcon {
		width: 20px;
		height: 20px;
		margin-top: 10px;
		float: left;
		background: url(../../static/picture/thermometerCard/pic_tu_01.png) no-repeat;
	}

	.windDirection {
		width: 150px;
		height: 40px;
		float: left;
		line-height: 40px;
		margin-left: 3px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}

	.windDirectionIcon {
		width: 20px;
		height: 20px;
		margin-top: 10px;
		margin-left: 15px;
		float: left;
		background: url(../../static/picture/thermometerCard/pic_tu_02.png) no-repeat;
	}

	.weatherDayTemperatureSunrise {
		width: 90%;
		height: 30px;
		font-size: 15px;
		margin-top: 10px;
		margin-left: 14px;
		float: left;
	}
	
	.weatherDayAndNightButton{
		width: 100px;
		height: 20px;
		font-size: 15px;
		text-align: right;
		/* margin-top: 10px; */
		/* margin-left: 14px; */
		float: right;
	}
	
	.dayButtonWhite{
		margin-left: 15px;
		text-align: center;
		line-height: 20px;
		width: 28%;
		height: 20px;
		color: white;
		font-size: 14px;
		border-style: solid;
		border-top-width: 0px;
		border-right-width: 0px;
		border-bottom-width: 3px;
		border-bottom-color: #FFEE35;
		border-left-width: 0px;
		font-family: "microsoft yahei";
		float: left;
	}
	.dayButtonBlack{
		margin-left: 15px;
		line-height: 20px;
		text-align: center;
		width: 28%;
		height: 20px;
		color: #DEDEDE;
		font-size: 14px;
		font-family: "microsoft yahei";
		float: left;
	}
	.nightButtonWhite{
		margin-left: 15px;
		text-align: center;
		line-height: 20px;
		width: 28%;
		height: 20px;
		color: white;
		font-size: 14px;
		border-style: solid;
		border-top-width: 0px;
		border-right-width: 0px;
		border-bottom-width: 3px;
		border-bottom-color: #FFEE35;
		border-left-width: 0px;
		font-family: "microsoft yahei";
		float: left;
	}
	.nightButtonBlack{
		margin-left: 15px;
		line-height: 20px;
		text-align: center;
		width: 28%;
		height: 20px;
		color: #DEDEDE;
		font-size: 14px;
		font-family: "microsoft yahei";
		float: left;
	}
	.dayTemperature {
		width: 85px;
		height: 40px;
		float: left;
		margin-left: 20px;
		margin-top: -10px;
		line-height: 40px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}
	.daySunrise {
		width: 85px;
		height: 40px;
		float: left;
		margin-top: -10px;
		/* margin-left: -60px; */
		line-height: 40px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}
	.weatherNightTemperatureSunrise {
		width: 90%;
		height: 30px;
		font-size: 15px;
		margin-top: 10px;
		margin-left: 14px;
		float: left;
	}
	.nightTemperature {
		width: 85px;
		height: 40px;
		float: left;
		margin-left: 20px;
		margin-top: -10px;
		line-height: 40px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}
	.nightSunrise {
		width: 85px;
		height: 40px;
		float: left;
		margin-top: -10px;
		/* margin-left: -60px; */
		line-height: 40px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}

	.speed {
		width: 150px;
		height: 40px;
		float: left;
		margin-left: 20px;
		line-height: 40px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;
	}

	.speedIcon {
		width: 20px;
		height: 20px;
		margin-top: 10px;
		float: left;
		background: url(../../static/picture/thermometerCard/pic_tu_03.png) no-repeat;
	}


	/*0℃*/

	.thermometer_0 {
		background: url(../../static/picture/thermometerCard/thermometer/0C.png) no-repeat 0px 0px;
	}


	/*5℃*/

	.thermometer_5 {
		background: url(../../static/picture/thermometerCard/thermometer/5C.png) no-repeat 0px 0px;
	}


	/*-5℃*/

	.thermometer_-5 {
		background: url(../../static/picture/thermometerCard/thermometer/-5C.png) no-repeat 0px 0px;
	}


	/*10℃*/

	.thermometer_10 {
		background: url(../../static/picture/thermometerCard/thermometer/10C.png) no-repeat 0px 0px;
	}


	/*-10℃*/

	.thermometer_-10 {
		background: url(../../static/picture/thermometerCard/thermometer/-10C.png) no-repeat 0px 0px;
	}


	/*15℃*/

	.thermometer_15 {
		background: url(../../static/picture/thermometerCard/thermometer/15C.png) no-repeat 0px 0px;
	}


	/*-15℃*/

	.thermometer_-15 {
		background: url(../../static/picture/thermometerCard/thermometer/-15C.png) no-repeat 0px 0px;
	}


	/*20℃*/

	.thermometer_20 {
		background: url(../../static/picture/thermometerCard/thermometer/20C.png) no-repeat 0px 0px;
	}


	/*-20℃*/

	.thermometer_-20 {
		background: url(../../static/picture/thermometerCard/thermometer/-20C.png) no-repeat 0px 0px;
	}


	/*30℃*/

	.thermometer_30 {
		background: url(../../static/picture/thermometerCard/thermometer/30C.png) no-repeat 0px 0px;
	}


	/*-30℃*/

	.thermometer_-30 {
		background: url(../../static/picture/thermometerCard/thermometer/-30C.png) no-repeat 0px 0px;
	}


	/*40℃*/

	.thermometer_40 {
		background: url(../../static/picture/thermometerCard/thermometer/40C.png) no-repeat 0px 0px;
	}


	/*-40℃*/

	.thermometer_-40 {
		background: url(../../static/picture/thermometerCard/thermometer/-40C.png) no-repeat 0px 0px;
	}


	/*45℃*/

	.thermometer_45 {
		background: url(../../static/picture/thermometerCard/thermometer/45C.png) no-repeat 0px 0px;
	}


	/*-45℃*/

	.thermometer_-45 {
		background: url(../../static/picture/thermometerCard/thermometer/-45C.png) no-repeat 0px 0px;
	}


	/*50℃*/

	.thermometer_50 {
		background: url(../../static/picture/thermometerCard/thermometer/50C.png) no-repeat 0px 0px;
	}


	/*-50℃*/

	.thermometer_-50 {
		background: url(../../static/picture/thermometerCard/thermometer/-50C.png) no-repeat 0px 0px;
	}
</style>