You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
951 lines
22 KiB
951 lines
22 KiB
<template> |
|
<view class="index"> |
|
<view class="header header-search acea-row row-middle"> |
|
<view @click="goGoodSearch()" class="search acea-row row-middle"> |
|
<text class="iconfont icon-xiazai5"></text> |
|
搜索商品 |
|
</view> |
|
<!-- #ifndef H5 --> |
|
<view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'"> |
|
<image src="../../static/saoyisao-icon.png" /> |
|
</view> |
|
<!-- #endif --> |
|
</view> |
|
<view class="banner-box"> |
|
<image src="https://www.cyjyyjy.com:8081/static/home-banner.png" mode=""></image> |
|
</view> |
|
<!-- 每日一签 --> |
|
<view class="today-fortune-content"> |
|
<view class="today-fortune-box"> |
|
<view class="top-box acea-row row-between-wrapper"> |
|
<view class="title">今日·宜忌</view> |
|
<view>{{year}}年{{month}}月{{day}}日</view> |
|
</view> |
|
<view class="date-box acea-row row-middle row-center"> |
|
<view class="date-btn prev-btn"><image src="../../static/prev.png"></image></view> |
|
<view class="time-box">{{todayDate}}</view> |
|
<view class="date-btn next-btn"><image src="../../static/next.png"></image></view> |
|
</view> |
|
<view class="week-box"> |
|
<span class="week">星期{{week}}</span> |
|
<span>{{suici}}</span> |
|
</view> |
|
<view class="fortune-detail"> |
|
<view class="fortune-n acea-row-nowrap mt20"> |
|
<view class="fortune-icon nice">宜</view> |
|
<view class="fortune">{{yi}}</view> |
|
</view> |
|
<view class="fortune-b acea-row-nowrap mt20"> |
|
<view class="fortune-icon bad">忌</view> |
|
<view class="fortune">{{ji}}</view> |
|
</view> |
|
</view> |
|
<view class="qiuqian-box" v-if="flag == 1"> |
|
<image class="qiuqian-bg" @click="todiandeng()" src="https://qiniu.upload.gznl.top/90a6420b-abd9-41e2-be4f-dcf10fe93bed.png"></image> |
|
<!-- <view class="txt-box acea-row row-between-wrapper"> |
|
<view></view> |
|
<view class="qiuqin-btn" @click="todiandeng()">祈福点灯</view> |
|
</view> --> |
|
</view> |
|
</view> |
|
<!-- <view class="fortune-menu-box acea-row row-between"> |
|
<view class="fortune-menu-item acea-row row-middle" @click="toWebView()"> |
|
<image src="../../static/f-menu1.png" mode=""></image> |
|
<text>周公解梦</text> |
|
</view> |
|
<view class="fortune-menu-item acea-row row-middle"> |
|
<image src="../../static/f-menu2.png" mode=""></image> |
|
<text>周易八卦</text> |
|
</view> |
|
<view class="fortune-menu-item acea-row row-middle"> |
|
<image src="../../static/f-menu3.png" mode=""></image> |
|
<text>八字财运</text> |
|
</view> |
|
</view> --> |
|
</view> |
|
<!-- 推荐课程 --> |
|
<view class="recommend-box p30"> |
|
<view class="title-box acea-row row-between-wrapper"> |
|
<view class="title">今日推荐</view> |
|
<view class="more" @click="toCourse">查看全部课程</view> |
|
</view> |
|
<view class="recommend-list-box acea-row"> |
|
<view class="recommend-item" v-for="(item,index) in courseList" :key="index" @click="toCourseDetail(item.id)"> |
|
<view class="img-box"><image :src="item.imageArr[0]" mode="aspectFill"></image></view> |
|
<view class="course-content"> |
|
<view class="course-title line1">{{item.courseName}}</view> |
|
<view class="course-tips-box acea-row"> |
|
<view class="course-tip-item blue">{{item.categoryName}}</view> |
|
<view class="course-tip-item yellow">{{item.levelName}}</view> |
|
</view> |
|
<!-- <view class="price" v-if="item.level > 2">{{item.level}}级课程</view> |
|
<view class="price" v-if="item.level == 2">￥{{item.courseCharge}}</view> |
|
<view class="price colG" v-if="item.chargeType == 0 || item.level == 1">免费</view> --> |
|
<view class="course-address acea-row row-between-wrapper"> |
|
<view class="address">{{item.coursePlace}}</view> |
|
<view class="course-time">{{setDate(item.courseStartTime)}}-{{setDate(item.courseEndTime)}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 学习榜 --> |
|
<view class="study-list-box"> |
|
<view class="title-box acea-row row-between-wrapper"> |
|
<view class="title">学习榜单</view> |
|
<view class="more" @click="toCourse">查看全部榜单</view> |
|
</view> |
|
<view class="study-list uni-padding-wrap uni-common-mt"> |
|
<scroll-view class="scroll-view_H" scroll-x="true"> |
|
<view class="study-item scroll-view-item_H" v-for="(item,index) in studyList" :key="index" @click="toStudyDetail(item.id)"> |
|
<view class="day-box acea-row row-middle"> |
|
<image src="../../static/date-icon.png" v-if="index%2 == 0"></image> |
|
<image src="../../static/date-icon2.png" v-if="index%2 != 0"></image> |
|
<text>{{item.clockTimes}}</text> |
|
</view> |
|
<view class="study-content"> |
|
<view class="study-title">{{item.listName}}</view> |
|
<view class="study-time acea-row-nowrap row-between-wrapper"> |
|
<view>{{setDate(item.listStartTime)}}开始</view> |
|
<view>{{item.enterNum}}人已参与</view> |
|
</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</view> |
|
</view> |
|
<!-- 都在看 --> |
|
<view class="readyarticle-box"> |
|
<view class="title-box acea-row row-between-wrapper"> |
|
<view class="title">大家都在看</view> |
|
<view class="more" @click="toKnowledge">查看全部文章</view> |
|
</view> |
|
<view class="article-list"> |
|
<view class="article-item" v-for="(item,index) in articleList" :key="index" @click="toArticleDetail(item.id)"> |
|
<image :src="item.imageInput" mode="aspectFill"></image> |
|
<view class="article-content"> |
|
<view class="article-title line1">{{item.title}}</view> |
|
<view class="article-desc line1">{{item.synopsis}}</view> |
|
<view class="author-box acea-row row-between"> |
|
<view class="acea-row"> |
|
<view class="author">{{item.author}}</view> |
|
<view class="time">{{item.addTime.split(' ')[0]}}</view> |
|
<view>{{item.visit}}人阅读</view> |
|
</view> |
|
<view class="tips" |
|
:class="item.chargeType == 0 ? 'free-bg' : item.chargeType == 1 ? '' : 'jifen'"> |
|
{{item.chargeType == 0 ? '免费' : item.chargeType == 1 ? '收费' : '积分'}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="no-more">没有更多内容了～</view> |
|
</view> |
|
</template> |
|
<script> |
|
import { mapState, mapMutations, mapActions } from 'vuex' |
|
import GoodList from '@/components/GoodList' |
|
import PromotionGood from '@/components/PromotionGood' |
|
import CouponWindow from '@/components/CouponWindow' |
|
import Menu from '@/components/Menu' |
|
import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar' |
|
import Adv from '@/components/sh-adv' |
|
import Groupon from '@/components/sh-groupon.vue' |
|
|
|
import Banner from './components/Banner' |
|
import HotCommodity from './components/HotCommodity' |
|
import FirstNewProduct from './components/FirstNewProduct' |
|
import ProductsRecommended from './components/ProductsRecommended' |
|
import Live from './components/Live' |
|
|
|
import { getHomeData, getShare, getCanvas } from '@/api/public' |
|
import cookie from '@/utils/store/cookie' |
|
import { isWeixin, handleUrlParam } from '@/utils/index' |
|
|
|
import { signCourse } from '@/api/knowledge' |
|
|
|
import { getWanniali , getBlessingFlag } from '@/api/diandeng' |
|
|
|
import { openShareAll } from '@/libs/wechat' |
|
|
|
const HAS_COUPON_WINDOW = 'has_coupon_window' |
|
|
|
export default { |
|
name: 'Index', |
|
components: { |
|
// swiper, |
|
// swiperSlide, |
|
UniNoticeBar, |
|
GoodList, |
|
PromotionGood, |
|
CouponWindow, |
|
Menu, |
|
Adv, |
|
Groupon, |
|
Banner, |
|
HotCommodity, |
|
FirstNewProduct, |
|
ProductsRecommended, |
|
Live, |
|
}, |
|
props: {}, |
|
data: function() { |
|
return { |
|
homeData: [], |
|
CustomBar: this.CustomBar, |
|
StatusBar: this.StatusBar, |
|
formatMenus: [], |
|
categoryCurrent: 0, |
|
menuNum: 4, |
|
bgcolor: '', |
|
bgColor: '', |
|
swiperCurrent: 0, //轮播下标 |
|
webviewId: 0, |
|
showCoupon: false, |
|
logoUrl: '', |
|
banner: [], |
|
menus: [], |
|
combinationList: [], |
|
roll: [], |
|
activity: [], |
|
activityOne: {}, |
|
bastList: [], |
|
firstList: [], |
|
info: { |
|
fastList: [], |
|
bastBanner: [], |
|
bastList: [], |
|
}, |
|
likeInfo: [], |
|
live: [], |
|
lovely: [], |
|
benefit: [], |
|
couponList: [], |
|
bgImage: '', |
|
week:'', |
|
suici:'', |
|
year:'', |
|
month:'', |
|
day:'', |
|
ji:'', |
|
yi:'', |
|
dateStr:'', |
|
todayDate:'', |
|
courseList: [], |
|
studyList: [], |
|
articleList: [], |
|
flag:0 |
|
} |
|
}, |
|
computed: { |
|
singNew() { |
|
return this.roll.length > 0 ? this.roll[0] : '你还没添加通知哦！' |
|
}, |
|
customStyle() { |
|
var bgImage = this.bgImage |
|
// var style = `height:${this.CustomBar}px;padding-top:${0}px;background: ${this.bgcolor}`; |
|
var style = `height:${this.CustomBar}px;padding-top:${this.StatusBar}px;background: ${this.bgcolor}` |
|
if (this.bgImage) { |
|
style = `${style}background-image:url(${bgImage});` |
|
} |
|
return style |
|
}, |
|
}, |
|
onLoad: function() { |
|
this.getLocation() |
|
let that = this |
|
this.getDate(); |
|
uni.showLoading({ |
|
title:'正在加载中...' |
|
}) |
|
// getCanvas() |
|
// .then(res => {}) |
|
// .catch(error => { |
|
// this.homeData = JSON.parse(error.data.json) |
|
// }) |
|
getBlessingFlag().then((res)=>{ |
|
this.flag = res.data |
|
}) |
|
getHomeData().then(res => { |
|
uni.hideLoading() |
|
that.logoUrl = res.data.logoUrl |
|
res.data.banner.map(item => (item.bgcolor = item.color || '')) |
|
that.$set(that, 'info', res.data.info) |
|
that.$set(that, 'firstList', res.data.firstList) |
|
that.$set(that, 'bastList', res.data.bastList) |
|
that.$set(that, 'likeInfo', res.data.likeInfo) |
|
that.$set(that, 'live', res.data.liveList) |
|
that.$set(that, 'lovely', res.data.lovely) |
|
that.$set(that, 'benefit', res.data.benefit) |
|
that.$set(that, 'couponList', res.data.couponList) |
|
that.$set(that, 'combinationList', res.data.combinationList) |
|
that.$set(that, 'courseList', res.data.cyCourseDtos) |
|
that.$set(that, 'studyList', res.data.studyLists) |
|
that.$set(that, 'articleList', res.data.articleDtos) |
|
uni.hideLoading() |
|
that.setOpenShare() |
|
}) |
|
|
|
getWanniali(this.dateStr2).then((res)=>{ |
|
console.log(res) |
|
var data = res.data |
|
if(res.success){ |
|
this.suici = JSON.parse(data.huangli.suici).join(' ') |
|
this.week = data.week |
|
this.todayDate = data.lunarmonth + data.lunarday |
|
this.year = data.year |
|
this.month = data.month |
|
this.day = data.day |
|
this.ji = JSON.parse(data.huangli.ji).join(' ') |
|
this.yi = JSON.parse(data.huangli.yi).join(' ') |
|
} |
|
}) |
|
}, |
|
methods: { |
|
...mapActions(['getLocation']), |
|
|
|
todiandeng(){ |
|
uni.navigateTo({ |
|
url:'/pages/diandeng/index' |
|
}) |
|
}, |
|
setDate(t){ |
|
let str = t.split(" ")[0].split("-")[1] + "." + t.split(" ")[0].split("-")[2] |
|
return str |
|
}, |
|
getDate(){ |
|
var today = new Date(); |
|
var y = today.getFullYear().toString(); |
|
var m = (today.getMonth()+1).toString(); |
|
var d = today.getDate().toString(); |
|
var day = today.getDay(); |
|
this.dateStr = y + '年' + m + '月' + d + '日'; |
|
this.dateStr2 = y + '-' + m + '-' + d ; |
|
}, |
|
onShareTimeline: function() { |
|
return { |
|
title: this.miniHomeRemark, |
|
imageUrl: this.miniHomeImg, |
|
path: 'pages/home/index?spread=' + uni.getStorageSync('uid'), |
|
} |
|
}, |
|
onShareAppMessage: function() { |
|
return { |
|
title: this.miniHomeRemark, |
|
imageUrl: this.miniHomeImg, |
|
path: 'pages/home/index?spread=' + uni.getStorageSync('uid'), |
|
} |
|
}, |
|
toCourseDetail(id){ |
|
this.$yrouter.push({ |
|
path: '/pages/course/detail', |
|
query: { |
|
id:id, |
|
}, |
|
}) |
|
}, |
|
toStudyDetail(id){ |
|
this.$yrouter.push({ |
|
path: '/pages/study/detail', |
|
query: { |
|
id:id, |
|
}, |
|
}) |
|
}, |
|
toArticleDetail(id){ |
|
this.$yrouter.push({ |
|
path: '/pages/knowledge/detail', |
|
query: { |
|
id:id, |
|
}, |
|
}) |
|
}, |
|
toKnowledge(){ |
|
uni.switchTab({ |
|
url: "/pages/knowledge/index" |
|
}) |
|
}, |
|
toCourse(){ |
|
uni.switchTab({ |
|
url: "/pages/course/index" |
|
}) |
|
}, |
|
goRoll(item) { |
|
if (item.uniapp_url) { |
|
this.$yrouter.push(item.uniapp_url) |
|
} |
|
}, |
|
goGoodSearch() { |
|
// this.$yrouter.push('/pages/shop/GoodsEvaluate/index'); |
|
this.$yrouter.push('/pages/shop/GoodSearch/index') |
|
}, |
|
goWxappUrl(item) { |
|
this.$yrouter.push(item.uniapp_url) |
|
}, |
|
goHotNewGoods(type) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/HotNewGoods/index', |
|
query: { |
|
type, |
|
}, |
|
}) |
|
}, |
|
goGoodsCon(item) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/GoodsCon/index', |
|
query: { |
|
id: item.id, |
|
}, |
|
}) |
|
}, |
|
goGoodsPromotion() { |
|
this.$yrouter.push('/pages/shop/GoodsPromotion/index') |
|
}, |
|
setOpenShare: function() { |
|
if (this.$deviceType == 'weixin') { |
|
getShare().then(res => { |
|
var data = res.data.data |
|
var configAppMessage = { |
|
desc: data.synopsis, |
|
title: data.title, |
|
link: location.href, |
|
imgUrl: data.img, |
|
} |
|
openShareAll(configAppMessage) |
|
}) |
|
} |
|
}, |
|
startQr: function() { |
|
uni.showLoading({ |
|
title:'正在加载中...' |
|
}) |
|
uni.scanCode({ |
|
success: res => { |
|
// let option = handleUrlParam(res.result) |
|
let id = res.result; |
|
signCourse(id).then((res)=>{ |
|
uni.hideLoading() |
|
if(res.success){ |
|
uni.showModal({ |
|
title:'提示!', |
|
content:'签到成功！您的座位号是' + res.data, |
|
|
|
}) |
|
} else{ |
|
uni.showToast({ |
|
title:res.msg, |
|
icon:'none', |
|
duration:5000 |
|
}) |
|
} |
|
}) |
|
|
|
// switch (option.pageType) { |
|
// case 'good': |
|
// // 跳转商品详情 |
|
// this.$yrouter.push({ |
|
// path: '/pages/shop/GoodsCon/index', |
|
// query: { |
|
// q: res.result, |
|
// }, |
|
// }) |
|
// break |
|
// case 'group': |
|
// // 跳转团购 |
|
// this.$yrouter.push({ |
|
// path: '/pages/activity/GroupRule/index', |
|
// query: { |
|
// q: res.result, |
|
// }, |
|
// }) |
|
// break |
|
// case 'dargain': |
|
// // 跳转砍价 |
|
// this.$yrouter.push({ |
|
// path: '/pages/activity/DargainDetails/index', |
|
// query: { |
|
// q: res.result, |
|
// }, |
|
// }) |
|
// break |
|
// default: |
|
// // 跳转分销 |
|
// this.$yrouter.push({ |
|
// path: '/pages/Loading/index', |
|
// query: {}, |
|
// }) |
|
// break |
|
// } |
|
}, |
|
}) |
|
}, |
|
getbgcolor(e) { |
|
this.bgcolor = e |
|
}, |
|
}, |
|
created: async function() { |
|
// await this.doColorThief(); |
|
}, |
|
} |
|
</script> |
|
<style scoped lang="less"> |
|
.content_box { |
|
background: #F5F6F7; |
|
} |
|
.colG{ |
|
color: #8FB85B !important; |
|
} |
|
.index { |
|
background-color: #F5F6F7; |
|
padding-bottom: 68rpx; |
|
.header{ |
|
.qr { |
|
width: 36rpx; |
|
height: 38rpx; |
|
image{ |
|
width: 36rpx; |
|
height: 38rpx; |
|
} |
|
} |
|
} |
|
|
|
} |
|
.swiper-item { |
|
height: 100%; |
|
} |
|
.fixed-header { |
|
position: fixed; |
|
z-index: 99; |
|
// #ifdef H5 |
|
top: 88rpx; |
|
// #endif |
|
|
|
// #ifndef H5 |
|
top: 0; |
|
// #endif |
|
left: 0; |
|
right: 0; |
|
background: #fff; |
|
box-shadow: 0 0 20rpx -10rpx #aaa; |
|
& + .fixed-header-box { |
|
height: 98rpx; |
|
} |
|
} |
|
.banner-box{ |
|
width: 100%; |
|
height: 372rpx; |
|
} |
|
.today-fortune-content{ |
|
width: 100%; |
|
padding: 0 30rpx; |
|
box-sizing: border-box; |
|
margin-bottom: 40rpx; |
|
|
|
.today-fortune-box{ |
|
width: 100%; |
|
background: #fff; |
|
box-sizing: border-box; |
|
padding: 30rpx 40rpx; |
|
border-radius: 20rpx; |
|
box-shadow: 0px 6px 14px 0px rgba(124,124,124,0.08); |
|
font-size: 24rpx; |
|
position: relative; |
|
top: -24rpx; |
|
} |
|
.date-box{ |
|
font-size: 72rpx; |
|
color: #EA533E; |
|
margin-top: 38rpx; |
|
.time-box{ |
|
margin: 0 24rpx; |
|
} |
|
.date-btn{ |
|
width: 84rpx; |
|
height: 84rpx; |
|
font-weight: bold; |
|
line-height: 100rpx; |
|
} |
|
} |
|
.week-box{ |
|
width: 100%; |
|
color: #7C7C7C; |
|
text-align: center; |
|
border-bottom: 1px solid #ECECEC; |
|
padding: 30rpx 0; |
|
.week{ |
|
display: inline-block; |
|
margin-right: 12rpx; |
|
color: #222; |
|
} |
|
} |
|
.fortune-detail{ |
|
font-size: 30rpx; |
|
color: #222; |
|
.fortune-n{ |
|
color:#EA533E; |
|
} |
|
.fortune-icon{ |
|
width: 44rpx; |
|
height: 44rpx; |
|
text-align: center; |
|
line-height: 44rpx; |
|
border-radius: 25px; |
|
font-size: 28rpx; |
|
color: #fff; |
|
margin-right: 20rpx; |
|
} |
|
.fortune{ |
|
width:calc(100% - 70rpx) |
|
} |
|
.nice{ |
|
background: #EA533E; |
|
} |
|
.bad{ |
|
background: #8FB85B; |
|
} |
|
} |
|
.qiuqian-box{ |
|
width: 100%; |
|
height: 124rpx; |
|
position: relative; |
|
margin-top: 40rpx; |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
z-index: 1; |
|
} |
|
.txt-box{ |
|
width: 100%; |
|
height: 100%; |
|
padding:0 28rpx; |
|
box-sizing: border-box; |
|
font-size: 30rpx; |
|
color: #EA533E; |
|
position: absolute; |
|
z-index: 3; |
|
} |
|
.qiuqin-btn{ |
|
width: 194rpx; |
|
height: 68rpx; |
|
background: linear-gradient(180deg, #EA533E 0%, #E5270F 100%); |
|
box-shadow: 0px 4rpx 6rpx 2rpx rgba(255,213,208,0.59); |
|
border-radius: 34rpx; |
|
font-size: 32rpx; |
|
color: #fff; |
|
text-align: center; |
|
line-height: 68rpx; |
|
} |
|
} |
|
.fortune-menu-box{ |
|
.fortune-menu-item{ |
|
width: 216rpx; |
|
height: 88rpx; |
|
border-radius: 6rpx; |
|
background: #fff; |
|
font-size: 28rpx; |
|
color: #222; |
|
image{ |
|
width: 60rpx; |
|
height: 60rpx; |
|
margin-right: 12rpx; |
|
} |
|
} |
|
} |
|
|
|
} |
|
|
|
.p30{ |
|
width: 100%; |
|
padding: 0 30rpx; |
|
box-sizing: border-box; |
|
margin-bottom: 40rpx; |
|
} |
|
.recommend-box{ |
|
.recommend-list-box{ |
|
width: 100%; |
|
// margin-top: 20rpx; |
|
.recommend-item{ |
|
width: 334rpx; |
|
background: #fff; |
|
border-radius: 10rpx; |
|
font-size: 28rpx; |
|
color: #333; |
|
margin-right: 23rpx; |
|
margin-top: 23rpx; |
|
overflow: hidden; |
|
image{ |
|
width: 334rpx; |
|
height: 216rpx; |
|
} |
|
.course-content{ |
|
width: 100%; |
|
box-sizing: border-box; |
|
padding:0 20rpx 20rpx; |
|
} |
|
.course-title{ |
|
line-height: 40rpx; |
|
} |
|
.course-tips-box{ |
|
margin: 12rpx 0 24rpx; |
|
font-size: 24rpx; |
|
color: #999; |
|
.course-tip-item{ |
|
min-width: 60rpx; |
|
height: 34rpx; |
|
line-height: 32rpx; |
|
text-align: center; |
|
background: #EDEFF8; |
|
border-radius: 4rpx; |
|
border: 1px solid #6E85EB; |
|
padding: 0 6rpx; |
|
font-size: 22rpx; |
|
margin-right: 20rpx; |
|
box-sizing: border-box; |
|
margin-right: 10rpx; |
|
} |
|
.blue{ |
|
color: #6E85EB; |
|
background: #EDEFF8; |
|
border-color: #6E85EB; |
|
} |
|
.yellow{ |
|
color: #F99C10; |
|
background: #FFEDCC; |
|
border-color: #F99C10; |
|
} |
|
} |
|
.price{ |
|
font-size: 32rpx; |
|
color: #EA533E; |
|
font-weight: 500; |
|
margin: 16rpx 0; |
|
} |
|
.course-address{ |
|
font-size: 24rpx; |
|
color: #999999; |
|
} |
|
} |
|
.recommend-item:nth-child(2n){ |
|
margin-right: 0; |
|
} |
|
} |
|
|
|
} |
|
.study-list-box,.readyarticle-box{ |
|
margin-bottom: 40rpx; |
|
.title-box{ |
|
width: 100%; |
|
padding: 0 30rpx; |
|
box-sizing: border-box; |
|
} |
|
} |
|
.study-list{ |
|
width: 100%; |
|
margin-top: 20rpx; |
|
margin-bottom: 40rpx; |
|
padding-left: 20rpx; |
|
box-sizing: border-box; |
|
.scroll-view_H{ |
|
white-space: nowrap; |
|
width: 100%; |
|
} |
|
.study-item{ |
|
width: 334rpx; |
|
height: 180rpx; |
|
display: inline-block; |
|
background: linear-gradient(143deg, #FDAF97 0%, #ED5E48 100%); |
|
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32); |
|
border-radius: 10rpx; |
|
margin-right: 20rpx; |
|
.day-box{ |
|
color: #E73D21; |
|
font-size: 48rpx; |
|
line-height: 58rpx; |
|
margin-left: 10rpx; |
|
image{ |
|
width: 34rpx; |
|
height: 34rpx; |
|
margin-right: 10rpx; |
|
} |
|
} |
|
.study-content{ |
|
width: calc(100% - 12rpx); |
|
background: #fff; |
|
font-size: 24rpx; |
|
color: #999; |
|
box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32); |
|
border-radius: 10rpx; |
|
margin: 2rpx auto; |
|
padding:16rpx 10rpx 10rpx; |
|
box-sizing: border-box; |
|
.study-title{ |
|
font-size: 28rpx; |
|
font-weight: 500; |
|
color: #222222; |
|
line-height: 40rpx; |
|
margin-bottom: 12rpx; |
|
} |
|
} |
|
} |
|
.study-item:nth-child(2n){ |
|
background: linear-gradient(143deg, #C4DBFF 0%, #7FAAF2 100%); |
|
.day-box{ |
|
color: #557AB3; |
|
} |
|
} |
|
} |
|
.readyarticle-box{ |
|
.article-list{ |
|
width: 100%; |
|
margin-top: 20rpx; |
|
.article-item{ |
|
width: 100%; |
|
background: #fff; |
|
padding: 20rpx; |
|
box-sizing: border-box; |
|
margin-bottom: 12rpx; |
|
image{ |
|
width: 710rpx; |
|
height: 266rpx; |
|
border-radius: 10rpx; |
|
margin-bottom: 20rpx; |
|
} |
|
.article-title{ |
|
font-size: 36rpx; |
|
font-weight: 500; |
|
color: #333333; |
|
line-height: 50rpx; |
|
margin-bottom: 8rpx; |
|
} |
|
.article-desc{ |
|
font-size: 24rpx; |
|
font-weight: 400; |
|
color: #999999; |
|
line-height: 40rpx; |
|
margin-bottom: 30rpx; |
|
text-indent: 1em; |
|
} |
|
.author-box{ |
|
font-size: 24rpx; |
|
color: #999; |
|
// text-indent: 1em; |
|
.author{ |
|
color: #EA533E; |
|
} |
|
.time{ |
|
margin: 0 12rpx; |
|
} |
|
.tips{ |
|
width: 100rpx; |
|
font-size: 20rpx; |
|
color: #FFAD3A; |
|
height: 34rpx; |
|
text-align: center; |
|
line-height: 34rpx; |
|
background: #fcd391; |
|
border-radius: 44rpx; |
|
} |
|
.free-bg{ |
|
background: #8FB85B; |
|
color: #D7FFA4; |
|
} |
|
.jifen{ |
|
background: #AAC8FA; |
|
color: #5693F9; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.title-box{ |
|
color: #222; |
|
.title{ |
|
font-size: 40rpx; |
|
font-weight: 500; |
|
} |
|
.more{ |
|
font-size: 24rpx; |
|
color: #999; |
|
} |
|
} |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.no-more{ |
|
text-align: center; |
|
color: #999; |
|
font-size: 24rpx; |
|
} |
|
|
|
.head_box { |
|
width: 750rpx; |
|
// background: #fff; |
|
transition: all linear 0.3s; |
|
|
|
/deep/.cuIcon-back { |
|
display: none; |
|
} |
|
|
|
.nav-title { |
|
font-size: 38rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #fff; |
|
} |
|
} |
|
|
|
.cu-bar.fixed { |
|
position: fixed; |
|
width: 100%; |
|
top: 0; |
|
z-index: 1024; |
|
// box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.cu-bar { |
|
box-sizing: border-box; |
|
.index .header { |
|
height: 64rpx; |
|
} |
|
} |
|
|
|
.header-search { |
|
transition: all linear 0.3s; |
|
background: #fff; |
|
color: #999999; |
|
.search{ |
|
border: 2rpx solid #EA533E; |
|
background-color: #fff; |
|
} |
|
} |
|
|
|
.cu-bar .action { |
|
display: -webkit-box; |
|
display: -webkit-flex; |
|
display: flex; |
|
align-items: center; |
|
height: 100%; |
|
max-height: 100%; |
|
|
|
&:first-child { |
|
margin-left: 15px; |
|
font-size: 15px; |
|
} |
|
} |
|
|
|
.home_content_box { |
|
margin-top: -20rpx; |
|
} |
|
|
|
.head_box { |
|
} |
|
|
|
.nav-title { |
|
margin-left: 20rpx; |
|
line-height: 40px; |
|
} |
|
</style>
|
|
|