sisMobilePhone/components/weatherCalendarCardList8_15/weatherCalendarCard8_15/weatherCalendarCard8_15.vue

<template>
	<div class="weatherProphet8_15" :style="{'width':weatherProphet8_15Width,'height':weatherProphet8_15Height}">
		<div class="date" :style="{'font-size':dateSize}">{{month}}月{{day}}</div>
		<div class="cardContaine" :style="{'height':cardContaineHeight}">
			<div class="time" :style="{'line-height':timeLineHeight,'background-color':timeBackgroundColor,'font-size':timeSize,'height':timeHeight,'width':timeDayWidth}">
				{{week}}&nbsp;{{day}}
			</div>
			<div class="weatherIcon" :style="{'background-color':weatherIconBackgroundColor,'width':timeWidth,'height':weatherIconHeight}">
				<div :class="[dayWeatherClassName,dayWeatherIconTotalClass]" :style="{'margin-top':dayWeatherIconTotalClassMarginTop,'margin-left':dayWeatherIconTotalClassMarginLeft}"></div>
				<div :class="[nightWeatherClassName,nightWeatherIconTotalClass]" :style="{'margin-top':dayWeatherIconTotalClassMarginTop,'margin-right':dayWeatherIconTotalClassMarginRight}"></div>
			</div>
			<div class="weatherAndTemperatureAndWinddirectionAndSpeedClass">
				<div class="weather" :style="{'line-height':timeLineHeight,'font-size':weatherSize}">
					{{weatherProphetData_8_15.weather}}
				</div>
				<div class="temperature" :style="{'line-height':timeLineHeight,'font-size':temperatureSize}">
					<span>{{weatherProphetData_8_15.temperature1}}℃</span>/{{weatherProphetData_8_15.temperature2}}℃
				</div>
				<div class="winddirection" :style="{'line-height':timeLineHeight,'font-size':winddirectionSize}">
					{{weatherProphetData_8_15.winddirection1}}
				</div>
				<div class="speed" :style="{'line-height':timeLineHeight,'font-size':speedSize}">
					{{weatherProphetData_8_15.speed1}}km/h
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import utils from '../../tools/shoyu-date/utils.filter.js';
	export default {
		data: function() {
			return {
				windowWidth:'',
				windowHeight:'',
				timeDayWidth:"",
				dateSize:'',
				timeWidth:'',
				timeHeight:'',
				timeSize:'',
				weatherSize:'',
				temperatureSize:'',
				weatherProphet8_15Width:'',
				weatherProphet8_15Height:'',
				dayWeatherIconTotalClassMarginLeft:'',
				dayWeatherIconTotalClassMarginRight:'',
				dayWeatherIconTotalClassMarginTop:'',
				winddirectionSize:'',
				speedSize:'',
				cardContaineHeight:'',
				timeLineHeight:'',
				weatherIconHeight:'',
				weatherProphetData_8_15: "",
				width: "",
				height: "",
				week: "",
				day: "",
				month:"",
				newDate: '',
				utils: utils,
				timestamp:"",
				dayWeatherIconTotalClass: "dayWeatherIconTotalClass",
				dayWeatherClassName: "",
				nightWeatherIconTotalClass: "nightWeatherIconTotalClass",
				nightWeatherClassName: "",
				classNameweatherIconBackgroundColor: "",
				weatherIconBackgroundColor: "",
				timeBackgroundColor: "",
				iconMarginTop: ""
			}
		},
		created:function(){
			this.windowWidth=uni.getSystemInfoSync().windowWidth;
			this.windowHeight=uni.getSystemInfoSync().windowHeight;
			if(this.windowWidth>=768){
				this.dateSize="24px";
				this.timeDayWidth="22%";
				this.timeWidth="15%";
				this.timeSize="20px";
				this.timeHeight="70px";
				this.weatherSize="20px";
				this.temperatureSize="20px";
				this.weatherProphet8_15Width="88%";
				this.weatherProphet8_15Height="140px";
				this.winddirectionSize="20px";
				this.speedSize="20px";
				this.cardContaineHeight="70px";
				this.timeLineHeight="70px";
				this.weatherIconHeight="70px";
				this.dayWeatherIconTotalClassMarginLeft="10px";
				this.dayWeatherIconTotalClassMarginTop="20px";
				this.dayWeatherIconTotalClassMarginRight="10px";
			}
			else{
				this.dateSize="14px";
				this.timeDayWidth="16%";
				this.timeWidth="22%";
				this.timeSize="10px";
				this.timeHeight="40px";
				this.weatherSize="10px";
				this.temperatureSize="10px";
				this.weatherProphet8_15Width="86%";
				this.weatherProphet8_15Height="100px";
				this.winddirectionSize="10px";
				this.speedSize="10px";
				this.cardContaineHeight="40px";
				this.timeLineHeight="40px";
				this.weatherIconHeight="40px";
				this.dayWeatherIconTotalClassMarginLeft="3px";
				this.dayWeatherIconTotalClassMarginTop="3px";
				this.dayWeatherIconTotalClassMarginRight="4px";
			}
		},
		methods: {
			getWeatherData: function(width, height, classNameweatherIconBackgroundColor, classNameDay, classNameNight,
				weatherProphetData_8_15) {
				this.width = width + "%";
				this.height = height + "px";
				this.iconMarginTop = (height - 31) / 2 + "px";
				this.weatherProphetData_8_15 = weatherProphetData_8_15;
				this.dayWeatherClassName = classNameDay;
				this.nightWeatherClassName = classNameNight;
				this.classNameweatherIconBackgroundColor = classNameweatherIconBackgroundColor;
				this.setTime();
				this.setBackgroundColor();
			},
			setTime: function() {
				let newWeek = new Date(this.weatherProphetData_8_15.recodedata).getDay();
				if (newWeek == 0) {
					this.week = "周日";
				}
				if (newWeek == 1) {
					this.week = "周一";
				}
				if (newWeek == 2) {
					this.week = "周二";
				}
				if (newWeek == 3) {
					this.week = "周三";
				}
				if (newWeek == 4) {
					this.week = "周四";
				}
				if (newWeek == 5) {
					this.week = "周五";
				}
				if (newWeek == 6) {
					this.week = "周六";
				}
				let newDay = new Date(this.weatherProphetData_8_15.recodedata).getDate();
				this.day = newDay + "日";
				this.timestamp = new Date(this.weatherProphetData_8_15.recodedata).getTime();
				this.month = this.utils.timeTodate('m',this.timestamp);
			},
			setBackgroundColor: function() {
				if (this.classNameweatherIconBackgroundColor == "firstGradeBlue") {
					this.timeBackgroundColor = "#2F5EB0";
					this.weatherIconBackgroundColor = "#597EC0";
				} else if (this.classNameweatherIconBackgroundColor == "fourGradeBlue") {
					this.timeBackgroundColor = "#60B9E3";
					this.weatherIconBackgroundColor = "#9ED2EC";
				} else if (this.classNameweatherIconBackgroundColor == "threeGradeBlue") {
					this.timeBackgroundColor = "#50A5F2";
					this.weatherIconBackgroundColor = "#73B7F5";
				} else if (this.classNameweatherIconBackgroundColor == "twoGradeBlue") {
					this.timeBackgroundColor = "#427CE8";
					this.weatherIconBackgroundColor = "#6896ED";
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.date {
		margin-top: 10px;
		width: 100%;
		height: 25px;
		font-size: 14px;
		font-family: "microsoft yahei";
		color: white;

	}

	.weatherProphet8_15 {
		margin-left: 7%;
		width: 86%;
		float: left;

	}

	.cardContaine {
		line-height: 40px;
		height: 70px;
		margin-top: 2%;
		border-radius: 10px;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
		background: rgba(0, 0, 0, 0.1);
	}

	.weatherAndTemperatureAndWinddirectionAndSpeedClass {
		width: 100%;
		height: 100%;
	}

	.time {
		width: 16%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 16px;
		font-family: "microsoft yahei";
		float: left;
		color: white;
		border-radius: 10px 0px 0px 10px;
		opacity:0.8
	}

	.weatherIcon {
		height: 40px;
		float: left;
		background: rgba(0, 0, 0, 0.1);
		opacity:0.8
	}

	.dayWeatherIconTotalClass {
		width: 32px;
		height: 31px;
		margin-left: 3px;
		margin-top: 3px;
		float: left;
	}

	.nightWeatherIconTotalClass {
		width: 31px;
		height: 31px;
		margin-top: 3px;
		margin-right: 4px;
		float: right;
	}

	.weather {
		width: 15%;
		height: 100%;
		float: left;
		text-align: center;
		color: white;
		font-family: "microsoft yahei";
	}

	.temperature {
		width: 14%;
		height: 100%;
		float: left;
		text-align: center;
		font-size: 10px;
		color: white;
		font-family: "microsoft yahei";
	}

	.temperature span {
		color: red;
	}

	.winddirection {
		width: 16%;
		height: 100%;
		float: left;
		text-align: center;
		color: white;
		font-family: "microsoft yahei";
	}

	.speed {
		width: 17%;
		height: 100%;
		float: left;
		color: white;
		text-align: center;
		font-family: "microsoft yahei";
	}


	/*white30第一行*/

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYang {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat 0px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYangYun {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -79px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYun {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -160px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYangYunShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -239px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYangShanDianShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -318px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYangShanDianShuiShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -400px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShuiXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -480px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -560px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunLiangShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -639px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sanHengGang {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -719px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_liangDianLiangQuan {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -800px 2px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunShuiShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -880px 2px;
	}


	/*white30第二行*/

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunSanShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat 0px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunSiShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -79px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunWuShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -160px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunLiuShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -239px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_taiYangYunXueXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -318px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -400px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunXueXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -480px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunSanXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -560px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunSiXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -639px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sanHengGang {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -719px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sanDianSanQuan {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -800px -78px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunXueXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -880px -78px;
	}


	/* white30第三行*/

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sanHengGang {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat 0px -157px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_boLang {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -79px -157px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sYouJianTou {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -160px -157px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShuiShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -239px -157px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunSanShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -318px -157px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunSiShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -400px -157px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunWuShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -480px -157px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunLiuShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -560px -157px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunXueXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -639px -157px;
	}

	/*  white30第四行*/

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunSanXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat 0px -237px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunSiXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -79px -237px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_s {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -160px -237px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sShangJianTou {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -239px -237px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_sYouJianTou {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -31p8x -237px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShuiShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -400px -237px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunXueXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -480px -237px;
	}


	/*white30第五行*/

		.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yueLiang {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat 0px -318px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yueLiangYun {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -79px -318px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYueLiangYun {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -160px -318px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yueLiangYunShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -239px -318px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShanDianShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -318px -318px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yueShanDianShuiShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -400px -318px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShuiXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -480px -318px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -560px -318px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunShuiShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -639px -318px;
	}

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yunYunShuiShui {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -880px -318px;
	}


	/* white30第六行*/

	.weatherTemperatureWindSpeedCardList_8_15_weatherTemperatureWindSpeedCard_8_15_white30_yueLiangYunXueXue {
		background: url(../../../static/picture/weatherTemperatureWindSpeedCard_8_15/white30.png) no-repeat -318px -396px;
	}
</style>