Skip to content

T
thinkApp
Commit 0c7a3bb1 authored by youjie's avatar youjie
Browse files
Options

no message

parent 3acdcc0c
Show whitespace changes
Inline Side-by-side
Showing with 37 additions and 6 deletions
src/pages/person/components/vear-carousel/vear-carousel.vue
View file @ 0c7a3bb1
...@@ -2,11 +2,20 @@ ...@@ -2,11 +2,20 @@
<swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" :indicator-dots="false" :current="currentIndex" indicator-active-color='#4C50E7' @change="swiperChange"> <swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" :indicator-dots="false" :current="currentIndex" indicator-active-color='#4C50E7' @change="swiperChange">
<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="item[urlKey]"> <swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="item[urlKey]">
<!-- <image @click="clickImg(item)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item[urlKey]" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill"></image> --> <!-- <image @click="clickImg(item)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item[urlKey]" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill"></image> -->
<view class="box" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :style="{background:item.B2BBackground ? getOpacityColor(item.B2BBackground,0.3):'#FFF',}"> <view class="box" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :style="{background:item.B2BBackground ? getOpacityColor(item.B2BBackground,0.3):'#FFF',}">
<view class="box-state"> <!-- <view class="box-state">
<span v-if="item.ClassStatus==1">未开班</span> <span v-if="item.ClassStatus==1">未开班</span>
<span v-if="item.ClassStatus==2">学习中</span> <span v-if="item.ClassStatus==2">学习中</span>
<span v-if="item.ClassStatus==3">已结课</span> <span v-if="item.ClassStatus==3">已结课</span>
</view> -->
<view class="ClassStatus-box">
<text :style="{background:item.ClassStatus==3?'#ddd':(item.ClassStatus==2?'#FFD694':'#282828')}" style="display: inline-block;width: 16rpx;height: 16rpx;border-radius: 50%;margin-right: 10rpx;"></text>
<text :style="{color:item.ClassStatus==3?'#ddd':(item.ClassStatus==2?'#FFD694':'#282828')}">
<template v-if="item.ClassStatus==1">未开班</template>
<template v-if="item.ClassStatus==2">学习中</template>
<template v-if="item.ClassStatus==3">已结课</template>
</text>
</view> </view>
<view class="box-center"> <view class="box-center">
<view class="box-center-l" :style="{background:item.B2BBackground ? getOpacityColor(item.B2BBackground,0.7):'#d5f3e9',}"> <view class="box-center-l" :style="{background:item.B2BBackground ? getOpacityColor(item.B2BBackground,0.7):'#d5f3e9',}">
...@@ -34,12 +43,14 @@ ...@@ -34,12 +43,14 @@
</view> </view>
<view class="box-center-r"> <view class="box-center-r">
<view> <view>
<view style="font-size: 15px;font-weight: bold;">{{item.CourseName}}</view> <view class="ClassName-text">
<view style="font-size: 12px;font-weight: 500;margin-top: 5px;">{{item.ClassName}}</view> {{item.ClassName}}
</view>
<!-- <view style="font-size: 12px;font-weight: 500;margin-top: 5px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{item.CourseName}}</view> -->
<view class="row" style="font-size: 12px;margin-top: 5px;"> <view class="row" style="font-size: 12px;margin-top: 5px;">
<!-- #4C50E7 --> <!-- #4C50E7 -->
<view class="row">总计<span style="color: #C91727;margin:0 3px;font-weight: bold;">{{item.TotalHours}}</span>次</view> <view class="row">总计<span style="color: #C91727;margin:0 3px;font-weight: bold;">{{item.TotalHours}}</span>次</view>
<view style="width: 1px;height: 15px;background-color:#999999;margin: 0 10px;"></view> <!-- <view style="width: 1px;height: 15px;background-color:#999999;margin: 0 10px;"></view> -->
<view class="row">剩余<span style="color: #C91727;margin:0 3px;font-weight: bold;">{{item.SurplusHours?item.SurplusHours:0}}</span>次</view> <view class="row">剩余<span style="color: #C91727;margin:0 3px;font-weight: bold;">{{item.SurplusHours?item.SurplusHours:0}}</span>次</view>
</view> </view>
</view> </view>
...@@ -169,6 +180,7 @@ ...@@ -169,6 +180,7 @@
.box{ .box{
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* padding: 0 20rpx; */ /* padding: 0 20rpx; */
...@@ -199,7 +211,7 @@ ...@@ -199,7 +211,7 @@
} }
.box-center-r{ .box-center-r{
flex:1; flex:1;
margin-left: 12px; /* margin-left: 12px; */
min-height: 208rpx; min-height: 208rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -207,7 +219,9 @@ ...@@ -207,7 +219,9 @@
} }
.row{ .row{
display: flex;align-items: center; display: flex;
align-items: center;
justify-content: space-between;
} }
.box-state{ .box-state{
width: 38rpx; width: 38rpx;
...@@ -222,6 +236,23 @@ ...@@ -222,6 +236,23 @@
box-sizing: border-box; box-sizing: border-box;
padding: 5rpx 8rpx; padding: 5rpx 8rpx;
} }
.ClassName-text{
width: 100%;
font-size: 30rpx;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
margin-bottom: 50rpx;
}
.ClassStatus-box{
font-size: 24rpx;
text-align: right;
width: calc(100% - 36rpx);
margin-bottom: 20rpx;
}
@keyframes to-mini @keyframes to-mini
{ {
......
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