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>
|