Bladeren bron

气象今天页面样式串版问题

lizaixun 4 jaren geleden
bovenliggende
commit
95df4466c5

+ 26 - 8
components/weatherProphethomepage/weathercomponents/thermometerCard/ThermometerCard.vue

@@ -2,24 +2,39 @@
 	<div>
 		<div class="thermometerContainer" :style="{'width':width,'height':height}">
 			<!-- <div class="container" :style="{'width':width,'height':height}"> -->
-				<div class="time">
+				<div class="time" v-if="module">
+					0 实况
+				</div>
+				<div class="time" v-if="module==false">
 					{{nowTime}} 实况
 				</div>
 				<div class="thermometerAndTemperature">
-					<div class="temperature">
+					<div class="temperature" v-if="module">
+						0<span>℃</span>
+					</div>
+					<div class="temperature" v-if="module==false">
 						{{weatherProphetData_17Hour[0].temperature}}<span>℃</span>
 					</div>
 					<div :class="[thermometerClassName,totalClassName]" style="transform: scale(0.80);margin-left: 28%;margin-top: -14%;">
 					</div>
 				</div>
 				<div class="realFeelWindDirectionSpeed">
-					<div class="realFeel">
+					<div class="realFeel" v-if="module">
+						<div class="realFeelIcon"></div>&nbsp;体感温度:0℃
+					</div>
+					<div class="realFeel" v-if="module==false">
 						<div class="realFeelIcon"></div>&nbsp;体感温度:{{weatherProphetData_17Hour[0].realfeel}}℃
 					</div>
-					<div class="windDirection">
+					<div class="windDirection" v-if="module">
+						<div class="windDirectionIcon"></div>&nbsp;风向:0风
+					</div>
+					<div class="windDirection" v-if="module==false">
 						<div class="windDirectionIcon"></div>&nbsp;风向:{{weatherProphetData_17Hour[0].winddirection}}风
 					</div>
-					<div class="speed">
+					<div class="speed" v-if="module">
+						<div class="speedIcon"></div>&nbsp;风速:0km/h
+					</div>
+					<div class="speed" v-if="module==false">
 						<div class="speedIcon"></div>&nbsp;风速:{{weatherProphetData_17Hour[0].speed}}km/h
 					</div>
 				</div>
@@ -95,7 +110,8 @@
 				totalClassName: "thermometer",
 				width: "",
 				height: "",
-				weatherSwitch:true			
+				weatherSwitch:true,
+				module:true
 			}
 		},
 		created: function() {
@@ -124,10 +140,12 @@
 			// 	console.log(this.weatherProphetData_1)
 			// },
 			getHourWeatherData: function(width, height, weatherProphetData_17Hour,weatherProphetData_1) {
+				this.module = false;
 				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);
@@ -151,8 +169,8 @@
 
 <style scoped="scoped">
 	.thermometerContainer {
-		width: 65%;
-		height: 100%;
+		width: 90%;
+		height: 260px;
 		/* background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024F93), color-stop(1.5, #cccccc), to(#437193));
 		background: rgba(0, 0, 0, 0.1); */
 		background-color: #535252;