diff --git a/common/styles/app.base.scss b/common/styles/app.base.scss index f27d614..3bc9949 100644 --- a/common/styles/app.base.scss +++ b/common/styles/app.base.scss @@ -36,3 +36,120 @@ transform: rotateZ(360deg); } } + +// 自定义广告 + +.ad-card { + position: relative; + box-sizing: border-box; + padding: 24rpx; + box-shadow: 0rpx 4rpx 24rpx rgba(0, 0, 0, 0.03); + background-color: #ffffff; + border-radius: 12rpx; + + &.is-lr { + display: flex; + .ad-card_tip { + top: initial; + left: 288rpx; + bottom: 24rpx; + // right: 160rpx; + padding: 4rpx 20rpx; + background-color: transparent; + border: 2rpx solid #607d8b; + color: #607d8b; + } + .ad-card_cover { + width: 240rpx; + height: 180rpx; + animation: adLinkAni 1s ease-in-out infinite; + } + .ad-card_info { + width: 0; + flex-grow: 1; + padding-left: 24rpx; + &-title { + margin-top: 0; + width: 100%; + font-size: 30rpx; + } + &-link { + top: initial; + // right: 150rpx; + bottom: 0; + transform: scale(1); + } + } + } + + &_tip { + position: absolute; + left: 36rpx; + top: 36rpx; + display: inline-flex; + box-sizing: border-box; + border-radius: 6rpx; + padding: 4rpx 10rpx; + background-color: rgba(0, 0, 0, 0.3); + color: #ffffff; + font-size: 24rpx; + z-index: 2; + } + &_cover { + width: 100%; + height: 300rpx; + border-radius: 6rpx; + } + &_info { + display: flex; + flex-direction: column; + box-sizing: border-box; + position: relative; + &-title { + width: calc(100% - 120rpx); + font-size: 28rpx; + font-weight: bold; + margin-top: 8rpx; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #333; + } + &-desc { + margin-top: 6rpx; + font-size: 24rpx; + color: #616161; + line-height: 1.8; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + &-link { + position: absolute; + right: 0; + top: 6rpx; + display: inline-flex; + box-sizing: border-box; + border-radius: 6rpx; + padding: 4rpx 10rpx; + border: 2rpx solid #03a9f4; + color: #03a9f4; + font-size: 24rpx; + transform: scale(0.93); + // animation: adLinkAni 0.8s ease-in-out infinite; + } + } +} +@keyframes adLinkAni { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.02); + } + 100% { + transform: scale(1); + } +} diff --git a/config/ad.config.template.js b/config/ad.config.template.js index 391bf80..ac3dcf9 100644 --- a/config/ad.config.template.js +++ b/config/ad.config.template.js @@ -15,6 +15,16 @@ export default { }, // 文章详情广告 articleDetail: { - use: false, // 是否启用 + // 微信广告/dclound申请的广告 + use: true, + + // 自定义广告 + custom: { + use: true, + cover: 'https://b.925i.cn/uni_halo/uni_halo_ad_cover.png', + title: 'uni-halo 正式开源啦,欢迎来使用和体验!', + content: '基于 uni-app + halo1.x API 实现一款现代化的开源博客 / CMS 系统API开发的多端应用。功能包括:前台博客系统 和 后台管理系统,同时满足浏览和管理两端合一的需求,真正实现一个应用实现博客浏览和后台管理。', + url: 'https://uni-halo.925i.cn' + } } } diff --git a/pagesA/article-detail/article-detail.vue b/pagesA/article-detail/article-detail.vue index 23296e7..64a66d4 100644 --- a/pagesA/article-detail/article-detail.vue +++ b/pagesA/article-detail/article-detail.vue @@ -83,7 +83,7 @@ :copyByLongPress="true" /> - + @@ -93,6 +93,17 @@ + + + 广告 + + + {{ haloAdConfig.articleDetail.custom.title }} + {{ haloAdConfig.articleDetail.custom.content }} + 立即查看 + + + 版权声明 @@ -684,6 +695,16 @@ export default { } }, 1000); }; + }, + fnToWebview(data) { + uni.navigateTo({ + url: + '/pagesC/website/website?data=' + + JSON.stringify({ + title: data.title, + url: data.url + }) + }); } } };