activity detail modal

src/assets/images/export.svg

 <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.41683 1.25016C5.41683 1.02004 5.23028 0.833496 5.00016 0.833496C4.77004 0.833496 4.5835 1.02004 4.5835 1.25016V5.24424L3.21146 3.8722C3.04874 3.70948 2.78492 3.70948 2.6222 3.8722C2.45948 4.03492 2.45948 4.29874 2.6222 4.46146L4.70524 6.54449C4.70624 6.5455 4.70725 6.5465 4.70827 6.5475C4.74758 6.5861 4.79264 6.61534 4.84067 6.63521C4.88943 6.65544 4.94287 6.66666 4.99891 6.66683L5.00016 6.66683L5.00141 6.66683C5.11459 6.6665 5.21716 6.62104 5.29206 6.5475C5.29307 6.5465 5.29408 6.5455 5.29509 6.54449L7.37812 4.46146C7.54084 4.29874 7.54084 4.03492 7.37812 3.8722C7.21541 3.70948 6.95159 3.70948 6.78887 3.8722L5.41683 5.24424V1.25016Z" fill="#DD505E"/>
-<path d="M1.25016 5.8335C1.48028 5.8335 1.66683 6.02004 1.66683 6.25016V7.91683C1.66683 8.02734 1.71073 8.13332 1.78887 8.21146C1.86701 8.2896 1.97299 8.3335 2.0835 8.3335H7.91683C8.02734 8.3335 8.13332 8.2896 8.21146 8.21146C8.2896 8.13332 8.3335 8.02734 8.3335 7.91683V6.25016C8.3335 6.02004 8.52004 5.8335 8.75016 5.8335C8.98028 5.8335 9.16683 6.02004 9.16683 6.25016V7.91683C9.16683 8.24835 9.03513 8.56629 8.80071 8.80071C8.56629 9.03513 8.24835 9.16683 7.91683 9.16683H2.0835C1.75198 9.16683 1.43403 9.03513 1.19961 8.80071C0.965192 8.56629 0.833496 8.24835 0.833496 7.91683V6.25016C0.833496 6.02004 1.02004 5.8335 1.25016 5.8335Z" fill="#DD505E"/>
+<path d="M5.41683 1.25016C5.41683 1.02004 5.23028 0.833496 5.00016 0.833496C4.77004 0.833496 4.5835 1.02004 4.5835 1.25016V5.24424L3.21146 3.8722C3.04874 3.70948 2.78492 3.70948 2.6222 3.8722C2.45948 4.03492 2.45948 4.29874 2.6222 4.46146L4.70524 6.54449C4.70624 6.5455 4.70725 6.5465 4.70827 6.5475C4.74758 6.5861 4.79264 6.61534 4.84067 6.63521C4.88943 6.65544 4.94287 6.66666 4.99891 6.66683L5.00016 6.66683L5.00141 6.66683C5.11459 6.6665 5.21716 6.62104 5.29206 6.5475C5.29307 6.5465 5.29408 6.5455 5.29509 6.54449L7.37812 4.46146C7.54084 4.29874 7.54084 4.03492 7.37812 3.8722C7.21541 3.70948 6.95159 3.70948 6.78887 3.8722L5.41683 5.24424V1.25016Z" fill="currentColor"/>
+<path d="M1.25016 5.8335C1.48028 5.8335 1.66683 6.02004 1.66683 6.25016V7.91683C1.66683 8.02734 1.71073 8.13332 1.78887 8.21146C1.86701 8.2896 1.97299 8.3335 2.0835 8.3335H7.91683C8.02734 8.3335 8.13332 8.2896 8.21146 8.21146C8.2896 8.13332 8.3335 8.02734 8.3335 7.91683V6.25016C8.3335 6.02004 8.52004 5.8335 8.75016 5.8335C8.98028 5.8335 9.16683 6.02004 9.16683 6.25016V7.91683C9.16683 8.24835 9.03513 8.56629 8.80071 8.80071C8.56629 9.03513 8.24835 9.16683 7.91683 9.16683H2.0835C1.75198 9.16683 1.43403 9.03513 1.19961 8.80071C0.965192 8.56629 0.833496 8.24835 0.833496 7.91683V6.25016C0.833496 6.02004 1.02004 5.8335 1.25016 5.8335Z" fill="currentColor"/>
 </svg>

src/components/MyComponent/main.styl

@@ -56,8 +56,8 @@ $gray = rgba(0,0,0,.6)
 $light-gray = rgba(0,0,0,.06)
 
 
-$bg = rgba(249,250,250,.75)
-$white-bg = #f7f7f7
+$bg = rgba(249,250,250,.9)
+$white-bg = #fcfcfc
 
 $font = #6E798C
 

src/main.ts

@@ -21,6 +21,7 @@ import {
   NCheckbox,
   NDatePicker,
   NSwitch,
+  NInputNumber,
 } from 'naive-ui'
 
 const naive = create({
@@ -40,6 +41,7 @@ const naive = create({
     NCheckbox,
     NDatePicker,
     NSwitch,
+    NInputNumber,
   ],
 })
 

src/view/components/activity-detail.vue

+<template>
+  <div class="info">
+    <p class="title">某某党员大会</p>
+    <p>上海市浦东新区梅花路1099号</p>
+    <div class="content">
+      <div class="box">
+        <div>
+          <span>活动日期：</span>
+          <span>2020年1月3日</span>
+        </div>
+        <div>
+          <span>活动地址：</span>
+          <span>某某活动地址</span>
+        </div>
+        <div>
+          <span>参与人数：</span>
+          <span>20人</span>
+        </div>
+        <div>
+          <span>出席率：</span>
+          <span>50%</span>
+        </div>
+      </div>
+      <div class="box">
+        <span>活动内容描述</span>
+        <p>XXXXXXXXXXXXXXXXXXXXX</p>
+        <p>XXXXXXXXXXXXXXXXXXXXX</p>
+        <p>XXXXXXXXXXXXXXXXXXXXX</p>
+        <p>XXXXXXXXXXXXXXXXXXXXX</p>
+      </div>
+      <div class="box">
+        <span>活动照片</span>
+        <div class="photos">
+          <div class="photo"></div>
+          <div class="photo"></div>
+          <div class="photo"></div>
+        </div>
+      </div>
+    </div>
+    <n-button class="export-btn" color="#dd505e" text-color="#fff" size="small">
+      <template #icon>
+        <n-icon size=".12rem" color="#fff">
+          <svg-icon :data="exportIcon" original />
+        </n-icon>
+      </template>
+      参加人员名单下载
+    </n-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import exportIcon from '@images/export.svg'
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.info
+  background $bg
+  $blur()
+  border-radius .04rem
+  box-sizing border-box
+  padding .1rem
+  width 3rem
+  max-height 50vh
+  display flex
+  flex-direction column
+  .title
+    font-size .13rem
+    font-family $font-ping-medium
+  .content
+    flex 1
+    overflow-y auto
+    margin .05rem 0 .1rem
+  .box
+    background $white-bg
+    border-radius .03rem
+    margin-top .05rem
+    box-sizing border-box
+    padding .1rem
+    >div
+      $flex-align()
+      margin-bottom .05rem
+    span
+      display inline-block
+      &:nth-of-type(1)
+        color $gray
+        width 26%
+      &:nth-of-type(2)
+        flex 1
+        $text-overflow()
+    .photos
+      $flex-align()
+      justify-content space-between
+      >.photo
+        width 32%
+        height .6rem
+        border-radius .04rem
+        background $light-gray
+  .export-btn
+    width 50%
+    margin 0 auto
+</style>

src/view/components/info-modal.vue

@@ -43,8 +43,8 @@
   border-radius .04rem
   box-sizing border-box
   padding .1rem
-  max-width 3rem
-  max-height 44vh
+  width 3rem
+  max-height 50vh
   .title
     font-size .13rem
     font-family $font-ping-medium
@@ -63,7 +63,7 @@
       background $light-blue
       color $blue
   .box
-    background $bg
+    background $white-bg
     border-radius .03rem
     margin-top .05rem
     box-sizing border-box

src/view/components/list-modal.vue

@@ -10,11 +10,42 @@
         </n-icon>
       </div>
     </div>
+    <div v-if="pagination" class="pagination">
+      <n-icon size=".2rem" class="btn" @click="prePage">
+        <ChevronBack />
+      </n-icon>
+      <p>
+        <n-input-number
+          v-model:value="curPage"
+          class="page"
+          :show-button="false"
+          size="small"
+          :min="1"
+          :max="pageSize"
+          :placeholder="null"
+          :on-blur="toInt"
+          @keydown.enter="fetchPage"
+        />
+        <span>/</span>
+        <span>{{ pageSize }}</span>
+      </p>
+      <n-icon size=".2rem" class="btn" @click="nextPage">
+        <ChevronForward />
+      </n-icon>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ArrowForward } from '@vicons/ionicons5'
+import { ArrowForward, ChevronBack, ChevronForward } from '@vicons/ionicons5'
+import { PropType, ref } from 'vue'
+import useDebounce from '@/hooks/useDebounce'
+const props = defineProps({
+  pagination: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+})
 const list = [
   { name: '某某社区党组织', address: '上海市浦东新区327号' },
   { name: '某某社区党组织', address: '上海市浦东新区327号' },
@@ -23,6 +54,34 @@ const list = [
   { name: '某某社区党组织', address: '上海市浦东新区327号' },
   { name: '某某社区党组织', address: '上海市浦东新区327号' },
 ]
+const pageSize = ref(999)
+const curPage = ref(1)
+const toInt = () => {
+  if (curPage.value % 1 !== 0) {
+    curPage.value = Math.floor(curPage.value)
+  }
+}
+const fetchPage = useDebounce(() => {
+  // TODO
+  toInt()
+  console.log('----', curPage.value)
+})
+const prePage = () => {
+  curPage.value -= 1
+  if (curPage.value <= 0) {
+    curPage.value = 1
+    return
+  }
+  fetchPage()
+}
+const nextPage = () => {
+  curPage.value += 1
+  if (curPage.value > pageSize.value) {
+    curPage.value = pageSize.value
+    return
+  }
+  fetchPage()
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -34,8 +93,8 @@ const list = [
   border-radius .04rem
   box-sizing border-box
   padding .1rem .08rem
-  max-width 3rem
-  max-height 44vh
+  width 3rem
+  max-height 50vh
   display flex
   flex-direction column
   .title
@@ -44,6 +103,7 @@ const list = [
     padding 0 .08rem .05rem
   .wrapper
     flex 1
+    padding-bottom .1rem
     overflow-y auto
   .item
     border-radius .03rem
@@ -69,4 +129,28 @@ const list = [
       background $light-red
       &>.icon
         display inline-block
+  .pagination
+    $center()
+    p
+      width 30%
+      $flex-align()
+      justify-content space-around
+      margin 0 .15rem
+     .page
+        text-align center
+        width .4rem
+    .btn
+      color rgba(0,0,0,0.35)
+      cursor pointer
+      border-radius .03rem
+      &:hover
+        color $red
+        background $light-red
+</style>
+<style lang="stylus">
+.pagination
+  .n-input
+    border-radius .05rem
+    .n-input__input-el
+      height .2rem
 </style>

src/view/main.vue

@@ -6,8 +6,9 @@
       <svg-icon :data="reset" original />
     </n-icon>
   </div>
-  <InforModal class="info-modal" />
-  <ListModal class="list-modal" />
+  <!-- <InforModal class="fix1" /> -->
+  <ActivityDetail class="fix1" />
+  <ListModal class="fix2" pagination />
 </template>
 
 <script lang="ts" setup>
@@ -16,6 +17,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 ActivityDetail from './components/activity-detail.vue'
 import reset from '@images/reset.svg'
 const showTag = ref(true)
 </script>
@@ -36,19 +38,15 @@ const showTag = ref(true)
   &:hover
     .icon
       color $red
-.info-modal
+.fix1
   position fixed
-  top 0
-  bottom 0
-  left 0
-  right 0
-  margin auto
-.list-modal
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+.fix2
   position fixed
-  top 0
-  bottom 0
-  left 0
-  right 0
-  margin auto
-  margin-left 8rem
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+  margin-left 4rem
 </style>