410 lines
9.1 KiB
Vue
410 lines
9.1 KiB
Vue
<template>
|
|
|
|
<view class="box flex justify-center align-items flex-column">
|
|
|
|
<!-- 全部课程 -->
|
|
<view class="hot flex flex-column align-items" style="margin-top: 32rpx; height: 100%;">
|
|
<view class="header flex align-items" style="justify-content: space-between;">
|
|
<!-- <view class="h-left flex align-items">
|
|
<image src="../../static/center/Total.png" mode=""
|
|
style="width: 168rpx; height: 32rpx; margin-left: 14rpx;"></image>
|
|
</view> -->
|
|
<!-- <view class="h-right flex align-items" @click="openShow">
|
|
<span style="margin-right: 12rpx; color: #EAEAEA;">筛选</span>
|
|
<image src="../../static/center/Sift.png" mode=""
|
|
style="width: 34rpx; height: 34rpx; margin-right: 9rpx;"></image>
|
|
</view> -->
|
|
</view>
|
|
<view class="new flex align-items" style="">
|
|
<view class="flex justify-center align-items " style="" v-for="(item,index) in list" :key="index"
|
|
:style="{ marginLeft: index % 2 == 0 ? '32rpx' : '0' }">
|
|
<view class="con-center flex justify-center flex-column" style="align-items: flex-start;">
|
|
<image :src="item.image" mode="" style="width: 280rpx; height: 200rpx;"></image>
|
|
<span class="jita">吉他入门教学</span>
|
|
<view class="mingeBox flex justify-center align-items">
|
|
<image :src="item.icon" mode="" style="width: 36rpx; height: 36rpx;"></image>
|
|
<span class="minge">{{item.now}}/{{item.altogether}}名额</span>
|
|
</view>
|
|
<span class="money">￥{{item.money}}</span>
|
|
<span class="line-row"></span>
|
|
</view>
|
|
<span class="line" v-if="index % 2 == 0"></span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 弹窗 -->
|
|
<u-popup :show="show" mode="right" height="100%" @close="closeShow" class="relative" :custom-style="popupStyle">
|
|
<view class="flex align-items flex-column" style="width:500rpx">
|
|
<view class="pop-header flex align-items flex-column" style="justify-content: space-around;">
|
|
<view class="flex align-items" style="width:449rpx;justify-content: space-between;">
|
|
<span class="types">课程类型</span>
|
|
<span class="select" @click="cancel(0)">取消选择</span>
|
|
</view>
|
|
<span class="pop-line"></span>
|
|
</view>
|
|
<view class="selectBox flex align-items" style="justify-content: flex-start;flex-wrap: wrap;">
|
|
<view class="selectType" v-for="(item,index) in types" :key="index" @click="toggleSelection(item)"
|
|
:class="{ selected: isSelected(item) }">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 上课地点 -->
|
|
<view class="flex align-items flex-column" style="width:500rpx">
|
|
<view class="pop-header flex align-items flex-column" style="justify-content: space-around;">
|
|
<view class="flex align-items" style="width:449rpx;justify-content: space-between;">
|
|
<span class="types">上课地点</span>
|
|
<span class="select" @click="cancel(1)">取消选择</span>
|
|
</view>
|
|
<span class="pop-line"></span>
|
|
</view>
|
|
<view class="selectBox flex align-items" style="justify-content: flex-start;flex-wrap: wrap;">
|
|
<view class="selectType" v-for="(item,index) in areas" :key="index" @click="areaSelection(item)"
|
|
:class="{ selected: areaSelected(item) }">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn">
|
|
<!-- <u-button :custom-style="customStyle">月落</u-button> -->
|
|
<image src="../../static/center/btn.png" mode=""></image>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
types: ['电脑技术', '电脑技术', '电脑技术', '电脑技术', '音乐', '绘画', '体育运动'],
|
|
areas: ['老城区', '涧西区', '洛龙区', '西工区', '新安县', '栾川县', '伊川县'],
|
|
typeList: [],
|
|
areaList: [],
|
|
popupStyle:{
|
|
background: "#EAEAEA",
|
|
},
|
|
list: [{
|
|
image: "../../static/center/jita.jpeg",
|
|
name: "吉他入门教学",
|
|
icon: "../../static/center/minge.png",
|
|
now: "200",
|
|
altogether: '600',
|
|
money: "600",
|
|
rank: "../../static/center/rank1.png",
|
|
},
|
|
{
|
|
image: "../../static/center/jita.jpeg",
|
|
name: "吉他入门教学",
|
|
icon: "../../static/center/minge.png",
|
|
now: "200",
|
|
altogether: '600',
|
|
money: "600",
|
|
rank: "../../static/center/rank1.png",
|
|
},
|
|
{
|
|
image: "../../static/center/jita.jpeg",
|
|
name: "吉他入门教学",
|
|
icon: "../../static/center/minge.png",
|
|
now: "200",
|
|
altogether: '600',
|
|
money: "600",
|
|
rank: "../../static/center/rank1.png",
|
|
},
|
|
{
|
|
image: "../../static/center/jita.jpeg",
|
|
name: "吉他入门教学",
|
|
icon: "../../static/center/minge.png",
|
|
now: "200",
|
|
altogether: '600',
|
|
money: "600",
|
|
rank: "../../static/center/rank1.png",
|
|
},
|
|
{
|
|
image: "../../static/center/jita.jpeg",
|
|
name: "吉他入门教学",
|
|
icon: "../../static/center/minge.png",
|
|
now: "200",
|
|
altogether: '600',
|
|
money: "600",
|
|
rank: "../../static/center/rank1.png",
|
|
}
|
|
]
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
openShow() {
|
|
this.show = true
|
|
},
|
|
closeShow(){
|
|
this.typeList = []
|
|
this.areaList = []
|
|
this.show = false
|
|
},
|
|
|
|
//类型选择
|
|
toggleSelection(item) {
|
|
if (this.typeList.includes(item)) {
|
|
// 取消选中
|
|
this.typeList = this.typeList.filter(i => i !== item);
|
|
} else {
|
|
// 选中
|
|
this.typeList.push(item);
|
|
}
|
|
console.log(this.typeList)
|
|
},
|
|
isSelected(item) {
|
|
return this.typeList.includes(item);
|
|
},
|
|
// 上课地点
|
|
areaSelection(item){
|
|
if (this.areaList.includes(item)) {
|
|
// 取消选中
|
|
this.areaList = this.areaList.filter(i => i !== item);
|
|
} else {
|
|
// 选中
|
|
this.areaList.push(item);
|
|
}
|
|
},
|
|
areaSelected(item) {
|
|
return this.areaList.includes(item);
|
|
},
|
|
// 取消选择
|
|
cancel(num){
|
|
if (num == 0) {
|
|
this.typeList = []
|
|
} else {
|
|
this.areaList = []
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
padding: 0 30rpx 0rpx 30rpx;
|
|
background-color: #F1F2F8;
|
|
}
|
|
|
|
.search {
|
|
margin-top: 30rpx;
|
|
height: 52rpx;
|
|
border: 4rpx #EAEAEA dashed;
|
|
|
|
.dashed {
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
|
|
.input {
|
|
border: 4rpx solid #EAEAEA;
|
|
padding-left: 12rpx;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/deep/ .input-placeholder {
|
|
font-weight: 800;
|
|
font-size: 24rpx;
|
|
color: #8B8B8B;
|
|
line-height: 54rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.align-items {
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-flow: column;
|
|
}
|
|
|
|
.hot {
|
|
width: 100%;
|
|
height: 504rpx;
|
|
}
|
|
|
|
.header {
|
|
width: 100%;
|
|
height: 42rpx;
|
|
background: #4974FF;
|
|
margin-top: 42rpx;
|
|
box-shadow: 2rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.4);
|
|
|
|
image {}
|
|
}
|
|
|
|
.content {
|
|
height: 462rpx;
|
|
overflow-x: auto;
|
|
/* 允许横向滚动 */
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.new {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
}
|
|
|
|
.pos {
|
|
position: absolute;
|
|
bottom: 0rpx;
|
|
right: 0rpx;
|
|
}
|
|
|
|
.content,
|
|
.new {
|
|
width: 100%;
|
|
background: #EAEAEA;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
|
|
|
|
/* 禁止换行 */
|
|
.con-center {
|
|
width: 280rpx;
|
|
height: 398rpx;
|
|
|
|
.jita {
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #343434;
|
|
line-height: 32rpx;
|
|
margin-top: 14rpx;
|
|
}
|
|
|
|
.line-row {
|
|
width: 280rpx;
|
|
height: 1rpx;
|
|
background: #D9D9D9;
|
|
margin: 12rpx 0 12rpx 0;
|
|
box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(102, 102, 102, 0.25);
|
|
}
|
|
|
|
.mingeBox {
|
|
.minge {
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #7A7A7A;
|
|
line-height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.money {
|
|
display: flex;
|
|
align-self: flex-end;
|
|
font-weight: 800;
|
|
font-size: 36rpx;
|
|
color: #FF2323;
|
|
line-height: 32rpx;
|
|
margin-top: 24rpx;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
height: 398rpx;
|
|
width: 1rpx;
|
|
background: #D9D9D9;
|
|
margin: 0rpx 34rpx 0 34rpx;
|
|
box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(102, 102, 102, 0.25);
|
|
}
|
|
}
|
|
|
|
.ovr:first-child {
|
|
margin-left: 34rpx;
|
|
}
|
|
|
|
.ovr:last-child {
|
|
margin-right: 34rpx;
|
|
}
|
|
|
|
.footer {
|
|
margin: 120rpx 0 40rpx 0;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #BCBCBC;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.pop-header {
|
|
margin-top: 35rpx;
|
|
|
|
.types {
|
|
font-weight: 800;
|
|
font-size: 24rpx;
|
|
color: #343434;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.select {
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #343434;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.pop-line {
|
|
width: 449rpx;
|
|
height: 2rpx;
|
|
margin-top: 18rpx;
|
|
background: #D9D9D9;
|
|
box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
|
|
.selectBox {
|
|
width: 449rpx;
|
|
|
|
.selectType {
|
|
height: 21rpx;
|
|
background: #D9D9D9;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #4B4B4B;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 12rpx 14rpx 17rpx 14rpx;
|
|
margin: 24rpx 12rpx 0 0;
|
|
}
|
|
}
|
|
|
|
.selectType.selected {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
.relative{
|
|
position: relative;
|
|
background-color: red;
|
|
}
|
|
.btn{
|
|
position: absolute;
|
|
bottom: 53rpx;
|
|
width: 449rpx;
|
|
left: 30rpx;
|
|
image{
|
|
width: 449rpx;
|
|
height: 73rpx;
|
|
}
|
|
}
|
|
</style> |