<template>
	<view class="flex-col page">
	  <image
	    class="image"
	    src="https://ide.code.fun/api/image?token=674e57d6797f850011f0b062&name=81b265c5869f092903cecdb6ba7eb11d.png"
	  />
	  <view class="flex-col justify-start items-center text-wrapper"><text class="text">最新活动</text></view>
	  <view class="flex-col justify-start section">
	    <view class="grid">
	      <view class="flex-col grid-item_1" v-for="(item, index) in items" :key="index" @click="jump_detail(index,item)">
	        <view class="flex-col">
	          <image
	            class="image_1"
	            src="https://ide.code.fun/api/image?token=674e57d6797f850011f0b062&name=59b2ee9b1885663ab247ad633a0c01f2.png"
	          />
	          <text class="font text_2 mt-4">【非遗手工艺体验】玉雕-古法制玉体验</text>
	        </view>
	        <view class="flex-row items-center group mt-10">
	          <image class="image_3" src="https://ide.code.fun/api/image?token=674e57d6797f850011f0b062&name=rmb.png" />
	          <text class="font_2">99.00</text>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script setup>
import { ref , onMounted } from 'vue'	
const items = ref([null,null])
const jump_detail =(index,item)=>{
	console.log(index);
	uni.navigateTo({
		url: '../../store-home/ProductDetails/ProductDetails?info=' + JSON.stringify(item)
	})
}
</script>

<style lang="scss" scoped>
.page {
  padding-top: 37.5rpx;
  background-color: #f5f5dc;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.image {
  margin: 0 30rpx;
  border-radius: 18.75rpx;
  width: 92vw;
  height: 61.25vw;
}
.text-wrapper {
  margin-top: 26.25rpx;
  padding: 27.41rpx 0 23.7rpx;
  background-color: #f7de98;
}
.text {
  color: #323232;
  font-size: 30rpx;
  font-family: Open Sans;
  line-height: 27.64rpx;
}
.section {
  padding: 54.38rpx 0 223.13rpx;
  background-color: #fff8dc;
}
.grid {
  margin-left: 28.13rpx;
  margin-right: 28.13rpx;
  height: 976.88rpx;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 39.51rpx;
  column-gap: 28.26rpx;
}
.grid-item_1 {
  padding-bottom: 30.23rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
}
.image_1 {
  border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
  width: 333.75rpx;
  height: 324.38rpx;
}
.font {
  font-size: 24.38rpx;
  font-family: Open Sans;
  line-height: 30rpx;
  color: #000000;
}
.text_2 {
  margin-left: 14.04rpx;
  margin-right: 8.46rpx;
}
.group {
  padding: 0 24.38rpx;
}
.image_3 {
  width: 26.25rpx;
  height: 26.25rpx;
}
.font_2 {
  font-size: 30rpx;
  font-family: Times New Roman;
  line-height: 20.68rpx;
  color: #fbb612;
}
@import url(../../../common/css/global.css);
</style>
