Small_goose_Vue3/pages/message/index.vue

<template>
  <view class="msg-container">
    <view class="msg-header">消息</view>
    <view class="msg-list">
      <view class="msg-item" v-for="item in msgList" :key="item.title" @click="goTo(item)">
        <view class="msg-icon" :style="{background: item.bg}">
          <image :src="item.icon" class="icon-img" />
        </view>
        <view class="msg-info">
          <view class="msg-title">{{ item.title }}</view>
          <view class="msg-desc">暂无新消息</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      msgList: [
        { title: '课程精选', icon: '/static/msg1.png', bg: 'linear-gradient(135deg,#ffbcbc,#ffeded)', path: '/pages/message/selected' },
        { title: '课程上新', icon: '/static/msg2.png', bg: 'linear-gradient(135deg,#b6e3ff,#eaf7ff)', path: '' },
        { title: '直播预约', icon: '/static/msg3.png', bg: 'linear-gradient(135deg,#d6caff,#f3f0ff)', path: '' },
        { title: '圈子消息', icon: '/static/msg4.png', bg: 'linear-gradient(135deg,#b6ffe0,#eafff6)', path: '' },
      ]
    }
  },
  methods: {
    goTo(item) {
      if (item.path) {
        uni.navigateTo({ url: item.path })
      }
    }
  }
}
</script>
<style lang="scss">
.msg-container {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 120rpx;
}
.msg-header {
  text-align: center;
  font-size: 40rpx;
  font-weight: bold;
  color: #222;
  margin-top: 80rpx;
  margin-bottom: 40rpx;
  letter-spacing: 2rpx;
}
.msg-list {
  margin: 0 0 0 0;
}
.msg-item {
  display: flex;
  align-items: center;
  padding: 32rpx 40rpx 32rpx 40rpx;
  background: #fff;
  border-radius: 20rpx;
  margin: 0 24rpx 32rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.msg-item:active {
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08);
}
.msg-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 32rpx;
}
.icon-img {
  width: 48rpx;
  height: 48rpx;
}
.msg-info {
  display: flex;
  flex-direction: column;
}
.msg-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 8rpx;
}
.msg-desc {
  font-size: 24rpx;
  color: #bbb;
}
</style>