Merge pull request #74 in YR/star-web-components from feature-component-weather to master
* commit '0d5e6e6b7e7df3e25541a6f65181172af8c5725b': TASK:110956 修改自适应显示样式问题 TASK:110956 修改自适应样式和weatherData数据格式以及传值方式 TASK:110956 修改部分自适应样式 TASK:110956 添加配置文件和readme等信息,修改部分自适应样式 TASK:110956 StarWebComponents开发-weather
This commit is contained in:
汪昌棋
commit
81d772ded8
|
|
@ -0,0 +1,39 @@
|
|||
# star-weather
|
||||
|
||||
星光 Web 组件——天气组件：weather组件介绍（10 月 08 日)
|
||||
|
||||
## 介绍
|
||||
|
||||
star-weather 组件主要是用来显示当前天气状况和预测1周内天气详情的组件
|
||||
star-weather 属性：
|
||||
|
||||
### 1、type 属性
|
||||
天气风格样式类型,type一共包含6种类型，分别为type11、type12、type21、type22、type23和type32，其中
|
||||
type="type11"的内容排布为只包含天气图标的样式，
|
||||
type="type12"的内容排布(从左向右)为包含地理位置信息、温度和对应的天气图标，
|
||||
type="type21"的内容排布(从上至下)为包含天气图标，地理位置和温度信息，
|
||||
type="type22"的内容排布(从上至下)为包含地理位置、温度、天气图标、空气质量、体感温度、湿度、风级、能见度、紫外线等详细信息。
|
||||
`html demo <star-weather type="type22"></star-weather> `
|
||||
|
||||
### 2、data 属性
|
||||
|
||||
天气详细信息，其中包含地理位置、温度、日期、天气情况、风级、湿度、空气质量、体感温度、能见度、紫外线等具体信息
|
||||
`html demo <star-weather type="type22" .data="${this.data}"></star-weather> `
|
||||
### 3、自适应布局
|
||||
天气组件整体布局设计为自适应布局,可自适应缩放显示天气组件。
|
||||
### 4、weatherData数据格式说明
|
||||
weatherData = {
|
||||
location: "", //位置信息
|
||||
weatherInfo: [ //天气详情信息，包含天气情况、风级、湿度、空气质量、体感温度、能见度、紫外线等详情信息
|
||||
{
|
||||
date: new Date(), 日期
|
||||
……
|
||||
},
|
||||
{
|
||||
date: new Date(),
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "@star-web-components/weather",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./index": {
|
||||
"default": "./index.js"
|
||||
},
|
||||
"./weather.js": {
|
||||
"default": "./weather.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_2914_176526)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3043 38H32.8696C37.3571 38 41 34.3071 41 29.7451C41 25.3341 37.5789 21.7277 33.2814 21.5117C31.9404 15.4919 26.6398 11 20.3043 11C12.9553 11 7 17.0468 7 24.4973C7 31.4457 12.1739 37.1686 18.8261 37.919L20.3043 38Z" fill="url(#paint0_linear_2914_176526)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2914_176526" x="3" y="9" width="42" height="35" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2914_176526"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2914_176526" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_2914_176526" x1="48.0217" y1="20.8478" x2="23.747" y2="2.34606" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFEDBA"/>
|
||||
<stop offset="1" stop-color="#FFFCF2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_1658_81628)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M119 53.9935C119 31.9083 101.091 14 78.9935 14C56.9093 14 39 31.9083 39 53.9935C39 76.0917 56.9093 94 78.9935 94C101.091 94 119 76.0917 119 53.9935Z" fill="url(#paint0_linear_1658_81628)"/>
|
||||
<path d="M78.9935 14.5C100.815 14.5 118.5 32.1846 118.5 53.9935C118.5 75.8155 100.815 93.5 78.9935 93.5C57.1855 93.5 39.5 75.8156 39.5 53.9935C39.5 32.1845 57.1854 14.5 78.9935 14.5Z" stroke="#F2F2F2" stroke-opacity="0.9"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_1658_81628)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.2174 114H77.4783C89.3571 114 99 104.426 99 92.5983C99 81.1626 89.9441 71.8124 78.5683 71.2525C75.0186 55.6457 60.9876 44 44.2174 44C24.764 44 9 59.6769 9 78.993C9 97.0074 22.6957 111.844 40.3043 113.79L44.2174 114Z" fill="url(#paint1_linear_1658_81628)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_1658_81628" x="31" y="6" width="96" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1658_81628"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1658_81628" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_1658_81628" x="5" y="42" width="98" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1658_81628"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1658_81628" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_1658_81628" x1="42.5" y1="46.5" x2="91.7273" y2="106.727" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0028" stop-color="#DDDBD9"/>
|
||||
<stop offset="1" stop-color="#989CA5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1658_81628" x1="117.587" y1="69.5314" x2="54.3175" y2="20.2954" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C7C9D0"/>
|
||||
<stop offset="1" stop-color="#F4F4F3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_2914_176524)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3043 37H32.8696C37.3571 37 41 33.3071 41 28.7451C41 24.3341 37.5789 20.7277 33.2814 20.5117C31.9404 14.4919 26.6398 10 20.3043 10C12.9553 10 7 16.0468 7 23.4973C7 30.4457 12.1739 36.1686 18.8261 36.919L20.3043 37Z" fill="url(#paint0_linear_2914_176524)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2914_176524" x="3" y="8" width="42" height="35" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2914_176524"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2914_176524" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_2914_176524" x1="48.0217" y1="19.8478" x2="23.747" y2="1.34606" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#80848D"/>
|
||||
<stop offset="1" stop-color="#BCC2CC"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_1425_53262)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M119 55.9935C119 33.9083 101.091 16 78.9935 16C56.9093 16 39 33.9083 39 55.9935C39 78.0917 56.9093 96 78.9935 96C101.091 96 119 78.0917 119 55.9935Z" fill="url(#paint0_linear_1425_53262)"/>
|
||||
<path d="M78.9935 16.5C100.815 16.5 118.5 34.1846 118.5 55.9935C118.5 77.8155 100.815 95.5 78.9935 95.5C57.1855 95.5 39.5 77.8156 39.5 55.9935C39.5 34.1845 57.1854 16.5 78.9935 16.5Z" stroke="#FFDD80" stroke-opacity="0.9"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_1425_53262)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.2174 116H77.4783C89.3571 116 99 106.426 99 94.5983C99 83.1626 89.9441 73.8124 78.5683 73.2525C75.0186 57.6457 60.9876 46 44.2174 46C24.764 46 9 61.6769 9 80.993C9 99.0074 22.6957 113.844 40.3043 115.79L44.2174 116Z" fill="url(#paint1_linear_1425_53262)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_1425_53262" x="31" y="8" width="96" height="96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.827451 0 0 0 0 0.309804 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1425_53262"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1425_53262" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_1425_53262" x="5" y="44" width="98" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1425_53262"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1425_53262" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_1425_53262" x1="29.9091" y1="61.4545" x2="91.7273" y2="108.727" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0028" stop-color="#FFC338"/>
|
||||
<stop offset="1" stop-color="#FF9C12"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1425_53262" x1="117.587" y1="71.5314" x2="54.3175" y2="22.2954" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFEDBA"/>
|
||||
<stop offset="1" stop-color="#FFFCF2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="54" height="51" viewBox="0 0 54 51" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_2914_176531)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M46 22.9976C46 14.7156 39.284 8 30.9976 8C22.716 8 16 14.7156 16 22.9976C16 31.2844 22.716 38 30.9976 38C39.284 38 46 31.2844 46 22.9976Z" fill="url(#paint0_linear_2914_176531)"/>
|
||||
<path d="M30.9976 8.5C39.008 8.5 45.5 14.9919 45.5 22.9976C45.5 31.0082 39.0079 37.5 30.9976 37.5C22.9922 37.5 16.5 31.0083 16.5 22.9976C16.5 14.9918 22.9921 8.5 30.9976 8.5Z" stroke="#FFDD80" stroke-opacity="0.9"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_2914_176531)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3043 45H29.8696C34.3571 45 38 41.4439 38 37.0508C38 32.8032 34.5789 29.3303 30.2814 29.1224C28.9404 23.3255 23.6398 19 17.3043 19C9.95528 19 4 24.8228 4 31.9974C4 38.6885 9.17391 44.1994 15.8261 44.922L17.3043 45Z" fill="url(#paint1_linear_2914_176531)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2914_176531" x="8" y="0" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.827451 0 0 0 0 0.309804 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2914_176531"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2914_176531" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_2914_176531" x="0" y="17" width="42" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2914_176531"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2914_176531" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_2914_176531" x1="12.5909" y1="25.0455" x2="35.7727" y2="42.7727" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0028" stop-color="#FFC338"/>
|
||||
<stop offset="1" stop-color="#FF9C12"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_2914_176531" x1="45.0217" y1="28.4831" x2="21.4268" y2="9.80775" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFEDBA"/>
|
||||
<stop offset="1" stop-color="#FFFCF2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,21 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_2914_176529)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M40 23.9974C40 15.1633 32.8363 8 23.9974 8C15.1637 8 8 15.1633 8 23.9974C8 32.8367 15.1637 40 23.9974 40C32.8363 40 40 32.8367 40 23.9974Z" fill="url(#paint0_linear_2914_176529)"/>
|
||||
<path d="M23.9974 8.5C32.5603 8.5 39.5 15.4396 39.5 23.9974C39.5 32.5605 32.5602 39.5 23.9974 39.5C15.44 39.5 8.5 32.5606 8.5 23.9974C8.5 15.4395 15.4398 8.5 23.9974 8.5Z" stroke="#FFDD80" stroke-opacity="0.9"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2914_176529" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.827451 0 0 0 0 0.309804 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2914_176529"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2914_176529" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_2914_176529" x1="4.36364" y1="26.1818" x2="29.0909" y2="45.0909" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.0028" stop-color="#FFC338"/>
|
||||
<stop offset="1" stop-color="#FF9C12"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,148 @@
|
|||
import {css, CSSResult} from 'lit'
|
||||
export const sharedStyles: CSSResult = css`
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.star-weather-main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 背景框 */
|
||||
.star-weather {
|
||||
width: var(--autoWidth--);
|
||||
min-width: var(--autoWidth--);
|
||||
height: var(--autoHeight--);
|
||||
min-height: var(--autoHeight--);
|
||||
transform: scale(var(--autoScale--));
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
137.64deg,
|
||||
#f5f0f5 0%,
|
||||
#fafafa 20.46%,
|
||||
#d5daf2 90.45%
|
||||
);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.star-weather * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* .star-weather-top */
|
||||
.star-weather-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.type12 .star-weather-top {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.type21 .star-weather-top {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
.type22 .star-weather-top {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
/* border:1px solid red; */
|
||||
}
|
||||
/* .star-weather-bottom */
|
||||
.star-weather-bottom {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.type22 .star-weather-bottom {
|
||||
height: 50%;
|
||||
}
|
||||
/* 天气图标 */
|
||||
.star-weather-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
.type11 .star-weather-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.type12 .star-weather-img {
|
||||
height: 100%;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.type21 .star-weather-img {
|
||||
width: 100%;
|
||||
}
|
||||
.type22 .star-weather-img {
|
||||
height: 90%;
|
||||
margin-right: 30px;
|
||||
/* border:1px solid red; */
|
||||
}
|
||||
.weather-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 位置温度()*/
|
||||
.star-weather-location-temperature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.type12 .star-weather-location-temperature {
|
||||
height: 100%;
|
||||
margin-left: 47px;
|
||||
}
|
||||
.type21 .star-weather-location-temperature {
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.type22 .star-weather-location-temperature {
|
||||
height: 100%;
|
||||
/* margin-top:10%; */
|
||||
margin-left: 47px;
|
||||
}
|
||||
.star-weather-location {
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
font-size: 22px;
|
||||
color: rgba(38, 38, 38, 0.45);
|
||||
}
|
||||
.type21 .star-weather-location {
|
||||
text-align: center;
|
||||
}
|
||||
.star-weather-temperature {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/* detailType() */
|
||||
.detail-today-item {
|
||||
height: 50%;
|
||||
width: 31%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 47px;
|
||||
}
|
||||
.detail-today-item-top {
|
||||
font-size: 16px;
|
||||
color: rgba(38, 38, 38, 0.45);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.detail-today-item-bottom {
|
||||
font-size: 26px;
|
||||
text-align: left;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
`
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
import {html, LitElement, CSSResultArray} from 'lit'
|
||||
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'
|
||||
import Noload from './svg/Noload.svg'
|
||||
import PartlyCloudy from './svg/Partly Cloudy.svg'
|
||||
const weatherMy: Record<string, boolean> = {
|
||||
Sunny: Sunny,
|
||||
Cloudy: Cloudy,
|
||||
PartlyCloudy: PartlyCloudy,
|
||||
}
|
||||
const typeMy: Record<string, string> = {
|
||||
// height / width
|
||||
type11: '1',
|
||||
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: '600',
|
||||
}
|
||||
@customElement('star-weather')
|
||||
export class StarWeather extends LitElement {
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedStyles]
|
||||
}
|
||||
@property({type: String}) type = 'type11'
|
||||
@property({type: Object}) data = Object()
|
||||
|
||||
@query('.star-weather-main')
|
||||
starWeather: HTMLDivElement | undefined
|
||||
|
||||
dataBoo() {
|
||||
return !!Object.keys(this.data).length
|
||||
}
|
||||
render() {
|
||||
return html`
|
||||
<div class="star-weather-main">
|
||||
<div class="star-weather ${this.type}">
|
||||
<div class="star-weather-top">
|
||||
${this.locationType()} ${this.weatherType()}
|
||||
</div>
|
||||
<div class="star-weather-bottom">${this.detailType()}</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
weatherType() {
|
||||
return html`
|
||||
<div class="star-weather-img">
|
||||
<img
|
||||
class="weather-img"
|
||||
src="${weatherMy[
|
||||
this.dataBoo() && this.data.weatherInfo[0]?.weather?.labelEn] || Noload}"
|
||||
/>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
locationType() {
|
||||
if (this.type !== 'type11' && typeMy[this.type]) {
|
||||
return html`
|
||||
<div class="star-weather-location-temperature">
|
||||
<div class="star-weather-location-temperature-main">
|
||||
<div class="star-weather-location">
|
||||
${(this.dataBoo() && this.data.location) || ''}
|
||||
</div>
|
||||
<div class="star-weather-temperature">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.temperature?.max) || ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
detailType() {
|
||||
if (this.type === 'type22') {
|
||||
return html`
|
||||
<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) || ''}
|
||||
</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) || ''}
|
||||
</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]?.humidity) || ''}
|
||||
</span>
|
||||
</span>
|
||||
<span class="detail-today-item">
|
||||
<span class="detail-today-item-top">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.label) || '风向'}
|
||||
</span>
|
||||
<span class="detail-today-item-bottom">
|
||||
${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.value) || ''}
|
||||
</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]?.visibility) || ''}
|
||||
</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]?.ultravioletRys) || ''}
|
||||
</span>
|
||||
</span>
|
||||
`
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
protected firstUpdated() {
|
||||
this.resize()
|
||||
window.addEventListener('resize', () => {
|
||||
this.resize()
|
||||
})
|
||||
}
|
||||
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 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) + '')
|
||||
}
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'star-weather': StarWeather
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ import './components/radio/radio-group'
|
|||
import './components/radio/radio'
|
||||
import './components/confirm/confirm'
|
||||
import './components/clock/clock'
|
||||
import './components/weather/weather'
|
||||
import './components/toast/toast'
|
||||
import './components/picker/picker'
|
||||
import './components/overflowmenu/overflowmenu'
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import './container/container'
|
|||
import './radio/radio'
|
||||
import './confirm/confirm'
|
||||
import './clock/clock'
|
||||
import './weather/weather'
|
||||
import './overflowmenu/overflowmenu'
|
||||
import './switch/switch'
|
||||
import './slider/slider'
|
||||
|
|
@ -317,6 +318,14 @@ export class PanelRoot extends LitElement {
|
|||
iconcolor="green"
|
||||
href="#clock"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="天气"
|
||||
icon="moon"
|
||||
iconcolor="green"
|
||||
href="#weather"
|
||||
></star-li>
|
||||
</star-ul>
|
||||
|
||||
<star-ul type=${UlType.ONLY_HEADER} title="手势">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
import {html, css, LitElement} from 'lit'
|
||||
import {customElement, query, state} from 'lit/decorators.js'
|
||||
import {StarWeather} from '../../../components/weather/weather.js'
|
||||
import {weatherData} from './weatherData.js'
|
||||
@customElement('panel-weather')
|
||||
export class PanelWeather extends LitElement {
|
||||
@state()
|
||||
foo = ''
|
||||
@state()
|
||||
data = Array()
|
||||
@query('#type11') weatherDemo1!: StarWeather
|
||||
@query('#type12') weatherDemo2!: StarWeather
|
||||
@query('#type21') weatherDemo3!: StarWeather
|
||||
@query('#type22') weatherDemo4!: StarWeather
|
||||
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"
|
||||
>
|
||||
<!-- <div style="width: 20%;height:20%; border: 1px dashed #bd135f; ">
|
||||
<star-weather id="type11" type="type11"></star-weather>
|
||||
</div>
|
||||
<div style="width: 25%;height:50%; border: 1px dashed #bd135f; ">
|
||||
<star-weather id="type12" type="type12"></star-weather>
|
||||
</div>
|
||||
<div style="width: 25%;height:50%;border: 1px dashed #bd135f;">
|
||||
<star-weather id="type21" type="type21"></star-weather>
|
||||
</div> -->
|
||||
<!-- <div style="width: 50%;height:50%; border: 1px dashed #e72517;"> -->
|
||||
<star-weather id="type22" type="type22"></star-weather>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
`
|
||||
}
|
||||
static styles = css`
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`
|
||||
protected firstUpdated() {
|
||||
// this.weatherDemo1.data = weatherData
|
||||
// this.weatherDemo2.data = weatherData
|
||||
// this.weatherDemo3.data = weatherData
|
||||
this.weatherDemo4.data = weatherData
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-weather': PanelWeather
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
export const weatherData = {
|
||||
location: '长沙市',
|
||||
weatherInfo: [
|
||||
{
|
||||
date: new Date(),
|
||||
temperature: {
|
||||
min: '22℃',
|
||||
max: '29℃',
|
||||
},
|
||||
weather: {
|
||||
labelZh: '多云',
|
||||
labelEn: 'PartlyCloudy',
|
||||
},
|
||||
wind: {
|
||||
label: '南风',
|
||||
value: '6级',
|
||||
},
|
||||
humidity: '40%',
|
||||
airQuality: {
|
||||
label: '空气质量',
|
||||
value: '28',
|
||||
type: '优',
|
||||
},
|
||||
somatosensoryTemperature: '32°C',
|
||||
visibility: '33km',
|
||||
ultravioletRys: '强',
|
||||
},
|
||||
{},
|
||||
],
|
||||
}
|
||||
Loading…
Reference in New Issue