安徽博创起重uniapp
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

198 lines
3.6 KiB

<template>
<view class="news-list">
<view class="contain">
<view class="banner">
<ad-swipers :pid="33" height="340rpx">
</ad-swipers>
</view>
<view class="news-details">
<view class="header">
<view class="title xxl m-b-20">{{ title }}</view>
</view>
<view class="main">
<u-parse :html="article_content" />
</view>
</view>
</view>
</view>
</template>
<script>
import {
mapGetters,
mapActions
} from 'vuex'
import {
getHelpDetail
} from '@/api/store';
export default {
data() {
return {
showLoading: true,
title: "",
article_content: ""
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.id = options.id;
if (this.id == 'documents') {
this.title = '证件办理'
uni.setNavigationBarTitle({
title: '证件办理'
});
}else if (this.id == 'train') {
this.title = '在线培训'
uni.setNavigationBarTitle({
title: '在线培训'
});
}else{
this.title = '咨询我们'
uni.setNavigationBarTitle({
title: '咨询我们'
});
}
this.getArticleDetailFun();
},
methods: {
getArticleDetailFun() {
getHelpDetail({
id: this.id
}).then(res => {
if (res.code == 1) {
setTimeout(() => {
this.article_content = res.data.content;
}, 200);
setTimeout(() => {
this.showLoading = false
}, 300);
}
});
}
}
};
</script>
<style lang="scss">
.news-details .header{
text-align: center;
padding: 20rpx 15px;
border-bottom: $-solid-border;
}
.news-details .main {
padding: 40rpx 15px;
}
.news-list {
.mainnav {
padding: 16rpx 150rpx;
background-color: $-color-white;
&--item {
width: 150rpx;
font-size: 32rpx;
font-weight: 500;
text-align: center;
color: #BBBBBB;
transition: all .2s linear;
.new {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
display: inline-block;
margin-bottom: 24rpx;
background-color: $-color-primary;
}
}
.active {
color: #000000;
}
}
.main {
.article-list {
padding-top: 20rpx;
.article-item {
padding: 20rpx;
align-items: flex-start;
&:not(:last-of-type){
border-bottom: $-solid-border;
}
}
}
}
}
page {
padding: 0;
}
.index-bg {
background-image: url('https://cdn.ahbcqz.com/uploads/images/202307051615359ddc37211.png');
background-size: 100% auto;
background-repeat: no-repeat;
}
.index {
min-height: calc(100vh - var(--window-bottom));
.u-navbar {
::v-deep .u-search {
padding: 0 30rpx;
}
}
// 胶囊提示
.capsule-tips {
width: 584rpx;
color: #FFFFFF;
padding: 12rpx 18rpx;
border-radius: 14rpx;
background: rgba(0, 0, 0, 0.7);
position: relative;
position: absolute;
z-index: 9999;
bottom: -80rpx;
right: -150rpx;
}
.capsule-tips::after {
content: '';
border-bottom: 14rpx solid rgba(0, 0, 0, 0.7);
border-right: 14rpx solid transparent;
border-left: 14rpx solid transparent;
position: absolute;
top: -14rpx;
right: 88rpx;
}
.cate-btn {
padding: 12rpx 16rpx 12rpx 20rpx;
border-radius: 60rpx 0 0 60rpx;
background-color: rgba(256, 256, 256, .4);
}
}
.col-top {
position: relative;
.price {
position: absolute;
bottom:10rpx;
}
}
.city {
position: absolute;
top: 20rpx;
z-index: 999;
color: #fff;
padding: 10rpx 15rpx;
background: rgba(0,0,0,.3);
border-radius: 10rpx;
}
</style>