{"version":3,"file":"index.6ae2426d.mjs","sources":["../../../../assets/pc/teacher_more.svg","../../../../components/index/Grade/index.vue"],"sourcesContent":["export default \"__VITE_ASSET__71c6f88a__\"","<template>\n  <div class=\"grade_wrapper w\">\n    <div v-if=\"componentInfo.config.showTitle\" class=\"grade_title\">\n      <div class=\"grade_title_name\">\n        <index-title-icon />\n        <span>{{ componentInfo.config.title }}</span>\n      </div>\n       <NuxtLink to=\"/grade/list\" >\n        <div v-if=\"componentInfo.config.showMore\" class=\"grade_title_more flex_align\">更多<i class=\"arrows\" /></div>\n       </NuxtLink>\n    </div>\n    <div class=\"grade_main\">\n      <NuxtLink :to=\"'/grade/view?id=' + item.id\" v-for=\"(item, index) in componentInfo.data\" :key=\"index\" class=\"grade_item_wrapper\">\n        <div class=\"grade_item\">\n          <div v-if=\"item.coverUrl\" class=\"item_image_wrapper\">\n            <img class=\"item_image\" :src=\"item.coverUrl\">\n          </div>\n          <div v-if=\"!item.cover && !item.id\" class=\"default_image_wrapper\">\n          </div>\n          <div class=\"grade_info\">\n            <div class=\"grade_name ellipsis\" v-html=\"item.classroomName\"></div>\n            <div class=\"grade_teacher\" v-if=\"item.teacherList && item.teacherList.length > 0\">\n              <template v-for=\"(teacher, i) in item.teacherList\">\n                <div v-if=\"i<=2\" :key=\"i\" class=\"teacher_warp_item\">\n                  <img v-if=\"teacher.headImg\" :src=\"teacher.headImg\" :title=\"teacher.nickname\" class=\"mgl3 cover_teacher\">\n                  <div class=\"teacher_name tx-ov\">{{ teacher.nickname }}</div>\n                </div>\n              </template>\n              <div v-if=\"item.teacherList.length > 3\" class=\"teacher_warp_item\">\n                <img src=\"~/assets/pc/teacher_more.svg\" class=\"mgl3 cover_teacher\">\n                <div class=\"teacher_name tx-ov\">更多</div>\n              </div>\n            </div>\n            <div class=\"grade_info_desc\">\n              <div class=\"learn_num\"><span v-if=\"shopData && shopData.config.showLearnUserCount && shopData.config.showClassroomLearnUserCount\">{{ item.studentCount + '人已报名' }}</span></div>\n              <div class=\"price\">\n                <span :class=\"['current_price', item.price == 0 ? 'free' : '']\">{{ item.price || '免费' }}</span>\n                <span v-if=\"item.linePrice != 0\" class=\"old_price\">{{ item.linePrice }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </NuxtLink>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport {useUserStore} from \"@/stores/user\";\nconst props = defineProps({\n  componentInfo: {\n    type: Object,\n    default: () => {\n      return {}\n    }\n  }\n})\nconst { shopData } = useUserStore()\n</script>\n<style lang=\"scss\" scoped>\n.grade_wrapper {\n  padding: 25px 0px;\n}\n.grade_title {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n  width: 100%;\n  line-height: 22px;\n  color: #333;\n}\n.grade_title_name {\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 24px;\n  line-height: 34px;\n  img {\n    width: 24px;\n    height: 24px;\n  }\n}\n.grade_main {\n  display: flex;\n  flex-wrap: wrap;\n  margin-left: -10px;\n  margin-right: -10px;\n}\n.grade_item_wrapper {\n  margin-bottom: 20px;\n  padding: 0 10px;\n  width: 50%;\n}\n.grade_item_wrapper:nth-last-child(-n + 2) {\n  margin-bottom: 0;\n}\n.grade_item {\n  padding: 15px;\n  display: flex;\n  background: #ffffff;\n  border-radius: 5px;\n  &:hover {\n    box-shadow: 0 3px 18px rgba(0, 0, 0, 0.2);\n    transform: translateY(-2px);\n    transition: all 0.3s;\n  }\n}\n.item_image_wrapper {\n  overflow: hidden;\n  height: 128px;\n  width: 230px;\n  border-radius: 6px;\n  .item_image {\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n}\n\n.default_image_wrapper {\n  height: 128px;\n  width: 230px;\n  overflow: hidden;\n  background: #3d7fff12;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  .default_image {\n    width: 26px;\n    height: 26px;\n  }\n}\n.grade_info {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  flex: 1;\n  padding-left: 10px;\n}\n.grade_name {\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 24px;\n  height: 48px;\n}\n.grade_teacher {\n  flex: 1;\n  font-size: 12px;\n  line-height: 18px;\n  height: 42px;\n  color: #999999;\n}\n.grade_info_desc {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 14px;\n  white-space: nowrap;\n  color: #999999;\n  line-height: 18px;\n  .border {\n    width: 1px;\n    padding: 0.5px;\n    margin: 0px 10px;\n    height: 12px;\n    background: #ebeef5;\n  }\n}\n.price {\n  line-height: 18px;\n  .current_price {\n    font-size: 16px;\n      font-weight: 550;\n      color: #F61818;\n    &.free{\n      color: #58B85C;\n    }\n  }\n  .current_price::before {\n    content: '￥';\n    font-size: 0.66em;\n  }\n  .free::before {\n    display: none;\n  }\n  .old_price {\n    margin-left: 5px;\n    font-size: 12px;\n    line-height: 18px;\n    color: #999999;\n    text-decoration-line: line-through;\n  }\n  .old_price::before {\n    content: '￥';\n    font-size: 1em;\n  }\n}\n.grade_teacher {\n  white-space: nowrap;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  color: #333333;\n  display: flex;\n  align-items: center;\n  &.cu {\n    cursor: pointer;\n    &:hover {\n      // color: #2256f6;\n    }\n  }\n}\n.teacher_warp_item {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  cursor: pointer;\n  margin-right: 10px;\n  & + .teacher_warp_item {\n    margin-right: 10px;\n  }\n\n  .teacher_name {\n    margin-top: 2px;\n    font-size: 12px;\n    line-height: 20px;\n    width: 48px;\n    text-align: center;\n  }\n\n  &:hover .teacher_name {\n    // color: #3d7fff;\n  }\n}\n\n.cover_teacher {\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  cursor: pointer;\n\n  & + .cover_teacher {\n    transition: all 0.3s;\n    margin-left: 3px;\n  }\n\n  &.hover {\n    transform: scale(1.5);\n    // border: 1px solid #2256F6;\n    // box-shadow: 0px 5px 15px rgba(54, 41, 183, 0.06);\n  }\n}\n</style>\n"],"names":["_imports_0","URL","import","meta","url","href","shopData","useUserStore"],"mappings":"wKAAA,MAAeA,EAAA,GAAA,IAAAC,IAAA,4BAAAC,OAAAC,KAAAC,KAAAC,4zBCyDf,MAAAC,SAAAA,GAAAC"}