mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-19 07:46:48 +08:00
429 lines
11 KiB
Vue
429 lines
11 KiB
Vue
<template>
|
||
<div class="moreactive">
|
||
<!-- 面包屑导航 -->
|
||
<div class="crumb">
|
||
<div>混合制项目</div>
|
||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||
<div>管理者进阶-腾飞班</div>
|
||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||
<div style="font-weight: 700; font-size: 16px">活动详情</div>
|
||
|
||
<div class="preNext">
|
||
<button class="btn btn01"></button>
|
||
<span class="content" style="margin-left: 6px">上一个</span>
|
||
<span class="content" style="margin-left: 31px">下一个</span>
|
||
<button class="btn btn02" style="margin-left: 6px"></button>
|
||
</div>
|
||
</div>
|
||
<!-- 面包屑导航 -->
|
||
|
||
<!-- 基本信息 -->
|
||
<div class="bascinfo">
|
||
<div style="margin-left: 46px">
|
||
<!-- <div class="title">【其他活动】管理者进阶腾飞班 - 专属线下活动</div>-->
|
||
<div class="title">{{ data.detail?.workName }}</div>
|
||
<div class="time" style="margin-top: 26px">
|
||
<img width="15px" height="17px" src="../../assets/image/time.png"/>
|
||
<div style="margin-left: 8px">{{ data.detail?.createTime }}</div>
|
||
</div>
|
||
<div class="time" style="margin-top: 23px">
|
||
<img
|
||
width="16px"
|
||
height="18px"
|
||
src="../../assets/image/position.png"
|
||
/>
|
||
<div style="margin-left: 8px">{{ data.detail?.workEnclosureAddress }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn" v-if="!data.signFlag" @click="signClick">签到</div>
|
||
</div>
|
||
<!-- 基本信息 -->
|
||
|
||
<!-- 详细信息 -->
|
||
<div class="detailinfo">
|
||
<div class="detail">
|
||
<div class="detailT">
|
||
<div style="margin-left: 48px; margin-right: 48px">
|
||
<div class="title">
|
||
<img
|
||
width="20px"
|
||
height="20px"
|
||
src="../../assets/image/book.png"
|
||
/>
|
||
<div class="text">课程详情</div>
|
||
<div class="box"></div>
|
||
</div>
|
||
<div style="display: flex; align-items: center">
|
||
<div class="content" v-html="data.detail?.workRequirement"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="teacher">
|
||
<div class="title">
|
||
<img
|
||
style="width: 24px; height: 20px"
|
||
src="../../assets/image/call.png"
|
||
/>
|
||
<div class="text">活动公告</div>
|
||
<div class="box"></div>
|
||
</div>
|
||
<!-- todo #活动任务详情 活动公告没有-->
|
||
<div class="content">
|
||
为拓宽人民群众的表达途径、畅听民意，及时了解
|
||
和解决人民群众反映强烈的公共法律服务问题，我
|
||
局将在浈江区公共法律服务中心开展领导干部接待
|
||
活动，现将2022年8月的活动安排公告如下：<br/>
|
||
一、接待时间 <br/>
|
||
工作日上午9:00-12:00。<br/>
|
||
二、接待地点<br/>
|
||
浈江区公共法律服务中心（浈江区新韶镇乐土路3号
|
||
曲仁田螺冲党群服务中心一楼）。<br/>
|
||
三、接待受理范围 <br/>（一）听取人民群众对公共法律服务工作的批评和
|
||
意见建议。 <br/>（二）解答或接收公共法律服务相关业务咨询。<br/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 详细信息 -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {reactive, toRefs} from "vue";
|
||
import {request, useRequest} from "@/api/request";
|
||
import {TAS_ACTIVITY_DETAIL, TASK_ACTIVITY_SIGN, TASK_BROADCAST_DETAIL} from "@/api/api";
|
||
|
||
export default {
|
||
name: "MoreActive",
|
||
setup() {
|
||
const {data} = useRequest(TAS_ACTIVITY_DETAIL, {})
|
||
|
||
const state = reactive({
|
||
activeName: "first",
|
||
});
|
||
|
||
const signClick = (tab, event) => {
|
||
request(TASK_ACTIVITY_SIGN, {}).then(res => {
|
||
console.log(22)
|
||
data.value.signFlag = 1
|
||
})
|
||
};
|
||
return {
|
||
...toRefs(state),
|
||
signClick,
|
||
data,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
<style scoped lang="scss">
|
||
.moreactive {
|
||
.crumb {
|
||
color: #fff;
|
||
display: flex;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
position: relative;
|
||
}
|
||
|
||
.preNext {
|
||
position: absolute;
|
||
right: 0px;
|
||
|
||
.content {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
width: 43px;
|
||
height: 14px;
|
||
display: inline-block;
|
||
position: relative;
|
||
top: -6px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn {
|
||
width: 23px;
|
||
height: 23px;
|
||
border-radius: 50%;
|
||
border: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn01 {
|
||
background-image: url("../../assets/image/prev.png");
|
||
}
|
||
|
||
.btn02 {
|
||
background-image: url("../../assets/image/next.png");
|
||
}
|
||
}
|
||
|
||
.bascinfo {
|
||
width: 100%;
|
||
height: 180px;
|
||
border-radius: 8px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
margin-top: 37px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
width: 146px;
|
||
height: 46px;
|
||
background: #2478ff;
|
||
border-radius: 4px;
|
||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
line-height: 24px;
|
||
cursor: pointer;
|
||
margin-right: 96px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: #333333;
|
||
line-height: 24px;
|
||
margin-left: -9px;
|
||
}
|
||
|
||
.time {
|
||
font-size: 14px;
|
||
color: #6e7b84;
|
||
line-height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.detailinfo {
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
|
||
.detail {
|
||
flex: 1;
|
||
margin-right: 20px;
|
||
|
||
.detailT {
|
||
min-height: 646px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
color: rgba(51, 51, 51, 1);
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 39px;
|
||
position: relative;
|
||
}
|
||
|
||
.title .text {
|
||
margin-left: 8px;
|
||
font-size: 16px;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.title .box {
|
||
width: 75px;
|
||
height: 10px;
|
||
background-color: rgba(36, 120, 255, 0.15);
|
||
position: absolute;
|
||
left: 23px;
|
||
top: 53px;
|
||
}
|
||
|
||
.content {
|
||
margin-left: 8px;
|
||
font-size: 14px;
|
||
color: rgba(51, 51, 48, 1);
|
||
font-weight: 500;
|
||
line-height: 35px;
|
||
margin-top: 30px;
|
||
}
|
||
}
|
||
|
||
.detailB {
|
||
min-height: 363px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
|
||
.el-tabs__item {
|
||
height: 69px;
|
||
padding: 25px 7px 0px 52px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.el-tabs__nav-wrap::after {
|
||
background-color: rgba(56, 125, 247, 0.2);
|
||
}
|
||
|
||
.enclosure {
|
||
height: 89px;
|
||
margin-left: 51px;
|
||
margin-right: 40px;
|
||
// border-bottom: 1px solid rgba(56, 125, 247, 0.2);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.enclosureL {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #677d86;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.download {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #2478ff;
|
||
line-height: 24px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.work {
|
||
margin-left: 51px;
|
||
margin-right: 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 37px;
|
||
}
|
||
|
||
.work .question {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333330;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.work .active {
|
||
width: 82px;
|
||
height: 28px;
|
||
background: linear-gradient(90deg, #a5d4e0 0%, #b4dce6 100%);
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
margin-right: 11px;
|
||
}
|
||
|
||
.work .unactive {
|
||
width: 80px;
|
||
height: 26px;
|
||
border: 1px solid #a5d4e0;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #a5d4e0;
|
||
line-height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 11px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.work .btncolor {
|
||
background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
|
||
}
|
||
|
||
.work .bordercolor {
|
||
border: 1px solid #85aad2;
|
||
}
|
||
|
||
.work .fontcolor {
|
||
color: rgba(133, 170, 210, 1);
|
||
}
|
||
|
||
.work .submit {
|
||
width: 126px;
|
||
height: 46px;
|
||
background: #2478ff;
|
||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.teacher {
|
||
width: 434px;
|
||
height: 10%;
|
||
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border-radius: 8px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(36, 120, 255, 0.15) 0%,
|
||
rgba(255, 255, 255) 50%
|
||
);
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 39px;
|
||
position: relative;
|
||
margin-left: 48px;
|
||
}
|
||
|
||
.title .text {
|
||
margin-left: 8px;
|
||
font-size: 16px;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.title .box {
|
||
margin-left: 4px;
|
||
width: 75px;
|
||
height: 10px;
|
||
background-color: rgba(36, 120, 255, 0.15);
|
||
position: absolute;
|
||
left: 23px;
|
||
top: 53px;
|
||
}
|
||
|
||
.content {
|
||
margin: 25px 24px 49px 49px;
|
||
color: #677d86;
|
||
width: 361px;
|
||
// height: 304px;
|
||
line-height: 24px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|