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">
	      <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"/>
	    </view>
	  </view>
	  <image
	    class="image_2 pos_2"
	    src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FaHtvfdev-test.png"
	  />
	  <view class="flex-col justify-start items-start pos_3">
	    <view class="flexbox">
				<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")
const items = ref([null,null])
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)
	})
}
</script>

<style lang="scss" scoped>
.mt-1 {
  margin-top: 1.88rpx;
}
.mt-17 {
  margin-top: 31.88rpx;
}
.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: 100%;
}
.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: 15rpx 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;
}
.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: 80.63rpx;
}
.pos_3 {
  position: absolute;
  left: 30.75rpx;
  top: 577.5rpx;
}
.grid-item {
  padding-bottom: 30.23rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
  width: 332.85rpx;
	// border: 1px solid red;
	margin: 0 26rpx 20rpx 0;
}
.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>