hz-zhhq-app/pages/medical/newsDetail/newsDetail.vue

561 lines
16 KiB
Vue
Raw Normal View History

2025-01-22 10:53:47 +08:00
<template>
<view class="container">
<view class="tui-news-title">
头发爱出油还有着掉发的问题怎么回事这几个方法教你脱节
</view>
<view class="tui-sub-info">
<view class="tui-sub-left">
<text class="tui-author">中国健康知识网</text>
<text>昨天 17:12</text>
</view>
<!-- <view class="tui-sub-right">阅读 2453</view> -->
</view>
<view class="tui-news-content">
<image src="../../../static/test/toufa.jpg" class="tui-article-pic" mode="widthFix"></image>
<view class="tui-article">
日子规则
而且咱们肯定要养成本身健康的日子归规则而且一起要确保自己有着较为足够的睡觉而且咱们最好可以直接进行恰当的野外训练让咱们的身体抵抗力更强恰当的歇息剩余咱们大脑也有着必定的平缓协助
</view>
<view class="tui-article">
饮食规则
在日子不论是为了本身的发质或者是身体健康都要操控本身的饮食问题而且在日子傍边必定不要吃刺激性太多而且要严厉的约束本身脂肪类刺激性食物的湿热尤其是一些较为油腻辛辣的食物还有酒都要操控最好是多吃一些蔬菜或者是生果
</view>
<view class="tui-article">
温水洗头
洗头发也不能用比较热的水当然也不能用比较亮的水来洗头比较热的水会直接烫坏咱们的头皮安排这样的一个进程首要就不能把咱们的头皮上的油脂清洗洁净可是并不能用咱们的手抓咱们的头皮首要会损坏咱们头皮傍边的安排也会加剧咱们本身掉发的问题呈现所以就会加剧咱们本身掉发的状况呈现所以不要用太热的水来洗头发会愈加严峻的加剧头发出油或者是掉发的问题
其实掉发的问题说简略也简略说难也不难只需咱们呈现掉发的问题必定要引起留意否则到后来呈现比较严峻的时分想弥补便是比较难的了我们有更好的办法欢迎弥补有其它关于头发的问题欢迎在下方谈论区留言
</view>
<!-- <view class="tui-article">
北京时间6月22日重庆斯威队召开了赛前新闻发布会主教练小克鲁伊夫和球员彭欣力出席
</view>
<view class="tui-article">
这是一场很重要的比赛武汉卓尔在中超目前打的还是不错的现在积分与我们一样我们面对这个对手做了充分的准备他们的战术变化很多我也认为他们是一支训练有素的队伍虽然这是一场艰难的比赛我们也充满了动力去拿到我们想要的分数实现我们的目标联赛上半程还有两场比赛我们也会竭尽全力拿到尽量多的分数
</view>
<image src="../../../static/images/news/banner_2.jpg" class="tui-article-pic" mode="widthFix"></image>
<view class="tui-article">
大家下午好明天非常重要这星期我们的备战时间比较充裕我们针对对手做了有效的布置希望明天给大家呈现精彩的比赛
</view>
<view class="tui-article">
我相信大家比我更了解他但是就像刚刚提到的一样这支球队的战术是丰富而多变的这就意味着他在应对不同比赛时做了充分的准备我们非常尊重明天的对手他们最近状态出色拿到许多分数
</view>
<image src="../../../static/images/news/banner_1.jpg" class="tui-article-pic" mode="widthFix"></image>
<view class="tui-article">
对我而言我还是想保持沉默我不打算就这个问题做过多的评论因为这个政策的变化是马上实施了我们肯定是尊重它然后在我们力所能及的范围上找到最好的应对的方案我个人意见并不重要我们尊重和遵守相关决定
</view> -->
</view>
<!-- <view class="tui-news-source">消息参考来源体坛大精汇</view> -->
<view class="tui-operate-box">
<tui-tag :type="isFabulous?'':'gray'" shape="circle" :plain="true" @click="btnFabulous">
<tui-icon :name="iconName(isFabulous)" :size="20" :color="iconColor"></tui-icon>
<text class="tui-black" :class="[isFabulous?'tui-primary':'']">{{fabulous}}</text>
</tui-tag>
<!-- <button open-type="share" class="tui-share-btn">
<tui-tag type="gray" shape="circle" :plain="true">
<tui-icon name="partake" :size="20" color="#333"></tui-icon>
<text class="tui-black">分享</text>
</tui-tag>
</button> -->
</view>
<!-- <view class="tui-cmt-title">精彩评论20</view>
<view class="tui-cmtbox">
<view class="tui-cmt-cell" v-for="(item,index) in cmtList" :key="index">
<image :src="'../../../static/images/news/'+item.avatar" class="tui-avatar"></image>
<view class="tui-cmt-detail">
<view class="tui-header-box">
<view class="tui-cmt-nickname">{{item.nickname}}</view>
<view class="tui-fabulous" :class="[item.isFabulous?'tui-primary':'']" :id="index" @tap="cmtFabulous">
<text>{{item.fabulous==0?'赞':item.fabulous}}</text>
<tui-icon :name="iconName(item.isFabulous)" :size="15" :color="itemIconColor(item.isFabulous)"></tui-icon>
</view>
</view>
<view class="tui-cmt-content">
{{item.content}}
</view>
<view class="tui-reply-box" v-if="item.replayNum>0">
<tui-list-cell bgcolor="#f2f2f2" :size="28" v-for="(items,index2) in item.reply" :key="index2" :last="item.replayNum<2 && item.reply.length-1==index"
@tap="cmtReply">
<view class="tui-flex-1 tui-reply-nickname">{{items.nickname}}</view>
<view class="tui-flex-1">{{items.content}}</view>
</tui-list-cell>
<tui-list-cell bgcolor="#f2f2f2" :size="28" :last="true" v-if="item.replayNum>2" @tap="cmtReply">
<view class="tui-flex-1 tui-cell-last">
<text>{{item.replayNum}}条回复</text>
<tui-icon name="arrowright" :size="22" color="#5677fc"></tui-icon>
</view>
</tui-list-cell>
</view>
<view class="tui-footer">
{{item.time}}
<view class="tui-primary tui-ml" hover-class="opcity" :hover-start-time="150" @tap="cmtReply">回复</view>
</view>
</view>
</view>
</view> -->
<!-- <view class="tui-operation">
<view class="tui-operation-left tui-col-7 tui-height-full tui-ptop-zero">
<view class="tui-btn-comment" @tap="btnCmt">发表你的评论...</view>
</view>
<view class="tui-operation-right tui-right-flex tui-col-5">
<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150" @tap="cmtAll">
<tui-icon name="message" :size="30" color='#444'></tui-icon>
<tui-badge type="white" size="small">501</tui-badge>
</view>
<view class="tui-operation-item" @tap="collection">
<tui-icon :name="isCollection?'star-fill':'star'" :size="29" :color="isCollection?'#5677fc':'#444'"></tui-icon>
</view>
<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150">
<button open-type="share" class="tui-share-btn">
<tui-icon name="share" :size="31" color='#444'></tui-icon>
</button>
</view>
</view>
</view> -->
<!--加载loadding-->
<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
<tui-nomore :visible="!pullUpOn" bgcolor="#fff" text="没有更多评论"></tui-nomore>
<!--加载loadding-->
<view class="tui-safearea-bottom"></view>
</view>
</template>
<script>
import tuiIcon from "@/components/icon/icon"
import tuiTag from "@/components/tag/tag"
import tuiListCell from "@/components/list-cell/list-cell"
import tuiLoadmore from "@/components/loadmore/loadmore"
import tuiNomore from "@/components/nomore/nomore"
import tuiBadge from "@/components/badge/badge"
export default {
components: {
tuiIcon,
tuiTag,
tuiListCell,
tuiLoadmore,
tuiNomore,
tuiBadge
},
data() {
return {
fabulous: 123,
isFabulous: false,
isCollection: false,
cmtList: [{
avatar: "list_2.jpg",
nickname: "米兰的卡先生",
fabulous: 123,
isFabulous: false,
content: "我一直没懂赛前问一个主教练如何评价对手的主教练, 记者究竟是想得到什么答案?",
reply: [{
nickname: "Mesaldo",
content: "汉军威武!卓尔不凡!火炉德比,热力四射!场上争胜,场下朋友☺ ☻"
}, {
nickname: "月牙",
content: "新政实行后,大小摩托轮流冲,不用经常上迪力了,杨帅该拿下就拿下☺"
}],
replayNum: 44,
time: "昨天 22:12"
}, {
avatar: "avatar_1.jpg",
nickname: "月牙",
fabulous: 2,
content: "力帆有杨帅,迪力木来提,尹聪耀,完全可以应付。尤其是杨帅坐稳主力后卫。",
reply: [{
nickname: "thorui",
content: "汉军威武!卓尔不凡!火炉德比,热力四射!场上争胜,场下朋友"
}, {
nickname: "Mr卡卜斯",
content: "说实话,武汉重庆还真的是一家,但是比赛还是要分出个胜负来的,我卓尔球迷肯定是要为我武汉加油了,按照目前两队现在这个状态来看武汉重庆应该是五五开,所以我想说武汉加油!卓尔加油!"
}],
replayNum: 2,
time: "昨天 21:09"
}, {
avatar: "avatar_2.jpg",
nickname: "thorui",
fabulous: 0,
content: "小克鲁伊夫带的球队征服了中超球迷,李铁也带队冲超成功,现在风头正劲,究竟鹿死谁手,谁更胜一筹,期待精彩的比赛 ☻ ☻ ☻",
reply: [],
replayNum: 0,
time: "昨天 17:30"
}],
pageIndex: 1,
loadding: false,
pullUpOn: true
}
},
computed: {
iconColor() {
return this.isFabulous ? '#5677fc' : '#333'
},
itemIconColor() {
return function(isFabulous) {
return isFabulous ? '#5677fc' : '#9a9a9a'
}
},
iconName() {
return function(isFabulous) {
return isFabulous ? 'agree-fill' : 'agree'
}
}
},
methods: {
btnFabulous: function() {
this.fabulous = this.isFabulous ? 123 : 124;
this.isFabulous = !this.isFabulous
},
cmtFabulous: function(e) {
let index = e.currentTarget.id;
let fabulousObj = this.cmtList[index];
let isFabulous = this.cmtList[index].isFabulous;
let fabulous = this.cmtList[index].fabulous;
let fabulousNum = isFabulous ? fabulous - 1 : fabulous + 1;
this.$set(fabulousObj, "fabulous", fabulousNum);
this.$set(fabulousObj, "isFabulous", !isFabulous);
},
collection: function() {
this.isCollection = !this.isCollection
if (this.isCollection) {
this.tui.toast("收藏成功!");
}
},
btnCmt: function() {
uni.navigateTo({
url: '../news-cmt/news-cmt'
})
},
cmtAll: function() {
uni.navigateTo({
url: '../news-cmt-list/news-cmt-list'
})
},
cmtReply: function() {
uni.navigateTo({
url: '../news-cmt-reply/news-cmt-reply'
})
}
},
// 页面上拉触底事件的处理函数
onReachBottom: function() {
if (!this.pullUpOn) return;
this.loadding = true
if (this.pageIndex == 3) {
this.loadding = false;
this.pullUpOn = false
} else {
let arr = JSON.parse(JSON.stringify(this.cmtList));
this.cmtList = this.cmtList.concat(arr);
this.pageIndex = this.pageIndex + 1;
this.loadding = false
}
}
}
</script>
<style>
page {
background: #fff;
color: #333;
}
.container {
padding: 40rpx 30rpx 110rpx 30rpx;
box-sizing: border-box;
}
.tui-news-title {
font-size: 48rpx;
font-weight: 500;
text-align: justify;
}
.tui-sub-info {
padding-top: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
color: #999;
}
.tui-author {
color: #5677fc;
padding-right: 20rpx;
}
.tui-news-content {
padding-top: 40rpx;
}
.tui-article {
/* text-indent: 2em; */
font-size: 34rpx;
padding-bottom: 40rpx;
line-height: 60rpx;
text-align: justify;
word-break: break-all;
word-wrap: break-word;
}
.tui-article-pic {
width: 100%;
display: block;
margin-bottom: 40rpx;
}
.tui-news-source {
font-size: 24rpx;
color: #999;
}
.tui-operate-box {
display: flex;
align-items: center;
justify-content: center;
padding: 60rpx 40rpx;
box-sizing: border-box;
}
.tui-tag-class {
min-width: 130rpx;
padding: 20rpx 52rpx !important;
font-size: 26rpx !important;
display: flex;
align-items: center;
justify-content: center;
}
.tui-black {
color: #333;
padding-left: 12rpx;
}
.tui-cmt-title {
font-size: 30rpx;
font-weight: bold;
position: relative;
}
.tui-cmt-title::after {
content: '';
position: absolute;
left: -18rpx;
top: 18%;
width: 6rpx;
height: 64%;
background: #5677fc;
}
.tui-cmtbox {
padding-bottom: 20rpx;
}
.tui-cmt-cell {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-top: 44rpx;
}
.tui-avatar {
width: 64rpx;
height: 64rpx;
border-radius: 32rpx;
display: block;
flex-shrink: 0;
}
.tui-cmt-detail {
width: 100%;
padding-left: 16rpx;
box-sizing: border-box;
}
.tui-header-box {
display: flex;
align-items: flex-start;
justify-content: space-between;
font-size: 30rpx;
}
.tui-cmt-nickname {
color: #5677fc;
}
.tui-fabulous {
color: #9a9a9a;
}
.tui-fabulous text {
padding-right: 4rpx;
font-size: 24rpx
}
.tui-cmt-content {
font-size: 32rpx;
color: #333;
text-align: justify;
padding-top: 8rpx;
word-break: break-all;
word-wrap: break-word;
}
.tui-reply-box {
border-radius: 8rpx;
overflow: hidden;
margin-top: 16rpx;
}
.tui-cell-class {
flex-direction: column;
justify-content: flex-start !important;
padding: 20rpx !important;
text-align: justify;
word-break: break-all;
word-wrap: break-word;
}
.tui-cell-last {
color: #5677fc;
}
.tui-flex-1 {
flex: 1;
width: 100%;
}
.tui-reply-nickname {
font-size: 24rpx;
color: #7a7a7a;
padding-bottom: 8rpx;
}
.tui-footer {
display: flex;
align-items: center;
font-size: 24rpx;
margin-top: 16rpx;
color: #9a9a9a;
}
.tui-primary {
color: #5677fc !important;
}
.tui-ml {
margin-left: 16rpx;
}
.tui-cell-last .tui-icon-class {
width: 40rpx !important;
margin-left: -10rpx;
}
.tui-operation {
width: 100%;
height: 100rpx;
overflow: hidden;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
left: 0;
bottom: 0;
z-index: 99999;
padding-bottom: env(safe-area-inset-bottom);
}
.tui-safearea-bottom {
width: 100%;
height: env(safe-area-inset-bottom);
}
.tui-operation::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1rpx solid #eaeef1;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.tui-operation-left {
display: flex;
align-items: center;
}
.tui-operation-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
}
.tui-operation-right {
height: 100rpx;
box-sizing: border-box;
padding-top: 0;
}
.tui-badge-class {
color: #5677fc !important;
position: absolute;
top: -6rpx;
padding: 2px 4px !important;
/* #ifdef H5 */
transform: translateX(50%) scale(0.8);
/* #endif */
}
.tui-right-flex {
display: flex;
align-items: center;
justify-content: center;
}
.tui-btn-comment {
height: 64rpx;
width: 84%;
background: #ededed;
color: #999;
border-radius: 8rpx;
font-size: 28rpx;
display: flex;
align-items: center;
padding-left: 20rpx;
box-sizing: border-box;
padding-top: 0;
margin-left: 30rpx;
}
.tui-col-7 {
width: 58.33333333%;
}
.tui-col-5 {
width: 41.66666667%;
}
.tui-share-btn {
display: block;
background: none;
margin: 0;
padding: 0;
}
</style>