miniprogram / liqizhuang · 提交

转到一个项目

作者 刘晓艳
提交 347f01bd48a70517ac7f7d6db9d17e841f79a210 1 个父辈 5fb67a74

文章详情页面还原

内嵌 并排对比
正在显示 5 个修改的文件 包含 479 行增加 和 0 行删除
{
"pages": [
"pages/matrix/article/article",
"pages/matrix/matrix",
"pages/interact/interactPost/interactPost",
"pages/interact/interact",
... ...
// pages/matrix/article/article.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"usingComponents": {},
"navigationBarTitleText": "政策宣传"
}
\ No newline at end of file
... ...
<!--pages/matrix/article/article.wxml-->
<view class='box'>
<view class='title'>全国弹弓高手齐聚上海外滩射得准可挺进意大利争夺</view>
<view class='head_content_box'>
<image class='head_box' src='/images/img.jpg'></image>
<text class='user_name'>罗纳尔多</text>
<text>1047次阅读 · 1小时前</text>
</view>
<view class='content_box'>
<view class='article_content'>
<view>日常生活中，近视眼是一种常见的多发病，在青少年中逐渐增长。造成儿童近视眼增多的主要原因是用眼时间过长、使用电子产品不节制、睡眠太晚等等。那么在生活中，我们应该怎样预防近视眼呢？</view>
<image src='/images/img.jpg'></image>
<!-- <view class='article_title1'>预防儿童近视5个方法</view> -->
<view>1、保证营养充足：导致孩子近视发生和发展的重要原因就是饮食不当。使孩子缺乏营养。要及时给孩子补充足够的钙磷及维生素C等。</view>
<image src='/images/img.jpg'></image>
<!-- <import src="../../../wxParse/wxParse.wxml" />
<view class='content'>
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
</view> -->
</view>
</view>
</view>
<view class='comment_box'>
<view class='comment_title'>评论</view>
<view class='comment_item'>
<view class='left_box'>
<image class='head_img' src='/images/img.jpg'></image>
</view>
<view class='comment_content_box'>
<view class='comment_name'>11</view>
<view class='comment_content'>1111</view>
<view class='list_state_box'>
<view class='time'>24分钟前</view>
<view class='list_icon'>
<view catchtap='likeCharge' data-index="{{mindex}}" data-id='{{item.id}}'>
<text class='time'>0</text>
<text class='iconfont icon-zan zan'></text>
<!-- <text class='iconfont icon-huida pinglun1' wx:else></text> -->
</view>
</view>
</view>
</view>
</view>
</view>
<view class='null_box'></view>
<view class='bottom_box'>
<view class="label_item">
<text class='iconfont icon-bianji1 icon'></text>
<input placeholder='写评论'></input>
</view>
<view class='label_icon_box'>
<text class='iconfont icon-pinglun icon'></text>
<text class='iconfont icon-favorite_diss icon'></text>
<text class='iconfont icon-fenxiang icon'></text>
<text class='iconfont icon-zan icon' style='font-size:40rpx;'></text>
</view>
</view>
\ No newline at end of file
... ...
/* pages/eyeTest/articleDetail/articleDetail.wxss */
page {
background: #f5f5f5;
}
.content .wxParse-img {
width: 100% !important;
height: 100%;
}
.box {
padding: 30rpx;
background: #fff;
}
.title {
font-size: 54rpx;
font-weight: bold;
color: #333;
}
.user_box {
display: flex;
align-items: center;
border-top: 1rpx solid #d8d8d8;
border-bottom: 1rpx solid #d8d8d8;
padding: 30rpx 0;
margin-top: 40rpx;
}
.head_box {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.head_content_box {
width: 100%;
display: flex;
align-items: center;
font-size: 28rpx;
color: #999;
margin-top: 20rpx;
}
.user_name {
font-size: 28rpx;
color: #333;
}
.head_content_box text {
margin-left: 20rpx;
}
.content_img {
width: 140rpx;
height: 140rpx;
border-radius: 30rpx;
overflow: hidden;
}
.content_img image {
width: 100%;
height: 100%;
}
.list_content_box {
display: flex;
align-items: center;
white-space: normal;
margin-top: 35rpx;
}
.list_title {
font-size: 36rpx;
color: #666;
display: -webkit-box;
word-break: break-all !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
/* text-overflow: ellipsis !important; */
white-space: normal !important;
}
.list_content {
width: 68%;
height: 100%;
font-size: 28rpx;
color: #666;
display: -webkit-box;
word-break: break-all !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
overflow: hidden !important;
/* text-overflow: ellipsis !important; */
white-space: normal !important;
margin-left: 30rpx;
line-height: 43rpx;
}
/* .article_box{
position: relative;
left: 0;
bottom: 40rpx;
} */
.article_title {
font-size: 30rpx;
color: #999;
border-top: 1rpx solid #d8d8d8;
padding: 20rpx 0 15rpx 0;
/* margin-top: 30rpx; */
}
.more_box {
font-size: 30rpx;
color: #999;
background: #fff;
width: 200rpx !important;
height: 320rpx;
border-radius: 15rpx;
padding: 30rpx;
box-sizing: border-box;
margin-right: 30rpx;
vertical-align: top;
line-height: 230rpx;
text-align: center;
}
.scroll_box {
width: 100%;
height: 400rpx;
white-space: nowrap;
padding-bottom: 40rpx;
box-sizing: border-box;
padding: 10rpx;
}
.scroll_item {
background: #fff;
width: 555rpx;
height: 345rpx;
display: inline-block;
border-radius: 30rpx;
padding: 30rpx;
box-sizing: border-box;
margin-right: 30rpx;
vertical-align: top;
border: 1rpx solid #ededed;
margin-top: 10rpx;
/* box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15); */
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
}
.article_content_box {
width: 100%;
/* height: 260rpx; */
overflow-x: scroll;
white-space: nowrap;
display: flex;
align-items: center;
margin-bottom: 30rpx;
padding: 10rpx;
}
.article_content {
font-size: 32rpx;
color: #333;
padding: 30rpx 0;
}
.article_content image {
width: 690rpx;
height: 400rpx;
margin: 20rpx 0;
border-radius: 8rpx;
}
.article_title1 {
font-size: 44rpx;
color: #333;
position: relative;
padding-left: 20rpx;
margin-bottom: 30rpx;
}
.article_title1::after {
content: "";
position: absolute;
left: 0;
top: 10rpx;
height: 40rpx;
width: 4rpx;
background: #8bd985;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
/* */
.comment_box {
padding: 30rpx;
background: #fff;
box-sizing: border-box;
margin-top: 16rpx;
}
.comment_title {
font-size: 34rpx;
font-weight: bold;
color: #333;
border-bottom: 1rpx solid #f5f5f5;
padding-bottom: 30rpx;
text-align: center;
}
.comment_item {
display: flex;
align-items: flex-start;
padding: 30rpx 0;
margin-bottom: 16rpx;
background: #fff;
border-bottom: 1rpx solid #f5f5f5;
}
.comment_item:last-child {
border-bottom: 0;
}
.head_img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.comment_content_box {
width: 85%;
}
.comment_content {
font-size: 28rpx;
color: #333;
margin-top: 10rpx;
}
.comment_name {
font-size: 24rpx;
color: #45609f;
}
.time {
font-size: 20rpx;
color: #999;
}
.zan {
font-size: 30rpx;
margin-left: 10rpx;
}
.list_info_box {
font-size: 24rpx;
color: #b3b3b3;
}
.list_state_box {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 26rpx;
color: #999;
margin-top: 15rpx;
}
.list_comment_box {
background: #ebecf0;
font-size: 24rpx;
color: #6b7e91;
margin-top: 28rpx;
}
.comment_list {
border-bottom: 1rpx solid #fff;
padding: 10rpx 17rpx;
}
/* */
.null_box {
width: 100%;
height: 110rpx;
}
.bottom_box {
width: 100%;
height: 96rpx;
position: fixed;
left: 0;
bottom: 0;
background: #fff;
display: flex;
align-items: center;
padding: 0 30rpx;
box-shadow:0rpx 0rpx 12rpx rgba(0,0,0,0.05);
}
.label_item {
width: 340rpx;
height: 64rpx;
background: rgba(247, 247, 247, 1);
border: 1rpx solid rgba(238, 238, 238, 1);
border-radius: 206rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #666;
padding: 5rpx 20rpx;
}
.icon-bianji1{
margin-right: 10rpx;
}
.label_icon_box{
width: 40%;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 30rpx;
}
.icon {
font-size: 35rpx;
color: #666666;
}
... ...