talk_appAmin/pages/work/index.vue

199 lines
4.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<!-- tabs标签 -->
<view class="tabsinfo flex alignCenter justifyCenter">
<up-tabs :list="list4" lineWidth="24" lineHeight="4" @click="tabsClick" lineColor="#6aa2ff" :activeStyle="{
color: '#000000',
fontSize: '30rpx',
transform: 'scale(1.05)'
}" :inactiveStyle="{
color: '#999999',
fontSize: '28rpx',
transform: 'scale(1.05)'
}" itemStyle=" width: 185rpx; padding-bottom:18rpx;">
</up-tabs>
</view>
<!-- 审核的信息 -->
<view class="shenghe_item" @click="gotoworkinfo">
<view class="user_header">
<view class="">
<view class="user_img">
<image src="../../static/images/icon/tu4-1.jpg" mode=""></image>
</view>
<view class="user_msg">
<h4>爱吃饭的小张</h4>
<p>11分钟前·南开大学</p>
</view>
</view>
<view class="text_style">
<p>待审核</p>
</view>
</view>
<!-- 审核的文章标题 -->
<view class="shenghe_title">
<h4>怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法</h4>
</view>
<!-- 审核的文章内 -->
<view class="shenghe_text">
<p>八年前学弟在工地上杀了一个工友杀人前他给警察打了电话预告杀人的时间和地点并八年前学弟在工地上杀了一个工友杀人前他给警察打了电话预告杀人的时间和地点并八年前学弟在工地上杀了一个工友杀人前他给警察打了电话预告杀人的时间和地点并八年前学弟在工地上杀了一个工友</p>
</view>
<!-- 文章图片 -->
<view class="imgs_box">
<image src="../../static/images/icon/tu4-2.jpg" mode="" v-for="(item,index) in [1,2,3,4,5]"></image>
</view>
<!-- 文章标签 -->
<view class="text_span">
<view class="" v-for="(item,index) in 7">
#
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
const list4 = ref([{
name: '全部审核',
state: 9
},
{
name: '待审核',
state: 1
},
{
name: '已通过',
state: 2
},
{
name: '未通过',
state: 0
}
]);
const tabsClick = (e) => {
console.log(e);
}
function gotoworkinfo(){
uni.navigateTo({
url:'/pages/work/workinfo'
})
}
</script>
<style lang="scss" scoped>
.tabsinfo {
background-color: #fff;
height: 80rpx;
margin-bottom: 24rpx;
}
.shenghe_item {
width: 750rpx;
background: #ffffff;
padding: 48rpx 32rpx 48rpx 32rpx;
}
.user_header {
width: 100%;
display: flex;
justify-content: space-between;
height: 84rpx;
.user_img {
width: 84rpx;
height: 84rpx;
margin-right: 19rpx;
image {
width: 84rpx;
height: 84rpx;
border-radius: 50%;
}
}
.user_msg {
h4 {
font-weight: 600;
width: 186rpx;
height: 31rpx;
font-size: 30rpx;
text-align: left;
color: #000000 100%;
margin-bottom: 18rpx;
}
p {
height: 30rpx;
font-size: 30rpx;
color: #999999;
}
}
.text_style {
right: 0;
font-weight: 400;
width: 84rpx;
height: 28rpx;
font-size: 28rpx;
text-align: left;
color: #6AA2FF ;
}
}
.user_header>view{
display: flex;
}
.shenghe_title{
h4{
font-weight: 600;
width: 100%;
height: 80rpx;
font-size: 30rpx;
text-align: left;
color: #000000 ;
margin-top: 31rpx;
}
}
.shenghe_text{
width: 100%;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 26rpx;
}
.imgs_box{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
padding-top: 34rpx;
image{
width: 222rpx;
height: 222rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-bottom: 6rpx;
margin-right: 6rpx;
}
}
.text_span{
margin-top: 28rpx;
view{
padding: 8rpx;
background-color: #F7F8FA;
display: inline-block;
border-radius: 10rpx 10rpx 10rpx 10rpx;
font-size: 24rpx;
color: #3477FC;
font-weight: 600;
margin-bottom: 20rpx;
margin-right: 24rpx;
}
}
</style>