Skip to content

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

调整卡片样式

parent 76d0b87d
Show whitespace changes
Inline Side-by-side
Showing with 184 additions and 6 deletions
src/components/index/course-card.vue
View file @ 8d1693fd
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
上课进度 5/12 上课进度 5/12
</view> </view>
<view class="course-opera"> <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;">切换课程 custom-style="color:#E23B4A;font-size: 24rpx;padding-left:10rpx;padding-right:10px;">切换课程
</van-button> </van-button>
...@@ -26,7 +26,109 @@ ...@@ -26,7 +26,109 @@
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_413.png" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_413.png"
mode="widthFix"></image> 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>
<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> </template>
<script> <script>
...@@ -44,12 +146,20 @@ ...@@ -44,12 +146,20 @@
props: {}, props: {},
setup() { setup() {
let data = reactive({ let data = reactive({
statusBarHeight: 24 statusBarHeight: 24,
showItems:false
}); });
const os = uni.getSystemInfoSync(); let methods={
data.statusBarHeight = os.statusBarHeight exchangeItemHandler(){
data.showItems=true
},
hideExchangeBoxHandler(){
data.showItems=false
}
}
return { return {
...toRefs(data), ...toRefs(data),
...methods
}; };
}, },
}; };
...@@ -105,4 +215,72 @@ ...@@ -105,4 +215,72 @@
.course-card .course-item .course-opera { .course-card .course-item .course-opera {
margin-top: 20rpx; 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> </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