talk_appAmin/pages/work/activity_sh/activity_sh.vue

236 lines
4.3 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>
<view>
<!-- 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="start_time">
<image src="../../../static/images/icon/starttime.png" mode=""></image>
<p>开始时间: 2024.06.01 12:00:00</p>
</view>
<!-- 结束时间 -->
<view class="end_time">
<image src="../../../static/images/icon/starttime.png" mode=""></image>
<p>结束时间: 2024.06.01 12:00:00</p>
</view>
<!-- 活动地点 -->
<view class="active_address">
<image src="../../../static/images/icon/local.png" mode=""></image>
<p>结束时间: 2024.06.01 12:00:00</p>
</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
}
]);
</script>
<style scoped>
.tabsinfo {
background-color: #fff;
height: 80rpx;
margin-bottom: 24rpx;
}
.shenghe_item {
width: 686rpx;
background: #ffffff;
padding: 48rpx 32rpx 26rpx 32rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin: 0 auto;
}
.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;
}
}
.start_time{
display: flex;
align-items: center;
height: 26rpx;
margin-top: 34rpx;
}
.start_time image,.end_time image{
width: 26rpx;
height: 26rpx;
}
.start_time p,.end_time p{
font-size: 24rpx;
line-height: 26rpx;
}
.end_time{
display: flex;
align-items: center;
height: 26rpx;
margin-top: 12rpx;
}
.active_address{
display: flex;
align-items: center;
height: 26rpx;
margin-top: 23rpx;
}
.active_address image{
width: 26rpx;
height: 26rpx;
}
.active_address p{
font-size: 24rpx;
line-height: 26rpx;
}
</style>