| | |
| | | <div class="homePage"> |
| | | <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"> |
| | |
| | | <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="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"> |
| | |
| | | <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> |
| | |
| | | }, |
| | | }) |
| | | .then((res) => { |
| | | navBookList.value = res.datas |
| | | navBookList.value = res.datas?.map(item => { |
| | | return { |
| | | ...item, |
| | | price: toolClass.toDecimal2(item.price), |
| | | oldPrice: toolClass.toDecimal2(item.oldPrice), |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | |
| | | }, |
| | | }) |
| | | .then((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; |
| | |
| | | } |
| | | |
| | | .titleTabs { |
| | | margin-left: 50px; |
| | | margin-left: 30px; |
| | | width: 85%; |
| | | } |
| | | |
| | |
| | | margin-bottom: 20px; |
| | | border-bottom: 1px solid #ebebeb; |
| | | |
| | | padding-bottom: 20px; |
| | | |
| | | .title { |
| | | font-size: 20px; |
| | |
| | | color: #999999; |
| | | cursor: pointer; |
| | | font-weight: 500; |
| | | min-width: 60px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | |
| | |
| | | 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> |