struct-modal

src/App.vue

@@ -97,6 +97,20 @@ const themeOverrides: GlobalThemeOverrides = {
     labelTextColor: '#6E798C',
     labelFontSizeTopSmall: '.09rem',
   },
+  Menu: {
+    borderRadius: '.06rem',
+    fontSize: '.13rem',
+    itemIconColor: '#b9bdc5',
+    itemTextColor: 'rgba(0,0,0,0.5)',
+    arrowColor: 'rgba(0,0,0,0.5)',
+    itemTextColorHover: '#dd505E',
+    itemIconColorHover: '#dd505E',
+    arrowColorHover: '#dd505E',
+    itemColorActive: '#fcf4f5',
+  },
+  DataTable: {
+    fontSizeSmall: '.01rem',
+  },
 }
 </script>
 

src/assets/images/party.svg

+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00648 0.00306995C13.6509 1.74489 16.4692 7.31164 14.0552 11.8226L8.16329 5.90351L10.4125 3.64662L9.00578 2.2468C8.22975 3.00694 6.99611 3.16894 6.164 2.83387L1.68569 7.31441L4.22217 9.84129L5.91271 8.15693L11.8026 14.0664C8.91994 15.6497 4.92483 15.1505 1.97644 12.0878L0.547588 13.5112C0.975413 14.1038 1.33401 14.641 1.77983 15.0917C1.74038 15.1387 1.61854 15.2391 1.61577 15.2419C1.541 15.2294 1.45239 15.2004 1.37347 15.2004C0.613354 15.2004 0 15.8615 0 16.6216C0.000692273 17.3811 0.620277 18 1.3797 18C2.13982 18 2.78986 17.3755 2.78986 16.6154C2.78986 16.5268 2.76979 16.4458 2.75525 16.3627L2.97401 16.1467C6.36407 18.4334 10.0795 18.7179 14.0767 16.326L15.7278 17.9827L17.9873 15.7535L16.3259 14.0747C21.0943 6.88934 14.7364 -0.168619 9.00717 0.00306995H9.00648Z" fill="currentColor"/>
+</svg>

src/main.ts

@@ -32,7 +32,13 @@ import {
   NGrid,
   NFormItemGi,
   NUpload,
+  NLayout,
+  NLayoutSider,
+  NLayoutHeader,
+  NLayoutContent,
+  NMenu,
 } from 'naive-ui'
+import { normalizeHue } from 'naive-ui/lib/color-picker/src/utils'
 
 const naive = create({
   components: [
@@ -62,6 +68,11 @@ const naive = create({
     NGrid,
     NFormItemGi,
     NUpload,
+    NLayout,
+    NLayoutSider,
+    NMenu,
+    NLayoutHeader,
+    NLayoutContent,
   ],
 })
 

src/store/mutations.ts

@@ -22,4 +22,7 @@ export default {
   SET_ACTIVITY_LIST_MODAL(state: GlobalStateProps, val: boolean) {
     state.showActivityListModal = val
   },
+  SET_STRUCT_MODAL(state: GlobalStateProps, val: boolean) {
+    state.showStructModal = val
+  },
 }

src/store/state.ts

@@ -6,4 +6,5 @@ export default {
   showNewActivityDrawer: false,
   showBuildingDrawer: false,
   showActivityListModal: false,
+  showStructModal: false,
 }

src/view/components/activity-detail.vue

@@ -37,9 +37,9 @@
         </div>
       </div>
     </div>
-    <n-button class="export-btn" color="#dd505e" text-color="#fff" size="small">
+    <n-button class="export-btn" type="primary" size="small">
       <template #icon>
-        <n-icon size=".12rem" color="#fff">
+        <n-icon size=".12rem">
           <svg-icon :data="exportIcon" original />
         </n-icon>
       </template>

src/view/components/nav-bar.vue

@@ -38,7 +38,12 @@
         >
           <svg-icon :data="nav2" original />
         </n-icon>
-        <n-icon class="btn" size=".12rem">
+        <n-icon
+          class="btn"
+          :class="{ on: showStructModal }"
+          size=".12rem"
+          @click="onClick('struct')"
+        >
           <svg-icon :data="nav3" original />
         </n-icon>
         <n-dropdown :options="options" show-arrow>
@@ -69,6 +74,7 @@
   <FilterDrawer />
   <BuildingDrawer />
   <ActivityDrawer />
+  <StructModal />
 </template>
 
 <script lang="ts" setup>
@@ -79,6 +85,7 @@ import SearchModal from './search-modal.vue'
 import FilterDrawer from './filter-drawer.vue'
 import ActivityDrawer from './activity-drawer.vue'
 import BuildingDrawer from './building-drawer.vue'
+import StructModal from './struct-modal.vue'
 import { CaretDown } from '@vicons/ionicons5'
 import nav1 from '@images/nav1.svg'
 import nav2 from '@images/nav2.svg'
@@ -89,9 +96,11 @@ import nav5 from '@images/nav5.svg'
 const showFilterDrawer = computed(() => store.state.showFilterDrawer)
 const showBuildingDrawer = computed(() => store.state.showBuildingDrawer)
 const showActivityDrawer = computed(() => store.state.showActivityDrawer)
+const showStructModal = computed(() => store.state.showStructModal)
 const onClick = (type: string) => {
   store.commit('SET_FILTER_DRAWER', false)
   store.commit('SET_ACTIVITY_DRAWER', false)
+  store.commit('SET_STRUCT_MODAL', false)
   switch (type) {
     case 'filter':
       store.commit('SET_FILTER_DRAWER', true)
@@ -99,6 +108,10 @@ const onClick = (type: string) => {
     case 'activity':
       store.commit('SET_ACTIVITY_DRAWER', true)
       break
+    case 'struct':
+      store.commit('SET_STRUCT_MODAL', true)
+      store.commit('SET_SHOW_BASIC_INFO', false)
+      break
     default:
       break
   }

src/view/components/new-activity-drawer.vue

@@ -17,9 +17,11 @@
                 编辑
               </n-button>
               <n-button type="primary" size="small" @click="submit">
-                <n-icon size=".1rem">
-                  <svg-icon :data="exportIcon" original />
-                </n-icon>
+                <template #icon>
+                  <n-icon size=".12rem">
+                    <svg-icon :data="exportIcon" original />
+                  </n-icon>
+                </template>
                 导出
               </n-button>
             </template>

src/view/components/party-icon.vue

+<template>
+  <n-icon size=".14rem" style="margin-bottom: 0.03rem">
+    <svg-icon :data="party" original />
+  </n-icon>
+</template>
+
+<script lang="ts" setup>
+import party from '@images/party.svg'
+</script>

src/view/main.vue

@@ -6,8 +6,8 @@
       <svg-icon :data="reset" original />
     </n-icon>
   </div>
-  <InforModal class="fix1" />
-  <!-- <ActivityDetail class="fix1" /> -->
+  <!-- <InforModal class="fix1" /> -->
+  <ActivityDetail class="fix1" />
   <ListModal class="fix2" pagination />
 </template>