openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

TASK:110956 修改部分自适应样式

This commit is contained in:
lvxiangcong 2022-10-11 10:04:51 +08:00
parent 48911734ad
commit 7e2d5b56da
5 changed files with 74 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/weather/README.md
View File

@ -22,6 +22,7 @@ type="type22"的内容排布(从上至下)为包含地理位置、温度、天
另外，为了使用者更加方便，可通过 @query('#test')进行对其传值，如下：
`html demo <star-weather type="type22" id=test"></star-weather>`
### 3、自适应布局
天气组件整体布局设计为自适应布局，在测试时只需在外层容器中设置默认width和height，可自适应缩放显示天气组件。

21
src/components/weather/weather-style.ts
View File

@ -19,20 +19,20 @@ export const sharedStyles: CSSResult = css`
flex-direction: column;
}
.type11 {
width: 160px;
height: 160px;
width: 100%;
height: 100%;
}
.type12 {
width: 452px;
height: 160px;
width: 100%;
height: 100%;
}
.type21 {
width: 160px;
height: 380px;
width: 100%;
height: 100%;
}
.type22 {
width: 452px;
height: 380px;
width: 100%;
height: 100%;
}
/* .star-weather-top */
.star-weather-top {
@ -51,7 +51,8 @@ export const sharedStyles: CSSResult = css`
}
.type22 .star-weather-top {
width: 100%;
height: 50%;
height: 60%;
/* border:1px solid red; */
}
/* .star-weather-bottom */
.star-weather-bottom {
@ -83,6 +84,7 @@ export const sharedStyles: CSSResult = css`
.type22 .star-weather-img {
height: 90%;
margin-right: 30px;
/* border:1px solid red; */
}
.weather-img {
width: 100%;
@ -105,6 +107,7 @@ export const sharedStyles: CSSResult = css`
}
.type22 .star-weather-location-temperature {
height: 100%;
/* margin-top:10%; */
margin-left: 47px;
}
.star-weather-location {

47
src/components/weather/weather.ts
View File

@ -1,5 +1,5 @@
import {html, LitElement, CSSResultArray} from 'lit'
import {customElement, property} from 'lit/decorators.js'
import {customElement, property, query} from 'lit/decorators.js'
import {sharedStyles} from './weather-style'
import Sunny from './svg/Sunny.svg'
import Cloudy from './svg/Cloudy.svg'
@ -10,14 +10,22 @@ const weatherMy: Record<string, boolean> = {
Cloudy: Cloudy,
PartlyCloudy: PartlyCloudy,
}
const typeMy: Record<string, string> = {
const typeMy: Record<string, string> = { // height / width
type11: '1',
type12: '2',
type21: '3',
type22: '4',
type23: '5',
type32: '6',
type12: '0.4',
type21: '1.9',
type22: '0.8',
type23: '0.7',
type32: '1.6',
}
// const minAll: Record<string, string> = { // width
// type11: '100',
// type12: '400',
// type21: '200',
// type22: '500',
// type23: '600',
// type32: '1.6',
// }
@customElement('star-weather')
export class StarWeather extends LitElement {
public static override get styles(): CSSResultArray {
@ -26,6 +34,9 @@ export class StarWeather extends LitElement {
@property({type: String}) type = 'type11'
@property({type: Array}) data = Array()
@query('.star-weather-out')
starWeather: HTMLDivElement | undefined
render() {
return html`
<div class="star-weather ${this.type}">
@ -105,6 +116,28 @@ export class StarWeather extends LitElement {
return ''
}
}
// protected firstUpdated() {
// this.resize()
// window.addEventListener('resize', () => {
// this.resize()
// })
// }
// protected resize(){
// let height = this.starWeather?.clientHeight || 10
// let width = this.starWeather?.clientWidth || 10
// let proportion: any = typeMy[this.type]
// 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('--autoZoom--', width / minOne + '')
// }
// else {
// this.style.setProperty('--autoZoom--', height / (minOne * proportion) + '')
// }
// }
}
declare global {
interface HTMLElementTagNameMap {

18
src/test/panels/weather/data.ts
View File

@ -1,16 +1,16 @@
export const weatherData = [
{
index: 0,
index: 0, //
location: '长沙市',
temperature: {
min: '22℃',
max: '29℃',
},
week: '周一',
date: '25/9',
date: '25/9', //new date
weather: {
labelZh: '多云',
labelEn: 'PartlyCloudy',
labelEn: 'PartlyCloudy', //传 英文字符串
},
wind: {
label: '南风',
@ -28,7 +28,7 @@ export const weatherData = [
},
{
index: 1,
location: '北京',
location: '长沙市',
temperature: {
min: '22℃',
max: '20℃',
@ -55,7 +55,7 @@ export const weatherData = [
},
{
index: 2,
location: '北京',
location: '长沙市',
temperature: {
min: '22℃',
max: '22℃',
@ -82,7 +82,7 @@ export const weatherData = [
},
{
index: 3,
location: '北京',
location: '长沙市',
temperature: {
min: '22℃',
max: '23℃',
@ -109,7 +109,7 @@ export const weatherData = [
},
{
index: 4,
location: '北京',
location: '长沙市',
temperature: {
min: '22℃',
max: '24℃',
@ -136,7 +136,7 @@ export const weatherData = [
},
{
index: 5,
location: '北京',
location: '长沙市',
temperature: {
min: '22℃',
max: '25℃',
@ -163,7 +163,7 @@ export const weatherData = [
},
{
index: 6,
location: '北京',
location: '长沙市',
temperature: {
min: '22℃',
max: '26℃',

24
src/test/panels/weather/weather.ts
View File

@ -1,7 +1,7 @@
import {html, css, LitElement} from 'lit'
import {customElement,query, state} from 'lit/decorators.js'
import {customElement, query, state} from 'lit/decorators.js'
import {weatherData} from './data.js'
import { StarWeather } from '../../../components/weather/weather.js'
import {StarWeather} from '../../../components/weather/weather.js'
@customElement('panel-weather')
export class PanelWeather extends LitElement {
@state()
@ -12,25 +12,25 @@ export class PanelWeather extends LitElement {
render() {
return html`
<div
style="width: 100vw; height: 100vh; display: flex; background: rgba(53,168,239,0.3); padding: 90px 0"
>
<!-- <div
style="width: 200px; border: 1px dashed #bd135f; display: flex; align-items: center; justify-content: center"
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"
>
<div
style="width:160px;height:160px; border: 1px dashed #bd135f; "
>
<star-weather .data="${this.data}" type="type11"></star-weather>
</div>
<div
style="width: 500px; border: 1px dashed #bd135f; display: flex; align-items: center; justify-content: center"
style="width:452px;height:160px; border: 1px dashed #bd135f; "
>
<star-weather .data="${this.data}" type="type12"></star-weather>
</div>
<div
style="width: 300px; border: 1px dashed #bd135f; display: flex; align-items: center; justify-content: center"
style="width: 160px;height:380px;border: 1px dashed #bd135f;"
>
<star-weather .data="${this.data}" type="type21"></star-weather>
</div> -->
</div>
<div
style="width: 100%; border: 1px dashed #e72517; display: flex; align-items: center; justify-content: center"
style="width: 452px;height:380px; border: 1px dashed #e72517;"
>
<star-weather id="test1" type="type22"></star-weather>
</div>
@ -45,8 +45,8 @@ export class PanelWeather extends LitElement {
}
`
protected firstUpdated() {
// this.data = weatherData
this.weatherTest1.data=weatherData
this.data = weatherData
this.weatherTest1.data = weatherData
}
}
declare global {