Files
medicine_app/pages/peanut/home.vue
@fawn-nine 9f265afa4a 暂存
2024-09-02 17:15:29 +08:00

1609 lines
36 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="containerBg" style="font-size: 28upx;">
<view class="home_bg">
<view class="" style=" ">
<view style="height: 60rpx"></view>
<view class="icon_hua">
<image src="../../static/homeLogo.png" mode="aspectFit" class="icon_hua_1"></image>
</view>
<view class="hehan">
<image src="../../static/icon/hehan.png" mode="aspectFit" class="icon_hua_1"></image>
</view>
<view class="topSearch_box">
<image src="../../static/search.png" mode="aspectFit"
@click="onPageJump('/pages/peanut/searchFor')"></image>
</view>
</view>
</view>
<view class="fourBox nopadding" style="">
<view class="fourIcon flexbox noRadius" style="justify-content: space-around; margin-bottom:0; box-shadow: none; ">
<div class="item flexbox" @click="onPageJump('/pages/course/outline')">
<image src="../../static/my_01.png" mode="aspectFit"></image>
<text>学习大纲</text>
</div>
<div class="item flexbox" @click="onPageJump('/pages/course/myCourse')">
<image src="../../static/my_02.png" mode="aspectFit"></image>
<text>我的课程</text>
</div>
<div class="item flexbox" @click="onPageJump('/pages/course/vipCourse')">
<image src="../../static/my_06.png" mode="aspectFit"></image>
<text>超V专享</text>
</div>
<!-- <div class="item flexbox" @click="onPageJump()">
<image src="../../static/my_03.png" mode="aspectFit"></image>
<text>太湖讲堂</text>
</div> -->
<div class="item flexbox" @click="onPageJump('/pages/medicaldes/medicaldes')">
<image src="../../static/my_04.png" mode="aspectFit"></image>
<text>吴门医述</text>
</div>
</view>
</view>
<view class="" @click="onPageJump('/pages/miniClass/test')" style="height: 100rpx; line-height: 100rpx; text-align: center;">
去考试页面
</view>
<view class="newLeve2">
<view class="home_nar nomargin" style="padding: 0; background-color: #fff;">
<view class="flexbox">
<view :class="['hn_cl_tit',tabsid==item.id?'active':'']" @click="curseClick(item)"
v-for="(item, index) in curseTagList" :key="index">
<image :src="item.icon" mode="aspectFit"></image>
<text>{{item.title}}</text>
</view>
</view>
</view>
<view class="fourBox" style="padding: 0; padding-bottom: 8rpx;" v-if="sbuMedicalTagsList && sbuMedicalTagsList.length > 0">
<view class="childrenBox fourIcon flexbox" style="justify-content: space-around;">
<div class="item flexbox" @click="curseClickJump(item)" v-for="(item, index) in sbuMedicalTagsList"
:key="index">
<image :src="item.icon" mode="aspectFit" v-if="item.icon != '' && item.icon != null"></image>
<text>{{item.title}}</text>
</div>
</view>
</view></view>
<!-- 正在学习 -->
<view class="" style="padding:0 5px;" v-if="learnList.length > 0">
<view class="learnBox" >
<view class="titleBox flexbox">
<image src="../../static/learing.png" mode="aspectFit"></image>
<text>观看记录</text>
</view>
<view class="learn flexbox">
<view class="item" v-for="(item, index) in learnList" :key="index" @click="onPageJump('/pages/course/courseDetail',item.id)">
<view class="img" style="overflow: hidden;">
<image v-if="item.image && item.image != ''" :src="item.image" mode="aspectFit"></image>
<image v-else src="/static/nobg.jpg" mode="widthFix"></image>
</view>
<view class="txt555">
{{item.title}}
</view>
</view>
</view>
</view>
</view>
<!-- 可加入的班级列表 -->
<view class="" style="padding:0 5px;" v-if="classList.length > 0">
<view class="learnBox" >
<view class="flexbox flex_between">
<view class="titleBox flexbox">
<image src="../../static/class.png" mode="aspectFit"></image>
<text>班级列表</text>
</view>
<view class="moreBtn" @click="onPageJump('/pages/miniClass/allLearningClassList')">
<text>更多班级</text>
</view>
</view>
<view class="classItemBox uni-margin-wrap">
<view class="uni-margin-wrap">
<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" interval="3000"
duration="500">
<swiper-item v-for="(item, index) in classList" :key="index" >
<view class="classItem flex_box" @click="onPageJump('/pages/miniClass/classInfo',item.id)">
<view class="img" style="overflow: hidden;">
<image v-if="item.icon && item.icon != ''" :src="item.icon" mode="aspectFit"></image>
<image v-else src="@/static/my_04.png" mode="widthFix"></image>
</view>
<view class="textBox flex_box">
<view class="">
<view class="className">{{item.title}}</view>
<view class="fuzhu">目标学员人数{{item.number}}</view>
<view class="fuzhu jianjie" v-html="item.content"></view>
</view>
</view>
</view>
</swiper-item>
<!-- <swiper-item v-for="(item, index) in classList" :key="index">
<view class="classItem flex_box" @click="onPageJump('/pages/miniClass/classInfo',item.id)">
<view class="img" style="overflow: hidden;">
<image v-if="item.icon && item.icon != ''" :src="item.icon" mode="aspectFit"></image>
<image v-else src="@/static/my_04.png" mode="widthFix"></image>
</view>
<view class="txt555">
{{item.title}}
</view>
</view>
</swiper-item> -->
</swiper>
</view>
</view>
</view>
</view>
<!-- 健康超市 -->
<view class="supermarketBox" v-if="tjProList.length > 0">
<view class="hightLightTitleBox " @click="onPageJump('/pages/course/healthMarket',2,'健康超市')">
<text>健康超市</text>
</view>
<view class="supermarket">
<view class="borderbb">
<view class=" main">
<view class="flexbox">
<view class="item" v-for="(item, index) in tjProList" :key="index" @click="goGoodsDetail(item,0)">
<view class="imgcontainer">
<image :src="item.productImages" mode="aspectFit"></image>
</view>
<view class="name">
{{item.productName}}
</view>
<view class="price" v-if="item.activityPrice && item.activityPrice > 0">
{{item.activityPrice}}
</view>
<view class="price" v-else>
{{item.price}}
</view>
</view>
</view>
<view class="tips">
更多保健产品教学辅助器材及书籍点击<text>健康超市</text>图标进入
</view>
</view>
</view>
</view>
</view>
<!-- 限时秒杀 -->
<view class="seckillBox" v-if="seckillList.length > 0">
<view class="hightLightTitleBox ">
<text>限时秒杀</text>
</view>
<view class="seckill">
<view class="borderbb">
<view class=" main">
<view class="ftitle">
<text>天天秒杀 时时返积分</text>
</view>
<scroll-view class="scroll-view_H" scroll-x="true">
<!-- <view class=""> -->
<view class="item" v-for="(item, index) in seckillList" :key="index" @click="goGoodsDetail(item,1)">
<view class="imgcontainer">
<image :src="item.productImages" mode="aspectFit"></image>
</view>
<view class="name">
{{item.productName}}
</view>
<view class="price" v-if="item.activityPrice && item.activityPrice > 0">
{{item.activityPrice}}
</view>
<view class="price" v-else>
{{item.price}}
</view>
<view class="fall">
<text class="mprice">{{item.price}}</text>
<text class="cprice">直降<br />{{item.price - item.activityPrice}}</text>
</view>
</view>
<!-- </view> -->
</scroll-view>
</view>
</view>
</view>
</view>
<!-- 新闻播报 -->
<view class="fourBox " v-if="newsList.length > 0">
<view class="newsBox flexbox">
<view class="icon">
<u-icon name="volume-fill" color="#2979ff" size="26"></u-icon>
</view>
<view class="newscoll">
<swiper class="swiper" interval='5000' circular autoplay vertical indicator-dots="false">
<swiper-item class="item" v-for="(item, index) in newsList" :key="index"
@click="newsClick(item)">
<view class="swiper-item">{{item.title}}</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<!-- 精彩试听 -->
<view class="fourBox" v-if="tryListenList.length > 0">
<view class="learnBox">
<view class="titleBox flexbox">
<image src="../../static/try_listen.png" mode="aspectFit"></image>
<text>精彩试听</text>
</view>
<view class="learn flexbox shiting">
<view class="item" v-for="(item, index) in tryListenList" :key="index"
@click="onPageJump('/pages/course/courseDetail',item.id, item.title)">
<view class="imgcontainer">
<image v-if="item.image=='' || !item.image" src="@/static/nobg.jpg" mode="aspectFit"></image>
<image v-else :src="item.image" mode="aspectFit"></image>
</view>
<view class="buyItems flexbox">
<view class="txt555">
{{item.title}}
</view>
<view class="buybtn" >
<span>购买</span>
</view>
</view>
</view>
</view>
<view class="moreBox shiting">
<text @click="onPageJump('/pages/course/tryListen',1,'精彩试听')">更多试听</text>
</view>
</view>
</view>
<view>
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
</view>
<!-- 应对华为审核去掉app跳转 -->
<view class="appJump ">
<view class="everhealth item flexbox" @click="appjumpfun('nuttyreading')">
<view class="img">
<image src="@/static/f40x40.png" mode="widthFix"></image>
</view>
<view class="text">
<text>疯子读书</text>
</view>
</view>
<view class="zmzm item flexbox" @click="appjumpfun('zmzm')">
<view class="img">
<image src="@/static/40x40.png" mode="widthFix"></image>
</view>
<view class="text">
<text>众妙之门</text>
</view>
</view>
</view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-navigation></z-navigation>
<!-- <music-play :playList="myList"></music-play> -->
</view>
</template>
<script>
export default {
methods: {
getWebViewMessage(e) {
uni.showModal({
content: JSON.stringify(e.detail),
showCancel: false
})
}
}
}
</script>
<script>
import musicPlay from '@/components/music.vue'
import repciptData from '@/static/json/repcipt.json'
import $http from '@/config/requestConfig.js';
import {
mapState,
mapMutations
} from 'vuex';
export default {
data() {
return {
myList: [],
showEbook: false, // 显示电子书相关
transaction: { // 成功回调
},
curseTagList: [], // 课程标签列表
tabsNumber: null,
scrollLeft: 0,
checking: false, // 正在检测
scrollTop: 0,
loadingNow: false,
seckillList: [],
bgiStyle: {
background: '#fff'
},
learnList: [],
tryListenList: [ // 试听列表
],
curChildrenId: 0,
iconStyle: {
fontSize: '40rpx',
fontWeight: 'bold',
color: '#258feb',
},
tabsid: null,
pageSize: 10,
page: 1,
totalPage: 0,
tjProList: [],
status: 3,
userMsg: {}, // 用户信息
yxCurIndex: 0, // 当前营销标签序号
SystemInfoSync: {}, // 屏幕尺寸
sbuMedicalTagsList: [],
newsList: [], // 播报新闻列表
weburl: '',
classList : [],
// webviewStyles: {
// progress: true,
// width: '100%',
// height: '100vh'
// }
};
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
//第一次加载
onLoad(e) {
uni.hideTabBar();
},
onHide() {
this.page = 1
},
//页面显示
async onShow() {
uni.hideTabBar();
// #ifdef APP-PLUS
plus.screen.unlockOrientation();
plus.screen.lockOrientation("portrait-primary");
// #endif
this.requestAll()
this.classList = await this.getClassNoUser()
if(this.classList.length > 6){
this.classList = this.classList.slice(0,6)
}
},
onTabItemTap() {
},
// 页面加载完毕
onReady() {
// this.requestIapOrder()
// console.log(uni.getSystemInfoSync(), '屏幕')
},
mounted() {
this.requestAll()
},
// 下拉刷新
onPullDownRefresh() {
this.page = 1
this.getUserInfo()
this.requestAll()
uni.stopPullDownRefresh()
},
filters: {
// 控制字数
ellipsis(value) {
if (!value) return '';
let reg = /[\u4e00-\u9fa5]/g;
let names = value.match(reg);
value = names ? names.join('') : '';
if (value.length > 50) {
return value.slice(0, 50) + '...'
}
return value
},
},
computed: {
...mapState(['userInfo']),
},
components: {
musicPlay
},
//方法
methods: {
...mapMutations(['setUserInfo']),
// 查询可加入的小班
async getClassNoUser(){
var _list = []
await $http.request({
url: "common/class/getClassNoUser",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(async res => {
if (res.code == 0) {
if (res.result.length > 0) {
_list = res.result
}
}
}).catch(e => {
console.log(e, '获取医学班级列表错误')
});
return _list
},
goGoodsDetail(v,isMiaosha) {
console.log(v);
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: `/pages/goods/index/index?navTitle=${v.title}&isMiaosha=${isMiaosha}&title=${v.title}&id=${v.productId}`,
});
},
getWebViewMessage(e) {
uni.showModal({
content: JSON.stringify(e.detail),
showCancel: false
})
},
requestAll() {
this.getUserInfo()
this.tjProList = []
uni.hideTabBar();
this.getLearnCourse();
this.getSuperMarketList();
this.getMedicalTags()
this.getSeckill()
this.getTryListenList()
this.getNewsList()
// this.getTags()
// this.getYXTgs()
},
// 获取医学标签列表
getMedicalTags(id) {
var ftag = null
id ? ftag = id : ftag = 0
this.$http
.post('medical/home/getCourseMedicalTree')
.then(res => {
// console.log(res)
if (res.code == 0) {
if (res.labels.length > 0) {
this.curseTagList = res.labels
this.tabsid = res.labels[0].id
// this.curseClick(res.labels[0])
if (res.labels[0].isLast == 0) { // 非终极
if (res.labels[0].children && res.labels[0].children.length > 0) {
this.sbuMedicalTagsList = res.labels[0].children
} else {
this.sbuMedicalTagsList = []
}
}
} else {
this.tabsid = null
this.curseTagList = []
}
}
}).catch(e => {
console.log(e, '获取医学标签列表报错')
});
},
// 获取精彩试听课程列表
getTryListenList() {
$http.request({
url: "medical/home/getMarketCourseList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"id": 1,
"limit": 6,
"page": 1
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.courseList.records.length > 0) {
this.tryListenList = res.courseList.records
} else {
this.tryListenList = []
}
}
});
},
// 获取秒杀商品列表
getSeckill() {
$http.request({
url: "medical/labelAndMarket/getMarketShopProductList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"current": 1,
"limit": 12,
"medicineMarketId": "1"
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.result.records.length > 0) {
this.seckillList = res.result.records
} else {
this.seckillList = []
}
}
});
},
// 获取播报新闻列表
getNewsList() {
$http.request({
url: "common/message/listByPage",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"isBook": 0, //是否是疯子读书0否1是
"isMedical": 1, //是否是吴门医述0否1是
"isSociology": 0 //是否是众妙之门0否1是
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.messages.length > 0) {
this.newsList = res.messages
} else {
this.newsList = []
}
}
});
},
// 获取正在学习课程
getLearnCourse() {
this.$http
.post('medical/home/getUserLateCourseList')
.then(res => {
if (res.code == 0) {
if (res.page.length > 0) {
this.learnList = res.page
} else {
this.learnList = []
}
}
// console.log(res,'-------------')
});
},
// 获取健康超市商品列表
getSuperMarketList() {
$http.request({
url: "medical/labelAndMarket/getMarketShopProductList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"current": 1,
"limit": 4,
"medicineMarketId": "2"
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.result.records.length > 0) {
this.tjProList = res.result.records
} else {
this.tjProList = []
}
}
});
},
newsClick(item) {
console.log('item', item)
if(item.type == 1 && item.url != ''){
uni.navigateTo({
url: `/pages/news/newsForwebview?newsId=${item.id}&url=${item.url}&type=${item.type}`
})
}else{
uni.navigateTo({
url: `/pages/news/news?newsId=${item.id}&url=${item.url}&type=${item.type}`
})
}
// }
},
openURL(url) {
// #ifdef APP-PLUS
plus.runtime.openURL(url) //这里默认使用外部浏览器打开而不是内部web-view组件打开
// #endif
// #ifdef H5
window.open(url)
// #endif
},
curseClick(item) {
this.tabsid = item.id
if (item.isLast == 0) { // 终极
if (item.children && item.children.length > 0) {
this.sbuMedicalTagsList = item.children
} else {
this.sbuMedicalTagsList = []
}
} else {
uni.navigateTo({
url: `/pages/course/index?id=${this.tabsid}&title=${item.title}&pid=${this.tabsid}`
});
}
},
curseClickJump(item) {
uni.navigateTo({
// url: `/pages/course/index?id=${item.id}&title=中医学`
url: `/pages/course/index?id=${item.id}&title=${item.title}&pid=${item.pid}`
});
},
// 获取用户详情
getUserInfo() {
// 用户详情
// if (this.userInfo.id != undefined) {
this.$http
.post('book/user/info/' + this.userInfo.id)
.then(res => {
this.userMsg = res.user
});
// }
},
// 跳转
onPageJump(url, thatId, title) {
uni.navigateTo({
url: `${url}?id=${thatId}&title=${title}`
});
},
onPageJumpData(url, data) {
uni.navigateTo({
url: url + '?id=' + data
});
},
onTabJump(url) {
uni.switchTab({
url: url
});
},
onGoing() {
uni.showToast({
icon: 'none',
title: '开发中,敬请期待...'
})
},
// 电子书内容跳转
onBookJump(e) {
uni.navigateTo({
url: '../eBook/bookContent?Id=' + e.bookid
});
},
// 商品详情页
goDetail(id) {
uni.navigateTo({
url: '../bookShop/commodityDetail?id=' + id
});
},
// 列表跳页
onShopMore(e) {
uni.navigateTo({
url: '../bookShop/bookShopType?type=' + e
});
},
appjumpfun(name) {
let bagName = ''
let schemes = ''
if (name == 'zmzm') {
bagName = 'com.cn.zmzm'
schemes = 'zmzm'
}
if (name == 'nuttyreading') {
bagName = 'com.cn.nuttyreading'
schemes = 'nuttyreading'
}
// if(name == 'everhealth'){
if (plus.os.name == "Android") { //安卓
if (plus.runtime.isApplicationExist({ //查看安卓系统手机有没有下载这款app
pname: bagName, //B款app云打包的包名
})) { //安装了app
plus.runtime.launchApplication({ //打开app
pname: bagName, //B款app云打包的包名
extra: {
url: `${schemes}://${bagName}` //B款app配置的schemes+云打包的包名
},
function(e) {
console.log("Open system default browser failed: " + e.message);
}
})
} else { //未安装app
plus.runtime.openURL(`https://a.app.qq.com/o/simple.jsp?pkgname=${bagName}`, function(res) {
//进入后台小哥哥给我的应用宝下载链接,让你们后台给你
//这链接会判断你手机是ios还是AndroidAndroid进入应用宝下载app
//跟下面的是一个链接
console.log(res);
});
}
} else if (plus.os.name == "iOS") { //苹果
//因为ios查不到B款app在ios系统手机里面其实下载了也是检测不到所以就不检测了
//直接打开B款appB款app没有的话会进入回调报错我们在回调去打开下载链接
plus.runtime.launchApplication({
action: "${schemes}://"
}, function(e) {
plus.runtime.openURL(`https://a.app.qq.com/o/simple.jsp?pkgname=${bagName}`, function(
res) {
//进入后台小哥哥给我的appStore下载app链接让你们后台给你
//这链接会判断你手机是ios还是Androidios进入应用宝下载app
//跟上面的是一个链接
console.log(res);
});
});
// }
}
},
// 三个列表跳页
onBookMore(e) {
uni.navigateTo({
url: '../eBook/bookType?Type=' + e
});
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.classItemBox {.jianjie{
@include bov(2);
}}
.nomargin{margin: 0 !important;}
.nopadding{padding: 0 !important;}
.noRadius{border-radius: 0 !important;}
.appJump {
position: fixed;
right: 0;
top: 8%;
z-index: 1;
.item {
background: rgba(255, 255, 255, .9);
margin-bottom: 20rpx;
border: 1px solid #fff;
align-items: center;
padding-right: 10rpx;
overflow: hidden;
border-radius: 50rpx 0 0 50rpx;
text {
font-size: 20rpx;
}
.img {
// width: 60rpx; height: 60rpx;
padding: 6rpx;
overflow: hidden;
image {
width: 36rpx;
height: 36rpx;
border-radius: 100%;
}
}
}
}
.newsBox {
justify-content: space-between;
background-color: #fff;
@include mshadow(10px, 1);
margin-top: 10px;
overflow: hidden;
border-radius: 20rpx;
padding: 10rpx;
overflow: hidden;
.icon {
width: 44rpx;
}
.newscoll {
overflow: hidden;
width: calc(100% - 60rpx);
height: 40rpx;
border: #11a669;
line-height: 50rpx;
.item {
.swiper-item {
font-size: 28rpx;
@include toe();
}
}
}
}
.containerBg {
background-color: $containerColor;
}
.shiting {
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 40rpx;
.buyItems {
align-items: center;
.buybtn {
display: block;
width: 28%;
padding: 0 4px;
font-size: 24rpx;
line-height: 40rpx;
text-align: center;
background-color: $themeColor;
color: #fff;
border-radius: 20rpx;
height: 40rpx;
}
.txt555 {
width: 70%;
overflow: hidden;
}
}
}
.moreBox {
margin-top: 10px;
text-align: center;
text {
display: inline-block;
border: 1px solid $themeColor;
// @include theme("btn_bg");
padding: 14rpx 0;
width: 80%;
border-radius: 60rpx;
color: $themeColor;
}
}
.supermarket {
@include pleft_right(5px) .borderbb {
background-image: linear-gradient(180deg, #468aff 0%, #46c0ff 100%);
@include pleft_right(10px);
border-radius: 20rpx;
@include ptop_bottm(10px);
@include mshadow(10px, 1);
}
.tips {
margin-top: 10px;
background-color: #e9f0ff;
padding: 5px;
border-radius: 5px;
font-size: 24rpx;
text {
font-weight: bold;
color: $themeColor;
}
}
}
.seckillBox {
.hightLightTitleBox {
background: url('@/static/level_bg_red.png') center top no-repeat;
background-size: contain;
height: 60rpx;
color: red;
}
}
.seckill {
@include pleft_right(5px) .borderbb {
background-image: linear-gradient(180deg, #d93737 0%, #fff 100%);
@include pleft_right(10px);
border-radius: 20rpx;
@include ptop_bottm(10px);
@include mshadow(10px, 1);
}
.yxTagBox {
width: 100%;
}
.tips {
margin-top: 10px;
background-color: #e9f0ff;
padding: 5px;
border-radius: 5px;
font-size: 24rpx;
text {
font-weight: bold;
color: $themeColor;
}
}
.main {
background-color: #fff;
@include pleft_right(10px);
@include ptop_bottm(10px);
border-radius: 20rpx;
.ftitle {
font-size: 34rpx;
color: red;
font-weight: bold;
}
}
.item {
display: inline-block;
overflow: hidden;
.name {
font-size: 24rpx;
@include toe();
margin-top: 10rpx;
}
.price {
font-size: 26rpx;
color: #666;
padding-top: 10rpx;
}
.fall {
background-image: linear-gradient(-90deg, #e70503 0%, #e7a535 100%);
border-radius: 10px;
color: #fff;
padding: 4rpx;
padding-bottom: 8rpx;
height: 50rpx;
line-height: 40rpx;
position: relative;
margin-top: 50rpx;
font-size: 24rpx;
.mprice {
width: 52%;
font-size: 28rpx;
font-weight: bold;
}
.cprice {
color: #333;
text-align: center;
padding: 28rpx 0;
width: 46%;
line-height: 24rpx;
position: absolute;
right: 0;
bottom: 0;
background: url(@/static/miaosha_bg.png) center no-repeat;
background-size: contain;
}
}
image {
width: 100%;
height: 240rpx;
}
}
}
.supermarketBox {
.hightLightTitleBox {
background: url('@/static/level_bg_green.png') center top no-repeat;
background-size: contain;
height: 60rpx;
color: $themeColor;
}
.main {
background-color: #fff;
@include pleft_right(10px);
@include ptop_bottm(10px);
border-radius: 20rpx;
.flexbox {
justify-content: space-between;
}
}
.item {
overflow: hidden;
width: 23%;
.name {
font-size: 24rpx;
@include toe();
margin-top: 10rpx;
}
.price {
text-align: center;
font-size: 26rpx;
font-weight: bold;
color: $themeColor;
padding-top: 10rpx;
}
image {
width: 100%;
height: 240rpx;
}
}
}
.hightLightTitleBox {
margin: 20rpx 0;
text-align: center;
line-height: 60rpx;
text {
font-size: 30rpx;
font-weight: bold;
}
}
.moreBtn{
color: $themeColor; font-size: 26rpx;
}
.learnBox {
background-color: #fff;
margin-top: 10px;
border-radius: 20rpx;
@include ptop_bottm(10px);
@include pleft_right(10px);
@include mshadow(10px, 1);
margin-bottom: 10px;
.img{
width: 100%; height: 180rpx;
background-color: #f7f7f7;
display: flex; align-items: center;
}
.learn {
justify-content: space-between;
margin-top: 20rpx;
flex-wrap: wrap;
.item {
width: 48%;
overflow: hidden;
image {
width: 100%;
height: 200rpx;
}
.txt555 {
height: 40rpx;
line-height: 40rpx;
@include bov(1);
margin-top: 10rpx;
font-size: 24rpx;
}
}
}
}
.titleBox {
align-items: center;
image {
width: 50rpx;
height: 50rpx
}
text {
font-size: 30rpx;
padding-left: 20rpx;
align-items: center
}
}
.fourBox {
@include pleft_right(4px)
}
.childrenBox {
background-color: #e4eefa !important;
// border:1px solid #e4eefa;
border-radius: 6rpx !important;
@include mshadow(10px, 1);
// background-color: #fff;
justify-content: center;
box-shadow: none !important;
// border-radius: 0 !important;
.item {
text {
color: #3361a5;
}
}
image {
width: 80rpx;
height: 80rpx;
}
}
.children_cate {
justify-content: space-evenly;
padding: 0 10rpx;
background-color: #fff;
display: flex;
justify-items: normal;
padding-top: 12rpx;
overflow: hidden;
padding-bottom: 10rpx;
.item {
width: 100%;
text-align: center;
margin-right: 1px;
font-size: 32rpx;
padding: 10rpx;
color: #fff;
// background-color: #55aa7f;
background-color: #eee;
color: #333;
border-radius: 10rpx;
}
.item:last-child {
margin-right: 0;
}
.cur {
color: #55aa7f;
font-weight: bold;
border-radius: 5rpx;
}
}
.fourIcon {
justify-content: space-between;
box-shadow: 0px 0px 10px 0px rgba(167, 187, 228, 1);
// margin-bottom: 8px;
// border: 1px solid #fff;
text-align: center;
height: 60px;
// border: 2px solid #e0e9ff;
background-color: #fff;
border-radius: 10px;
// @include theme('fourIcon') ;
line-height: 60px;
.item {
align-items: center;
}
text {
font-size: 28rpx;
color: #76664d;
padding-left: 6rpx;
}
image {
width: 48rpx;
height: 48rpx;
margin: 0 auto;
}
}
.activityPrice {
font-size: 60rpx;
}
.ProTabs {
// margin: 20rpx 0;
padding: 0 20rpx;
text {
padding: 8rpx 14rpx;
font-size: 32rpx;
display: inline-block;
border-radius: 10rpx;
overflow: hidden;
// background-color: #eee;
color: #55aa7f;
margin-right: 10rpx;
}
text.cur {
background-color: #55aa7f;
color: #fff;
}
}
.New_ProTabs {
justify-content: space-between;
background-color: #fff;
padding-left: 5px;
padding-right: 5px;
text {
// max-width: 12.5%;
// background-color: #56565633;
font-size: 32rpx;
padding: 5px 3px;
font-weight: bold;
display: block;
width: 100%;
border-radius: 10rpx;
overflow: hidden;
// background-color: #eee;
color: #333;
// white-space:wrap !important;
text-align: center;
}
text.cur {
background-color: #55aa7f;
color: #fff;
}
}
// .newBook{margin-top: 10rpx;}
.scroll-view_H {
background-color: #fff;
white-space: nowrap;
padding: 10rpx;
margin-top: 12rpx;
}
.scroll-view_H {
.item {
padding: 10rpx;
overflow: hidden;
display: inline-block;
padding-bottom: 0;
width: 210rpx !important;
margin-right: 8rpx;
border-radius: 10rpx;
.videoBox {
image {
display: block;
width: 150rpx;
height: 170rpx;
}
}
.bookName {
display: block;
margin-top: 6rpx;
color: #666;
font-size: 24rpx;
white-space: nowrap;
overflow-x: hidden;
overflow: hidden;
text-overflow: ellipsis;
}
}
// .item.active{margin-right: 20rpx; border: 1px solid #55aa00; border-radius: 10rpx;}
}
.flexbox {
display: flex;
}
.home_bg {
background-image: url('@/static/icon/home_bg.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding:30rpx 20rpx;
position: relative;
padding-bottom: 40rpx;
// margin-bottom:60rpx;
// height: 400rpx; margin-bottom: 130rpx;
.icon_hua_1 {
// margin: 0 auto;
width: 100%;
text-align: center;
height: 80rpx;
image {
width: 150rpx;
height: 80rpx;
}
}
.icon_hua {
width: 100%;
text-align: center;
display: block;
image {
width: 150rpx;
height: 150rpx;
margin: 0 auto;
}
}
}
.topSearch_box {
image {
width: 48rpx;
height: 48rpx;
position: absolute;
top: 54rpx;
right: 30rpx;
}
}
.search_box {
margin: 20rpx auto 10rpx auto;
align-items: center;
width: calc(100% - 30rpx);
margin-bottom: 20rpx;
.search {
height: 56upx;
display: flex;
width: 100%;
margin: 0 auto;
align-items: center;
padding: 0upx 40upx;
background-color: #fff;
border-radius: 20upx;
box-shadow: 0 0px 10px 1px #54a96633;
}
.prompt {
color: #838383;
font-size: 24rpx;
}
.icon_search {
background-image: url('@/static/icon/map_ic_search.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 36upx;
height: 36upx;
margin-right: 20upx;
}
.searBtn {
width: 180rpx;
line-height: 56rpx;
text-align: center;
align-items: center;
font-size: 28rpx;
color: #fff;
margin-left: -80rpx;
background-color: #11a669;
border-top-right-radius: 20upx;
border-bottom-right-radius: 20upx;
}
}
.newLeve2{
// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
background-color: #fff;
padding: 0 10rpx;
border-top: 1px solid #eee;
padding-top: 4rpx;
// padding-bottom:2rpx;
}
.home_nar {
margin: 10px 0;
justify-content: space-between;
color: #333;
margin-bottom: 0;
@include pleft_right(5px)
.hn_cl_tit {
display: block;
width: 100%;
background-color: #fff;
text-align: center;
// border-radius: 20rpx;
align-content: center;
justify-content: center;
margin-right: 8rpx;
border-bottom: 1px solid #fff;
// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
image {
width: 100rpx;
height: 90rpx;
display: block;
margin: 0 auto;
padding: 20rpx;
// margin: 0 20rpx;
}
text {
display: block;
padding-bottom: 20rpx;
text-align: center;
margin-top: 4rpx;
font-size: 28rpx;
color: #00337f;
font-weight: blod;
}
}
.hn_cl_tit:last-child {
margin-right: 0;
}
.hn_cl_tit.active {
background-color: #e4eefa;
// position: relative;
text {
color: #3361a5;
// font-weight: bold;
}
}
// .hn_cl_tit.active::after{
// display: block;
// transform: rotate(180deg);
// content: ''; position: absolute; bottom: -20rpx; left: calc(50% - 16rpx); z-index: 1;
// border-right: 20rpx solid transparent;
// border-left: 20rpx solid transparent;
// border-bottom: 20rpx solid #ffff;
// }
}
.home_shujia {
margin: 40rpx 20rpx 0 20rpx;
display: flex;
color: #333;
.hn_sj {
width: 20%;
text-align: center;
font-size: 26upx;
image {
width: 100upx;
height: 100upx;
margin: 0 auto;
}
}
}
.limited {
width: 100%;
height: auto;
padding: 20rpx 10rpx 10rpx 10rpx;
display: flex;
align-items: center;
background-color: #fff;
margin-top: 50rpx;
.limitedSymbol {
width: 22%;
height: 300rpx;
border-right: 1px solid #eee;
vertical-align: middle;
image {
width: 120rpx;
height: 120rpx;
margin: 45px auto 0 auto;
}
}
.limitedScrollBox {
width: 76%;
padding: 0 10rpx;
}
.limitedItem {
width: 200rpx;
text-align: center;
image {
width: 150upx;
height: 200upx;
margin: 15rpx auto 20rpx auto;
}
text {
font-size: 20rpx;
display: block;
}
.biaoti {
font-size: 30rpx;
margin: 10rpx 0 10rpx 0;
font-weight: bold;
}
.xian {
font-size: 32rpx;
color: #bf0c0c;
font-weight: bold;
}
.yuan {
text-decoration: line-through;
color: #c1c1c1;
}
}
}
.imgcontainer {
background-color: $imgBg;
}
.classItemBox{margin-top: 20rpx; height: 250rpx;
swiper-item{ padding: 10rpx; width: 90% !important;
.wid90{width: 90% !important;}
.classItem{border: 1px solid #eee; border-radius: 10rpx; padding: 10rpx;}
padding-right:20rpx ; box-sizing:border-box}
}
.classItem{
.className{font-weight: bold; font-size: 32rpx;}
.textBox{margin-left: 20rpx; flex: 1; align-items: center;}
.img{width: 200rpx; height: 200rpx; overflow: hidden;
imgage{
width: 100%; height: 100%;
}}
}
</style>