Dining_Hall/pages/mine/index.vue

<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">我的</text>
    </view>

    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="avatar-wrapper">
        <image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
      </view>
      <view class="user-detail">
        <text class="username">冯武鹏</text>
      </view>
      <view class="star-icon">
        <uni-icons type="star" size="24" color="#ff9900"></uni-icons>
      </view>
    </view>

    <!-- 我的服务区域 -->
    <view class="services">
      <text class="services-title">我的服务</text>
      <view class="grid-container">
        <!-- 个人信息 -->
        <view class="grid-item" @click="navigateTo('/pages/mine/me/index')">

          <view class="icon-wrapper">
<!--            <uni-icons type="person" size="24" color="#666"></uni-icons>-->
            <image style="width: 28px;height: 28px;" src="/static/images/my/notice.png"></image>
          </view>
          <text class="icon-text">个人信息</text>
        </view>

        <!-- 通知公告 -->
        <view class="grid-item" @click="navigateTo('/pages/mine/me/index')">
          <view class="icon-wrapper">
<!--            <uni-icons type="notification" size="24" color="#666"></uni-icons>-->
            <image style="width: 28px;height: 28px;" src="/static/images/my/notice.png"></image>
          </view>
          <text class="icon-text">通知公告</text>
        </view>

        <!-- 投诉建议 -->
        <view class="grid-item" @click="navigateTo('/pages/feedback/index')">
          <view class="icon-wrapper">
<!--            <uni-icons type="chat" size="24" color="#666"></uni-icons>-->
            <image style="width: 28px;height: 28px;" src="/static/images/my/complaints.png"></image>
          </view>
          <text class="icon-text">投诉建议</text>
        </view>

        <!-- 食堂评价 -->
        <view class="grid-item" @click="navigateTo('/pages/review/index')">
          <view class="icon-wrapper">
<!--            <uni-icons type="star" size="24" color="#666"></uni-icons>-->
            <image style="width: 28px;height: 28px;" src="/static/images/my/evaluation.png"></image>
          </view>
          <text class="icon-text">食堂评价</text>
        </view>

        <!-- 体检报告 -->
        <view class="grid-item" @click="navigateTo('/pages/survey/index')">
          <view class="icon-wrapper">
<!--            <uni-icons type="help" size="24" color="#666"></uni-icons>-->
            <image style="width: 28px;height: 28px;" src="/static/images/my/report.png"></image>
          </view>
          <text class="icon-text">体检报告</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  padding: 44px 16px 16px;
  background: #fff;

  .title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }
}

.user-info {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #fff;
  margin-bottom: 10px;

  .avatar-wrapper {
    margin-right: 12px;

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 30px;
    }
  }

  .user-detail {
    flex: 1;

    .username {
      font-size: 18px;
      font-weight: 500;
      color: #333;
    }
  }

  .star-icon {
    padding: 8px;
  }
}

.services {
  background: #fff;
  padding: 16px;

  .services-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 26px;

    font-weight: 400;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon-wrapper {
        width: 48px;
        height: 48px;
        //border-radius: 24px;
        //background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 3px;
      }

      .icon-text {
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style>