|
|
@@ -8,39 +8,42 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="venue-navbar">
|
|
|
- <view class="navbar-list" v-for="(item,index) in navbarList" :key="index" @click="select_nav(item)">
|
|
|
- <view class="list-text">{{item.title}}</view>
|
|
|
- <image :src="sel_index==index?'/static/notsel-icon.png':'/static/select-icon.png'" mode=""></image>
|
|
|
+ <view class="navbar-list" v-for="(item, index) in navbarList" :key="index" @click="select_nav(item)">
|
|
|
+ <view class="list-text">{{ item.title }}</view>
|
|
|
+ <image :src="sel_index == index ? '/static/notsel-icon.png' : '/static/select-icon.png'" mode="">
|
|
|
+ </image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
<view class="select-btn">
|
|
|
- <view :class="sel_btn===index?'distance':'score'" v-for="(item,index) in selectList" :key="index"
|
|
|
- @click="select_btn(item,index)">{{item.text}}</view>
|
|
|
+ <view :class="sel_btn === index ? 'distance' : 'score'" v-for="(item, index) in selectList" :key="index"
|
|
|
+ @click="select_btn(item, index)">{{ item.text }}</view>
|
|
|
</view>
|
|
|
- <view class="s-search-list" v-if="!searchLoading">
|
|
|
+ <view class="s-search-list" v-if="!searchLoading">
|
|
|
<!-- 场地 -->
|
|
|
- <view v-if="sel_index==0">
|
|
|
- <!-- pages/index/gymDetail/index -->
|
|
|
- <view class="s-venue-card" v-for="(venue,index) in searchList" :key="venue.id" @click="venue.type==0?RouterUtils.to_page(`/pages/index/detail/index?id=${venue.id}`):RouterUtils.to_page(`/pages/index/gymDetail/index?id=${venue.id}`)">
|
|
|
+ <view v-if="sel_index == 0">
|
|
|
+ <view class="s-venue-card" v-for="(venue, index) in searchList" :key="venue.id"
|
|
|
+ @click="venue.type == 0 ? RouterUtils.to_page(`/pages/index/detail/index?id=${venue.id}`) : RouterUtils.to_page(`/pages/index/gymDetail/index?id=${venue.id}`)">
|
|
|
<view class="s-venue-info">
|
|
|
<view class="venue-img">
|
|
|
<image :src="venue.cover" mode=""></image>
|
|
|
</view>
|
|
|
<view class="venue-info">
|
|
|
- <view class="name">{{venue.name}}</view>
|
|
|
+ <view class="name">{{ venue.name }}</view>
|
|
|
<view class="appraise">
|
|
|
<zzx-icon name="star" size="12"></zzx-icon>
|
|
|
- <view class="app-text"><text style="color: #FDD143 ;">{{venue.goodRate||0}}</text> | 37条评论</view>
|
|
|
+ <view class="app-text"><text style="color: #FDD143 ;">{{ venue.goodRate || 0 }}</text> |
|
|
|
+ {{ venue.comments || 0 }}条评论</view>
|
|
|
</view>
|
|
|
- <view class="address">{{venue.address}} | {{venue.km}}km</view>
|
|
|
+ <view class="address">{{ venue.address }} | {{ venue.km }}km</view>
|
|
|
<view class="tags-box">
|
|
|
- <view class="tags" v-for="(tags,index) in venue.category" :key="index">{{tags}}</view>
|
|
|
+ <view class="tags" v-for="(tags, index) in venue.category" :key="index">{{ tags }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-<!-- <view class="s-course-list" v-for="item in 2">
|
|
|
+ <!-- <view class="s-course-list" v-for="item in 2">
|
|
|
<view class="course-name">
|
|
|
<view class="price">￥25.6</view>
|
|
|
<view class="name">室内小班篮球培训课时</view>
|
|
|
@@ -50,8 +53,9 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 培训 -->
|
|
|
- <view v-if="sel_index==1">
|
|
|
- <view class="s-training-card" v-for="(venue,index) in searchList" :key="venue.id" @click="RouterUtils.to_page(`/pages/index/courseDetail/index?id=${venue.id}`)">
|
|
|
+ <view v-if="sel_index == 1">
|
|
|
+ <view class="s-training-card" v-for="(venue, index) in searchList" :key="venue.id"
|
|
|
+ @click="RouterUtils.to_page(`/pages/index/courseDetail/index?id=${venue.id}`)">
|
|
|
<view class="training-box">
|
|
|
<view class="training-img">
|
|
|
<image class="t-img" :src="venue.cover" mode="">
|
|
|
@@ -60,15 +64,15 @@
|
|
|
<view class="training-info">
|
|
|
<view class="training-name">
|
|
|
<!-- <view class="t-tags">公益课</view> -->
|
|
|
- <view class="t-name textHidden">{{venue.name}}</view>
|
|
|
+ <view class="t-name textHidden">{{ venue.name }}</view>
|
|
|
</view>
|
|
|
<!-- <view class="tips">促进青少年长高</view> -->
|
|
|
<view class="t-price">
|
|
|
- <view class="price"><text class="mini-text">￥</text>{{venue.originalPrice}}</view>
|
|
|
+ <view class="price"><text class="mini-text">￥</text>{{ venue.originalPrice }}</view>
|
|
|
<!-- <view class="price-tips">不支持退款</view> -->
|
|
|
</view>
|
|
|
- <view class="sales">已售{{venue.sales}} {{venue.goodRate||'0'}}%好评</view>
|
|
|
- <view class="address">{{venue.address}} | {{venue.km}}km</view>
|
|
|
+ <view class="sales">已售{{ venue.sales }} {{ venue.goodRate || '0' }}%好评</view>
|
|
|
+ <view class="address">{{ venue.address }} | {{ venue.km }}km</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="tags-img">
|
|
|
@@ -77,431 +81,433 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 赛事 -->
|
|
|
- <view v-if="sel_index==2">
|
|
|
+ <view v-if="sel_index == 2">
|
|
|
<events :listData="searchList" />
|
|
|
</view>
|
|
|
<!-- 教练 -->
|
|
|
- <view v-if="sel_index==3">
|
|
|
+ <view v-if="sel_index == 3">
|
|
|
<instructor :listData="searchList" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<zs-loading v-else></zs-loading>
|
|
|
- <zs-empty v-if="searchList.length<1&&!searchLoading"></zs-empty>
|
|
|
+ <zs-empty v-if="searchList.length < 1 && !searchLoading"></zs-empty>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, onMounted } from 'vue';
|
|
|
- import { onLoad,onReachBottom } from '@dcloudio/uni-app';
|
|
|
- import { http } from '@/utils/http'
|
|
|
- import {RouterUtils,TipsUtils} from '@/utils/util'
|
|
|
- import { useCacheStore } from '@/stores/cache'
|
|
|
- import events from './components/events.vue'
|
|
|
- import instructor from './components/instructor.vue'
|
|
|
- import zsEmpty from '@/components/zs-empty/index.vue'
|
|
|
- import zsLoading from '@/components/zzx-loading/zzx-loading.vue'
|
|
|
- const cache = useCacheStore()
|
|
|
- const selectList = ref()
|
|
|
- const sel_index = ref(0);
|
|
|
- const sel_btn = ref(0);
|
|
|
- const keyword = ref();
|
|
|
- const venueType=ref()
|
|
|
- const searchList=ref();
|
|
|
- const navbarList = ref([{title: '场地',value: 0,tagsVal:'0-1'},{title: '培训',value: 1,tagsVal:'1-1'},{title: '赛事',value: 2,tagsVal:'2-1'},{title: '教练',value: 3,tagsVal:'3-1'}]);
|
|
|
- onLoad((options) => {
|
|
|
- keyword.value = options.keyword
|
|
|
- venueType.value=options.venueType
|
|
|
- console.log(options);
|
|
|
- })
|
|
|
- onReachBottom(()=>{
|
|
|
- current.value++
|
|
|
- get_searchInfo(tagsVal.value||'0-1')
|
|
|
- })
|
|
|
- onMounted(() => {
|
|
|
- if(venueType.value){
|
|
|
- get_searchInfo(venueType.value)
|
|
|
- }else{
|
|
|
- get_searchInfo('0-1')
|
|
|
- }
|
|
|
- // get_dictItems()
|
|
|
- get_dictType(0)
|
|
|
- })
|
|
|
- const select_btn = (e,i) => {
|
|
|
- searchLoading.value=true
|
|
|
- sel_btn.value = i
|
|
|
- get_searchInfo(e.value)
|
|
|
- }
|
|
|
- const select_nav = (e) => {
|
|
|
- searchLoading.value=true
|
|
|
- sel_index.value = e.value
|
|
|
- tagsVal.value=e.tagsVal
|
|
|
- sel_btn.value=0
|
|
|
- searchList.value=[]
|
|
|
- get_dictType(e.value || 0)
|
|
|
- get_searchInfo(e.tagsVal)
|
|
|
- }
|
|
|
-
|
|
|
- // 查询分类
|
|
|
- const get_dictType = (type : number) => {
|
|
|
- http.get('/common/getDictItems', { data: { dictCode: 'search_type' } }).then(res => {
|
|
|
- let arr = []
|
|
|
- res.result.forEach((item) => {
|
|
|
- let value = parseInt(item.value.split('-')[0])
|
|
|
- if (type == value){
|
|
|
- return arr.push(item)
|
|
|
- }
|
|
|
- })
|
|
|
- selectList.value=arr
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- const tagsVal=ref()
|
|
|
- const to_search=()=>{
|
|
|
- if(keyword.value=='') return TipsUtils.tips_toast('请输入搜索内容')
|
|
|
- searchLoading.value=true
|
|
|
- get_searchInfo(tagsVal.value||'0-1')
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
|
|
+import { http } from '@/utils/http'
|
|
|
+import { RouterUtils, TipsUtils } from '@/utils/util'
|
|
|
+import { useCacheStore } from '@/stores/cache'
|
|
|
+import events from './components/events.vue'
|
|
|
+import instructor from './components/instructor.vue'
|
|
|
+import zsEmpty from '@/components/zs-empty/index.vue'
|
|
|
+import zsLoading from '@/components/zzx-loading/zzx-loading.vue'
|
|
|
+const cache = useCacheStore()
|
|
|
+const selectList = ref()
|
|
|
+const sel_index = ref(0);
|
|
|
+const sel_btn = ref(0);
|
|
|
+const keyword = ref();
|
|
|
+const venueType = ref()
|
|
|
+const searchList = ref();
|
|
|
+const navbarList = ref([{ title: '场地', value: 0, tagsVal: '0-1' }, { title: '培训', value: 1, tagsVal: '1-1' }, { title: '赛事', value: 2, tagsVal: '2-1' }, { title: '教练', value: 3, tagsVal: '3-1' }]);
|
|
|
+onLoad((options) => {
|
|
|
+ keyword.value = options.keyword
|
|
|
+ venueType.value = options.venueType
|
|
|
+ console.log(options);
|
|
|
+})
|
|
|
+onReachBottom(() => {
|
|
|
+ current.value++
|
|
|
+ get_searchInfo(tagsVal.value || '0-1')
|
|
|
+})
|
|
|
+onMounted(() => {
|
|
|
+ if (venueType.value) {
|
|
|
+ get_searchInfo(venueType.value)
|
|
|
+ } else {
|
|
|
+ get_searchInfo('0-1')
|
|
|
}
|
|
|
-
|
|
|
- const searchLoading=ref(true)
|
|
|
- const current=ref(1)
|
|
|
- const get_searchInfo = (tagsVal) => {
|
|
|
- http.post('/home/search', { keyword: keyword.value, size: 10, current:current.value, venueType:String(tagsVal), longitude: cache.get('LON')||0, latitude: cache.get('LAT')||0 }).then((res) => {
|
|
|
- searchLoading.value=false
|
|
|
- if(current.value==1){
|
|
|
- searchList.value=res.result.records
|
|
|
- }else{
|
|
|
- searchList.value=[...searchList.value,...res.result.records]
|
|
|
+ // get_dictItems()
|
|
|
+ get_dictType(0)
|
|
|
+})
|
|
|
+const select_btn = (e, i) => {
|
|
|
+ searchLoading.value = true
|
|
|
+ sel_btn.value = i
|
|
|
+ get_searchInfo(e.value)
|
|
|
+}
|
|
|
+const select_nav = (e) => {
|
|
|
+ searchLoading.value = true
|
|
|
+ sel_index.value = e.value
|
|
|
+ tagsVal.value = e.tagsVal
|
|
|
+ sel_btn.value = 0
|
|
|
+ searchList.value = []
|
|
|
+ get_dictType(e.value || 0)
|
|
|
+ get_searchInfo(e.tagsVal)
|
|
|
+}
|
|
|
+
|
|
|
+// 查询分类
|
|
|
+const get_dictType = (type: number) => {
|
|
|
+ http.get('/common/getDictItems', { data: { dictCode: 'search_type' } }).then(res => {
|
|
|
+ let arr = []
|
|
|
+ res.result.forEach((item) => {
|
|
|
+ let value = parseInt(item.value.split('-')[0])
|
|
|
+ if (type == value) {
|
|
|
+ return arr.push(item)
|
|
|
}
|
|
|
})
|
|
|
- }
|
|
|
+ selectList.value = arr
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const tagsVal = ref()
|
|
|
+const to_search = () => {
|
|
|
+ if (keyword.value == '') return TipsUtils.tips_toast('请输入搜索内容')
|
|
|
+ searchLoading.value = true
|
|
|
+ get_searchInfo(tagsVal.value || '0-1')
|
|
|
+}
|
|
|
+
|
|
|
+const searchLoading = ref(true)
|
|
|
+const current = ref(1)
|
|
|
+const get_searchInfo = (tagsVal) => {
|
|
|
+ http.post('/home/search', { keyword: keyword.value, size: 10, current: current.value, venueType: String(tagsVal), longitude: cache.get('LON') || 0, latitude: cache.get('LAT') || 0 }).then((res) => {
|
|
|
+ searchLoading.value = false
|
|
|
+ if (current.value == 1) {
|
|
|
+ searchList.value = res.result.records
|
|
|
+ } else {
|
|
|
+ searchList.value = [...searchList.value, ...res.result.records]
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .s-header {
|
|
|
- background: #fff;
|
|
|
- padding: 20rpx;
|
|
|
+.s-header {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ .header-search {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10rpx;
|
|
|
+ background: #F6F6F6;
|
|
|
+ width: 680rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+
|
|
|
+ &>input {
|
|
|
+ width: 670rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ width: 144rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ background: #222222;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #C8FF0C;
|
|
|
+ line-height: 52rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .venue-navbar {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
- .header-search {
|
|
|
+ .navbar-list {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10rpx;
|
|
|
- background: #F6F6F6;
|
|
|
- width: 680rpx;
|
|
|
- height: 60rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- padding-left: 20rpx;
|
|
|
- &>input {
|
|
|
- width: 670rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
|
|
|
- .search-btn {
|
|
|
- width: 144rpx;
|
|
|
- height: 52rpx;
|
|
|
- background: #222222;
|
|
|
- border-radius: 28rpx;
|
|
|
+ .list-text {
|
|
|
font-weight: bold;
|
|
|
font-size: 28rpx;
|
|
|
- color: #C8FF0C;
|
|
|
- line-height: 52rpx;
|
|
|
- text-align: center;
|
|
|
+ color: #222222;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .venue-navbar {
|
|
|
- margin-top: 32rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .navbar-list {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10rpx;
|
|
|
|
|
|
- .list-text {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- &>image {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- }
|
|
|
+ &>image {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ .select-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .distance {
|
|
|
+ width: 92rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ background: #222222;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #C8FF0C;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- .content {
|
|
|
- .select-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
-
|
|
|
- .distance {
|
|
|
- width: 92rpx;
|
|
|
- height: 48rpx;
|
|
|
- background: #222222;
|
|
|
- border-radius: 8rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #C8FF0C;
|
|
|
- line-height: 48rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .score {
|
|
|
- width: 92rpx;
|
|
|
- height: 48rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 8rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .score {
|
|
|
+ width: 92rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .s-search-list {
|
|
|
- .s-venue-card {
|
|
|
- margin-top: 20rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 32rpx;
|
|
|
- padding: 20rpx;
|
|
|
+ .s-search-list {
|
|
|
+ .s-venue-card {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ padding: 20rpx;
|
|
|
|
|
|
- .s-venue-info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
+ .s-venue-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20rpx;
|
|
|
|
|
|
- .venue-img {
|
|
|
- &>image {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 32rpx;
|
|
|
- }
|
|
|
+ .venue-img {
|
|
|
+ &>image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .venue-info {
|
|
|
- .name {
|
|
|
- font-weight: 800;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- .appraise {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-top: 16rpx;
|
|
|
+ .venue-info {
|
|
|
+ .name {
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
|
|
|
- .app-text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- }
|
|
|
- }
|
|
|
+ .appraise {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 16rpx;
|
|
|
|
|
|
- .address {
|
|
|
- margin-top: 12rpx;
|
|
|
+ .app-text {
|
|
|
font-size: 24rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- .tags-box {
|
|
|
- margin-top: 16rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12rpx;
|
|
|
- flex-wrap: wrap;
|
|
|
- .tags {
|
|
|
- width: 92rpx;
|
|
|
- height: 36rpx;
|
|
|
- background: #F5F5F5;
|
|
|
- border-radius: 8rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- line-height: 36rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ color: #AAAAAA;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .s-course-list {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 20rpx;
|
|
|
+ .address {
|
|
|
+ margin-top: 12rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
|
|
|
- .course-name {
|
|
|
+ .tags-box {
|
|
|
+ margin-top: 16rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28rpx;
|
|
|
-
|
|
|
- .price {
|
|
|
- color: #FB5B5B;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- color: #222222;
|
|
|
+ gap: 12rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .tags {
|
|
|
+ width: 92rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: #F5F5F5;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ line-height: 36rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .sales {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .s-training-card {
|
|
|
+ .s-course-list {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
margin-top: 20rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 32rpx;
|
|
|
- padding: 20rpx;
|
|
|
- position: relative;
|
|
|
|
|
|
- .training-box {
|
|
|
+ .course-name {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
|
- .training-img {
|
|
|
- position: relative;
|
|
|
+ .price {
|
|
|
+ color: #FB5B5B;
|
|
|
+ }
|
|
|
|
|
|
- .t-img {
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 32rpx;
|
|
|
- }
|
|
|
+ .name {
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .img-tags {
|
|
|
- position: absolute;
|
|
|
- left: -20rpx;
|
|
|
- top: 0;
|
|
|
- width: 113rpx;
|
|
|
- }
|
|
|
+ .sales {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .tags-text {
|
|
|
- position: absolute;
|
|
|
- font-size: 18rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- top: 14rpx;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
+ .s-training-card {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .s-downtime {
|
|
|
- position: absolute;
|
|
|
- display: flex;
|
|
|
- bottom: 20rpx;
|
|
|
- left: 18rpx;
|
|
|
-
|
|
|
- .hours {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- background: rgba(200, 255, 12, 0.5);
|
|
|
- border-radius: 8rpx;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #222222;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .unit {
|
|
|
- width: 20rpx;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #222222;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
+ .training-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20rpx;
|
|
|
+
|
|
|
+ .training-img {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .t-img {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
}
|
|
|
|
|
|
- .training-info {
|
|
|
- .training-name {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8rpx;
|
|
|
-
|
|
|
- .t-tags {
|
|
|
- width: 92rpx;
|
|
|
- height: 36rpx;
|
|
|
- background: #4DD951;
|
|
|
- border-radius: 8rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- line-height: 36rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .t-name {
|
|
|
- width: 360rpx;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
- }
|
|
|
+ .img-tags {
|
|
|
+ position: absolute;
|
|
|
+ left: -20rpx;
|
|
|
+ top: 0;
|
|
|
+ width: 113rpx;
|
|
|
+ }
|
|
|
|
|
|
- .tips {
|
|
|
+ .tags-text {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 18rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ top: 14rpx;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-downtime {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ bottom: 20rpx;
|
|
|
+ left: 18rpx;
|
|
|
+
|
|
|
+ .hours {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background: rgba(200, 255, 12, 0.5);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-weight: 800;
|
|
|
font-size: 22rpx;
|
|
|
- color: #AAAAAA;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
- .t-price {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12rpx;
|
|
|
-
|
|
|
- .price {
|
|
|
- font-weight: 800;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #FB5B5B;
|
|
|
- }
|
|
|
-
|
|
|
- .price-tips {
|
|
|
- margin-top: 8rpx;
|
|
|
- width: 176rpx;
|
|
|
- height: 42rpx;
|
|
|
- background: linear-gradient(90deg, #C8FF0C 0%, #F2FFC7 79%, rgba(255, 255, 255, 0) 100%);
|
|
|
- border-radius: 28rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #222222;
|
|
|
- line-height: 42rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .unit {
|
|
|
+ width: 20rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .sales {
|
|
|
- margin-top: 8rpx;
|
|
|
+ .training-info {
|
|
|
+ .training-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+
|
|
|
+ .t-tags {
|
|
|
+ width: 92rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: #4DD951;
|
|
|
+ border-radius: 8rpx;
|
|
|
font-size: 22rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-name {
|
|
|
+ width: 360rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 32rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12rpx;
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FB5B5B;
|
|
|
+ }
|
|
|
|
|
|
- .address {
|
|
|
+ .price-tips {
|
|
|
margin-top: 8rpx;
|
|
|
+ width: 176rpx;
|
|
|
+ height: 42rpx;
|
|
|
+ background: linear-gradient(90deg, #C8FF0C 0%, #F2FFC7 79%, rgba(255, 255, 255, 0) 100%);
|
|
|
+ border-radius: 28rpx;
|
|
|
font-size: 22rpx;
|
|
|
color: #222222;
|
|
|
+ line-height: 42rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .tags-img {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
+ .sales {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
|
|
|
- .enroll-tags {
|
|
|
- width: 161rpx;
|
|
|
+ .address {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #222222;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags-img {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
|
|
|
+ .enroll-tags {
|
|
|
+ width: 161rpx;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
