wangyifang
/
wx-yunyubang-miniprogram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'db5c335905'
${ noResults }
wx-yunyubang-miniprogram/packages/packageCarecenter/pages/careCenter/careCenter.vue

322 lines
9.4 KiB
Raw Normal View History Unescape

月子会所 Signed-off-by: wangxiaoping <809126545@qq.com>
4 years ago
<template>
<view class="content">
<image class="careBanner" src="../../static/banner.png"></image>
<view class="strategyBox">
<view class="strate">
<view class="strTit flex_between">
<view class="strL flex_start"><image src="../../static/icon_gonglve.png"></image><text>月子攻略</text></view>
<view class="more">更多</view>
</view>
<view class="strCol flex_start">
<view class="strPic"><image mode="aspectFill" src="../../static/banner.png"></image></view>
<view class="strInfo">
<view class="h3">月子会所价格为何相差巨大月子会所价格为何相差巨大月子会所价格为何相差巨大？</view>
<view class="p">市场纷繁复杂的套餐究竟如何选？</view>
</view>
</view>
<view class="strCol flex_start">
<view class="strPic"><image mode="aspectFill" src="../../static/banner.png"></image></view>
<view class="strInfo">
<view class="h3">月子会所价格为何相差巨大月子会所价格为何相差巨大月子会所价格为何相差巨大？</view>
<view class="p">市场纷繁复杂的套餐究竟如何选？</view>
</view>
</view>
<view class="strCol flex_start">
<view class="strPic"><image mode="aspectFill" src="../../static/banner.png"></image></view>
<view class="strInfo">
<view class="h3">月子会所价格为何相差巨大月子会所价格为何相差巨大月子会所价格为何相差巨大？</view>
<view class="p">市场纷繁复杂的套餐究竟如何选？</view>
</view>
</view>
</view>
</view>
<view class="careBox">
<view class="careTabs flex_start">
<view class="tabCol cur">
<text>严选商家</text>
<view class="line"><image src="../../static/img_qiehuan.png"></image></view>
</view>
<view class="tabCol">
<text>严选商品</text>
<view class="line"><image src="../../static/img_qiehuan.png"></image></view>
</view>
</view>
</view>
<view class="proBox">
<view class="termBox">
<view class="termOuter">
<view class="termCol cur">综合排序<text class="iconfont icon-arrowbottom"></text></view>
<view class="termCol">全部地区<text class="iconfont icon-arrowbottom"></text></view>
<view class="termCol">筛选<text class="iconfont icon-filter"></text></view>
</view>
</view>
<view class="tagGroup flex_start">
<text>月子餐试吃</text>
<text>已探店</text>
</view>
<view class="introBox">
<view class="intro_column" @tap="gotoDetail">
<view class="imgOuter"><image mode="aspectFill" src="../../static/690x400.jpg"></image><view class="i_intro">推荐</view></view>
<view class="columnInfo">
<view class="title">孕育邦孕妈妈摄影体验</view>
<view class="tags"><text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text></view>
<view class="subInfo flex_between"><text>东方之门/湖滨天地</text><text>2.5km</text></view>
<view class="price"><text class="smallIcon">￥</text><text>30200</text>&nbsp;&nbsp;-&nbsp;&nbsp; <text class="smallIcon">￥</text><text>45000</text></view>
</view>
</view>
<view class="intro_column" @tap="gotoDetail">
<view class="imgOuter"><image mode="aspectFill" src="../../static/690x400.jpg"></image><view class="i_intro">推荐</view></view>
<view class="columnInfo">
<view class="title">孕育邦孕妈妈摄影体验</view>
<view class="tags"><text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text></view>
<view class="subInfo flex_between"><text>东方之门/湖滨天地</text><text>2.5km</text></view>
<view class="price"><text class="smallIcon">￥</text><text>30200</text>&nbsp;&nbsp;-&nbsp;&nbsp; <text class="smallIcon">￥</text><text>45000</text></view>
</view>
</view>
<view class="intro_column" @tap="gotoDetail">
<view class="imgOuter"><image mode="aspectFill" src="../../static/690x400.jpg"></image><view class="i_intro">推荐</view></view>
<view class="columnInfo">
<view class="title">孕育邦孕妈妈摄影体验</view>
<view class="tags"><text>孕妈</text><text>宝宝成长</text><text class="grayBg">讲座知识</text></view>
<view class="subInfo flex_between"><text>东方之门/湖滨天地</text><text>2.5km</text></view>
<view class="price"><text class="smallIcon">￥</text><text>30200</text>&nbsp;&nbsp;-&nbsp;&nbsp; <text class="smallIcon">￥</text><text>45000</text></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
}
}
</script>
<style>
page {
background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.careBanner{
display:block;
width:690rpx;
height:220rpx;
margin:20rpx auto;
}
.strategyBox{
width: 710rpx;
padding-bottom: 16rpx;
background-image: linear-gradient(180deg, #FFE4EC 0%, #FFFFFF 24%);
border: 4rpx solid #FFFFFF;
box-shadow: 0 0 20rpx 0 rgba(0,0,0,0.03);
border-radius: 16rpx;
.strTit{
padding:30rpx 25rpx 15rpx 25rpx;
.strL{
font-size: 34rpx;
color: #333333;
letter-spacing: 1rpx;
font-weight: 500;
image{display:block;width: 30rpx;height: 34rpx;margin-right:10rpx;}
}
.more{
font-size: 28rpx;
color: #333333;
font-weight: 400;
}
}
.strCol{
padding:16rpx 25rpx;
.strPic{
width:140rpx;height:140rpx;border-radius:10rpx;
image{display:block;width:140rpx;height:140rpx;border-radius:10rpx;}
}
.strInfo{
flex: 1;
padding-left:30rpx;
.h3{font-size: 30rpx;color: #333333;font-weight: 500;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width:460rpx;}
.p{margin-top:10rpx;font-size: 24rpx;color: #999999;font-weight: 400;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width:460rpx;}
}
}
}
.careBox{
width: 750rpx;
background-image: linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.80) 70%, rgba(255,255,255,0.00) 100%);
border-radius: 40rpx 40rpx 0 0;
margin-top:20rpx;
.careTabs{
width:100%;
height:106rpx;
.tabCol{
width:50%;
height:106rpx;
line-height:106rpx;
font-size: 36rpx;
color: #666666;
text-align: center;
font-weight: 400;
position: relative;
text{position: relative;z-index:3;}
.line{
display:none;
width:94rpx;
height:33rpx;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom:20rpx;
z-index:2;
image{display:block;width:94rpx;height:33rpx;}
}
}
.cur{
color: #333333;font-weight:600rpx;
.line{display:block;}
}
}
}
.termBox{
width: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0) 100%);
border-radius: 40rpx 40rpx 0px 0px;
.termOuter{
display: flex;
align-items: center;
align-content: center;
justify-content: flex-start;
.termCol{
width:33.33%;
text-align:center;
font-size: 28rpx;
font-weight: 400;
color: #333333;
padding:30rpx 0;
.iconfont{font-size: 24rpx;color: #666666;line-height:28rpx;margin-left:8rpx;}
}
.termCol.cur{
color:#FF578A;
.iconfont{color: #FF578A;}
}
}
}
.proBox{
width:710rpx;
background:#fff;
margin:0 auto 30rpx auto;
border-radius:12rpx;
box-sizing: border-box;
.tagGroup{
padding:0 24rpx;
text{
display:inline-block;
height: 64rpx;
background: #F6F6F6;
border-radius: 32rpx;
padding:0 30rpx;
font-size: 26rpx;
color: #666666;
text-align: center;
line-height: 64rpx;
font-weight: 400;
margin-right:15rpx;
}
}
}
.introBox{
padding:0 24rpx;
}
.intro_column:first-child{
border-top:none;
}
.intro_column{
display: flex;
justify-content: flex-start;
padding:20rpx 0;
width:100%;
border-top:2rpx solid #EAEAEA;
.imgOuter{
width: 260rpx;
height:210rpx;
position: relative;
border-radius:10rpx;
image{width:260rpx;height:210rpx;border-radius:10rpx;}
.i_intro{position: absolute;top:0;left:0;width: 68rpx;height: 32rpx;background: #FF578A;border-radius: 10rpx 0px 18rpx 0;font-size: 22rpx;font-weight: 400;color: #FFFFFF;line-height: 32rpx;text-align: center;}
}
.columnInfo{
flex:1;
margin-left:22rpx;
position: relative;
.title{
width:100%;
font-size:30rpx;
font-weight:700;
color:#333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tags{
margin-top:8rpx;
}
.tags text{
height: 28rpx;
background: rgba(255,177,62,0.1);
border-radius: 4rpx;
line-height:28rpx;
font-size:20rpx;
padding: 0 10rpx;
margin-right:10rpx;
color:#FF753E;
}
.grayBg{
background: #F6F6F6!important;
color: #999999!important;
}
.subInfo{
width:100%;
font-size:24rpx;
color:#999;
font-weight:400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top:15rpx;
.font_red{margin-left:10rpx;}
}
.price{
position: absolute;
width:100%;
bottom:0;
left:0;
display: flex;
justify-content: flex-start;
align-items: center;
align-content: center;
margin-top:8rpx;
text{margin-right:10rpx;}
font-size:36rpx;
color:#FF578A;
.smallIcon{
font-size: 24rpx;
margin-right:3rpx;
}
}
}
}
</style>