Skip to content

T
thinkApp
Commit 8d1693fd authored by 罗超's avatar 罗超
Browse files
Options

调整卡片样式

parent 76d0b87d
Hide whitespace changes
Inline Side-by-side
Showing with 184 additions and 6 deletions
src/components/index/course-card.vue
View file @ 8d1693fd
......@@ -11,22 +11,124 @@
上课进度 5/12
</view>
<view class="course-opera">
<van-button class-prefix="iconfont" icon=" icon-qiehuan1" round type="default" size="mini"
<van-button @click="exchangeItemHandler" class-prefix="iconfont" icon=" icon-qiehuan1" round type="default" size="mini"
custom-style="color:#E23B4A;font-size: 24rpx;padding-left:10rpx;padding-right:10px;">切换课程
</van-button>
</view>
</view>
<image class="illustration"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_494.png"
mode="widthFix"></image>
</view>
<image class="end"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_413.png"
mode="widthFix"></image>
<van-popup
:show="showItems"
round
position="bottom"
@click-overlay="hideExchangeBoxHandler"
custom-style="height: 60%"
>
<view class="exchange-items">
<view class="title-box">
<text class="main-title">课程选择</text>
<text class="sub-title">(共有3门课程)</text>
</view>
<view class="items">
<view class="item-course">
<view class="course-pic">
<image src="https://www.kfzimg.com/G06/M00/B5/48/p4YBAFsJY12AK0n7AAEM2KDUHRw535_n.jpg" mode="aspectFill"></image>
</view>
<view class="content">
<view class="one_line course-name">
高中物理鸿志班（二期周五下午上课）
</view>
<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
stroke-width="5" />
<view class="course-progress">
上课进度 5/12
</view>
<view style="text-align: right;">
<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
选择课程
</van-button>
</view>
</view>
</view>
<view class="item-course">
<view class="course-pic">
<image src="https://www.kfzimg.com/G06/M00/B5/48/p4YBAFsJY12AK0n7AAEM2KDUHRw535_n.jpg" mode="aspectFill"></image>
</view>
<view class="content">
<view class="one_line course-name">
高中物理鸿志班（二期周五下午上课）
</view>
<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
stroke-width="5" />
<view class="course-progress">
上课进度 5/12
</view>
<view style="text-align: right;">
<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
选择课程
</van-button>
</view>
</view>
</view>
<view class="item-course">
<view class="course-pic">
<image src="https://www.kfzimg.com/G06/M00/B5/48/p4YBAFsJY12AK0n7AAEM2KDUHRw535_n.jpg" mode="aspectFill"></image>
</view>
<view class="content">
<view class="one_line course-name">
高中物理鸿志班（二期周五下午上课）
</view>
<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
stroke-width="5" />
<view class="course-progress">
上课进度 5/12
</view>
<view style="text-align: right;">
<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
选择课程
</van-button>
</view>
</view>
</view>
<view class="item-course">
<view class="course-pic">
<image src="https://www.kfzimg.com/G06/M00/B5/48/p4YBAFsJY12AK0n7AAEM2KDUHRw535_n.jpg" mode="aspectFill"></image>
</view>
<view class="content">
<view class="one_line course-name">
高中物理鸿志班（二期周五下午上课）
</view>
<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
stroke-width="5" />
<view class="course-progress">
上课进度 5/12
</view>
<view style="text-align: right;">
<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
选择课程
</van-button>
</view>
</view>
</view>
</view>
</view>
</van-popup>
</view>
</template>
<script>
......@@ -44,12 +146,20 @@
props: {},
setup() {
let data = reactive({
statusBarHeight: 24
statusBarHeight: 24,
showItems:false
});
const os = uni.getSystemInfoSync();
data.statusBarHeight = os.statusBarHeight
let methods={
exchangeItemHandler(){
data.showItems=true
},
hideExchangeBoxHandler(){
data.showItems=false
}
}
return {
...toRefs(data),
...methods
};
},
};
......@@ -105,4 +215,72 @@
.course-card .course-item .course-opera {
margin-top: 20rpx;
}
.course-card .exchange-items{
padding:50rpx 0;
padding-bottom: 0;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
background: #F6F6F6;
}
.course-card .exchange-items .title-box{
padding:0 50rpx;
}
.course-card .exchange-items .title-box .main-title{
font-size: 36rpx;
font-weight: 800;
color:#282828;
}
.course-card .exchange-items .title-box .sub-title{
font-size: 26rpx;
font-weight: normal;
color:#6F6F6F;
margin-left: 10rpx;
}
.course-card .exchange-items .items{
width: 100%;
flex:1;
overflow-y:auto;
margin-top:40rpx;
padding:0 50rpx;
box-sizing: border-box;
}
.course-card .exchange-items .items .item-course{
margin-bottom: 50rpx;
padding:40rpx 36rpx;
display: flex;
align-items: flex-start;
background-color: #FFF;
border-radius: 30rpx;
}
.course-card .exchange-items .items .item-course .course-pic{
width: 100rpx;
height: 140rpx;
margin-right: 36rpx;
overflow: hidden;
}
.course-card .exchange-items .items .item-course .course-pic image{
width:100%;
height: 100%;
}
.course-card .exchange-items .items .item-course .content{
flex:1;
width: 1px;
}
.course-card .exchange-items .items .item-course .content .course-name{
font-size: 30rpx;
font-weight: bold;
color: #282828;
line-height: 42rpx;
margin-bottom: 20rpx;
}
.course-card .exchange-items .items .item-course .content .course-progress{
color: #282828;
font-weight: 400;
font-size: 20rpx;
margin-top: 4rpx;
margin-bottom: 10rpx;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment