|
|
|
@ -1,23 +1,40 @@ |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
<view class="page"> |
|
|
|
<navbar title="我要研学" leftClick @leftClick="$utils.navigateBack" /> |
|
|
|
|
|
|
|
<view class="search"> |
|
|
|
<uv-search placeholder="请输入搜索内容" v-model="keyword"></uv-search> |
|
|
|
<view class="apply"> |
|
|
|
<view class="project1"> |
|
|
|
<view class="pictureA"> |
|
|
|
<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode=""></image> |
|
|
|
<uv-search |
|
|
|
placeholder="搜索服务" |
|
|
|
v-model="keyword" |
|
|
|
:animation="true" |
|
|
|
height="70" |
|
|
|
searchIconSize="44" |
|
|
|
> |
|
|
|
</uv-search> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="list"> |
|
|
|
<view class="item" |
|
|
|
v-for="(item,index) in 3" |
|
|
|
:key="index"> |
|
|
|
<view class="image"> |
|
|
|
<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode=""></image> |
|
|
|
<view class="type"> |
|
|
|
报名中 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="project2"> |
|
|
|
<view class="pictureB"> |
|
|
|
<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode=""></image> |
|
|
|
<view class="info"> |
|
|
|
<view class="title"> |
|
|
|
2024年景德镇艺术研学定金 |
|
|
|
</view> |
|
|
|
<view class="price"> |
|
|
|
￥5000.00 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<tabber/> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -37,15 +54,58 @@ |
|
|
|
<style scoped lang="scss"> |
|
|
|
.page{ |
|
|
|
.search{ |
|
|
|
|
|
|
|
background-color: #fff; |
|
|
|
height: 110rpx; |
|
|
|
width: 100%; |
|
|
|
uv-search{ |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.apply{ |
|
|
|
width: 500rpx; |
|
|
|
height: 300rpx; |
|
|
|
background-color: white; |
|
|
|
>view{ |
|
|
|
width: 100rpx; |
|
|
|
height: 100rpx; |
|
|
|
.list{ |
|
|
|
.item{ |
|
|
|
margin: 30rpx 20rpx 50rpx; |
|
|
|
padding: 20rpx; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 20rpx; |
|
|
|
box-shadow: 0 0 10rpx 10rpx #00000011; |
|
|
|
.image{ |
|
|
|
width: 100%; |
|
|
|
height: 400rpx; |
|
|
|
position: relative; |
|
|
|
image{ |
|
|
|
width: 100%; |
|
|
|
height: 90%; |
|
|
|
border-radius: 20rpx; |
|
|
|
margin-top: 10rpx; |
|
|
|
} |
|
|
|
.type{ |
|
|
|
position: absolute; |
|
|
|
top: -10rpx; |
|
|
|
height: 62rpx; |
|
|
|
left: 30rpx; |
|
|
|
background-color: darkgoldenrod; |
|
|
|
color: #fff; |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 0 18rpx; |
|
|
|
border-radius: 14rpx; |
|
|
|
line-height: 56rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.info{ |
|
|
|
|
|
|
|
.title{ |
|
|
|
margin-left: 14rpx; |
|
|
|
margin-bottom: 8rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
.price{ |
|
|
|
font-size: 30rpx; |
|
|
|
margin-left: 12rpx; |
|
|
|
margin-bottom: 8rpx; |
|
|
|
color: darkgoldenrod; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
