From 6b1e0e5cc0727a7b7644f2862a2608c8a6e5e812 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=8E=AB=E5=94=90=E5=B0=BC?= <1431128779@qq.com>
Date: Thu, 15 Dec 2022 17:34:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E6=96=87=E7=AB=A0?=
=?UTF-8?q?=E8=AF=A6=E6=83=85=E8=87=AA=E5=AE=9A=E4=B9=89=E5=B9=BF=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
common/styles/app.base.scss | 117 +++++++++++++++++++++++
config/ad.config.template.js | 12 ++-
pagesA/article-detail/article-detail.vue | 23 ++++-
3 files changed, 150 insertions(+), 2 deletions(-)
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
+ })
+ });
}
}
};