179 lines
3.9 KiB
Vue
179 lines
3.9 KiB
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>
|