429 lines
10 KiB
Vue
429 lines
10 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- banner图 -->
|
||
<view class="uni-padding-wrap">
|
||
<view class="page-section swiper">
|
||
<view class="page-section-spacing">
|
||
<swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" interval="3500"
|
||
duration="600">
|
||
<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
|
||
<view class="swiper-item uni-bg-red">
|
||
<image class="swiper-img" :src="item.bannerImg" mode=""></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="message-box" @click="noticeMore">
|
||
<view class="page-section swiper">
|
||
<view class="page-section-spacing">
|
||
<swiper style="height: 120rpx;" class="swiper" vertical="ture" circular="true"
|
||
indicator-dots='false' indicator-color="rgba(0,0,0,.0)" indicator-active-color="rgba(0,0,0,.0)"
|
||
autoplay="true" interval="4000">
|
||
<swiper-item class="swiper-list" v-for="(item, index) in messageData" :key="index">
|
||
<view class="message-tltle">{{item.noticeTitle}}</view>
|
||
<view class="message-content"><span>感谢</span>{{item.noticeDesc}}</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cu-bar bg-white margin-top-xs">
|
||
<view class="action sub-title">
|
||
<text class="text-xl text-bold text-blue text-shadow">推荐小程序</text>
|
||
<text class="text-ABC text-blue">my app</text>
|
||
</view>
|
||
<view class="action" @click="gomoreapp"><text class="text-lg text-grey text-shadow" >更多</text></view>
|
||
</view>
|
||
<ad :unit-id="adlist.bannerAd"></ad>
|
||
<view class="skill-sequence-panel-content-wrapper">
|
||
<!--左边虚化-->
|
||
<view class="hide-content-box hide-content-box-left"></view>
|
||
<!--右边虚化-->
|
||
<view class="hide-content-box hide-content-box-right"></view>
|
||
<scroll-view scroll-x="true" class="kite-classify-scroll">
|
||
<view class="kite-classify-cell shadow" v-for="(item, index) in curriculum" :key="index">
|
||
<view :class="'nav-li bg-index' + (index + 1)">
|
||
<view class="nav-name">{{ item.itemName }}</view>
|
||
</view>
|
||
<view class="nav-content">{{ item.itemDesc }}</view>
|
||
<view @click="goDeatil" class="nav-btn shadow" :class="'bg-index' + (index + 1)">立即访问</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="cu-bar bg-white margin-top-xs">
|
||
<view class="action sub-title">
|
||
<text class="text-xl text-bold text-blue text-shadow">开源项目推荐</text>
|
||
<text class="text-ABC text-blue">curriculum</text>
|
||
</view>
|
||
<view class="action" @click="goMore"><text class="text-lg text-grey text-shadow">更多</text></view>
|
||
</view>
|
||
<ad :unit-id="adlist.videoAd" ad-type="video" ad-theme="white"></ad>
|
||
<view class="cu-card case no-card">
|
||
<view @click="goProject(item.id)" class="cu-item shadow" v-for="(item, index) in projectList" :key="index">
|
||
<view class="image">
|
||
<image :src="item.programImg" mode="widthFix"></image>
|
||
<view class="cu-tag bg-gradual-orange">{{ item.programTag }}</view>
|
||
<view class="cu-bar bg-shadeBottom">
|
||
<text class="text-cut">{{ item.programName }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<ad-custom :unit-id="adlist.gridAd"></ad-custom>
|
||
<view class="copyright">
|
||
<text>AbuCoder版权所有</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
adlist:this.myad()[0],
|
||
bannerList: [{
|
||
bannerImg: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
|
||
},
|
||
{
|
||
bannerImg: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
|
||
},
|
||
{
|
||
bannerImg: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
|
||
},
|
||
|
||
],
|
||
messageData: [
|
||
{
|
||
noticeTitle: '「AbuCoder」感谢前段铺子前段框架！',
|
||
tag: '感谢',
|
||
noticeContent: '感谢Uview开源框架'
|
||
},
|
||
{
|
||
noticeTitle: '「AbuCoder」感谢若依开发框架！',
|
||
tag: '感谢',
|
||
noticeContent: '第一次做插件，感谢大家的支持哦~'
|
||
},
|
||
{
|
||
noticeTitle: '「AbuCoder」感谢ColorUI前段框架！',
|
||
tag: '感谢',
|
||
noticeContent: '第一次做插件，感谢大家的支持哦~'
|
||
}
|
||
],
|
||
curriculum: [{
|
||
itemName: '专业证件照',
|
||
itemDesc: '基于uniapp的专业证件照制作小程序，欢迎访问...'
|
||
},
|
||
{
|
||
itemName: '极速去水印',
|
||
itemDesc: '基于uniapp的专业极速去水印助手小程序，欢迎访问...'
|
||
},
|
||
{
|
||
itemName: '证件照（民族语言版）',
|
||
itemDesc: '基于uniapp的专业证件照制作小程序民族语言版...'
|
||
},
|
||
],
|
||
projectList:[
|
||
{
|
||
programImg:'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||
programTag:'Gitee开源',
|
||
programName:'若依开源框架推荐'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getBannerlist()
|
||
this.getNoticelist()
|
||
this.getItemslist()
|
||
this.getProgrammslist()
|
||
this.myAd()
|
||
},
|
||
methods: {
|
||
//暴力插屏广告
|
||
myAd(){
|
||
let that = this
|
||
if (that.myad()[0].plaqueAd) {
|
||
setInterval(function() {
|
||
// 在页面中定义插屏广告
|
||
let interstitialAd = null
|
||
|
||
// 在页面onLoad回调事件中创建插屏广告实例
|
||
if (wx.createInterstitialAd) {
|
||
interstitialAd = wx.createInterstitialAd({
|
||
adUnitId: that.myad()[0].plaqueAd
|
||
})
|
||
interstitialAd.onLoad(() => {})
|
||
interstitialAd.onError((err) => {})
|
||
interstitialAd.onClose(() => {})
|
||
}
|
||
|
||
// 在适合的场景显示插屏广告
|
||
if (interstitialAd) {
|
||
interstitialAd.show().catch((err) => {
|
||
console.error(err)
|
||
})
|
||
}
|
||
}, 15000); //15000为插屏间隔时间
|
||
}
|
||
},
|
||
getBannerlist(){
|
||
this.request('loadBaneer', 'GET').then(res=>{
|
||
// console.log("res:",res)
|
||
if(res){
|
||
let imgurl = {}
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
imgurl[i] = {};
|
||
imgurl[i]['bannerImg'] = this.myimgurl() + res.data[i].bannerImg
|
||
}
|
||
// console.log(imgurl)
|
||
this.bannerList = imgurl
|
||
}
|
||
})
|
||
},
|
||
getNoticelist(){
|
||
this.request('loadNotice', 'GET').then(res=>{
|
||
console.log("res:",res)
|
||
if(res){
|
||
this.messageData = res.data
|
||
}
|
||
})
|
||
},
|
||
getItemslist(){
|
||
this.request('loadItems', 'GET').then(res=>{
|
||
console.log("res:",res)
|
||
if(res){
|
||
this.curriculum = res.data
|
||
}
|
||
})
|
||
},
|
||
getProgrammslist(){
|
||
this.request('loadProgramms', 'GET').then(res=>{
|
||
console.log("res:",res)
|
||
// if(res){
|
||
// this.projectList = res.data
|
||
// }
|
||
if(res){
|
||
let mydata = {}
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
mydata[i] = {};
|
||
mydata[i]['programImg'] = this.myimgurl() + res.data[i].programImg;
|
||
mydata[i]['id'] =res.data[i].id
|
||
mydata[i]['programName'] = res.data[i].programName
|
||
mydata[i]['programTag'] = res.data[i].programTag
|
||
}
|
||
// console.log(mydata)
|
||
this.projectList = mydata
|
||
}
|
||
})
|
||
},
|
||
//更多
|
||
goMore(){
|
||
uni.navigateTo({
|
||
url:'../itemlist/itemlist'
|
||
})
|
||
},
|
||
gomoreapp(){
|
||
uni.navigateTo({
|
||
url:'../projectlist/projectlist'
|
||
})
|
||
},
|
||
noticeMore(){
|
||
uni.navigateTo({
|
||
url:'../me/mynotice/mynotice'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.swiper-box {
|
||
flex: 1;
|
||
}
|
||
|
||
.swiper-item {
|
||
height: 100%;
|
||
}
|
||
/*通知公告*/
|
||
.message-box {
|
||
width: 100%;
|
||
height: 120rpx;
|
||
background: url(https://zhoukaiwen.com/img/icon/clock.gif) #FFFFFF;
|
||
background-repeat: no-repeat;
|
||
background-size: 100rpx 100rpx;
|
||
background-position: 15rpx 10rpx;
|
||
margin: 0rpx 0rpx 10rpx 0rpx;
|
||
padding-left: 130rpx;
|
||
|
||
.message-tltle {
|
||
height: 65rpx;
|
||
line-height: 70rpx;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.message-content {
|
||
color: #0081ff;
|
||
|
||
span {
|
||
background-color: #0081ff;
|
||
color: #FFFFFF;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
/*scroll-view外层*/
|
||
.skill-sequence-panel-content-wrapper {
|
||
position: relative;
|
||
white-space: nowrap;
|
||
padding: 10rpx 0 10rpx 10rpx;
|
||
}
|
||
|
||
/*左右渐变遮罩*/
|
||
.hide-content-box {
|
||
position: absolute;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 10px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.hide-content-box-left {
|
||
left: 0;
|
||
background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
|
||
}
|
||
|
||
.hide-content-box-right {
|
||
right: 0;
|
||
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
|
||
}
|
||
|
||
.kite-classify-scroll {
|
||
width: 100%;
|
||
height: 380rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.kite-classify-cell {
|
||
display: inline-block;
|
||
width: 266rpx;
|
||
height: 370rpx;
|
||
margin-right: 20rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
|
||
}
|
||
|
||
.nav-li {
|
||
padding: 40rpx 30rpx;
|
||
width: 100%;
|
||
background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
|
||
background-size: cover;
|
||
background-position: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.nav-name {
|
||
font-size: 28upx;
|
||
text-transform: Capitalize;
|
||
margin-top: 20upx;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-name::before {
|
||
content: '';
|
||
position: absolute;
|
||
display: block;
|
||
width: 40rpx;
|
||
height: 6rpx;
|
||
background: #fff;
|
||
bottom: 0;
|
||
right: 0;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.nav-name::after {
|
||
content: '';
|
||
position: absolute;
|
||
display: block;
|
||
width: 100rpx;
|
||
height: 1px;
|
||
background: #fff;
|
||
bottom: 0;
|
||
right: 40rpx;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.nav-content {
|
||
width: 100%;
|
||
padding: 15rpx;
|
||
display: inline-block;
|
||
overflow-wrap: break-word;
|
||
white-space: normal;
|
||
}
|
||
|
||
.nav-btn {
|
||
width: 200rpx;
|
||
height: 60rpx;
|
||
margin: 8rpx auto;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.bg-index1 {
|
||
background-color: #19cf8a;
|
||
color: #fff;
|
||
}
|
||
|
||
.bg-index2 {
|
||
background-color: #954ff6;
|
||
color: #fff;
|
||
}
|
||
|
||
.bg-index3 {
|
||
background-color: #5177ee;
|
||
color: #fff;
|
||
}
|
||
|
||
.bg-index4 {
|
||
background-color: #f49a02;
|
||
color: #fff;
|
||
}
|
||
|
||
.bg-index5 {
|
||
background-color: #ff4f94;
|
||
color: #fff;
|
||
}
|
||
|
||
.bg-index6 {
|
||
background-color: #7fd02b;
|
||
color: #fff;
|
||
}
|
||
|
||
.item-name {
|
||
margin-bottom: 15rpx;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
overflow: hidden;
|
||
}
|
||
.copyright{
|
||
margin: 20rpx auto;
|
||
width: 80%;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #9E9E9E;
|
||
font-size: 26rpx;
|
||
}
|
||
</style>
|