1417 lines
33 KiB
Vue
1417 lines
33 KiB
Vue
<template>
|
||
|
||
<view class="commonPageBox">
|
||
<public-module></public-module>
|
||
|
||
<view v-if="selected == 1">
|
||
<view class="header_box"></view>
|
||
|
||
<view class="main_content_box">
|
||
<view class="cate_box" v-if="cateList.length > 0">
|
||
<view
|
||
class="cate_item_box"
|
||
v-for="(v, i) in cateList"
|
||
@click="handleClickCate(v)"
|
||
>
|
||
<view class="cate_item_border">
|
||
<image
|
||
:src="v.icon"
|
||
mode="aspectFill"
|
||
style="width: 49rpx; height: 49rpx"
|
||
></image>
|
||
</view>
|
||
<view class="cate_item_name">{{ v.title }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="flash_sale_box notice_box">
|
||
<view class="flash_sale_top">
|
||
<image
|
||
class="miaoShaIcon noticeIcon"
|
||
src="@/static/icon/homePage/notice.png"
|
||
mode="aspectFill"
|
||
style="width: 36rpx; height: 44rpx"
|
||
></image>
|
||
<u-notice-bar
|
||
:text="noticeList"
|
||
style="background-color: none !important"
|
||
class="miaoShaContent"
|
||
icon=""
|
||
direction="column"
|
||
label="title"
|
||
>
|
||
</u-notice-bar>
|
||
<!-- <view class="miaoShaContent" style="width: 100%;">
|
||
|
||
{{ miaoShaContent }}
|
||
|
||
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flash_sale_box">
|
||
<view class="flash_sale_top">
|
||
<image
|
||
class="miaoShaIcon"
|
||
src="@/static/icon/homePage/miaosha.png"
|
||
mode="aspectFill"
|
||
style="width: 36rpx; height: 44rpx"
|
||
></image>
|
||
<text class="miaoShaTitle" @click="goVideo" style="width: auto"
|
||
>秒杀</text
|
||
>
|
||
<view class="miaoShaContent">
|
||
<!-- {{ miaoShaContent }} -->
|
||
</view>
|
||
<image
|
||
class="rightArrowIcon"
|
||
src="@/static/icon/homePage/right_arrow.png"
|
||
mode="aspectFill"
|
||
style="width: 28rpx; height: 18rpx"
|
||
></image>
|
||
</view>
|
||
|
||
<view class="flash_sale_content" style="margin-top: 40rpx">
|
||
<scroll-view scroll-x="true" class="scroll-X" style="">
|
||
<view
|
||
class="scroll-view-item flash_sale_content_item"
|
||
@click="goGoodsDetail(v)"
|
||
v-for="(v, i) in seckillLst"
|
||
>
|
||
<image
|
||
class="book_image"
|
||
:src="v.productImages"
|
||
mode="aspectFit"
|
||
>
|
||
</image>
|
||
<view class="book_name" style="padding-bottom: 20rpx">{{
|
||
v.productName
|
||
}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="learning_box listening_box bottomBox">
|
||
<view class="item_img" @click="handleGoApp">
|
||
<image src="@/static/tab/bottom1.png" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="selected == 4"
|
||
class="mine_bg_box"
|
||
style="
|
||
height: 100vh;
|
||
background-color: #39b4a84d !important;
|
||
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
"
|
||
>
|
||
<view class="bg_top">
|
||
<u-icon
|
||
@click="goSetting"
|
||
class="setIcon"
|
||
labelColor="#fff"
|
||
labelPos="bottom"
|
||
label="设置"
|
||
name="setting"
|
||
:style="`top:${(10 + statusBarHeight) * 2}rpx`"
|
||
color="#fff"
|
||
size="28"
|
||
></u-icon>
|
||
</view>
|
||
<view style="height: 50rpx"></view>
|
||
<view class="per_mes" style="display: flex; align-items: center">
|
||
<image src="@/static/icon/fengziIcon.png" class="per_mes_img"></image>
|
||
<view @click="onLoginJump">
|
||
<text class="name">点击登录</text>
|
||
</view>
|
||
<br clear="both" />
|
||
</view>
|
||
<view class="list_box">
|
||
<view class="xiugai boxShadow box_fillet">
|
||
<common-list
|
||
:dataList="pageList"
|
||
@hancleClick="handleClickTab"
|
||
label="name"
|
||
>
|
||
<template slot="rightSlot" slot-scope="slotProps">
|
||
<text
|
||
class="fdButtonBox aui-text-success"
|
||
style="line-height: 40rpx"
|
||
>{{ slotProps.row.content }}</text
|
||
>
|
||
|
||
<view> </view>
|
||
</template>
|
||
</common-list>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="footer_box footer_bg">
|
||
<view class="footer_item">
|
||
<view class="footer_nav_item" @click="selected = 1">
|
||
<image
|
||
v-if="selected == 1"
|
||
class="footer_nav_item_image footer_nav_item_image_scale"
|
||
src="/static/tab/home_active.png"
|
||
mode="aspectFit"
|
||
></image>
|
||
<image
|
||
v-else
|
||
class="footer_nav_item_image"
|
||
src="/static/tab/home.png"
|
||
mode="aspectFit"
|
||
>
|
||
</image>
|
||
<text
|
||
class="footer_nav_item_text"
|
||
:class="[selected == 1 ? 'footer_item_text_active' : '']"
|
||
>首页</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="footer_item">
|
||
<view class="footer_nav_item" @click="onPageJump()">
|
||
<image class="footer_nav_item_image" src="/static/tab/thgy.png" mode="aspectFit"></image>
|
||
<text class="footer_nav_item_text">太湖公益</text>
|
||
</view>
|
||
</view>
|
||
<view class="footer_item">
|
||
<view class="footer_nav_item" @click="onPageJump()">
|
||
<image class="footer_nav_item_image" src="/static/tab/order.png" mode="aspectFit"></image>
|
||
<text class="footer_nav_item_text">我的订单</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="footer_item">
|
||
<view class="footer_nav_item" @click="selected = 4">
|
||
<image
|
||
v-if="selected == 4"
|
||
class="footer_nav_item_image footer_nav_item_image_scale"
|
||
src="/static/tab/mine_active.png"
|
||
mode="aspectFit"
|
||
></image>
|
||
<image
|
||
v-else
|
||
class="footer_nav_item_image"
|
||
src="/static/tab/mine.png"
|
||
mode="aspectFit"
|
||
>
|
||
</image>
|
||
<text
|
||
class="footer_nav_item_text"
|
||
:class="[selected == 4 ? 'footer_item_text_active' : '']"
|
||
>我的</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer_station"></view>
|
||
</view>
|
||
<!-- 分享弹窗 -->
|
||
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
|
||
<uni-popup-share @select="haveSelected"></uni-popup-share>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { mapState, mapMutations } from "vuex";
|
||
export default {
|
||
name: "music",
|
||
props: {},
|
||
data() {
|
||
return {
|
||
pageList: [
|
||
// {
|
||
// name: "分享APP",
|
||
// type: "share",
|
||
// },
|
||
|
||
{
|
||
name: "关于我们",
|
||
|
||
type: "about",
|
||
},
|
||
|
||
//{ name: "设置", url: "/pages/mine/set/index", type: "pageJump" },
|
||
// { name: "退出登录", type: "quitLogin" },
|
||
// { name: "注销帐号", type: "loginOut" },
|
||
],
|
||
selected: 1,
|
||
noticeList: [], //秒杀列表
|
||
seckillLst: [], //秒杀列表
|
||
|
||
studyList: [], //正在学习
|
||
dataInfo: {},
|
||
flashSaleList: [], //试听
|
||
miaoShaContent: "",
|
||
cateList: [],
|
||
curriculumList: [
|
||
{
|
||
name: "课程设置",
|
||
url: "/pages/courseInformation/index/index",
|
||
// url: "",
|
||
imgUrl: require("@/static/icon/homePage/kcjg.png"),
|
||
},
|
||
// {
|
||
// name: "我的课程",
|
||
// url: "/pages/curriculum/order/index/index",
|
||
// // url: "",
|
||
// imgUrl: require("@/static/icon/homePage/wdkc.png"),
|
||
// },
|
||
// {
|
||
// name: "吴门之光",
|
||
// url: "/pages/medicaldes/medicaldes",
|
||
// imgUrl: require("@/static/icon/homePage/wmzg.png"),
|
||
// },
|
||
],
|
||
|
||
urlList: {
|
||
list: "app/phoneDoctor.do?toHomePage",
|
||
getSociologyLabels: "visitor/getCourseSociologyTree",
|
||
getUserLateCourseList: "visitor/getSociologyMarketCourseList",
|
||
getMarketProductList: "visitor/getSociologyMarketShopProductList", //秒杀商品
|
||
getMarketCourseList: "visitor/getSociologyMarketCourseList", //精彩试听
|
||
getNotice: "visitor/listByPage", //消息
|
||
getCateList: "visitor/getCourseSociologyTree", //消息
|
||
},
|
||
};
|
||
},
|
||
onReady() {},
|
||
onLoad() {},
|
||
async onShow() {
|
||
console.log("at line 287:", this.userInfo);
|
||
this.requestAll();
|
||
},
|
||
async onTabItemTap() {
|
||
this.requestAll();
|
||
},
|
||
|
||
methods: {
|
||
...mapMutations(["setUserInfo"]),
|
||
|
||
gotoAbout() {
|
||
uni.navigateTo({
|
||
url: "/pages/mine/aboutUs/index",
|
||
});
|
||
},
|
||
onLoginJump() {
|
||
uni.navigateTo({
|
||
url: "/pages/user/login/login",
|
||
});
|
||
},
|
||
// 分享
|
||
newOnShare() {
|
||
this.$refs.share.open();
|
||
},
|
||
handleClickTab(v) {
|
||
console.log("v at line 259:", v);
|
||
switch (v.type) {
|
||
case "share":
|
||
//分享
|
||
this.newOnShare();
|
||
break;
|
||
case "about":
|
||
//分享
|
||
this.gotoAbout();
|
||
break;
|
||
|
||
// this.onPageJump(v.url);
|
||
}
|
||
},
|
||
haveSelected(data) {
|
||
console.log(data, " 选择的是");
|
||
if (data.index == 0) {
|
||
// 分享到好友
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene: "WXSceneSession",
|
||
type: 0,
|
||
href: this.$apkUrl,
|
||
title: "众妙之门",
|
||
summary: "我正在使用众妙之门提升自己，赶紧跟我一起来体验吧！",
|
||
imageUrl: "static/icon/fengziIcon.png",
|
||
success: function (res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function (err) {
|
||
console.log("fail:" + JSON.stringify(err));
|
||
},
|
||
});
|
||
} else if (data.index == 1) {
|
||
// 分享到朋友圈
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene: "WXSceneTimeline",
|
||
type: 0,
|
||
href: this.$apkUrl,
|
||
title: "众妙之门",
|
||
summary: "我正在使用众妙之门提升自己，赶紧跟我一起来体验吧！",
|
||
imageUrl: "static/icon/fengziIcon.png",
|
||
success: function (res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function (err) {
|
||
console.log("fail:" + JSON.stringify(err));
|
||
},
|
||
});
|
||
}
|
||
},
|
||
goVideo() {
|
||
uni.navigateTo({
|
||
url: "/pages/index/index",
|
||
});
|
||
},
|
||
requestAll() {
|
||
// 获取当前页面的栈
|
||
this.$nextTick(async () => {
|
||
// await this.getData();
|
||
await this.getCateList();
|
||
await this.getSociologyLabels();
|
||
await this.getMarketProductList();
|
||
await this.getMarketCourseList();
|
||
await this.getNotice();
|
||
});
|
||
},
|
||
goNotice(index) {
|
||
uni.showModal({
|
||
content: "客官请先登录哦~",
|
||
confirmText: "去登录",
|
||
cancelText: "再逛逛",
|
||
confirmColor: "#018f89", //确定按钮颜色
|
||
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url: "/pages/user/login/login",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
console.log("at line 297:", this.noticeList[index]);
|
||
// var mynavData = JSON.stringify({
|
||
// ...this.noticeList[index],
|
||
// navTitle: this.noticeList[index].title,
|
||
// title: this.noticeList[index].title,
|
||
// }); // 这里转换成 字符串
|
||
uni.navigateTo({
|
||
url: `/pages/homePage/index/noticeDetail?id=${this.noticeList[index].id}`,
|
||
});
|
||
},
|
||
handleGoApp() {
|
||
if (plus.os.name == "Android") {
|
||
plus.runtime.launchApplication(
|
||
{
|
||
pname: "com.cn.nuttyreading",
|
||
},
|
||
function (e) {
|
||
console.log("Open system default browser failed: " + e.message);
|
||
},
|
||
);
|
||
} else if (plus.os.name == "iOS") {
|
||
// plus.runtime.launchApplication(
|
||
// {
|
||
// action: "taobao://",
|
||
// },
|
||
// function (e) {
|
||
// console.log("Open system default browser failed: " + e.message);
|
||
// }
|
||
// );
|
||
}
|
||
},
|
||
async getData() {
|
||
var that = this;
|
||
|
||
this.$http
|
||
.post(this.urlList.getUserLateCourseList, {
|
||
id: 1, //这个需要后台提供数值,比如精彩试听
|
||
limit: 10,
|
||
page: 1,
|
||
})
|
||
.then(async (res) => {
|
||
console.log(res, "7777777777777777777");
|
||
|
||
if (res.code == 0) {
|
||
that.studyList = res.page ? res.page : [];
|
||
}
|
||
});
|
||
},
|
||
async getCateList() {
|
||
var that = this;
|
||
this.$http
|
||
.request({
|
||
url: this.urlList.getCateList,
|
||
method: "POST",
|
||
data: {
|
||
id: 0,
|
||
},
|
||
header: {
|
||
//默认 无 说明：请求头
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then(async (res) => {
|
||
console.log(res, "7777777777777777777");
|
||
|
||
if (res.code == 0) {
|
||
that.cateList = res.labels ? res.labels : [];
|
||
}
|
||
});
|
||
},
|
||
async getNotice() {
|
||
var that = this;
|
||
var data = {
|
||
isBook: 0, //是否是疯子读书
|
||
isMedical: 0, //是否是吴门医述
|
||
isSociology: 1, //是否是众妙之门
|
||
isPsyche: 0,
|
||
};
|
||
this.$http
|
||
.request({
|
||
url: this.urlList.getNotice,
|
||
method: "POST",
|
||
data: data,
|
||
header: {
|
||
//默认 无 说明：请求头
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then(async (res) => {
|
||
console.log(res, "7777777777777777777");
|
||
|
||
var result = res.messages;
|
||
|
||
console.log("result at line 332:", result);
|
||
that.noticeList = res.messages ? result : [];
|
||
});
|
||
},
|
||
async getMarketProductList() {
|
||
var that = this;
|
||
this.$http
|
||
.request({
|
||
url: this.urlList.getMarketProductList,
|
||
method: "POST",
|
||
data: {
|
||
current: 1,
|
||
limit: 10,
|
||
sociologyMarketId: "1",
|
||
},
|
||
header: {
|
||
//默认 无 说明：请求头
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
|
||
.then(async (res) => {
|
||
console.log(res, "999");
|
||
|
||
that.seckillLst = res.result.records ? res.result.records : [];
|
||
that.$forceUpdate();
|
||
});
|
||
},
|
||
async getMarketCourseList() {
|
||
var that = this;
|
||
|
||
this.$http
|
||
.request({
|
||
url: this.urlList.getMarketCourseList,
|
||
method: "POST",
|
||
data: {
|
||
id: 4, //这个需要后台提供数值,比如秒杀商品
|
||
limit: 10,
|
||
page: 1,
|
||
},
|
||
header: {
|
||
//默认 无 说明：请求头
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
|
||
.then(async (res) => {
|
||
that.flashSaleList = res.courseList.records
|
||
? res.courseList.records
|
||
: [];
|
||
});
|
||
},
|
||
// 跳转
|
||
onPageJump(url, thatId, title) {
|
||
uni.showModal({
|
||
content: "客官请先登录哦~",
|
||
confirmText: "去登录",
|
||
cancelText: "再逛逛",
|
||
confirmColor: "#018f89", //确定按钮颜色
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url: "/pages/user/login/login",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
uni.navigateTo({
|
||
url: `${url}?id=${thatId}&title=${title}`,
|
||
});
|
||
},
|
||
async getSociologyLabels() {
|
||
var that = this;
|
||
this.$http
|
||
.request({
|
||
url: this.urlList.getSociologyLabels,
|
||
method: "POST",
|
||
data: {
|
||
id: 0,
|
||
},
|
||
header: {
|
||
//默认 无 说明：请求头
|
||
"Content-Type": "application/json",
|
||
},
|
||
})
|
||
.then(async (res) => {
|
||
that.cateList.forEach((e, i) => {
|
||
var data = res.labels.filter((item) => item.title === e.title);
|
||
|
||
if (data.length > 0) {
|
||
that.cateList[i] = {
|
||
...data[0],
|
||
...e,
|
||
};
|
||
}
|
||
});
|
||
that.$forceUpdate();
|
||
});
|
||
},
|
||
|
||
goCourseDescription(v) {
|
||
uni.showModal({
|
||
content: "客官请先登录哦~",
|
||
confirmText: "去登录",
|
||
cancelText: "再逛逛",
|
||
confirmColor: "#018f89", //确定按钮颜色
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url: "/pages/user/login/login",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
console.log(v);
|
||
uni.navigateTo({
|
||
// url: '../bookShop/commodityDetail?id=' + item.id
|
||
url: `/pages/curriculum/order/curriculum/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
|
||
});
|
||
},
|
||
appjumpfun(name) {
|
||
let bagName = "";
|
||
let schemes = "";
|
||
if (name == "nuttyreading") {
|
||
bagName = "com.cn.nuttyreading";
|
||
schemes = "nuttyreading";
|
||
}
|
||
if (name == "everhealth") {
|
||
bagName = "cn.com.everhealth";
|
||
schemes = "everhealth";
|
||
}
|
||
if (name == "medicine") {
|
||
bagName = "com.cn.medicine";
|
||
schemes = "medicine";
|
||
}
|
||
// 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还是Android，Android进入应用宝下载app
|
||
//跟下面的是一个链接
|
||
console.log(res);
|
||
},
|
||
);
|
||
}
|
||
} else if (plus.os.name == "iOS") {
|
||
//苹果
|
||
//因为ios查不到B款app在ios系统手机里面，其实下载了，也是检测不到，所以就不检测了
|
||
//直接打开B款app，B款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还是Android，ios进入应用宝下载app
|
||
//跟上面的是一个链接
|
||
console.log(res);
|
||
},
|
||
);
|
||
},
|
||
);
|
||
// }
|
||
}
|
||
},
|
||
goSetting() {
|
||
uni.navigateTo({
|
||
url: "/pages/mine/set/index",
|
||
});
|
||
// this.onPageJump("/pages/mine/set/index");
|
||
},
|
||
goGoodsDetail(v) {
|
||
console.log(v);
|
||
uni.navigateTo({
|
||
// url: '../bookShop/commodityDetail?id=' + item.id
|
||
url: `/pages/goods/index/index?navTitle=${v.title}&isMiaosha=1&title=${v.title}&id=${v.productId}&type=visitor`,
|
||
});
|
||
},
|
||
|
||
handleClickCurriculum(v) {
|
||
console.log(v);
|
||
if (v.url) {
|
||
uni.navigateTo({
|
||
url: v.url,
|
||
});
|
||
} else {
|
||
this.$commonJS.showToast("此功能暂未开放");
|
||
}
|
||
},
|
||
handleClickCate(v) {
|
||
console.log(v);
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/user/cateList?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
|
||
});
|
||
},
|
||
|
||
//关闭或开启 音乐
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"]),
|
||
timer() {
|
||
return calcTimer(this.userInfo.currentTime);
|
||
},
|
||
overTimer() {
|
||
return calcTimer(this.userInfo.duration);
|
||
},
|
||
playStatus() {
|
||
var playFlag = false;
|
||
this.userInfo.playFlag !== undefined
|
||
? (playFlag = this.userInfo.playFlag)
|
||
: "";
|
||
console.log(playFlag, "playFlag");
|
||
return playFlag;
|
||
},
|
||
},
|
||
watch: {},
|
||
};
|
||
//时间换算
|
||
function calcTimer(timer) {
|
||
if (timer === 0 || typeof timer !== "number") {
|
||
return "00:00";
|
||
}
|
||
let mm = Math.floor(timer / 60);
|
||
let ss = Math.floor(timer % 60);
|
||
if (mm < 10) {
|
||
mm = "0" + mm;
|
||
}
|
||
if (ss < 10) {
|
||
ss = "0" + ss;
|
||
}
|
||
return mm + ":" + ss;
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "@/style/mixin.scss";
|
||
|
||
.header_box {
|
||
width: 100%;
|
||
height: 350rpx;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background-size: 100% 100%;
|
||
background-image: url("@/static/icon/homePage/header_bg.png");
|
||
background-repeat: no-repeat;
|
||
|
||
.logo {
|
||
width: 146rpx;
|
||
height: 183rpx;
|
||
margin-top: 115rpx;
|
||
}
|
||
}
|
||
|
||
.main_content_box {
|
||
width: 100%;
|
||
|
||
padding: 27rpx;
|
||
box-sizing: border-box;
|
||
// padding-top: 75rpx;
|
||
|
||
.curriculum_box {
|
||
width: 100%;
|
||
// height: 198rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding: 0px 37rpx 17rpx;
|
||
box-sizing: border-box;
|
||
|
||
.curriculum_item_box {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.curriculum_item_img {
|
||
width: 39rpx;
|
||
height: 38rpx;
|
||
float: left;
|
||
}
|
||
|
||
.curriculum_item_name {
|
||
margin-top: -10rpx;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #001b73;
|
||
margin-left: 21rpx;
|
||
// line-height: 46rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cate_box {
|
||
width: 100%;
|
||
height: auto;
|
||
background: $themeColor;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
// justify-content: center;
|
||
|
||
background-size: 100% 100%;
|
||
// background-image: url("@/static/icon/cate_bg.png");
|
||
box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
|
||
border-radius: 7rpx;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-around;
|
||
padding: 10rpx 10rpx 0;
|
||
box-sizing: border-box;
|
||
|
||
.cate_item_box {
|
||
width: 25%;
|
||
height: 100%;
|
||
padding: 10rpx 0 10rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
flex-direction: column;
|
||
|
||
.cate_item_border {
|
||
width: 65rpx;
|
||
height: 78rpx;
|
||
background-size: 100% 100%;
|
||
background-image: url("@/static/icon/homePage/cate_bg.png");
|
||
border-radius: 4rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
// height: 56rpx;
|
||
}
|
||
}
|
||
|
||
.cate_item_name {
|
||
margin-top: 10rpx;
|
||
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
|
||
|
||
font-weight: normal;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
// line-height: 46rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flash_sale_box {
|
||
width: 100%;
|
||
margin-top: 33rpx;
|
||
margin-bottom: 10rpx;
|
||
|
||
.flash_sale_top {
|
||
width: 100%;
|
||
height: 61rpx;
|
||
// background: #B7E0E2;
|
||
background-color: rgba(188, 231, 223, 0.3);
|
||
color: rgb(46, 103, 106);
|
||
border-color: rgb(197, 227, 215);
|
||
box-shadow: 0rpx 0rpx 4rpx 0rpx #fcf2f6;
|
||
|
||
border-radius: 7rpx;
|
||
padding: 3rpx 18rpx 3rpx 10rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
// margin-bottom: 21rpx;
|
||
|
||
.miaoShaIcon {
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.miaoShaTitle {
|
||
// margin-right: 25rpx;
|
||
|
||
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
|
||
font-weight: normal;
|
||
font-size: 35rpx;
|
||
color: #018f89;
|
||
line-height: 46rpx;
|
||
}
|
||
|
||
.miaoShaContent {
|
||
width: calc(100% - 172rpx);
|
||
margin-top: 1rpx;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 600;
|
||
font-size: 21rpx;
|
||
color: #018f89;
|
||
// line-height: 45rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flash_sale_content {
|
||
width: 100%;
|
||
display: flex;
|
||
overflow: hidden;
|
||
height: 314rpx;
|
||
|
||
.flash_sale_content_item {
|
||
display: inline-block;
|
||
width: 48%;
|
||
|
||
margin-right: 12rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.book_image {
|
||
width: 100%;
|
||
height: 252rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.book_name {
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
line-height: 30rpx;
|
||
color: #000000;
|
||
text-align: center;
|
||
margin-top: 18rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
|
||
.learning_box_top {
|
||
width: 100%;
|
||
// height: 40rpx;
|
||
// margin: 40rpx 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.learning_box_bottom {
|
||
width: 100%;
|
||
margin-top: 0;
|
||
|
||
height: 40rpx;
|
||
margin: 40rpx 0;
|
||
}
|
||
|
||
.greenCardBox1 {
|
||
margin-top: 80rpx;
|
||
margin-bottom: 120rpx;
|
||
|
||
.greenCardBoxTop {
|
||
width: 100%;
|
||
margin-bottom: 30rpx;
|
||
// background: linear-gradient(
|
||
// 130deg,
|
||
// rgb(46, 103, 106) 0%,
|
||
// rgb(114, 173, 146) 100%
|
||
// )
|
||
// text;
|
||
text-align: center;
|
||
// line-height: 60rpx;
|
||
|
||
display: flex;
|
||
// margin-bottom: 60rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// background-color: $themeColor;
|
||
|
||
padding: 0 22rpx 0;
|
||
padding-left: 40rpx;
|
||
box-sizing: border-box;
|
||
font-size: 44rpx;
|
||
|
||
.titlebg {
|
||
width: 400rpx;
|
||
height: 120rpx;
|
||
line-height: 120rpx;
|
||
background-size: 100% 100%;
|
||
background-image: url("@/static/icon/homeTitleBg.png");
|
||
background-repeat: no-repeat;
|
||
font-size: 44rpx;
|
||
margin-left: -60rpx;
|
||
// height: 90rpx;
|
||
text-align: left;
|
||
padding-left: 140rpx;
|
||
color: #fff;
|
||
// homeTitleBg.png
|
||
}
|
||
|
||
.userBox {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.user_img {
|
||
width: 49rpx;
|
||
height: 49rpx;
|
||
border-radius: 100%;
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.name {
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: bold;
|
||
font-size: 21rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.greenCardBoxContent {
|
||
border: 2rpx solid #5599a7;
|
||
padding: 100rpx 20rpx 20rpx;
|
||
margin-top: -96rpx;
|
||
// border: 10rpx solid;
|
||
|
||
border-radius: 20rpx;
|
||
background-image: linear-gradient(0deg, #65b5c561 0%, #fdfcdf3d 75%);
|
||
|
||
// clip-path: inset(0px round 10rpx);
|
||
// animation: huerotate 6s infinite linear;
|
||
// filter: hue-rotate(360deg);
|
||
|
||
width: 100%;
|
||
display: flex;
|
||
overflow: hidden;
|
||
height: auto;
|
||
// padding: 24rpx 19rpx 5rpx;
|
||
box-sizing: border-box;
|
||
// margin-top: 60rpx;
|
||
|
||
.content_item {
|
||
display: inline-block;
|
||
width: 300rpx;
|
||
background-color: #fff !important;
|
||
margin-right: 26rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.book_image {
|
||
width: 317rpx;
|
||
height: 146rpx;
|
||
border-radius: 10rpx;
|
||
// background-color: #919191;
|
||
}
|
||
|
||
.book_name {
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
font-size: 23rpx;
|
||
color: #000000;
|
||
line-height: 23rpx;
|
||
text-align: left;
|
||
margin-top: 14rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 160rpx;
|
||
height: 37rpx;
|
||
// background: #0037EB;
|
||
border-radius: 7rpx;
|
||
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
font-size: 26rpx;
|
||
color: #ffffff;
|
||
line-height: 37rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.scroll-X {
|
||
width: 100%;
|
||
height: 100%;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.learning_box {
|
||
// height: 298rpx;
|
||
// border-radius: 40rpx;
|
||
// background-image: linear-gradient(90deg, #3ab3ae 0%, #d5ecdd 200%);
|
||
|
||
.learning_user_box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.learning_user_img {
|
||
width: 49rpx;
|
||
height: 49rpx;
|
||
border-radius: 100%;
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.name {
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
font-size: 21rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
background-color: #f0ba00;
|
||
}
|
||
}
|
||
|
||
.listening_box {
|
||
// height: 298rpx;
|
||
|
||
.right {
|
||
background-color: #0037eb;
|
||
}
|
||
}
|
||
|
||
.commonPageBox {
|
||
// padding-bottom: 50rpx;
|
||
// box-sizing: border-box;
|
||
}
|
||
|
||
.noticeIcon {
|
||
width: 20rpx;
|
||
}
|
||
|
||
.u-notice-bar {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.bottomBox {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.item_img {
|
||
width: 48% !important;
|
||
height: 100%;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.notice_box {
|
||
border: 2rpx solid rgb(197, 227, 215);
|
||
|
||
// background-repeat: no-repeat;
|
||
|
||
// background-size: 100% 100%;
|
||
// padding-left: 60rpx;
|
||
// background-image: url("@/static/icon/noticebg.png");
|
||
}
|
||
|
||
.appJump {
|
||
width: 190rpx;
|
||
|
||
position: fixed;
|
||
right: 0;
|
||
top: 7%;
|
||
z-index: 1;
|
||
|
||
.item {
|
||
background: rgba(255, 255, 255, 0.6);
|
||
margin-bottom: 30rpx;
|
||
border: 1px solid #fff;
|
||
border-right: none;
|
||
align-items: center;
|
||
padding-right: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
overflow: hidden;
|
||
border-radius: 50rpx 0 0 50rpx;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.img {
|
||
// width: 60rpx; height: 60rpx;
|
||
padding: 6rpx;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
border-radius: 100%;
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.related_courses_name {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.footer_box {
|
||
height: 110rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
z-index: 502;
|
||
box-sizing: content-box;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.footer_bg {
|
||
background-color: #fff;
|
||
box-shadow: 0 0px 10px 1px #0000001a;
|
||
}
|
||
|
||
.footer_item {
|
||
position: relative;
|
||
flex: 1;
|
||
}
|
||
|
||
.footer_nav_item {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.footer_nav_item:active {
|
||
background-color: rgba($color: #fff, $alpha: 0.1);
|
||
}
|
||
|
||
.footer_nav_item_text {
|
||
font-size: 26rpx;
|
||
color: #909090;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.footer_nav_item_text_active {
|
||
color: #f9a633;
|
||
}
|
||
|
||
.footer_nav_item_image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.footer_nav_item_image_scale {
|
||
animation: mescrollUpRotate 0.6s linear 1;
|
||
}
|
||
|
||
@keyframes mescrollUpRotate {
|
||
0% {
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.footer_item_text_active {
|
||
color: $themeColor;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.per_mes {
|
||
margin: 0 0 50rpx 0;
|
||
align-items: center;
|
||
|
||
.per_mes_img {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
// background-color: #fff;
|
||
border-radius: 90rpx;
|
||
background-color: #fff;
|
||
|
||
margin: 30upx 30upx 0;
|
||
float: left;
|
||
}
|
||
|
||
view {
|
||
float: left;
|
||
margin-top: 20rpx;
|
||
|
||
.name {
|
||
display: inline-block;
|
||
font-weight: bold;
|
||
font-size: 38upx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.tong {
|
||
color: #999;
|
||
font-size: 25upx;
|
||
}
|
||
|
||
.per_user_img {
|
||
display: inline-block;
|
||
width: 40upx;
|
||
height: 40upx;
|
||
margin-left: 10rpx;
|
||
vertical-align: super;
|
||
}
|
||
}
|
||
}
|
||
|
||
.mine_bg_box {
|
||
background-image: url("@/static/icon/mine_bg.png") !important;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.list_box {
|
||
// background: #d8f8e4 !important;
|
||
padding: 20rpx 0;
|
||
margin-top: -10rpx;
|
||
}
|
||
|
||
.xiugai {
|
||
border-radius: 20rpx !important;
|
||
margin: 0 20rpx;
|
||
// padding:0 40rpx;
|
||
background: rgba(255, 255, 255, 0.65);
|
||
|
||
.nav_list {
|
||
background-color: #b7e0e2;
|
||
padding: 15rpx 0 15rpx 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 22rpx;
|
||
position: relative;
|
||
font-weight: bold;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
|
||
&:active {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
text {
|
||
color: #333;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
background-image: url("@/static/icon/icon_right.png");
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
}
|
||
|
||
.nav_list:nth-last-child(1) {
|
||
border-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.box_fillet {
|
||
border-radius: 40rpx;
|
||
|
||
overflow: hidden;
|
||
|
||
// background: #fff;
|
||
}
|
||
.bg_top {
|
||
// background-position: center center;
|
||
padding: 0 30rpx;
|
||
|
||
height: 40rpx;
|
||
position: relative;
|
||
|
||
.setIcon {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
// top: 30rpx;
|
||
}
|
||
}
|
||
</style>
|