nursing-home-app/src/pages/home/index/index.vue

<template>
  <view class="home">
    <view>
      <wd-drop-menu>
        <wd-drop-menu-item :options="state.addressList" v-model="state.address" />
      </wd-drop-menu>
    </view>
    <view>
      <wd-swiper :autoplay="true" :list="state.swiperList" @click="onClickSwiper" />
    </view>
    <view class="home-menu">
      <view class="home-menu-item" v-for="(item, index) in menuList" :key="index">
        <wd-img width="60rpx" height="60rpx" :src="item.icon" />
        <view class="home-menu-item-right">
          <view style="font-weight: 400;">
            {{ item.title }}
          </view>
          <view style="font-size: 24rpx;margin-top: 10rpx;">
            {{ item.text }}
          </view>
        </view>
      </view>
    </view>
    <view class="home-house">
      <view class="home-house-title">
        <view>
          最新发布
        </view>
        <wd-icon name="arrow-right" />
      </view>
      <view class="home-house-item" v-for="(item, index) in state.houseList" :key="index"
        @click="onClickNavigate(item.id)">
        <wd-img width="220rpx" height="180rpx" radius="8rpx" mode="aspectFill" :src="item.url" />
        <view class="home-house-item-right">
          <view class="home-house-item-right-title">
            {{ item.title }}
          </view>
          <view class="home-house-item-right-text">
            {{ item.content }}
          </view>
          <view class="home-house-item-right-date">
            {{ item.date }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';

interface State {
  address: string,
  addressList: {
    label: string,
    value: string,
  }[],
  swiperList: string[],
  houseList: {
    id: string,
    url: string,
    title: string,
    content: string,
    date: string,
  }[],
};

const state: State = reactive({
  address: '1',
  addressList: [
    {
      label: '太保家园·郑州国际颐养社区',
      value: '1',
    },
    {
      label: '太保家园·郑州国际颐养社区2',
      value: '2',
    },
    {
      label: '太保家园·郑州国际颐养社区3',
      value: '3',
    }
  ],
  swiperList: [
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
    'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
  ],
  houseList: [
    {
      id: '1',
      url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
      title: '户型1户型1户型1户型1户型1户型1户型1户型1户型1户型1户型1',
      content: '老年人照料设施建筑基地应选择在工程地质条件稳定老年人照料设施建筑基地应选择在工程地质条件稳定老年人照料设施建筑基地应选择在工程地质条件稳定',
      date: '2025-02-15',
    },
    {
      id: '2',
      url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
      title: '户型2',
      content: '老年人照料设施建筑基地应选择在工程地质条件稳定',
      date: '2025-02-16',
    }
  ],
});

const menuList = [
  {
    icon: '/static/home/icon_towel.svg',
    title: '生活用房',
    text: '能力完好老年人',
  },
  {
    icon: '/static/home/icon_badminton.svg',
    title: '文娱与健身用房',
    text: '',
  },
  {
    icon: '/static/home/icon_file.svg',
    title: '康复与医疗用房',
    text: '',
  },
  {
    icon: '/static/home/icon_medical.svg',
    title: '服务管理用房',
    text: '',
  },
  {
    icon: '/static/home/icon_sign.svg',
    title: '交通空间',
    text: '',
  },
  {
    icon: '/static/home/icon_city.svg',
    title: '建筑细节',
    text: '',
  }
];

onShow(() => {

});

// 点击轮播
const onClickSwiper = () => {
  uni.navigateTo({
    url: `/pages/facility/houseDetail/index`,
  });
}

// 点击跳转
const onClickNavigate = (id: string) => {
  uni.navigateTo({
    url: `/pages/facility/houseDetail/index?id=${id}`,
  });
}
</script>

<style lang="scss" scoped>
.home {
  padding: 0 20rpx;

  &-menu {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;

    &-item {
      width: calc(50% - 10rpx);
      padding: 20rpx;
      border-radius: $border-radius-base;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      &-right {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    &-item:nth-child(odd) {
      background: #F1EFF8;
      margin-right: 10rpx;
    }

    &-item:nth-child(even) {
      background: #FAF3F0;
      margin-left: 10rpx;
    }
  }

  &-house {
    padding: 20rpx;
    background: #FFFFFF;
    border: 2rpx solid $border-color;
    border-radius: $border-radius-base;
    margin-bottom: 20rpx;

    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    &-item {
      display: flex;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid $border-color;
      margin-bottom: 20rpx;

      &-right {
        flex: 1;
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;

        &-title {
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &-text {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &-date {
          font-size: $font-size-mini;
          color: $gray-color;
          text-align: right;
        }
      }
    }

    &-item:last-child {
      border: none;
    }
  }
}
</style>