| | |
| | | <template> |
| | | <div class="homePage"> |
| | | <el-carousel :height="screenheight + 'px'"> |
| | | <el-carousel :height="'615px'"> |
| | | <el-carousel-item v-for="(item, index) in banner" :key="index"> |
| | | <div class="bannerBox imgBox"> |
| | | <div class="bannerBox"> |
| | | <img id="autoHeight" class="bannerImg" :src="item.icon" @click="bannerLink(item)" /> |
| | | </div> |
| | | </el-carousel-item> |
| | |
| | | <div class="bookListBox"> |
| | | <div class="contentBox"> |
| | | <div class="bookListTitle"> |
| | | <div class="title">推荐教材</div> |
| | | <div class="titleBox"> |
| | | <span class="titleTextBg">推荐</span> |
| | | <span>教材</span> |
| | | </div> |
| | | <div class="more" @click="toMore">更多></div> |
| | | </div> |
| | | <div class="recommendList"> |
| | |
| | | <div class="infoBox"> |
| | | <div class="bookName">{{ item.name }}</div> |
| | | <div class="author"> |
| | | 作者:{{ item.authorcaupress_author ? item.caupress_author : '-' }} |
| | | {{ item.author ? item.author : '-' }} 著 |
| | | </div> |
| | | <div class="priceBox"> |
| | | <span class="price" v-if="item.price && item.price > 0"> |
| | | <span> ¥{{ item.price }}</span> |
| | | </span> |
| | | <span class="oldPrice" v-if="item.oldPrice"> ¥{{ item.oldPrice }}</span> |
| | | <span class="oldPrice" v-if="item.oldPrice > 0"> ¥{{ item.oldPrice }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="funBox"> |
| | | <div class="authentication"> |
| | | <div class="cardNav" @click="toAuthentication(true)"> |
| | | <img id="rightImg" src="@/assets/images/xiehe/home/jxfw.png" alt=""> |
| | | <div class="cardTitle">教师认证</div> |
| | | <div class="cardText"> |
| | | 学校任课老师上传教师证明文件,通过认证后,可进行样书与教学资源下载申请 |
| | | 学校任课老师上传教师证明文件,通过认证后,可进行数字教材试用申请及开课开班 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="manual"> |
| | | <div class="cardNav" @click="toAuthentication(false)"> |
| | | <img id="rightImg" src="@/assets/images/xiehe/home/jxfw.png" alt=""> |
| | | <div class="cardTitle">操作手册</div> |
| | | <div class="cardText">快速了解使用步骤,轻松开启教学支持之旅。</div> |
| | | <div class="cardText">快速了解使用步骤,轻松开启教学支持之旅</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="bookListTitle"> |
| | | <div class="title" style="display: flex; line-height: 50px"> |
| | | <div>教学导航</div> |
| | | <div class="titleBox"> |
| | | <span class="titleTextBg">教学</span> |
| | | <span>导航</span> |
| | | </div> |
| | | <div class="titleTabs" v-if="classfeild.length > 0"> |
| | | <el-tabs v-model="activeName" @tab-change="handleClick"> |
| | | <el-tab-pane v-for="item in classfeild" :key="item.value" :label="item.name" :name="item.value" /> |
| | | </el-tabs> |
| | | </div> |
| | | <div class="more" style="margin-left: 20px" @click="toMore">更多></div> |
| | | <div class="more" style="margin-left: 30px; font-weight: normal" @click="toMore"> |
| | | 更多> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="recommendList"> |
| | |
| | | <div class="infoBox"> |
| | | <div class="bookName">{{ item.name }}</div> |
| | | <div class="author"> |
| | | 作者:{{ item.authorcaupress_author ? item.caupress_author : '-' }} |
| | | {{ item.author ? item.author : '-' }} 著 |
| | | </div> |
| | | <div class="priceBox"> |
| | | <span class="price" v-if="item.price && item.price > 0"> |
| | | <span>¥{{ item.price }}</span> |
| | | </span> |
| | | <span class="oldPrice" v-if="item.oldPrice">¥{{ item.oldPrice }}</span> |
| | | <span class="oldPrice" v-if="item.oldPrice > 0">¥{{ item.oldPrice }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | value: item.value, |
| | | } |
| | | }) |
| | | console.log(noCheck, 'noCheck') |
| | | |
| | | classfeild.value = noCheck |
| | | console.log(classfeild, 'classfeild') |
| | | }) |
| | | } |
| | | |
| | |
| | | }, |
| | | fields: { |
| | | 'teachingLevel=': activeName.value, |
| | | author: [], |
| | | }, |
| | | }) |
| | | .then((res) => { |
| | | console.log(res, '11111111111') |
| | | navBookList.value = res.datas |
| | | navBookList.value = res.datas?.map(item => { |
| | | return { |
| | | ...item, |
| | | price: toolClass.toDecimal2(item.price), |
| | | oldPrice: toolClass.toDecimal2(item.oldPrice), |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | |
| | | }, |
| | | fields: { |
| | | author: [], |
| | | isbn: [] |
| | | }, |
| | | }) |
| | | .then((res) => { |
| | | console.log(res, '推荐教材') |
| | | bookListData.value = res.datas |
| | | bookListData.value = res.datas?.map(item => { |
| | | return { |
| | | ...item, |
| | | price: toolClass.toDecimal2(item.price), |
| | | oldPrice: toolClass.toDecimal2(item.oldPrice), |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | |
| | | min-height: calc(100vh - 61.8%); |
| | | background-color: #fff; |
| | | padding-bottom: 100px; |
| | | |
| | | .titleBox { |
| | | min-width: 127px; |
| | | font-family: JDLangZhengTi, JDLangZhengTi; |
| | | font-weight: 400; |
| | | font-size: 24px; |
| | | color: #000; |
| | | line-height: 24px; |
| | | text-align: left; |
| | | white-space: nowrap; |
| | | |
| | | .titleTextBg { |
| | | padding: 2px 5px; |
| | | box-sizing: border-box; |
| | | background-image: url('@/assets/images/xiehe/home/Text_bg2@.png'); |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | background-position: center; |
| | | color: #fff; |
| | | } |
| | | } |
| | | |
| | | .bannerBox { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | |
| | | .el-carousel__item h3 { |
| | |
| | | .bookListBox { |
| | | width: 100%; |
| | | padding: 80px 0; |
| | | margin-top: 30px; |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | background-image: url('@/assets/images/tuijian-bg.png'); |
| | |
| | | border: 1px solid #DEDEDE; |
| | | box-sizing: border-box; |
| | | padding: 30px 0; |
| | | box-sizing: border-box; |
| | | |
| | | &:last-child { |
| | | margin-right: 0; |
| | |
| | | margin-bottom: 60px; |
| | | |
| | | .authentication { |
| | | width: 40%; |
| | | height: 100px; |
| | | width: 650px; |
| | | height: 123px; |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | background-image: url('@/assets/images/xiehe/home/jiaoshirenzheng.png'); |
| | | } |
| | | |
| | | .manual { |
| | | width: 40%; |
| | | height: 100px; |
| | | width: 650px; |
| | | height: 123px; |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | background-image: url('@/assets/images/xiehe/home/jiaoshirenzheng.png'); |
| | | background-image: url('@/assets/images/xiehe/home/caozuoshouce.png'); |
| | | } |
| | | } |
| | | |
| | | .titleTabs { |
| | | margin-left: 50px; |
| | | margin-left: 30px; |
| | | width: 85%; |
| | | } |
| | | |
| | |
| | | margin-bottom: 20px; |
| | | border-bottom: 1px solid #ebebeb; |
| | | |
| | | padding-bottom: 20px; |
| | | |
| | | .title { |
| | | font-size: 20px; |
| | |
| | | font-size: 14px; |
| | | color: #999999; |
| | | cursor: pointer; |
| | | font-weight: 500; |
| | | min-width: 60px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | |
| | | .cardNav { |
| | | margin-left: 30%; |
| | | margin-left: 150px; |
| | | margin-top: 20px; |
| | | padding-right: 20px; |
| | | cursor: pointer; |
| | | position: relative; |
| | | |
| | | #rightImg { |
| | | position: absolute; |
| | | right: 48px; |
| | | top: 26px; |
| | | height: 30px; |
| | | } |
| | | |
| | | .cardTitle { |
| | | font-size: 28px; |
| | | color: #ffffff; |
| | | font-family: JDLangZhengTi, JDLangZhengTi; |
| | | font-weight: 400; |
| | | font-size: 32px; |
| | | color: #FFFFFF; |
| | | margin-bottom: 5px; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .cardText { |
| | | width: 351px; |
| | | font-family: PingFang SC, PingFang SC; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ccc; |
| | | margin-top: 10px; |
| | | color: #FFFFFF; |
| | | line-height: 25px; |
| | | } |
| | | |
| | | |
| | | } |
| | | |
| | | ::v-deep(.el-tabs__item) { |
| | | align-items: stretch; |
| | | height: 50px !important; |
| | | white-space: pre-wrap !important; |
| | | width: 40% !important; |
| | | height: 50px; |
| | | line-height: 22px; |
| | | text-align: center; |
| | | padding: 15px 0; |
| | | box-sizing: border-box; |
| | | margin: 0 10px; |
| | | } |
| | | |
| | | |
| | | ::v-deep(.el-tabs__header) { |
| | | padding: 0; |
| | | position: relative; |
| | | margin: 0 0 0 0px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between |
| | | } |
| | | </style> |