hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-06 17:36:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

我的文章样式

Browse Source
This commit is contained in:
zhaofang
2022-11-04 18:10:36 +08:00
parent 10bee9d994
commit aa4c39774a
8 changed files with 108 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/author-info/author-info.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="item-author" style="display: flex;line-height: 25px;">
<view>
<u-avatar v-if="avatar && avatar!=''" shape="square" :size="25" :src="avatar" ></u-avatar>
<u-avatar v-if="avatar && avatar!=''" shape="circle" :size="20" :src="fileUrl+avatar" ></u-avatar>
<!-- <u-avatar v-else :size="25" icon="account" shape="square"></u-avatar> -->
<view v-else>
<view v-if="sex == null" class="peo"></view>
@@ -11,7 +11,7 @@
</view>
</view>
</view>
<view style="padding-left:10upx;padding-top: 4upx;font-size: 26rpx;color: #666666;">{{name}}</view>
<view style="padding-left:16upx;padding-top: 4upx;font-size: 28upx;color: #666666;">{{name}}</view>
<!-- <view v-if="showInfo && info!=''" style="padding-left: 10upx;padding-top: 10upx;">({{info}})</view> -->
<!-- ({{info}}) -->
</view>
@@ -47,6 +47,7 @@
},
data(){
return {
fileUrl:this.$config.fileUrl,
userAvatar:'',
// sex:null,
}

15
components/interact-bar/interact-bar.vue
View File

@@ -2,19 +2,19 @@
<view class="interact-bar">
<view v-if="comments" class="interact-bar-item">
<image class="pto-img" src="../../static/images/icon/bar-comment.png" size="24"></image>
<text style="font-size: 15px;color: #969696;margin-left: 6upx;">{{data.comments}}</text>
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.comments}}</text>
</view>
<view v-if="answers" class="interact-bar-item">
<image class="pto-img" src="../../static/images/icon/answers.png" size="24"></image>
<text style="font-size: 15px;color: #969696;margin-left: 6upx;">{{data.answers}}</text>
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.answers}}</text>
</view>
<view v-if="praises" class="interact-bar-item">
<image class="pto-img" src="../../static/images/icon/bar-praise.png" size="24"></image>
<text style="font-size: 15px;color: #969696;margin-left: 6upx;">{{data.praises}}</text>
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.praises}}</text>
</view>
<view v-if="favorites" class="interact-bar-item">
<image class="pto-img" src="../../static/images/icon/bar-favorite.png" size="24"></image>
<text style="font-size: 15px;color: #969696;margin-left: 6upx;">{{data.favorites}}</text>
<text style="font-size: 15px;color: #999999;margin-left: 8upx;">{{data.favorites}}</text>
</view>
<!-- <view v-if="views" class="interact-bar-item">
<u-icon name="eye" color="#969696" size="18"></u-icon>
@@ -92,10 +92,11 @@
display: flex;
margin-right: 60upx;
.pto-img {
margin-top: 18upx;
width: 12px;
height: 12px;
margin-top: 12upx;
width: 18px;
height: 18px;
margin-right: 5upx;
// vertical-align: middle;
}
.interact-bar-icon {
margin: 0 0 0 10px;

183
pages/my/myArticles.vue
View File

@@ -5,31 +5,32 @@
<page-title :showBack="true">我的文章</page-title>
<view class="top-filter">
<view class="top-content">
<view class="put-articles" @click="toAdd()">
去发表
</view>
<view class="top-content-options">
<view style="margin-right: 20upx;">
<!-- <u-picker :show="statusSelectShow" @cancel="statusSelectShow = false" @confirm="chooseStatus" :columns="selectData" keyName="label"></u-picker> -->
<!-- <text class="textbtn" style="color:#666" @click="statusSelectShow = true">{{ statusBtn }}</text> -->
<!-- <view style="margin-right: 20upx;">
<text class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">状态</text>
</view>
</view> -->
<view class="input-search">
<u-search
@search="findData(true)"
:showAction="false"
@clear="findData(true)"
:clearabled="true"
:height="36"
v-model="articleList.keyword"
placeholder="搜索关键字"
shape="square"
bgColor="#ffffff"
>
placeholder="搜索">
<!-- <template slot="suffix">
<u-icon @click="findData(true)" name="search"></u-icon>
</template> -->
</u-search>
</view>
<view style="width: 70upx;">
<!-- <view style="width: 70upx;">
<view class="textbtn" @click="toAdd()"><u-icon name="plus" color="#2979ff" size="18"></u-icon></view>
</view>
</view> -->
</view>
</view>
</view>
@@ -43,53 +44,34 @@
<view class="article_one" v-for="(item, index) of articleList.list" :key="item.id">
<view >
<view class="article-center">
<author-info :avatar="item.avatar" :name="item.name" :info="item.orgInfo" :sex="item.sex"></author-info>
<view class="article-status" @click="toDetail(item)">
<view style="" v-html="statusDisplay(item.status)"></view>
<view style="" v-html="$keywordActiveShow(item.title, articleList.keyword)" class="article-top"></view>
<!-- <view style="" v-html="statusDisplay(item.status)"></view> -->
<view v-html="$keywordActiveShow(item.title, articleList.keyword)" class="article-top"></view>
</view>
<view class="article-bot" @click="toDetail(item)">
<text class="article-wz" v-html="$keywordActiveShow(item.summary, articleList.keyword)"></text>
<img v-if="item.coverurl" :src="$config.fileUrl+item.coverurl" alt=""/>
<!-- <view class="article-tom">
<img class="imgs" :src="item.avatar" alt="" />
<text class="tom-wz">{{ item.name }}{{ item.orgInfo }}</text>
</view> -->
<view class="article-img">
<img style="width: 182upx;height:124upx" v-if="item.coverurl" :src="$config.fileUrl+item.coverurl" alt=""/>
</view>
</view>
<!--自己不需要显示作者信息呀-->
<!-- <author-info :avatar="item.avatar" :name="item.name" :info="item.orgInfo"></author-info> -->
<view style="display: flex;justify-content: space-between;margin-top: 10upx;">
<view class="createTime">
{{item.sysCreateTime}}
</view>
<view style="display: flex;justify-content: space-between;">
<view style="display: flex;">
<view class="rowbtn rowbtn-primary">
<u-icon name="edit-pen" color="#3E7FFF" labelColor="#3E7FFF" @click="toEdit(item)" label="编辑" size="16" labelSize="12"></u-icon>
<view class="rowbtn" @click="toEdit(item)">
<image class="btn-img" src="../../static/images/icon/edit.png" size="24"></image><text class="btn-text">编辑</text>
</view>
<view class="rowbtn rowbtn-info" style="margin-left: 20px;">
<u-icon @click="del(item)" color="#767676" labelColor="#767676" name="trash" label="删除" size="16" labelSize="12"></u-icon>
<view class="rowbtn" style="margin-left: 12upx;" @click="del(item)">
<image class="btn-img" src="../../static/images/icon/del.png" size="24"></image><text class="btn-text">删除</text>
</view>
<!-- <u-icon name="more-dot-fill" @click="setEditId(item)" size="16" labelSize="16"></u-icon> -->
</view>
<view class="">
<interact-bar :views="false" :data="item"></interact-bar>
</view>
</view>
<!-- <view v-if="editId==item.id">
<view v-if="userInfo.aid==item.sysCreateAid" style="display: flex;justify-content: space-around;">
<view class="rowbtn rowbtn-primary">
<u-icon name="edit-pen" color="#2c7dc8" labelColor="#2c7dc8" @click="toEdit(item)" label="编辑" size="16" labelSize="12"></u-icon>
</view>
<view class="rowbtn rowbtn-info">
<u-icon @click="del(item)" color="#767676" labelColor="#767676" name="trash" label="删除" size="16" labelSize="12"></u-icon>
</view>
</view>
</view> -->
</view>
</view>
<!-- <view class="article_action"> -->
<!-- <interact-bar :views="false" :data="item"></interact-bar> -->
<!-- v-if="userInfo.aid==detail.sysCreateAid" -->
<!-- </view> -->
</view>
</view>
</view>
@@ -184,6 +166,7 @@ export default {
item.orgInfo = '';
item.code = '';
item.avatar = '';
item.sex = null;
this.articleList.list.push(item);
userIds.push(item.sysCreateAid);
});
@@ -205,17 +188,18 @@ export default {
list.forEach(item => {
res.result.some(author => {
if (author.aid == item.sysCreateAid) {
let { aid, avatar, name, orgInfo, code } = author;
if (!avatar) {
avatar = this.$config.fileUrl + avatar;
}else{
avatar='';
}
let { aid, avatar, name, orgInfo, code ,sex} = author;
// if (!avatar) {
// avatar = this.$config.fileUrl + avatar;
// }else{
// avatar='';
// }
item.name = name;
item.aid = aid;
item.orgInfo = orgInfo;
item.code = code;
item.avatar = avatar;
item.sex =sex;
return true;
}
return false;
@@ -330,19 +314,39 @@ export default {
</script>
<style lang="scss" scoped>
.article{
background-color: #fff;
padding: 36upx;
}
.rowbtn{
padding: 5px 8px 0px 8px;
padding: 5px 8px 0px 0;
height: 20px;
border-radius: 10upx;
}
.rowbtn-primary{
background-color: #ebf3fe;
.btn-img{
width: 16px;
height: 18px;
vertical-align: middle;
}
.btn-text{
margin-left: 12upx;
font-size: 24upx;
color: #999999;
}
}
.rowbtn-info{
background-color: #f7f7f7;
}
.top-filter {
.top-content {
position: relative;
.put-articles{
position: absolute;
right:0;
top:-60upx;
font-size: 32upx;
font-weight: 600;
color: #387DF7;
}
// padding: 5px 5px;
.top-content-options {
// height: 40px;
@@ -350,7 +354,7 @@ export default {
justify-content: space-between;
align-items: center;
line-height: 40px;
padding:20upx 30upx 0 30upx ;
// padding:20upx 30upx 0 30upx ;
// .textbtn {
// background-color: #ffffff;
// color: #4f4f4f;
@@ -370,7 +374,7 @@ export default {
}
.top-filter-result {
padding: 5px 10px;
// padding: 5px 10px;
font-size: 24upx;
color: #747474;
}
@@ -397,7 +401,7 @@ export default {
.uni-list {
.sea-show{
padding: 10rpx 30upx 0 30upx;
// padding: 10rpx 30upx 0 30upx;
// padding-top: 10upx;
line-height: 60upx;
.sea-active{
@@ -418,14 +422,13 @@ export default {
}
.article_one{
padding: 20upx 30upx;
padding-top: 10upx;
margin-bottom: 20upx;
// padding: 20upx 30upx;
// padding-top: 10upx;
// margin-bottom: 20upx;
background-color: #ffffff;
&:last-of-type{
margin-bottom: 0;
}
// &:last-of-type{
// margin-bottom: 0;
// }
// .article_action{
// display: flex;
// justify-content: space-between;
@@ -445,41 +448,49 @@ export default {
.article-center {
background: #ffffff;
//border-radius: 5px;
border-bottom: 4upx;
padding-top: 20upx;
padding-bottom: 40upx;
border-bottom: 20upx solid #F9F9F9;
.article-status{
display: flex;
font-weight: bold;
justify-content: flex-start;
align-items: center;
// display: flex;
// font-weight: bold;
// justify-content: flex-start;
// align-items: center;
font-size: 30rpx;
line-height: 60upx;
.article-top {
line-height: 50upx;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #040404;
text-align: left;
flex-shrink: 10000;
margin-left: 4px;
-webkit-box-orient: vertical;
display: -webkit-box;-webkit-line-clamp: 2;
word-break:break-all;
color: #333333;
// text-align: left;
// flex-shrink: 10000;
// margin-left: 4px;
}
}
.article-bot {
display: flex;
justify-content: space-between;
.article-wz {
font-size: 28rpx;
color: #454545;
line-height: 39rpx;
display: -webkit-box;
overflow: hidden;
margin: 10upx 0px 15upx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
img{
margin-left:43upx;
width: 137upx;
font-size: 28upx;
color: #666666;
height: 80upx;
line-height: 40upx;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;-webkit-line-clamp: 2;
word-break:break-all;
margin: 16upx 0px 0;
}
.article-img{
margin-left:26upx;
width: 182upx;
height: 124upx;
border-radius: 8upx;
}
}
.item-author{

BIN
static/images/icon/bar-comment.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/icon/bar-favorite.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/icon/bar-praise.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/icon/del.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 734 B

BIN
static/images/icon/edit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 852 B