<template>
  <div class="list">
    <p class="title">此处12个XXXX</p>
    <div class="wrapper">
      <div v-for="(item, i) in list" :key="i" class="item">
        <p>{{ item.name }}</p>
        <span>{{ item.address }}</span>
        <n-icon class="icon" size=".12rem" color="#dd505E">
          <ArrowForward />
        </n-icon>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ArrowForward } from '@vicons/ionicons5'
const list = [
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
]
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.list
  background $bg
  $blur()
  border-radius .04rem
  box-sizing border-box
  padding .1rem .08rem
  max-width 3rem
  max-height 44vh
  display flex
  flex-direction column
  .title
    font-size .12rem
    border-bottom .01rem solid rgba(0,0,0,.06)
    padding 0 .08rem .05rem
  .wrapper
    flex 1
    overflow-y auto
  .item
    border-radius .03rem
    position relative
    background transparent
    cursor pointer
    box-sizing border-box
    padding .05rem .08rem
    p
      font-family $font-ping-medium
      $text-overflow()
    span
      color $gray
      $text-overflow()
    .icon
      display none
      position absolute
      top 0
      bottom 0
      right 0
      margin auto .1rem
    &:hover
      background $light-red
      &>.icon
        display inline-block
</style>
