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

首页问答样式

Browse Source
This commit is contained in:
zhaofang
2022-11-10 10:54:06 +08:00
parent 6f961650d2
commit c2d28bea3b
3 changed files with 68 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/author/author.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<view class="item-author" style="display: flex;"> <view class="item-author" style="display: flex;">
<view> <view>
<u-avatar shape="circle" v-if="data.avatar && data.avatar!=''" :size="25" :src="data.avatar"></u-avatar> <u-avatar shape="circle" v-if="data.avatar && data.avatar!=''" :size="20" :src="data.avatar"></u-avatar>
<view v-else :size="25" :sex="data.sex" random-bg-color > <view v-else :size="20" :sex="data.sex" random-bg-color >
<view v-if="data.sex == null" class="peo"></view> <view v-if="data.sex == null" class="peo"></view>
<view v-else> <view v-else>
<view class="peo" v-if="data.sex === 1 "><image src="../../static/images/man.png" alt=""></view> <view class="peo" v-if="data.sex === 1 "><image src="../../static/images/man.png" alt=""></view>
@@ -13,7 +13,7 @@
<!-- <view v-else class="uavatar"><view class="uavatar-scale"> {{avatarText}}</view></view> --> <!-- <view v-else class="uavatar"><view class="uavatar-scale"> {{avatarText}}</view></view> -->
<!-- <u-avatar v-else :size="25" icon="account" shape="square"></u-avatar> --> <!-- <u-avatar v-else :size="25" icon="account" shape="square"></u-avatar> -->
</view> </view>
<view style="padding-left:10upx;padding-top: 4upx;font-size: 26upx;color: #666666;">{{data.name || data.sysCreateBy}}</view> <view style="padding-left:10upx;padding-top: 4upx;font-size: 28upx;color: #666666;">{{data.name || data.sysCreateBy}}</view>
<!-- <view v-if="showCode && data.code!=''" style="padding-left: 10upx;padding-top: 10upx;">({{data.code}})</view> --> <!-- <view v-if="showCode && data.code!=''" style="padding-left: 10upx;padding-top: 10upx;">({{data.code}})</view> -->
</view> </view>
</template> </template>

2
index.html
View File

@@ -11,7 +11,7 @@
font-size: 18px; font-size: 18px;
} }
.qa-solve{ .qa-solve{
color:#08A890; color: #333333;
} }
.qa-unSolve{ .qa-unSolve{
color:#387DF7; color:#387DF7;

91
pages/index/index.vue
View File

@@ -110,43 +110,56 @@
</view> </view>
<!-- 问答 --> <!-- 问答 -->
<view v-if="conType == 4"> <view v-if="conType == 4">
<view class="tags" v-if="dataFilter.qaTags.length>0"> <!-- <view class="tags" v-if="dataFilter.qaTags.length>0">
<u-scroll-list :indicator="false"> <u-scroll-list :indicator="false">
<view v-for="(tag, tagIdx) in dataFilter.qaTags" :key="tagIdx" > <view v-for="(tag, tagIdx) in dataFilter.qaTags" :key="tagIdx" >
<view class="tag-item">{{tag.text}} </view> <view class="tag-item">{{tag.text}} </view>
</view> </view>
</u-scroll-list> </u-scroll-list>
</view> -->
<view class="tab-qa">
<text class="qa-tab-text" :class="{'qa-active':tabIndex==1}" @click="clicktab(1)">最热</text>
<text class="qa-tab-text" :class="{'qa-active':tabIndex==0}" @click="clicktab(0)">最新</text>
</view> </view>
<view class="qa" v-for="(item,irs) in qaList" :key="irs"> <view class="qa" v-for="(item,irs) in qaList" :key="irs">
<view class="content"> <view class="content">
<view class="content-list" @click="toQaDetail(item)"> <view class="content-list" @click="toQaDetail(item)">
<view class="content-title"> <view class="content-title">
<!-- qa-basic --> <!-- qa-basic -->
<text v-if="item.isResolve" class="qa-solve">[已解决] </text> <text v-if="item.isResolve" class="qa-solve">【已解决】</text>
<text v-else class="qa-unSolve">[待解决] </text> <text v-else class="qa-unSolve">【待解决】</text>
{{ item.title }} {{ item.title }}
</view> </view>
</view> </view>
<view class="item-author" style="display: flex;" @click="toQaDetail(item)">
<author v-if="item.authorInfo" :showInfo="true" :data="item.authorInfo"></author>
<text style="padding-top: 8rpx;padding-left: 9rpx;line-height: 40upx; color: #999; font-size: 26rpx; ">
{{item.sysCreateTime.substring(0,10)}}
</text>
</view>
<view class="content-listtwo" @click="toQaDetail(item)"> <view class="content-listtwo" @click="toQaDetail(item)">
<view class="list-details"> <view class="list-details">
<view class="list-text" >{{item.content }}</view> <view class="list-text" >{{item.content }}</view>
<view class="list-best" v-if="item.isResolve" > <!-- <view class="list-best" v-if="item.isResolve" > -->
<text style="color:#FFB30F">最佳回答：</text> <!-- <text style="color:#FFB30F">最佳回答：</text>
{{item.bestAnswer}}</view> {{item.bestAnswer}}</view> -->
</view> </view>
<view style="margin-top: 10rpx;margin-left: 10rpx;" v-if="item.images != ''" @click="toQaDetail(item)"> <!-- <view style="margin-top: 10rpx;margin-left: 10rpx;" v-if="item.images != ''" @click="toQaDetail(item)">
<image :src="fileUrl+item.images" style="width: 157rpx;height: 118rpx;border-radius: 15rpx;"></image> <image :src="fileUrl+item.images" style="width: 157rpx;height: 118rpx;border-radius: 15rpx;"></image>
</view> -->
</view>
<view class="item-author" style="display: flex;justify-content: space-between;" @click="toQaDetail(item)">
<view class="" style="display: flex;">
<author v-if="item.authorInfo" :showInfo="true" :data="item.authorInfo"></author>
<text style="padding-top: 8rpx;padding-left: 12rpx;line-height: 40upx; color: #999; font-size: 26rpx; ">
{{item.sysCreateTime.substring(0,10)}}
</text>
</view>
<view class="qa-info-bar">
<text>{{item.praises}} 赞同</text>
<text style="margin: 0 16upx;">·</text>
<text>{{item.answers}} 回答</text>
</view> </view>
</view> </view>
<view style="margin-top: 0px;"> <!-- <view style="margin-top: 0px;">
<interact-bar :data="item" :comments="false" :answers="true"></interact-bar> <interact-bar :data="item" :comments="false" :answers="true"></interact-bar>
</view> </view> -->
</view> </view>
</view> </view>
</view> </view>
@@ -733,6 +746,27 @@
font-size: 32rpx; font-size: 32rpx;
text-align: center; text-align: center;
padding: 5upx 10upx 0upx 0upx; padding: 5upx 10upx 0upx 0upx;
}
.tab-qa{
padding: 30upx;
padding-bottom: 10upx;
background-color: #fff;
.qa-tab-text{
display: inline-block;
font-size: 28upx;
font-weight: 500;
color: #666666;
margin-right: 36upx;
}
.qa-active{
width: 88upx;
height: 48upx;
background: linear-gradient(180deg, #FD8D0C 0%, #F9800C 100%);
border-radius: 8upx;
line-height: 48upx;
text-align: center;
color: #fff;
}
} }
.tab-article{ .tab-article{
padding: 30upx; padding: 30upx;
@@ -810,9 +844,9 @@
} }
.qa { .qa {
// height: 264upx; // height: 264upx;
background: #FFFFFF; background: #FFFFFF;
margin-bottom: 10px; margin-bottom: 20upx;
margin-top: 5px; // margin-top: 5px;
padding: 18upx 30upx 28upx 30upx; padding: 18upx 30upx 28upx 30upx;
.content{ .content{
padding: 0px; padding: 0px;
@@ -832,8 +866,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.content-time{ .content-time{
@@ -846,24 +878,24 @@
} }
.content-listtwo{ .content-listtwo{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
// margin-top: 10upx; // margin-top: 10upx;
// height: upx; // height: upx;
// margin-left: 8upx; // margin-left: 8upx;
margin-right: 8upx; margin-right: 8upx;
.list-details{ .list-details{
.list-text{ .list-text{
font-size: 30rpx; font-size: 28upx;
color: #454545; color: #666666;
line-height: 40upx; line-height: 40upx;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
word-break:break-all; word-break:break-all;
margin-bottom: 28upx; margin-bottom: 28upx;
} }
@@ -975,7 +1007,12 @@
} }
.item-author{ .item-author{
font-size: 0.9em;
.qa-info-bar{
font-size: 24upx;
color: #999999;
margin-top: 10upx;
} }
// margin-bottom: 10rpx; // margin-bottom: 10rpx;
} }