sisMobilePhone/components/weatherTemperatureWindSpeedCard_7/WeatherTemperatureWindSpeedCard_7.vue

<template>
	<div>
		<div class="weatherDay7" :style="{'margin-left':marginleft}">
			<div :key="index" class="weatherParentComponent" :style="{'width':width7}" @tap="changeTap(item)" v-for="(item,index) in weatherProphetData_7">
				<div :class="[classNameweatherIconBackgroundColor,bgcolor]" :style="{'width':assemblyWidth,'height':assemblyHeight}">
					<div class="assembly_time l" :style="{'margin-left':timeleft}"> {{ utils.timeTodate('d', item.recodedata) }}日</div>
					<!--<div class="today_time l">今天</div>-->
					<div :class="[classNameDay[index],assembly_1_page]" :style="{'margin-left':tuleft}"></div>
					<div :class="[classNameNight[index],assembly_2_page]" :style="{'margin-left':tuleft}"></div>
					<div class="assembly_weather l" :style="{'margin-left':weatherleft}">{{item.weather}}</div>
					<div class="assembly_temperature l" :style="{'margin-left':temperleft}">{{item.temperature2}}~{{item.temperature1}}℃</div>
					<div class="assembly_wind l" :style="{'margin-left':weatherleft}">{{item.speed1}}km/h</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import utils from '@/components/tools/shoyu-date/utils.filter.js';
	export default {
		data: function() {
			return {
				classNameweatherIconBackgroundColor: [],
				bgcolor: "lightBlue",
				assemblyWidth: '',
				assemblyHeight: '',
				weatherProphetData_7: [],
				assembly_1_page: "assembly_1",
				classNameDay: [],
				classNameNight: [],
				assembly_2_page: "assembly_2",
				weatherIconsDay:[],
				weatherIconsNight:[],
				// 直接使用需要进行声明
				utils: utils,
				// 直接使用需要进行声明 End
				timestamp: "",
				windowWidth:"",
				windowHeight:"",
				marginleft:'',
				width7:'',
				timeleft:'',
				tuleft:'',
				weatherleft:'',
				temperleft:'',
			}
		},
		created: function() {
			this.windowWidth=uni.getSystemInfoSync().windowWidth;
			this.windowHeight=uni.getSystemInfoSync().windowHeight;
			if(this.windowWidth>=768){
				this.marginleft="5%";
				this.width7="150px";
				this.timeleft="30px";
				this.tuleft="62px";
				this.weatherleft="27px"
				this.temperleft="28px";
			}else{
				this.marginleft="20px";
			}
		},
		methods: {
			changeTap: function(item) {
				let itemString = JSON.stringify(item);
				this.$emit("listenEven", itemString);
			},
			setDate: function() {
				// var newDate = new Date(this.weatherProphetData_40.recodedata).Format("dd");
				// this.newDate = newDate;
				this.timestamp = new Date(this.weatherProphetData_7.recodedata).getTime();
				this.newDate = this.utils.timeTodate('d', this.timestamp);
				// this.timestamp = 1582560000000;
				// console.log(this.timestamp);
			},
			weatherInformationCard: function(assemblyWidth, assemblyHeight, classNameDay, classNameNight, weatherProphetData_7) {
				//console.log(this.weatherProphetData_7);
				let _this = this;
				this.assemblyWidth = assemblyWidth + "px";;
				this.assemblyHeight = assemblyHeight + "%";
				this.classNameDay = classNameDay;
				this.classNameNight = classNameNight;
				this.weatherIconsDay = [];
				this.weatherIconsNight = [];
				this.weatherProphetData_7 = weatherProphetData_7;
				for (let i = 0; i < _this.weatherProphetData_7.length; i++) {
					_this.weatherIconsDay.push(_this.weatherProphetData_7[i].weather1);
					_this.weatherIconsNight.push(_this.weatherProphetData_7[i].weather2);
					// console.log(_this.weatherIconsNight)
				}
				uni.request({
					url: 'http://49.4.78.143:8081/WeatherfdController/weatherInformationChangePictureName?model=weatherProphet_7,weatherDataTable_7,white30&weatherInformation=' +
						this.weatherIconsDay,
					success: function(res) {
						_this.classNameDay = [];
						for (let i = 0; i < res.data.length; i++) {
							_this.classNameDay.push(res.data[i]);
						}
					},
					fail: (e) => {
						_this.tips = "网络错误"
					},
				});
				uni.request({
					url:'http://49.4.78.143:8081/WeatherfdController/weatherInformationChangePictureName?model=weatherProphet_7,weatherDataTable_7,white30&weatherInformation=' + this.weatherIconsNight,
					success: function(res) {
						_this.classNameNight = [];
						for (let i = 0; i < res.data.length; i++) {
							_this.classNameNight.push(res.data[i]);
						}
						// console.log(_this.classNameNight)
					},
					fail: (e) => {
						_this.tips = "网络错误"
					},
				});
				this.setDate();
				this.changeTap(this.weatherProphetData_7[0]);

			},
		},
	}
</script>

<style scoped="scoped">
	.assembly_time {
		height: 23px;
		width: 102px;
		border: 0px;
		font-size: 16px;
		color: #FFF;
		text-decoration: none;
		font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
		text-align: center;
		margin-top: 30px;
	}

	.assembly_2 {
		height: 31px;
		width: 31px;
		border: 0px;
		margin-top: 30px;
		margin-left: 36px;
		/*	background-image: url(../week/white30.png);*/
		background-position: 0px 0px;
	}

	.assembly_1 {
		height: 31px;
		width: 31px;
		border: 0px;
		margin-top: 30px;
		margin-left: 36px;
		/*background-image: url(../week/white30.png);*/
		background-position: 0px 80px;
	}

	.assembly_weather {
		height: 23px;
		width: 102px;
		border: 0px;
		font-size: 16px;
		color: #FFF;
		text-decoration: none;
		font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
		text-align: center;
		margin-top: 30px;
		font-weight: bold;
	}

	.assembly_temperature {
		height: 23px;
		width: 102px;
		border: 0px;
		font-size: 16px;
		color: #FFF;
		text-decoration: none;
		font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
		text-align: center;
		margin-top: 40px;
		font-weight: bold;

	}

	.assembly_wind {
		height: 23px;
		width: 102px;
		border: 0px;
		font-size: 16px;
		color: #FFF;
		text-decoration: none;
		font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
		text-align: center;
		margin-top: 40px;
		font-weight: normal;
	}

	.weatherParentComponent {
		border-right: 1rpx solid white;
		border-left: 1rpx solid white;
		/* border:1px solid white; */
		

	}

	.weatherDay7 {
		width: 90%;
		height: 380px;
		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-top: 5px;
		margin-left: 20px;
		margin-bottom: 20px;
		margin-right: 20px;
		display: -webkit-box;
		overflow-x: auto;
		/* position:fixed; */
		/*适应苹果*/
		-webkit-overflow-scrolling: touch;

	}

	.weatherProphet_7_weatherDataTable_7_white30_taiYang {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -560px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYun {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -160px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_taiYang {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_taiYangYun {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYun {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -160px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_taiYangYunShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -238px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_taiYangShanDianShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_taiYangShanDianShuiShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -396px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunShuiXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -480px 0px;
	}
	.weatherProphet_7_weatherDataTable_7_white30_yunLiangShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -638px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_sanHengGang {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -718px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_liangDianLiangQuan {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -798px 0px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunShuiShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -880px 0px;
	}


	.weatherProphet_7_weatherDataTable_7_white30_yunSanShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunSiShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -76px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunWuShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -152px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunLiuShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -232px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_taiYangYunXueXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -396px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30__yunXueXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -476px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunSanXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -556px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunSiXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -638px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_sanHengGang {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -718px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_sanDianSanQuan {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -798px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunXueXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -876px -76px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_sanHengGang {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px -152px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_boLang {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -76px -152px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_sYouJianTou {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -152px -152px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunShuiShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -232px -152px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunSanShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px -152px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunSiShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -396px -152px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunWuShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -476px -152px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunLiuShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -556px -152px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunXueXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -638px -152px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunSanXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px -232px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunSiXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -76px -232px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_s {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -152px -232px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_sShangJianTou {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -232px -232px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_sYouJianTou {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px -232px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunShuiShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -396px -232px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunXueXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -476px -232px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yueLiang {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat 0px -314px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yueLiangYun {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -76px -314px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYueLiangYun {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -152px -314px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yueLiangYunShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -232px -314px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunShanDianShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px -314px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yueShanDianShuiShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -396px -314px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunShuiXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -481px -318px;
	}
	.weatherProphet_7_weatherDataTable_7_white30_yunShuiShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -638px -314px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yunYunShuiShui {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -876px -314px;
	}

	.weatherProphet_7_weatherDataTable_7_white30_yueLiangYunXueXue {
		background: url(../../static/picture/weatherTemperatureWindSpeedCard_7/white30.png) no-repeat -314px -396px;
	}
</style>