TASK:110956-修改整体样式布局组件随容器自适应显示
This commit is contained in:
lvxiangcong
parent
cfb9dd25dd
commit
808e039ebf
|
|
@ -33,7 +33,4 @@ weatherData = {
|
|||
date: new Date(),
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -13,7 +13,6 @@ export const sharedStyles: CSSResult = css`
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 背景框 */
|
||||
.star-weather {
|
||||
width: var(--autoWidth--);
|
||||
min-width: var(--autoWidth--);
|
||||
|
|
@ -34,7 +33,6 @@ export const sharedStyles: CSSResult = css`
|
|||
.star-weather * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* .star-weather-top */
|
||||
.star-weather-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -53,7 +51,6 @@ export const sharedStyles: CSSResult = css`
|
|||
.type22 .star-weather-top {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
/* border:1px solid red; */
|
||||
}
|
||||
.type23 .star-weather-top {
|
||||
width: 100%;
|
||||
|
|
@ -64,7 +61,6 @@ export const sharedStyles: CSSResult = css`
|
|||
width: 100%;
|
||||
height: 25%;
|
||||
}
|
||||
/* .star-weather-bottom */
|
||||
.star-weather-bottom {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -73,13 +69,11 @@ export const sharedStyles: CSSResult = css`
|
|||
height: 50%;
|
||||
}
|
||||
.type23 .star-weather-bottom {
|
||||
height:65%;
|
||||
height: 65%;
|
||||
}
|
||||
.type32 .star-weather-bottom {
|
||||
height: 60%;
|
||||
padding: 0;
|
||||
height: 65%;
|
||||
}
|
||||
/* 天气图标 */
|
||||
.star-weather-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -92,7 +86,7 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
.type12 .star-weather-img {
|
||||
height: 100%;
|
||||
margin-right: 30px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.type21 .star-weather-img {
|
||||
width: 100%;
|
||||
|
|
@ -107,12 +101,20 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
.type32 .star-weather-img {
|
||||
height: 100%;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.weather-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 位置温度()*/
|
||||
.type12 .weather-img,
|
||||
.type21 .weather-img,
|
||||
.type22 .weather-img,
|
||||
.type23 .weather-img,
|
||||
.type32 .weather-img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.star-weather-location-temperature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -129,7 +131,6 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
.type22 .star-weather-location-temperature {
|
||||
height: 100%;
|
||||
/* margin-top:10%; */
|
||||
margin-left: 47px;
|
||||
}
|
||||
.type23 .star-weather-location-temperature {
|
||||
|
|
@ -138,7 +139,7 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
.type32 .star-weather-location-temperature {
|
||||
height: 100%;
|
||||
margin-left: 25px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.star-weather-location {
|
||||
text-align: left;
|
||||
|
|
@ -156,7 +157,6 @@ export const sharedStyles: CSSResult = css`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* detailType() */
|
||||
.detail-today-item {
|
||||
height: 50%;
|
||||
width: 31%;
|
||||
|
|
@ -191,11 +191,11 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
.type23 .star-weather-simple {
|
||||
height: 100%;
|
||||
margin-left:20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.type32 .star-weather-simple {
|
||||
height: 15%;
|
||||
margin-left: 25px;
|
||||
height: 10%;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.star-weather-simple-item {
|
||||
display: flex;
|
||||
|
|
@ -206,8 +206,11 @@ export const sharedStyles: CSSResult = css`
|
|||
font-weight: 400;
|
||||
color: #292929;
|
||||
}
|
||||
/* weekTemperatureType */
|
||||
.star-weather-week {
|
||||
.type32 .star-weather-simple-item {
|
||||
line-height: 30px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.star-weather-week {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -233,8 +236,24 @@ export const sharedStyles: CSSResult = css`
|
|||
}
|
||||
.type32 .star-weather-week-item {
|
||||
flex-direction: row;
|
||||
font-size: 16px;
|
||||
}
|
||||
.type32 .star-weather-week-one {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
.type32 .star-weather-week-min {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgba(38, 38, 38, 0.45);
|
||||
}
|
||||
`
|
||||
.type32 .star-weather-week-max {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #262626;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ const weatherMy: Record<string, boolean> = {
|
|||
const typeMy: Record<string, string> = {
|
||||
// height / width
|
||||
type11: '1',
|
||||
type12: '0.4',
|
||||
type21: '1.9',
|
||||
type12: '0.5',
|
||||
type21: '2.38',
|
||||
type22: '0.8',
|
||||
type23: '0.51',
|
||||
type32: '1.327',
|
||||
|
|
@ -23,7 +23,7 @@ const minAll: Record<string, string> = {
|
|||
// width
|
||||
type11: '100',
|
||||
type12: '400',
|
||||
type21: '200',
|
||||
type21: '160',
|
||||
type22: '500',
|
||||
type23: '700',
|
||||
type32: '452',
|
||||
|
|
@ -44,10 +44,8 @@ export class StarWeather extends LitElement {
|
|||
}
|
||||
@property({type: String}) type = 'type11'
|
||||
@property({type: Object}) data = Object()
|
||||
|
||||
@query('.star-weather-main')
|
||||
starWeather: HTMLDivElement | undefined
|
||||
|
||||
dataBoo() {
|
||||
return !!Object.keys(this.data).length
|
||||
}
|
||||
|
|
@ -58,11 +56,10 @@ export class StarWeather extends LitElement {
|
|||
<div class="star-weather-top">
|
||||
${this.locationType()} ${this.weatherType()}
|
||||
</div>
|
||||
${this.type ==='type32' ? this.detailSimpleType():''}
|
||||
${this.type === 'type32' ? this.detailSimpleType() : ''}
|
||||
<div class="star-weather-bottom">
|
||||
${this.detailType()}
|
||||
${this.weekTemperatureType()}
|
||||
</div>
|
||||
${this.detailType()} ${this.weekTemperatureType()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
|
@ -72,8 +69,11 @@ export class StarWeather extends LitElement {
|
|||
<div class="star-weather-img">
|
||||
<img
|
||||
class="weather-img"
|
||||
src="${weatherMy[this.dataBoo() && this.data.weatherInfo[0]?.weather?.labelEn] || Noload}"/>
|
||||
${this.type ==='type23' ? this.detailSimpleType() : ''}
|
||||
src="${weatherMy[
|
||||
this.dataBoo() && this.data.weatherInfo[0]?.weather?.labelEn
|
||||
] || Noload}"
|
||||
/>
|
||||
${this.type === 'type23' ? this.detailSimpleType() : ''}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
|
@ -86,7 +86,9 @@ export class StarWeather extends LitElement {
|
|||
${(this.dataBoo() && this.data.location) || ''}
|
||||
</div>
|
||||
<div class="star-weather-temperature">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.temperature?.max) || ''}
|
||||
${(this.dataBoo() &&
|
||||
this.data.weatherInfo[0]?.temperature?.max) ||
|
||||
''}
|
||||
${this.dateType()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -102,15 +104,18 @@ export class StarWeather extends LitElement {
|
|||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">空气质量</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${this.dataBoo() && (this.data.weatherInfo[0]?.airQuality?.value +
|
||||
this.data.weatherInfo[0]?.airQuality?.type) || ''}
|
||||
${(this.dataBoo() &&
|
||||
this.data.weatherInfo[0]?.airQuality?.value +
|
||||
this.data.weatherInfo[0]?.airQuality?.type) ||
|
||||
''}
|
||||
</span>
|
||||
</span>
|
||||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">体感温度</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${(this.dataBoo() &&
|
||||
this.data.weatherInfo[0].somatosensoryTemperature) || ''}
|
||||
this.data.weatherInfo[0].somatosensoryTemperature) ||
|
||||
''}
|
||||
</span>
|
||||
</span>
|
||||
<span class="detail-today-item">
|
||||
|
|
@ -121,7 +126,8 @@ export class StarWeather extends LitElement {
|
|||
</span>
|
||||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.label) || '风向'}
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.label) ||
|
||||
'风向'}
|
||||
</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.value) || ''}
|
||||
|
|
@ -136,7 +142,8 @@ export class StarWeather extends LitElement {
|
|||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">紫外线</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.ultravioletRys) || ''}
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.ultravioletRys) ||
|
||||
''}
|
||||
</span>
|
||||
</span>
|
||||
`
|
||||
|
|
@ -144,64 +151,95 @@ export class StarWeather extends LitElement {
|
|||
return ''
|
||||
}
|
||||
}
|
||||
detailSimpleType(){
|
||||
if(this.type === 'type23' || this.type ==='type32'){
|
||||
detailSimpleType() {
|
||||
if (this.type === 'type23' || this.type === 'type32') {
|
||||
return html`
|
||||
<span class ="star-weather-simple">
|
||||
<span class="star-weather-simple-item">
|
||||
<span>${(this.dataBoo() && this.data.weatherInfo[0]?.weather?.labelZh) || '天气'} </span>
|
||||
<span>湿度 ${(this.dataBoo() && this.data.weatherInfo[0]?.humidity) || ''}</span>
|
||||
</span>
|
||||
<span class="star-weather-simple-item">
|
||||
<span>${this.dataBoo() && (this.data.weatherInfo[0]?.wind?.label+this.data.weatherInfo[0]?.wind?.value) || '风向'}</span>
|
||||
<span>空气质量${this.dataBoo() && (this.data.weatherInfo[0]?.airQuality?.type) || ''}</span>
|
||||
</span>
|
||||
<span class="star-weather-simple">
|
||||
<span class="star-weather-simple-item">
|
||||
<span>
|
||||
${(this.dataBoo() &&
|
||||
this.data.weatherInfo[0]?.weather?.labelZh) ||
|
||||
'天气'}
|
||||
</span>
|
||||
<span>
|
||||
湿度
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.humidity) || ''}
|
||||
</span>
|
||||
</span>
|
||||
<span class="star-weather-simple-item">
|
||||
<span>
|
||||
${(this.dataBoo() &&
|
||||
this.data.weatherInfo[0]?.wind?.label +
|
||||
this.data.weatherInfo[0]?.wind?.value) ||
|
||||
'风向'}
|
||||
</span>
|
||||
<span>
|
||||
空气质量${(this.dataBoo() &&
|
||||
this.data.weatherInfo[0]?.airQuality?.type) ||
|
||||
''}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
`
|
||||
}else{
|
||||
`
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
dateType(){
|
||||
if(this.type === 'type23' || this.type === 'type32'){
|
||||
let currentDate = new Date(this.dataBoo() && this.data.weatherInfo[0].date)
|
||||
let mouth = currentDate.getMonth()+1
|
||||
let day =currentDate.getDate()
|
||||
let week = currentDate.getDay()
|
||||
return html`
|
||||
dateType() {
|
||||
if (this.type === 'type23' || this.type === 'type32') {
|
||||
let currentDate = new Date(
|
||||
this.dataBoo() && this.data.weatherInfo[0].date
|
||||
)
|
||||
let mouth = currentDate.getMonth() + 1
|
||||
let day = currentDate.getDate()
|
||||
let week = currentDate.getDay()
|
||||
return html`
|
||||
<span class="star-weather-date">
|
||||
<span>${this.dataBoo() && mouth + '/' + day || ''}</span>
|
||||
<span>${this.dataBoo() && weekMy[week]|| ''}</span>
|
||||
<span>${(this.dataBoo() && mouth + '/' + day) || ''}</span>
|
||||
<span>${(this.dataBoo() && weekMy[week]) || ''}</span>
|
||||
</span>
|
||||
`
|
||||
`
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
weekTemperatureType(){
|
||||
if(this.type === 'type23' || this.type === 'type32'){
|
||||
return html`
|
||||
}
|
||||
weekTemperatureType() {
|
||||
if (this.type === 'type23' || this.type === 'type32') {
|
||||
return html`
|
||||
<div class="star-weather-week">
|
||||
${this.data.weatherInfo?.slice(1).map((item : any, index : number) => {
|
||||
let weekThis = new Date(this.dataBoo() && this.data.weatherInfo[0].date).getDay()
|
||||
let weekItem = (weekThis + index + 1) % 7
|
||||
${this.data.weatherInfo?.slice(1).map((item: any, index: number) => {
|
||||
let weekThis = new Date(
|
||||
this.dataBoo() && this.data.weatherInfo[0].date
|
||||
).getDay()
|
||||
let weekItem = (weekThis + index + 1) % 7
|
||||
return html`
|
||||
<span class="star-weather-week-item">
|
||||
<span class="star-weather-week-one">${this.dataBoo() && weekMy[weekItem]}</span>
|
||||
<img class="star-weather-week-img" src="${weatherMy[this.dataBoo() && item.weather.labelEn]}"/>
|
||||
${this.type === 'type32' ? html`<span class="star-weather-week-min">${item.temperature.min}</span>` : ''}
|
||||
<span class="star-weather-week-max">${item.temperature.max || ''}</span>
|
||||
</span>
|
||||
<span class="star-weather-week-item">
|
||||
<span class="star-weather-week-one">
|
||||
${this.dataBoo() && weekMy[weekItem]}
|
||||
</span>
|
||||
<img
|
||||
class="star-weather-week-img"
|
||||
src="${weatherMy[this.dataBoo() && item.weather.labelEn]}"
|
||||
/>
|
||||
${this.type === 'type32'
|
||||
? html`
|
||||
<span class="star-weather-week-min">
|
||||
${item.temperature.min}
|
||||
</span>
|
||||
`
|
||||
: ''}
|
||||
<span class="star-weather-week-max">
|
||||
${item.temperature.max || ''}
|
||||
</span>
|
||||
</span>
|
||||
`
|
||||
}
|
||||
)}
|
||||
})}
|
||||
</div>
|
||||
`
|
||||
}else {
|
||||
return ''
|
||||
`
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
protected firstUpdated() {
|
||||
this.resize()
|
||||
window.addEventListener('resize', () => {
|
||||
|
|
@ -209,32 +247,17 @@ export class StarWeather extends LitElement {
|
|||
})
|
||||
}
|
||||
protected resize() {
|
||||
let parentHeight, parentWidth
|
||||
if (this.parentElement){
|
||||
parentHeight = this.parentElement.offsetHeight
|
||||
parentWidth = this.parentElement.offsetWidth
|
||||
}else if(this.parentNode instanceof ShadowRoot){
|
||||
parentHeight=(this.parentNode.host as HTMLElement).offsetHeight
|
||||
parentWidth=(this.parentNode.host as HTMLElement).offsetWidth
|
||||
}
|
||||
let height = parentHeight || 10
|
||||
let width = parentWidth || 10
|
||||
// console.log(height,width,'111111111')
|
||||
// this.style.setProperty('--autoWidth2--', width + 'px')
|
||||
// this.style.setProperty('--autoHeight2--', height + 'px')
|
||||
let proportion: any = typeMy[this.type]
|
||||
let width = this.starWeather?.clientWidth || 10
|
||||
let height = this.starWeather?.clientHeight || 10
|
||||
let proportion: any = height / width
|
||||
let minOne: any = minAll[this.type]
|
||||
this.style.setProperty('--autoWidth--', minOne + 'px')
|
||||
this.style.setProperty('--autoHeight--', minOne * proportion + 'px')
|
||||
if (height / width >= proportion) {
|
||||
this.style.setProperty('--autoScale--', width / minOne + '')
|
||||
} else {
|
||||
this.style.setProperty('--autoScale--', height / (minOne * proportion) + '')
|
||||
}
|
||||
this.style.setProperty('--autoScale--', width / minOne + '')
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-weather': StarWeather
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,24 +17,24 @@ export class PanelWeather extends LitElement {
|
|||
render() {
|
||||
return html`
|
||||
<div
|
||||
style="width: 100vw; height: 100vh;background: rgba(53,168,239,0.3);display:flex;justify-content: center; align-items: center;padding: 90px 0; flex-wrap: wrap"
|
||||
style="width: 100%; height: 100%;background: rgba(53,168,239,0.3); flex-wrap: wrap"
|
||||
>
|
||||
<div style="width: 10%;height:10%; border: 1px dashed #bd135f; ">
|
||||
<div style="width: 160px;height:160px; border: 1px dashed #bd135f; ">
|
||||
<star-weather id="type11" type="type11"></star-weather>
|
||||
</div>
|
||||
<div style="width: 20%;height:20%; border: 1px dashed #bd135f; ">
|
||||
<div style="width: 452px;height:160px; border: 1px dashed #bd135f; ">
|
||||
<star-weather id="type12" type="type12"></star-weather>
|
||||
</div>
|
||||
<div style="width: 10%;height:30%;border: 1px dashed #bd135f;">
|
||||
<div style="width:160px;height:380px;border: 1px dashed #bd135f;">
|
||||
<star-weather id="type21" type="type21"></star-weather>
|
||||
</div>
|
||||
<div style="width: 20%;height:30%; border: 1px dashed #e72517;">
|
||||
<div style="width: 452px;height:380px; border: 1px dashed #e72517;">
|
||||
<star-weather id="type22" type="type22"></star-weather>
|
||||
</div>
|
||||
<div style="width: 50%;height:40%; border: 1px dashed #e72517;">
|
||||
<div style="width: 744px;height:380px; border: 1px dashed #e72517;">
|
||||
<star-weather id="type23" type="type23"></star-weather>
|
||||
</div>
|
||||
<div style="width: 30%;height:50%; border: 1px dashed #e72517;">
|
||||
<div style="width: 452px;height:600px; border: 1px dashed #e72517;">
|
||||
<star-weather id="type32" type="type32"></star-weather>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export const weatherData = {
|
|||
humidity: '40%',
|
||||
airQuality: {
|
||||
label: '空气质量',
|
||||
value: '28',
|
||||
value: '26',
|
||||
type: '优',
|
||||
},
|
||||
somatosensoryTemperature: '32°C',
|
||||
|
|
|
|||
Loading…
Reference in New Issue