Skip to content

H
huamu
Commit 0a901f49 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

add svg components

parent 3be9b06d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 620 additions and 569 deletions
package-lock.json
View file @ 0a901f49
This diff is collapsed.
package.json
View file @ 0a901f49
......@@ -11,6 +11,9 @@
"serve": "vite preview"
},
"dependencies": {
"@vicons/ionicons5": "^0.11.0",
"@yzfe/svgicon": "^1.1.0",
"@yzfe/vue3-svgicon": "^1.0.1",
"animate.css": "^4.1.1",
"axios": "^0.21.1",
"countup.js": "^2.0.8",
......@@ -18,6 +21,7 @@
"echarts": "^5.1.2",
"normalize.css": "^8.0.1",
"qs": "^6.10.1",
"vite-plugin-svgicon": "^1.0.0",
"vue": "^3.2.6",
"vuex": "^4.0.0"
},
......
src/assets/images/nav1.svg
View file @ 0a901f49
<svg width="22" height="20" viewBox="0 0 22 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0928956 0.579123C0.256754 0.225959 0.610688 0 1.00001 0H21C21.3893 0 21.7433 0.225959 21.9071 0.579123C22.071 0.932288 22.015 1.34845 21.7636 1.64573L14 10.8261V19C14 19.3466 13.8206 19.6684 13.5257 19.8507C13.2309 20.0329 12.8628 20.0494 12.5528 19.8944L8.5528 17.8944C8.21402 17.725 8.00001 17.3788 8.00001 17V10.8261L0.236443 1.64573C-0.0149541 1.34845 -0.0709627 0.932288 0.0928956 0.579123ZM3.15532 2L9.76358 9.81428C9.91625 9.9948 10 10.2236 10 10.46V16.382L12 17.382V10.46C12 10.2236 12.0838 9.9948 12.2364 9.81428L18.8447 2H3.15532Z" fill="black"/>
<svg width="22" height="20" viewBox="0 0 22 20" fill="#000" fill-opacity="0" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0928956 0.579123C0.256754 0.225959 0.610688 0 1.00001 0H21C21.3893 0 21.7433 0.225959 21.9071 0.579123C22.071 0.932288 22.015 1.34845 21.7636 1.64573L14 10.8261V19C14 19.3466 13.8206 19.6684 13.5257 19.8507C13.2309 20.0329 12.8628 20.0494 12.5528 19.8944L8.5528 17.8944C8.21402 17.725 8.00001 17.3788 8.00001 17V10.8261L0.236443 1.64573C-0.0149541 1.34845 -0.0709627 0.932288 0.0928956 0.579123ZM3.15532 2L9.76358 9.81428C9.91625 9.9948 10 10.2236 10 10.46V16.382L12 17.382V10.46C12 10.2236 12.0838 9.9948 12.2364 9.81428L18.8447 2H3.15532Z" fill="currentColor"/>
</svg>
src/assets/images/nav2.svg
View file @ 0a901f49
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="#000" fill-opacity="0" xmlns="http://www.w3.org/2000/svg">
<path d="M4 22V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 15C4 15 5 14 8 14C11 14 13 16 16 16C19 16 20 15 20 15V3C20 3 19 4 16 4C13 4 11 2 8 2C5 2 4 3 4 3V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
src/assets/images/nav4.svg
View file @ 0a901f49
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="24" height="24" viewBox="0 0 24 24" fill="#fff" fill-opacity="0" xmlns="http://www.w3.org/2000/svg">
<path d="M21 16V8.00002C20.9996 7.6493 20.9071 7.30483 20.7315 7.00119C20.556 6.69754 20.3037 6.44539 20 6.27002L13 2.27002C12.696 2.09449 12.3511 2.00208 12 2.00208C11.6489 2.00208 11.304 2.09449 11 2.27002L4 6.27002C3.69626 6.44539 3.44398 6.69754 3.26846 7.00119C3.09294 7.30483 3.00036 7.6493 3 8.00002V16C3.00036 16.3508 3.09294 16.6952 3.26846 16.9989C3.44398 17.3025 3.69626 17.5547 4 17.73L11 21.73C11.304 21.9056 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9056 13 21.73L20 17.73C20.3037 17.5547 20.556 17.3025 20.7315 16.9989C20.9071 16.6952 20.9996 16.3508 21 16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.27002 6.95996L12 12.01L20.73 6.95996" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 22.08V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
......
src/main.ts
View file @ 0a901f49
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from '@/components/MyComponent'
import { VueSvgIconPlugin } from '@yzfe/vue3-svgicon'
import '@yzfe/svgicon/lib/svgicon.css'
import {
create,
NSpace,
......@@ -40,4 +43,10 @@ const naive = create({
],
})
createApp(App).use(MyComponent).use(naive).mount('#app')
createApp(App)
.use(MyComponent)
.use(naive)
.use(VueSvgIconPlugin, {
tagName: 'svg-icon',
})
.mount('#app')
src/view/components/activity-modal.vue
View file @ 0a901f49
......@@ -2,7 +2,7 @@
<n-drawer
to="#main"
:show="show"
:on-update:show="close"
:on-update:show="closeDrawer"
width="2.8rem"
:mask-closable="false"
>
......@@ -33,7 +33,18 @@
<p>{{ item.title }}</p>
<span>
地图显示
<n-switch v-model:value="item.onMap" size="small" />
<n-switch v-model:value="item.onMap" size="small">
<template #checked>
<n-icon size=".1rem">
<Checkmark />
</n-icon>
</template>
<template #unchecked>
<n-icon size=".1rem">
<Close />
</n-icon>
</template>
</n-switch>
</span>
</div>
<div class="sum">
......@@ -60,8 +71,9 @@
<script lang="ts" setup>
import store from '@/store'
import { computed, ref } from 'vue'
import { Checkmark, Close } from '@vicons/ionicons5'
const show = computed(() => store.state.showActivityModal)
const close = () => store.commit('SET_ACTIVITY_MODAL', false)
const closeDrawer = () => store.commit('SET_ACTIVITY_MODAL', false)
const list = ref([
{ title: '支部党员大会', count: 35, people: 890, ratio: 50, onMap: false },
{ title: '支部委员会', count: 35, people: 890, ratio: 50, onMap: false },
......
src/view/components/filter-modal.vue
View file @ 0a901f49
This diff is collapsed.
src/view/components/list-modal.vue
View file @ 0a901f49
......@@ -5,29 +5,8 @@
<div v-for="(item, i) in list" :key="i" class="item">
<p>{{ item.name }}</p>
<span>{{ item.address }}</span>
<n-icon class="icon" size=".14rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
<n-icon class="icon" size=".12rem" color="#dd505E">
<ArrowForward />
</n-icon>
</div>
</div>
......@@ -35,6 +14,7 @@
</template>
<script lang="ts" setup>
import { ArrowForward } from '@vicons/ionicons5'
const list = [
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
{ name: '某某社区党组织', address: '上海市浦东新区327号' },
......
src/view/components/nav-bar.vue
View file @ 0a901f49
......@@ -28,20 +28,7 @@
size=".12rem"
@click="onClick('filter')"
>
<svg
width="22"
height="20"
viewBox="0 0 22 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.0928956 0.579123C0.256754 0.225959 0.610688 0 1.00001 0H21C21.3893 0 21.7433 0.225959 21.9071 0.579123C22.071 0.932288 22.015 1.34845 21.7636 1.64573L14 10.8261V19C14 19.3466 13.8206 19.6684 13.5257 19.8507C13.2309 20.0329 12.8628 20.0494 12.5528 19.8944L8.5528 17.8944C8.21402 17.725 8.00001 17.3788 8.00001 17V10.8261L0.236443 1.64573C-0.0149541 1.34845 -0.0709627 0.932288 0.0928956 0.579123ZM3.15532 2L9.76358 9.81428C9.91625 9.9948 10 10.2236 10 10.46V16.382L12 17.382V10.46C12 10.2236 12.0838 9.9948 12.2364 9.81428L18.8447 2H3.15532Z"
fill="currentColor"
/>
</svg>
<svg-icon :data="nav1" />
</n-icon>
<n-icon
class="btn"
......@@ -49,89 +36,18 @@
size=".12rem"
@click="onClick('activity')"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 22V15"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M4 15C4 15 5 14 8 14C11 14 13 16 16 16C19 16 20 15 20 15V3C20 3 19 4 16 4C13 4 11 2 8 2C5 2 4 3 4 3V15Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg-icon :data="nav2" original />
</n-icon>
<n-icon class="btn" size=".12rem">
<svg
width="20"
height="22"
viewBox="0 0 20 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.800781 2.40017C0.800781 1.51652 1.51712 0.800171 2.40078 0.800171H17.8008C18.6844 0.800171 19.4008 1.51652 19.4008 2.40017V8.80017C19.4008 9.68383 18.6844 10.4002 17.8008 10.4002H6.80039V15.5006H9.80078V14.9998C9.80078 14.1161 10.5171 13.3998 11.4008 13.3998H17.8008C18.6844 13.3998 19.4008 14.1161 19.4008 14.9998V19.5998C19.4008 20.4834 18.6844 21.1998 17.8008 21.1998H11.4008C10.5171 21.1998 9.80078 20.4834 9.80078 19.5998V17.9006H5.60039C4.93765 17.9006 4.40039 17.3633 4.40039 16.7006V10.4002H2.40078C1.51712 10.4002 0.800781 9.68383 0.800781 8.80017V2.40017ZM3.20078 3.20017V8.00017H17.0008V3.20017H3.20078ZM12.2008 15.7998V18.7998H17.0008V15.7998H12.2008Z"
fill="currentColor"
/>
</svg>
<svg-icon :data="nav3" original />
</n-icon>
<n-dropdown :options="options" show-arrow>
<div class="align-center">
<n-icon class="btn" size=".12rem" style="margin-right: 0">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 16V8.00002C20.9996 7.6493 20.9071 7.30483 20.7315 7.00119C20.556 6.69754 20.3037 6.44539 20 6.27002L13 2.27002C12.696 2.09449 12.3511 2.00208 12 2.00208C11.6489 2.00208 11.304 2.09449 11 2.27002L4 6.27002C3.69626 6.44539 3.44398 6.69754 3.26846 7.00119C3.09294 7.30483 3.00036 7.6493 3 8.00002V16C3.00036 16.3508 3.09294 16.6952 3.26846 16.9989C3.44398 17.3025 3.69626 17.5547 4 17.73L11 21.73C11.304 21.9056 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9056 13 21.73L20 17.73C20.3037 17.5547 20.556 17.3025 20.7315 16.9989C20.9071 16.6952 20.9996 16.3508 21 16Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M3.27002 6.95996L12 12.01L20.73 6.95996"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 22.08V12"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg-icon :data="nav4" original />
</n-icon>
<n-icon size=".1rem">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
fill="currentColor"
></path>
</svg>
<n-icon size=".08rem">
<CaretDown />
</n-icon>
</div>
</n-dropdown>
......@@ -140,52 +56,9 @@
<div class="align-center menu-btn">
<n-icon
size=".12rem"
style="margin-right: 0.05rem; margin-bottom: 0.01rem"
style="margin-right: 0.05rem; margin-bottom: 0.03rem"
>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.74998 0.553345H1.50146C0.94918 0.553345 0.501465 1.00106 0.501465 1.55334V3.80186C0.501465 4.35414 0.94918 4.80186 1.50146 4.80186H3.74998C4.30226 4.80186 4.74998 4.35414 4.74998 3.80186V1.55334C4.74998 1.00106 4.30226 0.553345 3.74998 0.553345Z"
fill="currentColor"
/>
<path
d="M10.125 0.553345H7.87646C7.32418 0.553345 6.87646 1.00106 6.87646 1.55334V3.80186C6.87646 4.35414 7.32418 4.80186 7.87646 4.80186H10.125C10.6773 4.80186 11.125 4.35414 11.125 3.80186V1.55334C11.125 1.00106 10.6773 0.553345 10.125 0.553345Z"
fill="currentColor"
/>
<path
d="M7.87646 6.87576H10.125C10.6773 6.87576 11.125 7.32347 11.125 7.87576V10.1243C11.125 10.6766 10.6773 11.1243 10.125 11.1243H7.87646C7.32418 11.1243 6.87646 10.6766 6.87646 10.1243V7.87576C6.87646 7.32347 7.32418 6.87576 7.87646 6.87576Z"
fill="currentColor"
/>
<path
d="M16.5 0.553345H14.2515C13.6992 0.553345 13.2515 1.00106 13.2515 1.55334V3.80186C13.2515 4.35414 13.6992 4.80186 14.2515 4.80186H16.5C17.0523 4.80186 17.5 4.35414 17.5 3.80186V1.55334C17.5 1.00106 17.0523 0.553345 16.5 0.553345Z"
fill="currentColor"
/>
<path
d="M14.2515 6.87576H16.5C17.0523 6.87576 17.5 7.32347 17.5 7.87576V10.1243C17.5 10.6766 17.0523 11.1243 16.5 11.1243H14.2515C13.6992 11.1243 13.2515 10.6766 13.2515 10.1243V7.87576C13.2515 7.32347 13.6992 6.87576 14.2515 6.87576Z"
fill="currentColor"
/>
<path
d="M3.74998 6.87576H1.50146C0.94918 6.87576 0.501465 7.32347 0.501465 7.87576V10.1243C0.501465 10.6766 0.94918 11.1243 1.50146 11.1243H3.74998C4.30226 11.1243 4.74998 10.6766 4.74998 10.1243V7.87576C4.74998 7.32347 4.30226 6.87576 3.74998 6.87576Z"
fill="currentColor"
/>
<path
d="M7.87646 13.1982H10.125C10.6773 13.1982 11.125 13.6459 11.125 14.1982V16.4467C11.125 16.999 10.6773 17.4467 10.125 17.4467H7.87646C7.32418 17.4467 6.87646 16.999 6.87646 16.4467V14.1982C6.87646 13.6459 7.32418 13.1982 7.87646 13.1982Z"
fill="currentColor"
/>
<path
d="M16.5 13.1982H14.2515C13.6992 13.1982 13.2515 13.6459 13.2515 14.1982V16.4467C13.2515 16.999 13.6992 17.4467 14.2515 17.4467H16.5C17.0523 17.4467 17.5 16.999 17.5 16.4467V14.1982C17.5 13.6459 17.0523 13.1982 16.5 13.1982Z"
fill="currentColor"
/>
<path
d="M1.50146 13.1982H3.74998C4.30226 13.1982 4.74998 13.6459 4.74998 14.1982V16.4467C4.74998 16.999 4.30226 17.4467 3.74998 17.4467H1.50146C0.94918 17.4467 0.501465 16.999 0.501465 16.4467V14.1982C0.501465 13.6459 0.94918 13.1982 1.50146 13.1982Z"
fill="currentColor"
/>
</svg>
<svg-icon :data="nav5" original />
</n-icon>
选择菜单
</div>
......@@ -205,6 +78,12 @@ import SearchModal from './search-modal.vue'
import FilterModal from './filter-modal.vue'
import ActivityModal from './activity-modal.vue'
import store from '@/store'
import { CaretDown } from '@vicons/ionicons5'
import nav1 from '@images/nav1.svg'
import nav2 from '@images/nav2.svg'
import nav3 from '@images/nav3.svg'
import nav4 from '@images/nav4.svg'
import nav5 from '@images/nav5.svg'
const showFilterModal = computed(() => store.state.showFilterModal)
const showActivityModal = computed(() => store.state.showActivityModal)
......
src/view/components/search-modal.vue
View file @ 0a901f49
......@@ -23,28 +23,7 @@
<p>{{ item.name }}</p>
<span>{{ item.address }}</span>
<n-icon class="icon" size=".14rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
<ArrowForward />
</n-icon>
</div>
<n-button
......@@ -72,28 +51,7 @@
<p>{{ item.name }}</p>
<span>{{ item.address }}</span>
<n-icon class="icon" size=".14rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
<ArrowForward />
</n-icon>
</div>
<n-button
......@@ -118,28 +76,7 @@
<p>{{ item.name }}</p>
<span>{{ item.address }}</span>
<n-icon class="icon" size=".14rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
<ArrowForward />
</n-icon>
</div>
</div>
......@@ -151,28 +88,7 @@
<p>{{ item.name }}</p>
<span>{{ item.address }}</span>
<n-icon class="icon" size=".14rem" color="#dd505E">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M268 112l144 144l-144 144"
></path>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="48"
d="M392 256H100"
></path>
</svg>
<ArrowForward />
</n-icon>
</div>
</div>
......@@ -185,6 +101,7 @@
<script lang="ts" setup>
import { computed, PropType, ref } from 'vue'
import { ArrowForward } from '@vicons/ionicons5'
const props = defineProps({
data: {
type: Object as PropType<{ organization: []; member: [] }>,
......
src/view/main.vue
View file @ 0a901f49
......@@ -3,18 +3,7 @@
<BasicInfo :visible="showTag" />
<div class="reset">
<n-icon class="icon" size=".14rem">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 6.66667C9.05333 6.66667 6.66667 9.05333 6.66667 12C6.66667 14.9467 9.05333 17.3333 12 17.3333C14.9467 17.3333 17.3333 14.9467 17.3333 12C17.3333 9.05333 14.9467 6.66667 12 6.66667ZM2.66667 16H0V21.3333C0 22.8 1.2 24 2.66667 24H8V21.3333H2.66667V16ZM2.66667 2.66667H8V0H2.66667C1.2 0 0 1.2 0 2.66667V8H2.66667V2.66667ZM21.3333 0H16V2.66667H21.3333V8H24V2.66667C24 1.2 22.8 0 21.3333 0ZM21.3333 21.3333H16V24H21.3333C22.8 24 24 22.8 24 21.3333V16H21.3333V21.3333Z"
fill="currentColor"
/>
</svg>
<svg-icon :data="reset" original />
</n-icon>
</div>
<InforModal class="info-modal" />
......@@ -27,6 +16,7 @@ import NavBar from './components/nav-bar.vue'
import BasicInfo from './components/basic-info.vue'
import InforModal from './components/info-modal.vue'
import ListModal from './components/list-modal.vue'
import reset from '@images/reset.svg'
const showTag = ref(true)
</script>
......
vite.config.js
View file @ 0a901f49
......@@ -2,10 +2,17 @@ import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path'
import svgicon from 'vite-plugin-svgicon'
export default defineConfig({
base: './',
plugins: [vue(), vueJsx()],
plugins: [
vue(),
vueJsx(),
svgicon({
include: ['**/images/**/*.svg'],
}),
],
resolve: {
alias: {
'@': resolve(__dirname, './src'),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment