|
|
@@ -0,0 +1,117 @@
|
|
|
+< -- 汪宁 2021-4-16 -- >
|
|
|
+<template>
|
|
|
+ <view class="app_content">
|
|
|
+ <scroll-view class="course_list" scroll-y>
|
|
|
+ <view class="list_item" v-for="(item, index) in 8" :key="index">
|
|
|
+ <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi1.sinaimg.cn%2FIT%2F2010%2F0419%2F201041993511.jpg&refer=http%3A%2F%2Fi1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621152651&t=08594a9b7bc95600bd5134c8be7f1150"></image>
|
|
|
+ <view class="class_name">婚礼宴会设计班</view>
|
|
|
+ <view class="class_introduce">针对花店花艺师，有一定花艺基础的花艺从业者</view>
|
|
|
+ <view class="class_price">
|
|
|
+ <text>¥6800.00</text>
|
|
|
+ <view class="class_apply">
|
|
|
+ <text>600人报名</text>
|
|
|
+ <view class="apply_btn" @click="signUp">报名</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <tab-bar
|
|
|
+ :current="2"
|
|
|
+ @click="tabClick"
|
|
|
+ ></tab-bar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentTabIndex: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ tabClick (index) {
|
|
|
+ this.currentTabIndex = index
|
|
|
+ },
|
|
|
+ signUp() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/class/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app_content{
|
|
|
+ // width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #f0f2f6;
|
|
|
+ padding-top: 1px;
|
|
|
+ padding-bottom: 120upx;
|
|
|
+ .course_list{
|
|
|
+ margin-top: 20upx;
|
|
|
+ // background-color: pink;
|
|
|
+ height: 100%;
|
|
|
+ padding-bottom: 100upx;
|
|
|
+ .list_item{
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0 20upx 20upx;
|
|
|
+ padding-bottom: 30upx;
|
|
|
+ &:last-child{
|
|
|
+ margin-bottom: 130upx;
|
|
|
+ }
|
|
|
+ &>image{
|
|
|
+ height: 440upx;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ &>.class_name{
|
|
|
+ padding-left: 20upx;
|
|
|
+ font-size: 38px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ margin: 20upx 0;
|
|
|
+ }
|
|
|
+ &>.class_introduce{
|
|
|
+ margin-left: 20upx;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ overflow: hidden;/*超出部分隐藏*/
|
|
|
+ white-space: nowrap;/*不换行*/
|
|
|
+ text-overflow:ellipsis;/*超出部分文字以...显示*/
|
|
|
+ }
|
|
|
+ &>.class_price{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ &>text{
|
|
|
+ margin-left: 20upx;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF2842;
|
|
|
+ }
|
|
|
+ &>.class_apply{
|
|
|
+ margin-left: 20upx;
|
|
|
+ &>text{
|
|
|
+ font-size: 24px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ &>.apply_btn{
|
|
|
+ width: 140upx;
|
|
|
+ display: inline-block;
|
|
|
+ height: 50upx;
|
|
|
+ line-height: 50upx;
|
|
|
+ background: linear-gradient(0deg, #FD6161, #FF3C59);
|
|
|
+ border-radius: 25px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 26upx;
|
|
|
+ margin: 0 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangning