<!-- * @Author: 纪泽龙 jizelong@qq.com * @Date: 2022-09-20 14:29:26 * @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditTime: 2023-01-03 15:10:43 * @FilePath: /danger-manage-web/src/views/myLessons/components/LearnItem.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div class="item flex"> <div class="allone" style="position:relative"> <div class="content">培训课程</div> <div class="border"></div> <div class="lesson zzz" style="width: 75%" :title="itemData.lessonName"> {{ itemData.lessonName }}</div> </div> <div class="time">发布时间:{{ itemData.publishTime }}</div> <div class="bottom flex"> <div @click="click" class="btn" :class="{ again: yesOrNo }"> {{ yesOrNo }} </div> </div> <div class="img" :class="{ no: itemData.isFinish === '0', yes: itemData.isFinish === '1', ygq:itemData.isFinish === '2', wks:itemData.isFinish === '3', }" > {{ state[itemData.isFinish] }} </div> </div> </template> <script> export default { name: "", props: { itemData: { type: Object, default: () => { return { again: 2, }; }, }, state: { type: Object, }, }, computed: { yesOrNo() { console.log(this.itemData) if( this.itemData.isFinish === '0'){ return '开始学习' }else if(this.itemData.isFinish === '1'){ return '查看课程' }else if(this.itemData.isFinish === '2'){ return '开始学习' }else if(this.itemData.isFinish === '3'){ return '还未开始' } }, }, data() { return { answerOpen:false }; }, methods: { click() { console.log("item------",this.itemData) let state = this.state; const { trainManageId } = this.itemData; this.$router.push({ path: "CheckTrain", query: { trainManageId, state }, }); }, }, }; </script> <style lang="scss" scoped> .item { width: 100%; height: 100%; // background: red; overflow: hidden; padding-top: 15px; padding-left: 18px; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12); border-radius: 5px; flex-direction: column; position: relative; > div { font-size: 14px; } .title { color: #606266; margin-bottom: 8%; } .lesson { color: #1d84ff; text-align: center; margin-bottom: 3%; } .time { text-align: center; font-size: 12px; color: #7b808a; margin-bottom: 5%; } .bottom { flex: 1; justify-content: center; .btn { width: 110px; height: 40px; border-radius: 4px; font-size: 14px; text-align: center; line-height: 40px; color: #1d84ff; border: 1px solid #a3d3ff; background: #e8f4ff; font-size: 14; cursor: pointer; &.again { color: #ffffff; border: 1px solid #a3d3ff; background: #1d84ff 100%; } &:hover { background: rgba(29, 132, 255, 0.5); color: #ffffff; } } } .allone{ display:flex; flex-direction:row; justify-content:flex-start; } .img { position: absolute; width: 100px; height: 20px; background: #1d84ff; // opacity: .2; top: 3%; right: -7%; text-align: center; line-height: 20px; font-size: 10px; color: #ffffff; transform: rotateZ(40deg); &.no { background: #e2852a; } &.yes { background: #3cc426 !important; } &.ygq { background: red !important; } &.wks { background: yellow !important; } } } .border { width: 0; height: 0; border: 10px solid; border-color: transparent transparent transparent #1d84ff; } .border:after { content: ''; border-style: solid; border-width: 10px; border-color: transparent transparent transparent #fff; position: absolute; top: 0px; left: 49px; } .content{ border: 1.5px solid #1d84ff; height: 20px; font-size: 10px; color: #1d84ff; line-height: 18px; } </style>