jiangchengfeiyi-xiaochengxu/pages/workshop/index/index.vue

<template>
	<view class="flex-col justify-start relative page">
	  <view class="section"></view>
	  <view class="flex-col justify-start items-center section_2 pos">
	    <view class="flex-row section_3" style="display: flex; align-items: center;" @click="goToSearch">
	      <image
	        class="image"
	        src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FqiUJHqkm-fangdajing.png"
	      />
	      <input class="text-wrapper ml-7" placeholder="搜索课程" placeholder-class="placeholderStyle" disabled />
	    </view>
	  </view>
	  
	 <!-- <image
	    class="image_2 pos_2"
	    src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FaHtvfdev-test.png"
	  /> -->
	  
	  <carousel class="pos_2" :img-list="imgList" url-key="url" @selected="selectedBanner"/>
	  
	  
	  <view class="flex-col justify-start items-start pos_3">
	    <view class="my-grid">
				<view class="flex-col grid-item" v-for="(item, index) in products" :key="index" @click="jump_detail(item,index)">
				  <view class="flex-col">
				    <image
				      class="image_1"
				      :src="item.goodImg"
				    />
				    <text class="font text_2 mt-1">{{ item.name }}</text>
				  </view>
				  <view class="flex-row items-center group_2 mt-17">
				    <image
				      class="image_4"
				      src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FTDckKcXA-rmb.png"
				    />
				    <text class="font_2">{{ item.price }}</text>
				  </view>
				</view>
			</view>
	  </view>
	</view>
</template>

<script setup>
import { ref , onMounted } from 'vue'	
import { baseUrl } from '../../../api/request';
const products = ref()
const cookie = wx.getStorageSync("cookie")
 import carousel from '@/components/vear-carousel/vear-carousel'
onMounted(()=>{
	getProducts()
})
const getProducts = async ()=> {
	const res = await uni.request({
		url: baseUrl + '/goods/service/list/card',
		method: 'GET',
		header: {
			cookie
		}
	})
	console.log(res.data.data);
	if(res.data.code === 1) {
		products.value = res.data.data
	}
}
const jump_detail =(item,index)=>{
	// console.log(item.id);
	uni.navigateTo({
		url: '../productmain/productmain?info=' + JSON.stringify(item.id)
	})
}


const imgList = ref([{
			url: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVZJcndFL-VCG211334705187.png',
			id: 1
		},{
			url: ' https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FplnBXSNq-VCG211345185434.png',
			id: 2
		},{
			url: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FpWmCgSml-VCG21gic13424447.png',
			id: 3
		},{
			url: 'https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FbGthWnIG-VCG211247054746.png',
			id: 4
		},])

	
	
	
	const goToSearch = () => {
		uni.navigateTo({
			url: '../searchGood/searchGood?type=0'
		})
	}

</script>

<style lang="scss" scoped>
.mt-1 {
  margin-top: 1.88rpx;
}
.mt-17 {
  margin-top: 31.88rpx;
}
.text-wrapper {
	padding-left: 10rpx;
}

.page {
  background-color: #ffffff;
  background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FJULGLADX-feiyigongfang.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.section {
  background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FJULGLADX-feiyigongfang.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  // height: 2096.25rpx;
}
.section_2 {
  padding: 25rpx 0;
  background-color: #ffffff;
}
.pos {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;  //设置positon优先级
}
.section_3 {
  padding: 0 15rpx;
  background-color: #f1e8e9;
  border-radius: 18.75rpx;
  width: 506.25rpx;
  height: 60rpx;
}
.image {
  width: 43.13rpx;
  height: 46.88rpx;
}
.font {
  font-size: 24.38rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  color: #000000;
}
.text {
  line-height: 23.04rpx;
  letter-spacing: 9.75rpx;
}
.image_2 {
  width: 100vw;
  height: 62.5vw;
}
.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 115.63rpx;
}
.pos_3 {
  position: absolute;
  top: 577.5rpx;
  left: 26.25rpx;
  right: 26.27rpx;
}

.my-grid {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	row-gap: 25rpx; 
	column-gap: 25rpx;
	padding-bottom: 40rpx;
}

.grid-item {
  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;
}
.text_2 {
  margin-left: 15.56rpx;
  margin-right: 3.19rpx;
  line-height: 30rpx;
}
.group_2 {
  padding: 0 24.3rpx;
}
.image_4 {
  width: 26.25rpx;
  height: 26.25rpx;
}
.font_2 {
  color: #c35c5d;
  font-size: 30rpx;
  font-family: Times New Roman;
  line-height: 20.68rpx;
}
.flexbox {
	display: flex;
	flex-wrap: wrap;
}
.placeholderStyle {
	color: #c35c5d;
}


@import url(../../../common/css/global.css);
</style>