<template>
  <view class="quick-entry">
    <view
      v-for="(item, index) in entries"
      :key="index"
      class="entry-item"
	  @tap="QEClick(item.path)"
    >
      <view :class="['entry-icon', { accent: item.accent }]">
        <image :src="item.icon" mode="aspectFit" class="icon-img" />
      </view>
      <text class="entry-title">{{ item.title }}</text>
      <text class="entry-desc">{{ item.desc }}</text>
    </view>
  </view>
</template>

<script setup>

const QEClick = path => {
	uni.navigateTo({
		url:path
	})
}
const entries = [
		{ 
		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/course.png',
		   title: '找课程',
		   desc: '精品课程',
		   accent: false,
		   path: "/pages/searchCourse/searchCourse"
	   },
	  { 
		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/plan.png',
		  title: '训练计划',
		  desc: '个性定制',
		  accent: true
	  },
	  {
		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/data.png',
		  title: '健身数据',
		  desc: '记录分析',
		  accent: false
	  },
	  {
		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/message.png',
		  title: '消息',
		  desc: '通知消息',
		  accent: true
	  },
	  {
		  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/icons/checkIn.png',
		  title: '签到',
		  desc: '打卡签到',
		  accent: false,
		  path: "/pages/checkIn/checkIn"
	  }
]
</script>

<style lang="scss" scoped>
.quick-entry {
  display: flex;
  justify-content: space-between;
  padding: 32rpx 24rpx;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  margin: 24rpx;
  border-radius: 28rpx;
  box-shadow: 0 8rpx 32rpx var(--shadow-blue-light);
  border: 1rpx solid rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 3;
}

.entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.entry-icon {
  width: 104rpx;
  height: 104rpx;
  border-radius: 24rpx;
  background: rgba(130, 220, 130, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  box-shadow: 0 6rpx 20rpx rgba(130, 220, 130, 0.35);
}

.icon-img {
  width: 52rpx;
  height: 52rpx;
}

.entry-icon.accent {
  background: rgba(130, 220, 130, 0.9);
}

.entry-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #2D4A5A;
  margin-bottom: 4rpx;
}

.entry-desc {
  font-size: 22rpx;
  color: var(--tabbar-text-inactive);
}
</style>