first commit
This commit is contained in:
douboer@gmail.com
154
calendar/src/components/WeatherGlyph.vue
Normal file
154
calendar/src/components/WeatherGlyph.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
type WeatherGlyphKind =
|
||||
| 'clear'
|
||||
| 'partly'
|
||||
| 'cloudy'
|
||||
| 'fog'
|
||||
| 'rain'
|
||||
| 'snow'
|
||||
| 'storm'
|
||||
| 'sunrise'
|
||||
| 'sunset'
|
||||
| 'air'
|
||||
| 'visibility'
|
||||
| 'humidity'
|
||||
| 'wind';
|
||||
|
||||
const props = defineProps<{
|
||||
kind: WeatherGlyphKind;
|
||||
large?: boolean;
|
||||
}>();
|
||||
|
||||
// 统一收细线宽和轮廓，让图标在墨水屏和小尺寸卡片里更精致、更稳定。
|
||||
const strokeWidth = computed(() => (props.large ? 1.95 : 1.8));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:class="['glyph', { 'glyph--large': props.large }]"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
:stroke-width="strokeWidth"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g v-if="props.kind === 'clear'">
|
||||
<circle cx="24" cy="24" r="6.5" />
|
||||
<line x1="24" y1="8.5" x2="24" y2="12.5" />
|
||||
<line x1="24" y1="35.5" x2="24" y2="39.5" />
|
||||
<line x1="8.5" y1="24" x2="12.5" y2="24" />
|
||||
<line x1="35.5" y1="24" x2="39.5" y2="24" />
|
||||
<line x1="13.1" y1="13.1" x2="15.9" y2="15.9" />
|
||||
<line x1="32.1" y1="32.1" x2="34.9" y2="34.9" />
|
||||
<line x1="13.1" y1="34.9" x2="15.9" y2="32.1" />
|
||||
<line x1="32.1" y1="15.9" x2="34.9" y2="13.1" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'partly'">
|
||||
<circle cx="16.5" cy="16.5" r="5" />
|
||||
<line x1="16.5" y1="7.5" x2="16.5" y2="10.5" />
|
||||
<line x1="9.2" y1="16.5" x2="12.2" y2="16.5" />
|
||||
<line x1="11.4" y1="11.4" x2="13.6" y2="13.6" />
|
||||
<line x1="21.6" y1="11.4" x2="19.4" y2="13.6" />
|
||||
<path d="M15.5 31.5h15.8a5.7 5.7 0 1 0-.5-11.3 8.4 8.4 0 0 0-15.3-1.7 6.2 6.2 0 0 0 0 13Z" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'cloudy'">
|
||||
<path d="M13 31.5h18.8a6.3 6.3 0 1 0-.6-12.5 9.4 9.4 0 0 0-17.2-2.1A7 7 0 0 0 13 31.5Z" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'fog'">
|
||||
<path d="M13 25.5h18.8a6.3 6.3 0 1 0-.6-12.5 9.4 9.4 0 0 0-17.2-2.1A7 7 0 0 0 13 25.5Z" />
|
||||
<path d="M11 31c2 0 3-1 5-1s3 1 5 1 3-1 5-1 3 1 5 1 3-1 5-1" />
|
||||
<path d="M14 36c1.7 0 2.6-.8 4.3-.8s2.6.8 4.3.8 2.6-.8 4.3-.8 2.6.8 4.3.8" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'rain'">
|
||||
<path d="M13 26.5h18.8a6.3 6.3 0 1 0-.6-12.5 9.4 9.4 0 0 0-17.2-2.1A7 7 0 0 0 13 26.5Z" />
|
||||
<path d="M16 31c0 1.9-1.2 3.4-2.7 3.4s-2.7-1.5-2.7-3.4c0-1.6 2.7-4.9 2.7-4.9S16 29.4 16 31Z" />
|
||||
<path d="M25.4 34.2c0 1.8-1.1 3.2-2.4 3.2s-2.4-1.4-2.4-3.2c0-1.5 2.4-4.5 2.4-4.5s2.4 3 2.4 4.5Z" />
|
||||
<path d="M34.8 31c0 1.9-1.2 3.4-2.7 3.4s-2.7-1.5-2.7-3.4c0-1.6 2.7-4.9 2.7-4.9s2.7 3.3 2.7 4.9Z" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'snow'">
|
||||
<path d="M13 26.5h18.8a6.3 6.3 0 1 0-.6-12.5 9.4 9.4 0 0 0-17.2-2.1A7 7 0 0 0 13 26.5Z" />
|
||||
<g>
|
||||
<line x1="16.5" y1="30.5" x2="16.5" y2="38.5" />
|
||||
<line x1="13" y1="34.5" x2="20" y2="34.5" />
|
||||
<line x1="13.8" y1="31.8" x2="19.2" y2="37.2" />
|
||||
<line x1="19.2" y1="31.8" x2="13.8" y2="37.2" />
|
||||
</g>
|
||||
<g>
|
||||
<line x1="31.5" y1="30.5" x2="31.5" y2="38.5" />
|
||||
<line x1="28" y1="34.5" x2="35" y2="34.5" />
|
||||
<line x1="28.8" y1="31.8" x2="34.2" y2="37.2" />
|
||||
<line x1="34.2" y1="31.8" x2="28.8" y2="37.2" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'storm'">
|
||||
<path d="M13 26.5h18.8a6.3 6.3 0 1 0-.6-12.5 9.4 9.4 0 0 0-17.2-2.1A7 7 0 0 0 13 26.5Z" />
|
||||
<path d="M24.5 29.5l-4 7h4.4l-2 8 7.6-10h-4.8l2.3-5Z" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'sunrise'">
|
||||
<line x1="10" y1="33" x2="38" y2="33" />
|
||||
<path d="M16 33a8 8 0 0 1 16 0" />
|
||||
<line x1="24" y1="10" x2="24" y2="16" />
|
||||
<polyline points="21,13 24,10 27,13" />
|
||||
<line x1="15" y1="26" x2="17.5" y2="23.5" />
|
||||
<line x1="33" y1="26" x2="30.5" y2="23.5" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'sunset'">
|
||||
<line x1="10" y1="33" x2="38" y2="33" />
|
||||
<path d="M16 33a8 8 0 0 1 16 0" />
|
||||
<line x1="24" y1="10" x2="24" y2="16" />
|
||||
<polyline points="21,13 24,16 27,13" />
|
||||
<line x1="15" y1="26" x2="17.5" y2="28.5" />
|
||||
<line x1="33" y1="26" x2="30.5" y2="28.5" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'air'">
|
||||
<path d="M10 17c4.2 0 4.2-3 8.4-3s4.2 3 8.4 3 4.2-3 8.4-3" />
|
||||
<path d="M13 24c3.8 0 3.8-2.5 7.6-2.5s3.8 2.5 7.6 2.5 3.8-2.5 7.6-2.5" />
|
||||
<path d="M10 31c4.2 0 4.2-3 8.4-3s4.2 3 8.4 3 4.2-3 8.4-3" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'visibility'">
|
||||
<path d="M6 24c3.1-4.8 8.8-8 18-8s14.9 3.2 18 8c-3.1 4.8-8.8 8-18 8S9.1 28.8 6 24Z" />
|
||||
<circle cx="24" cy="24" r="4.8" />
|
||||
<circle cx="24" cy="24" r="1.5" fill="currentColor" stroke="none" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'humidity'">
|
||||
<path d="M24 10C20.5 15 16 20.4 16 27a8 8 0 0 0 16 0c0-6.6-4.5-12-8-17Z" />
|
||||
<path d="M24 30.5a4.6 4.6 0 0 0 4.4-3.1" />
|
||||
</g>
|
||||
|
||||
<g v-else-if="props.kind === 'wind'">
|
||||
<path d="M10 17h17c3.3 0 5.5-2 5.5-4.8 0-2.4-1.9-4.2-4.4-4.2-2.1 0-3.7 1.2-4.4 3" />
|
||||
<path d="M10 25h22c2.8 0 4.8 1.8 4.8 4.2 0 2.3-1.8 4.1-4.1 4.1-1.9 0-3.4-.9-4.2-2.4" />
|
||||
<path d="M10 33h11c2.5 0 4.3 1.6 4.3 3.8 0 2.1-1.7 3.7-3.9 3.7-1.6 0-2.9-.7-3.7-2" />
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.glyph {
|
||||
width: 1.12rem;
|
||||
height: 1.12rem;
|
||||
flex-shrink: 0;
|
||||
color: currentColor;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.glyph--large {
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user