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.
230 lines
5.5 KiB
230 lines
5.5 KiB
<template>
|
|
<view style="padding-top: 80px;padding-bottom: 70px;">
|
|
<view class="status_bar"><!-- 这里是状态栏 --></view>
|
|
<view class="dis-flex top-nav">
|
|
<view class="back" @click="back"></view>
|
|
<view class="title">
|
|
文章详情
|
|
</view>
|
|
<view style="width: 40px;"></view>
|
|
</view>
|
|
<view style="padding: 20px 15px;">
|
|
<view style="font-weight: bold;font-size: 18px;line-height: 28px;etter-spacing: 2px;">赛道很宽、需求长远，光伏等新能源领域“就业”热!</view>
|
|
<view style="font-size: 14px;margin: 7px 0px;">中国光伏行业协会CPIA <text style="margin-left:10px;color: #999999;font-size: 12px;">2023-01-25 21:23</text></view>
|
|
<view style="color: #999999;font-size: 12px;">发表于北京</view>
|
|
<view class="" v-html=""></view>
|
|
<image src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/art_1.png" ></image>
|
|
</view>
|
|
<view style="margin-bottom: 10px;">
|
|
<view style="font-size: 18px;font-weight: bold;padding: 10px;color: #333;">评论</view>
|
|
<view style="padding: 0px 10px;color: #333;">
|
|
<view class="comment-item" v-for="(item) in 2">
|
|
<view class="dis-flex">
|
|
<image class="avatar2" src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/index_1.png" mode=""></image>
|
|
<view class="name">温柔的晚风</view>
|
|
<view style="font-size: 12px;">赞</view>
|
|
</view>
|
|
<view style="padding-left: 38px;font-size: 14px;margin: 5px auto 10px;">小仙女的分享，必须来看看</view>
|
|
<view class="dis-flex" style="padding-left: 38px;">
|
|
<view class="comment-num">3回复</view>
|
|
<view style="color: #999999;font-size: 12px;">02-19 12:04:04</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<view style="font-size: 18px;font-weight: bold;padding: 10px;color: #333;">热点推荐</view>
|
|
<view style="padding: 0px 10px;">
|
|
<view @click="toArticle" class="list-item" v-for="(item) in 3">
|
|
<view style="flex: 1;">
|
|
<view class="list-title">资金火速进场，央企板块迎来高光时刻? 一图读懂那些「高分红+连年增息」，的港股低估啊啊啊啊啊啊</view>
|
|
<view style="color: #999999;font-size: 12px;">人工智能那点事 13:05</view>
|
|
</view>
|
|
<image class="list-img" src="" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="footer-wrapper">
|
|
<view class="input-box">
|
|
<uni-icons type="" style="width: 20px;height: 20px;margin-left: 10px;background: #000;display: inline-block;"></uni-icons>
|
|
<input type="text" placeholder="说点什么吧？">
|
|
</view>
|
|
<view class="message1">12</view>
|
|
<view class="appreciate1">12</view>
|
|
<view class="share"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
id: null,
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.id = e.id;
|
|
this.getheadlinedl();
|
|
},
|
|
methods: {
|
|
back(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
getheadlinedl() {
|
|
let _this = this,
|
|
requestData = {
|
|
id
|
|
};
|
|
App._post_form('&p=headline&do=HeadlineInfo', requestData, res => {
|
|
if (!!res.data && res.errno === 0) {
|
|
console.log(res);
|
|
|
|
}
|
|
}, false, () => {
|
|
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.status_bar {
|
|
width: 100%;
|
|
height: var(--status-bar-height);
|
|
padding-bottom: 15px;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 0px;
|
|
z-index: 99;
|
|
}
|
|
.dis-flex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.top-nav{
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 40px;
|
|
background: #fff;
|
|
border-bottom: 1px solid #efefef;
|
|
z-index: 99;
|
|
.back{
|
|
width: 40px;
|
|
height: 40px;
|
|
position: relative;
|
|
}
|
|
.back::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 24rpx;
|
|
left: 45rpx;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-top: 2px solid transparent;
|
|
border-left: 2px solid #333;
|
|
border-right: 2px solid transparent;
|
|
border-bottom: 2px solid #333;
|
|
transform: rotate(45deg);
|
|
}
|
|
.title{
|
|
text-align: center;
|
|
flex: 1;
|
|
}
|
|
}
|
|
image{
|
|
width: calc(100vw - 30px);
|
|
height: 500rpx;
|
|
|
|
}
|
|
.comment-item{
|
|
padding: 10px 0px;
|
|
border-bottom: 1px solid #efefef;
|
|
.avatar2{
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: #000;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
.name{
|
|
font-size: 13px;
|
|
flex: 1;
|
|
}
|
|
.comment-num{
|
|
padding: 2px 8px;
|
|
border-radius: 20px;
|
|
background-color: #efefef;
|
|
margin-right: 8px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
.list-item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #efefef;
|
|
padding: 10px 4px;
|
|
.list-title{
|
|
display:-webkit-box;//将盒子转换为弹性盒子
|
|
-webkit-box-orient:vertical;//文本显示方式，默认水平
|
|
-webkit-line-clamp:2;//设置显示多少行
|
|
overflow:hidden;
|
|
font-size: 14px;
|
|
color: #333;
|
|
margin-bottom: 7px;
|
|
}
|
|
.list-img{
|
|
width: 80px;
|
|
height: 60px;
|
|
border-radius: 8px;
|
|
margin-left: 20px;
|
|
background-color: #000;
|
|
}
|
|
}
|
|
.footer-wrapper{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
width: 100vw;
|
|
height: 50px;
|
|
padding-bottom: 20px;
|
|
background-color: #FFF;
|
|
.input-box{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background: #f5f5f5;
|
|
border-radius: 30px;
|
|
width: 160px;
|
|
height: 36px;
|
|
}
|
|
input{
|
|
width: 120px;
|
|
font-size: 14px;
|
|
}
|
|
.message1,.appreciate1{
|
|
position: relative;
|
|
}
|
|
.message1::before{
|
|
content: '✈';
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
.appreciate1::before{
|
|
content: '❤';
|
|
}
|
|
.share{
|
|
width: 36px;
|
|
height: 36px;
|
|
background-color: #c25959;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
</style>
|
|
|