mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2025-05-29 23:10:20 +09:00
新增：文章详情自定义广告
This commit is contained in:
小莫唐尼
parent
261617fc12
commit
6b1e0e5cc0
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
:copyByLongPress="true"
|
||||
/>
|
||||
|
||||
<!-- 广告区域 -->
|
||||
<!-- 广告区域：微信/decloud申请 -->
|
||||
<view v-if="haloAdConfig.articleDetail.use" class="ad-wrap mt-24 mb-24 ">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<ad v-if="haloAdConfig.unitId" :unit-id="haloAdConfig.unitId"></ad>
|
||||
@ -93,6 +93,17 @@
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<!-- 广告区域：自定义广告位 -->
|
||||
<view class="ad-card" v-if="haloAdConfig.articleDetail.custom.use">
|
||||
<text class="ad-card_tip">广告</text>
|
||||
<image class="ad-card_cover" :src="haloAdConfig.articleDetail.custom.cover" mode="scaleToFill"></image>
|
||||
<view class="ad-card_info">
|
||||
<view class="ad-card_info-title">{{ haloAdConfig.articleDetail.custom.title }}</view>
|
||||
<view class="ad-card_info-desc">{{ haloAdConfig.articleDetail.custom.content }}</view>
|
||||
<view v-if="haloAdConfig.articleDetail.custom.url" class="ad-card_info-link" @click="fnToWebview(haloAdConfig.articleDetail.custom)">立即查看</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 版权声明 -->
|
||||
<view v-if="copyright.use" class="copyright-wrap bg-white mt-24 pa-24 round-4">
|
||||
<view class="copyright-title text-weight-b">版权声明</view>
|
||||
@ -684,6 +695,16 @@ export default {
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
},
|
||||
fnToWebview(data) {
|
||||
uni.navigateTo({
|
||||
url:
|
||||
'/pagesC/website/website?data=' +
|
||||
JSON.stringify({
|
||||
title: data.title,
|
||||
url: data.url
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user